Índice
Um guia completo para aprender as noções básicas de design visual.
A pergunta de um milhão de dólares: qual é o segredo de um bom design?
Podemos filosofar sobre este assunto, mas, de um modo geral, o "segredo" proverbial de um bom design reside na forma como organiza os seus elementos visuais, em relação à sua tela e entre si. Basicamente, acabámos de descrever o design do layout, que, se pensarmos bem, está em todo o lado para onde olhamos.
Por exemplo, o layout de uma revista. O seu design segue um sistema de grelha clássico (vamos aprender tudo sobre grelhas dentro de um minuto). Tudo está normalmente alinhado à esquerda, à direita e na parte inferior. As colunas, em especial, têm um alinhamento justificado distinto que torna a página não só visualmente atractiva, mas também fácil de ler e autoritária. Os títulos grandes atraem a atenção do espectadorO subtítulo contrasta em tamanho para criar uma hierarquia visual da informação.
Linda Gaom, Behance
Todas estas qualidades tornam o design da página limpo, estruturado e fácil de ler, e estão em sintonia com as dicas de que vamos falar a seguir. Mas primeiro, vamos compreender melhor o design do layout em si.
O que é o design de layout?
A concepção do layout diz respeito à disposição dos elementos gráficos de modo a atrair a atenção do leitor e a transmitir uma determinada mensagem de uma forma visualmente apelativa.Não estamos a falar de design de logótipos, mas sim de design de material impresso, como jornais, revistas, cartazes e os seus equivalentes digitais, bem como de web, aplicações ou design UX/UI.
A palavra "layout" dá-nos muitas pistas: significa uma disposição de elementos pré-determinados numa página.
Quando uma apresentação é eficaz, tem bom aspecto e orienta o espectador para a compreensão da mensagem que o design está a tentar transmitir. Por conseguinte, compreender a apresentação é fundamental para criar composições envolventes, eficazes, fáceis de utilizar e agradáveis.
Se um esquema não transmitir bem a sua mensagem ao público, ou, por outras palavras, não "ler bem", o design será ineficaz, por mais moderno que pareça.
O objectivo do design de layout
Para transmitir uma mensagem rapidamente
A concepção do layout estabelece a relação entre os elementos gráficos para conseguir um fluxo suave do movimento dos olhos para uma eficácia e um impacto máximos.
Para criar equilíbrio
Utilizar os princípios do design de esquemas é a forma mais simples de criar um sentido de equilíbrio e simetria nos seus projectos de design sem se tornar aborrecido.
Para criar coesão
O layout ajuda-o a organizar os vários elementos do seu design de uma forma facilmente digerível, coesa e lógica.
Para criar beleza
O equilíbrio e a estrutura criam naturalmente beleza. Se o design do seu layout for feito correctamente, tornar-se-á automaticamente visualmente atraente para o espectador. Quanto menos esforço o espectador tiver de fazer para compreender uma mensagem, mais atraente parecerá o seu design.
Designer de Frank Philippin para o seu livro 'I Used to Be a Design Student: Then - Now.' Fonte: DesignBoom
Os elementos da concepção do layout
Texto
Isto inclui não só o corpo do texto ou os parágrafos, mas também os títulos, subtítulos, cabeçalhos e rodapés. A sua escolha de tipografia, cor e tamanho terá efeitos diferentes na forma como o seu esquema será traduzido para o seu público.
Imagem
Os tipos de imagens mais comuns são as fotografias, as ilustrações ou os infográficos.
Formas
As formas podem ser geométricas, que são muito angulares, ou podem ser orgânicas, imitando o mundo natural, e também podem ser abstractas. As formas abstractas têm estado muito na moda no último ano, uma vez que os web designers as incorporaram em composições complexas e extensas.
As formas podem substituir uma imagem ou podem ser utilizadas para adicionar elementos gráficos a uma página, realçar texto ou delinear o espaço entre outros elementos visuais.
Espaço em branco
Qualquer concepção de layout terá uma certa quantidade de espaço em branco que permitirá que os seus elementos respirem e se destaquem por si próprios.
Os princípios de ouro do design de layouts
Os princípios do design da apresentação seguem muitos dos princípios fundamentais do design, como a utilização da cor de uma determinada forma, a tipografia, a repetição, o contraste, a hierarquia e o equilíbrio.
Princípio #1: Utilizar grelhas
As grelhas ajudam os designers a posicionar vários elementos de design, como texto e imagens, de forma a parecerem coerentes e fáceis de seguir.
Proporcionam uma sensação de ordem, evitam que os elementos se sobreponham uns aos outros e, mais importante ainda, as grelhas também corrigem o alinhamento, tornando o seu trabalho mais limpo e profissional.
Fonte: hgmlegal.com
A anatomia das grelhas
Pode pensar que se trata apenas de linhas verticais e horizontais, mas uma grelha é composta por várias partes. Na verdade, são muitas. Eis a terminologia mais importante que precisa de conhecer numa grelha básica:
- Formato Se desenhar algo para impressão, o formato é a página, e se for um web designer, o formato é a página Web ou a janela do browser.
- Margens são os espaços vazios intencionais entre o formato e o design.
- Linhas de fluxo São as linhas horizontais que separam a apresentação em secções paralelas. As linhas de fluxo ajudam a facilitar a leitura do seu design e orientam o leitor para seguir correctamente o conteúdo.
- Módulos são os blocos formados pelas linhas horizontais e verticais de qualquer grelha. Se pensar bem, são os blocos de construção de qualquer grelha. Todos os seus módulos verticais criam as suas colunas, enquanto todas as suas grelhas horizontais criam as suas linhas.
- Regiões são grupos de módulos ligados entre si, verticais ou horizontais, não existindo regras quanto à forma de os organizar.
Fonte: Radversity
Tipos de grelhas
As grelhas de apresentação foram utilizadas pela primeira vez para organizar a escrita no papel.
A sua origem remonta ao século XIII, quando o artista francês Villard De fundiu o sistema de grelhas com a proporção áurea para produzir esquemas de páginas impressas com margens. Este sistema de grelhas pode ser visto até hoje, como prova a maioria dos esquemas de livros e revistas impressos. Os editores, os redactores e os designers preferem utilizar grelhas padrão não só porque têm bom aspecto, mas também porque os leitores se habituaram aesperam que certos elementos de design estejam num determinado lugar.
As grelhas podem ser concebidas de duas formas: simétricas ou assimétricas. Grelhas simétricas seguem uma linha central, em que as regiões vertical e horizontal são iguais entre si; e as colunas têm a mesma largura.
Num grelha assimétrica Tal como o nome sugere, as margens e as colunas não são todas idênticas.
Com base nesta classificação, existem cinco tipos principais de grelhas de apresentação utilizadas em todo o mundo em que pode confiar:
Grelhas de manuscritos São o tipo mais comum de grelha para documentos. Separam o cabeçalho, o rodapé e as margens e, basicamente, criam um rectângulo dentro do formato (ou da página) que delimita o seu texto. São a base para revistas, jornais e livros. Por isso, é provavelmente o esquema com que está mais familiarizado.
Fonte: UXplanet
Fonte: Radversity
Grelhas de colunas Um layout típico de uma revista utiliza grelhas de colunas para separar o texto em secções fáceis de ler. Mas também são muito populares em sítios Web. Pode utilizar desde duas a seis grelhas. É possível utilizar mais, mas não é comum. Um aspecto muito importante das grelhas de colunas é que o espaçamento entre as colunas, ou as calhas, está igualmente afastado de cada umaoutro.
As grelhas de colunas simétricas são utilizadas pelos jornais, por exemplo, enquanto uma grelha de colunas assimétrica é preferida no design Web.
Fonte: UX Planet
Fonte: Radversity
Grelhas modulares Este tipo de grelha é necessário quando é necessário organizar vários elementos na apresentação e as grelhas de colunas não são suficientes.
As grelhas modulares têm módulos de tamanho igual, o que facilita muito a visualização das suas zonas espaciais de diferentes formas.
Fonte: UX Planet
Veja também: Como encontrar um designer gráfico e contratar o profissional certo
Fonte: Radversity
Grelhas de base A linha de base é a linha onde o texto assenta quando escreve, e o espaço entre duas linhas de base é o espaço entre duas linhas de base. Quer saber qual deve ser o tamanho do seu título ou subtítulos?
As grelhas de linha de base estão aqui para ajudar a dar ao seu texto um ritmo fluido.
Fonte: UX Planet
Fonte: Fragaria
Grelhas hierárquicas As grelhas hierárquicas podem ser baseadas em grelhas modulares, ou pode até criar a sua própria grelha. Os sítios Web utilizam muito esta grelha, especialmente as revistas e os jornais digitais, que tendem a basear-se mais em grelhas hierárquicas do que em grelhas de colunas na sua transição para se tornaremdigital.
Fonte: UX Plane
Princípio n.º 2: Utilizar o espaço negativo
Muitas vezes pensamos que o vazio, o silêncio ou a falta de cor são coisas más, mas não pensamos que são a base sólida do contraste.
Também designado por espaço branco, o espaço negativo é a área do seu design que não tem quaisquer elementos reais. É a área deixada em branco. Não se limita a rodear os seus recursos, mas também cria as ligações necessárias entre eles. Por isso, o espaço negativo é um elemento de design legítimo e tem um enorme impacto na eficácia do seu design de apresentação.
Espaço negativo bom ou mau
O espaço negativo ajuda a separar as várias áreas do seu design, ao mesmo tempo que permite que o seu layout respire. Ajuda na hierarquia visual e no equilíbrio visual; coloca o foco do utilizador nos elementos principais; reduz o nível de distracção; e, finalmente, acrescenta estilo e elegância ao seu design.
Os designers inexperientes podem ter a tendência para preencher o máximo possível da sua tela, aumentando a escala do texto ou aumentando um logótipo ou uma imagem. Mas dar espaço aos seus elementos permite que o espectador capte certas pistas de informação de forma mais rápida e confortável.
Se tudo gritar pela atenção do espectador, nada será ouvido.- Aaron Walter, "Design para a emoção
Uma forma fácil de determinar o seu espaço negativo é utilizar uma grelha modular. Ao colocá-la no topo do seu design, pode visualizar facilmente quais os módulos que podem permanecer vazios e quais os que devem ser preenchidos.
Veja também: Os melhores cursos de animação online para qualquer nível de competência
Designer por Brunswicker, Fonte: Codesignmag.com
Princípio nº 3 - Escolha um único ponto focal
Já alguma vez um cliente lhe pediu para aumentar o logótipo e depois para aumentar ainda mais o título?
Não se pode dar ênfase a tudo, pois isso anula o objectivo de um bom design. Tal como o tempo, o foco é relativo. Para que um elemento se destaque, outro tem de servir de fundo. Alguns elementos têm de dominar outros para que o seu design apresente uma hierarquia visual.
O ponto focal de um design é o elemento com maior peso visual. É o elemento que atrai o olhar em primeiro lugar, mais do que qualquer outra coisa no seu layout.Um ponto focal anunciará ao seu público onde começa a viagem de visualização no seu design, ou seja, é o início da história que está a contar.
Isto pode ser conseguido através da utilização de uma imagem grande ou de uma grande fonte de tipografia. Repare na eficácia do ponto focal abaixo
Concebido por Braulio Amado para a Bloomberg Businessweek, Fonte: É bom que
Mas enquanto um ponto focal atrai a atenção do seu público, a regra seguinte ajuda a orientá-lo.
Princípio n.º 4 - Pensar na proximidade e no fluxo
O princípio da proximidade é simples: os elementos que estão relacionados entre si devem ser colocados juntos.
A proximidade indica que os recursos visuais estão ligados e tornam-se uma unidade visual que ajuda a organizar o esquema.Por isso, agrupe apenas elementos de design que tenham uma relação entre si e utilize bolsas de informação no seu design para guiar o seu público para o conteúdo relevante que precisa de consumir.
Fonte: Satori Graphics
Um design com boa fluidez conduzirá o olhar dos espectadores ao longo do layout, de elemento para elemento, com facilidade. Os seus pontos focais atrairão o olhar e tornar-se-ão o local de repouso, enquanto outros elementos transmitem direcção.
Os gráficos estão claramente separados do texto, tal como os apelos à acção, pelo que a atenção do espectador navega de um conjunto de informações para outro.
Princípio #5: Utilizar o contraste
Certifique-se de que tem contraste suficiente no seu design.
O contraste ajuda a organizar o seu design e estabelecerá a tão necessária hierarquia e dará ênfase ao que é importante.Mais do que isso, uma boa utilização do contraste também acrescenta interesse visual ao seu design. Sejamos realistas, um layout em que tudo é do mesmo tamanho, forma ou cor vai parecer aborrecido. O contraste apimenta as coisas.
O seu primeiro pensamento pode ser o contraste de cores, como quente versus frio, escuro versus claro, azul versus laranja. Mas embora a cor seja um princípio de contraste extremamente essencial, também existem contrastes de tipo, alinhamento e tamanho. E lembre-se, o contraste também é relativo. Só tem significado em justaposição com outros elementos.
Aqui estão alguns exemplos de layouts que utilizam esta regra de uma forma inteligente e bonita. Repare no contraste da tipografia, da cor e até no contraste do tamanho dos elementos.
Fonte: Plano de Acção para a Reconciliação do GAI
Princípio #6: Repetição, Padrão, Ritmo
Quando pensamos em repetição, pensamos no mesmo elemento uma e outra vez.
Quando utilizada correctamente, a repetição pode dar força ao seu design.
Tente identificar e reutilizar um motivo em todo o seu layout, para que as várias áreas se sintam ligadas e façam parte da mesma composição. Isto ajudará o seu design a ter um tema. Ao repetir elementos, não só estará a cumprir as expectativas do seu público, como também melhorará a experiência do utilizador. Ser consistente faz com que os utilizadores se sintam mais confortáveis.
Pode fazê-lo repetindo formas ou símbolos, ou mesmo um esquema de cores, um tipo de letra e o mesmo estilo em geral.
Um bom hábito a adquirir é utilizar um tipo de letra com uma família alargada. Limite o número de padrões, pesos/estilos de linha e cores diferentes e repita-os sempre. Tente também manter o mesmo estilo de imagens e gráficos. Por exemplo, utilize ilustrações do mesmo artista.
Fonte: Thepentool.co
Estes são os seis princípios que o ajudarão a organizar o seu design e a obter um layout mais limpo, profissional e equilibrado.
Mas a sua viagem não termina aqui. O design gráfico não é uma ciência exacta e não deve limitar-se a dicas e princípios. Tal como acontece em todas as áreas da criação, não existe uma regra geral rígida. Quebrar estas dicas de forma subtil irá acrescentar profundidade e variedade aos seus designs.
No entanto, são um excelente ponto de partida e encorajamo-lo a experimentá-los. E diga-nos como funcionaram!
Descarregar o Vectornator para começar
Leve os seus desenhos para o nível seguinte.
Descarregar ficheiro
