A execução de um design consistente envolve — mesmo que seja instintivamente — conceitos estéticos consagrados como função e estrutura, além dos princípios básicos da Gestalt. Todos esses fatores são meras variações do mesmo tema de sempre, o bom senso. Eles podem ser resumidos nesses sete tópicos:

I. Proximidade e alinhamento - elementos que pertençam a um mesmo grupo devem estar próximos.

II. Equilíbrio, proporção e simetria - todos os componentes devem ser complementares.

III. Contraste, cores e brancos - layouts dinâmicos chamam a atenção e causam impacto.

IV. Ordem, consistência e repetição - você tem toda a liberdade para criar as regras, mas deve segui-las.

V. Simplificação – simplicidade é sinônimo de elegância, objetividade e, acima de tudo, clareza.

VI. Legibilidade - textos existem para serem lidos.

VII. Integração – o design não pode desafinar.

1. Proximidade e alinhamento

Em um supermercado os sacos de arroz ficam juntos. Em um armário as meias ficam juntas. Em uma estante os livros ficam juntos. Em uma geladeira os ovos ficam juntos. Em uma academia de ginástica os aparelhos ficam juntos. Em uma fazenda os cavalos ficam juntos. Em um bar as cervejas ficam juntas. Em uma festa, um casal fica junto. Claro? Essa é a primeira regra: elementos que têm algo em comum devem estar juntos no layout, ou seja, alinhados e agrupados, para que o leitor os reconheça como um grupo. Quando as coisas que pertencem a um mesmo grupo estão espalhadas, a impressão é de uma bagunça. Aplique isso aos exemplos acima e tire suas próprias conclusões.

Juntos é um termo muito genérico, e pode significar um monte de coisas. Em um ônibus lotado muitas pessoas estão juntas e isso não é necessariamente um sinônimo de organização. A idéia dessa regra é aplicar um dos princípios da Gestalt: nós reconhecemos e agrupamos elementos que estiverem próximos uns dos outros. Isso não significa uma camisa de força tradicional, mas um mínimo de coerência, pois ao agruparmos os elementos os relacionamos e damos sentido a eles.

Uma das características do design de quem está começando na área é a grande quantidade de elementos que parecem estar “soltos”, jogados em algum lugar na página ou tela sem nenhuma relação com as margens ou mesmo com os outros elementos de texto. Isso costuma dar um enorme trabalho e desconforto ao leitor, que fica tentando procurar os elementos em comum. Esse esforço todo faz com que ele não goste ou desista do layout, mesmo que não saiba explicar o porquê. Já um layout que tenha seus elementos alinhados permite que se possa ver os espaços em branco e agrupá-los, isolá-los ou continuá-los. E o leitor passa a ter para identificar na tela dois ou três grupos, e não mais uma porção de pequenos elementos isolados.

O agrupamento também estabelece uma relação entre os elementos nos grupos e entre os grupos, mostrando sua hierarquia e sugerindo uma ordem de leitura. Isso facilita o acesso à informação e faz com que seu leitor se sinta mais confortável, transmitindo melhor a mensagem. É um processo instintivo e não significa colocar cada elemento num canto da tela, muito pelo contrário.

Além de agrupados, os elementos devem estar alinhados, e esse alinhamento deve ser consistente: é bom repeti-lo em todas as páginas, sempre que o assunto ou a hierarquia de elementos (texto, botão, foto, barra de conexão) forem os mesmos. Para romper com um alinhamento é preciso consciência (para calcular o impacto) e coragem: o novo alinhamento deve ser evidente e chamar a atenção. Se for só um pouquinho dá a impressão de descuido. Sem alinhamento, o que temos é uma sensação desconfortável de quarto bagunçado.

2. Equilíbrio, proporção e simetria

O que é equilíbrio? Dois pesos iguais em uma balança estão equilibrados, mas dois garotos com pesos diferentes também podem estar equilibrados em uma gangorra, desde que o mais leve esteja mais perto do centro. Em uma aquarela japonesa, uma imagem enorme e quase transparente está equilibrada com o carimbo / assinatura de seu pintor, normalmente uma forma quadrada, vermelha e densa.

Simetria é mais fácil de entender: é uma forma geométrica que apresenta dois lados iguais de um mesmo eixo, como borboletas. A maioria das culturas ocidentais é influenciada pelos moldes de simetria e perfeição romanos, em que se buscavam as formas ideais, absolutamente simétricas. Essas formas podem ser bonitas, mas são estáticas e artificiais.

É fácil criar e produzir um layout simétrico, com todos os elementos centralizados ou duplicados do outro lado. Mas esse tipo de layout não chama a atenção, é normalmente monótono e desinteressante, fazendo com que o leitor logo se aborreça ou nem se interesse por ele. É muito usado nos layouts tradicionais (convites de casamento, alguns cartazes de música erudita, demonstrativos financeiros) e em estruturas em que não é preciso chamar a atenção.

Conseguir o equilíbrio dinâmico entre os elementos de um layout, com pontos de interesse e elementos que chamam a atenção é muito mais difícil. Para isso, é preciso usar elementos de pesos e tamanhos diferentes que se oponham e se complementem, criando movimento e interesse, para que o usuário sinta vontade de examinar toda a tela, sem ficar com a impressão de que tem algo faltando ou sobrando. Uma boa forma de se conseguir um layout equilibrado com elementos diferentes é usar contrastes e trabalhar com áreas vazias: se dois elementos têm tamanhos, cores, formas ou direções diferentes, eles naturalmente ficam com pesos diferentes, e podem ser mais facilmente equilibrados. Depois de pronto o layout, tente remover ou realçar algum de seus elementos. Se a sensação resultante for a de estar “sobrando” ou “faltando” alguma coisa, é que o layout está equilibrado.

3. Contrastes, cores e brancos

Para entender contraste, vamos imaginar uma coisa muito mais prosaica: três casais de namorados. No primeiro, ele é um capacho, faz tudo o que ela quer e concorda com tudo o que ela diz. Temos aí uma relação concordante. No segundo, eles têm suas diferenças e vivem cutucando um ao outro. A relação é conflitante. O terceiro casal é daqueles improváveis (e, paradoxalmente, mais comuns): eles são completamente diferentes entre si: ele músico e sedentário, ela gerente financeira e esportista. A relação é contrastante. Qual das três tem mais chances de ser mais interessante, verdadeira e intensa? Responda com paixão, não com pragmatismo.

A designer americana Robin Williams divide a relação entre os elementos de um layout nessas três categorias: concordante, conflitante e contrastante. A primeira acontece quando não há contraste algum entre dois elementos em uma página, e seu resultado é normalmente insosso: margens do mesmo tamanho, título e texto feitos na mesma letra e quase o mesmo corpo, dando a impressão de “apostilão”.

Uma relação conflitante é ainda pior: é quando o designer resolve inovar, mas não ousa muito. Surgem dela pequenas diferenças de tipo, corpo e estilo de texto, imagens com pequenas variações no estilo, tamanho, moldura, posição etc. As similaridades dificultam a leitura, porque as atrações visuais não são as mesmas (concordantes) nem são diferentes (contrastantes). Por isso elas entram em conflito, causando um resultado desequilibrado e estranho, desagradável de se ler.

Um layout contrastante, por sua vez, atrai a visão na hora, e cria uma real curiosidade e interesse. Ele pode variar o tamanho, peso, estilo, forma e cor. Quanto maior a quantidade ou intensidade dos contrastes, mais interessante poderá ser. Só é importante ter coragem: não se pode ser tímido e avançar meio sinal. Meio contraste tem nome, e seu nome é conflito.

O designer deve orquestrar o espaço em branco. Muitas pessoas consideram os espaços em branco de um layout como áreas perdidas, e por isso tentam preenchê-las com texto e imagens. Os espaços vazios são elementos importantes para o desenho de um layout: entrelinhas, colunas e margens são alguns lugares onde dá para usá-lo. Ele funciona para equilibrar espaços, reforçar a unidade de grupos, harmonizar áreas e aumentar o contraste. São exatamente o que dá forma ao design, como aquela velha história do escultor que, para transformar uma pedra grande na estátua de um cavalo, tirou todos os pedaços que não se pareciam com o animal.

4. Crie as regras que quiser, mas depois respeite-as

Sempre que jogamos cartas com parceiros com quem não estamos acostumados, surge um papo inicial para definir o que é permitido: quanto vale cada ficha, se é possível bater sem ter canastra, como são contados os pontos, o que vale cada carta e assim por diante. Uma vez definidas as regras, elas não podem ser mudadas até o final da rodada. Isso é consistência. No design de um conjunto de documentos (telas de uma multimídia ou website, programação visual de uma empresa, projeto gráfico de uma revista) vale o mesmo princípio: tudo é permitido, menos mudar as regras no meio do processo.

Veja uma revista: seus anúncios não têm nenhuma relação entre si. São layouts independentes, cada qual com sua família de letras, contraste e alinhamento e disposição de fotos. Já páginas editoriais levam elementos estruturais (barras, tipografia, número de página, colunas, fotos) que têm uma ordem implícita bastante rígida.

Existem pessoas que querem fazer em cada página de revista ou documento de um website um layout diferente, com tipografia, cores, espaços e fundos próprios. Isso normalmente não funciona, pois não dá unidade e desorienta o usuário, a tal ponto que ele pode se perguntar se ainda está dentro do mesmo site.

5. Simplificação

Você já ouviu falar em chic simple? É uma categoria de objetos básicos, ao mesmo tempo que tremendamente elegantes, fundamentais no dia-a-dia. São clássicos como um isqueiro Zippo, ou uma camisa branca de algodão, ou uma calça Levi’s 501. Apesar do nome, a simplicidade e elegância são difíceis de se conseguir, pois têm um enorme poder de síntese: simplicidade requer objetividade, firmeza, clareza de mensagem e elegância de design. Não é uma página branca com uma foto e um texto. É uma página em que o branco ocupa um lugar preciso e estudado.

A primeira dificuldade que temos em simplificar está no cliente: muitos confundem simplicidade com pobreza, e querem mais elementos, mais cores, mais brilhos, mais animação, mais luz. Eles não têm culpa: são como pessoas que não estão habituados a beber vinho em restaurantes e enchem seus copos até transbordarem. Ou como novos-ricos, que misturam todas as cores e perfumes possíveis em combinações inacreditáveis. Precisamos salvá-los de si próprios e de sua insegurança destrutiva. É tarefa do designer orientá-los e apoiá-los para que se chegue a resultados elegantes. O argumento inicial, na maioria das vezes, é “olha como estão fazendo lá. A gente poderia seguir na mesma linha”, o que dá segurança ao cliente e o deixa mais receptivo a comentários. Não adianta nada brigar com o cliente nem tentar impor uma visão, já que gosto não se discute e o dinheiro é dele.

A outra grande dificuldade está no próprio designer, que muitas vezes quer fazer de um novo site o showcase de novas tecnologias, para mostrar que é capaz. O resultado costuma ser como os portfólios de gráficas: coisas medonhas usando prata, coisas feinhas usando verniz, coisas pavorosas usando papel importado, coisas de arrepiar usando impressão em seis cores. Um cartaz pode ser lindo, ou, conforme seu ambiente, ser mais um elemento para contribuir com a poluição visual.

A base da simplicidade é uma regra de outra escola alemã, a Bauhaus: less is more, ou seja, na simplicidade de uma comunicação está sua grande sofisticação. Existem bons exemplos de cartazes compostos com mais de 30 famílias diferentes de letras, mas são casos raros de designers muito habilidosos. Quando mais de três famílias são misturadas em uma página, o resultado normalmente é ruim. Essa mesma regra vale para cores, efeitos especiais, caixas, sombras, sublinhados, setas, textos em negrito ou itálico e outros elementos. Na dúvida, é prudente simplificar: um layout simples, na pior das hipóteses, pode passar despercebido. Um layout poluído tem tantos elementos disputando a atenção do leitor que a comunicação se perde, como uma conversa em uma feira.

Ao tentar construir mundinhos em seus websites, muitos designers esquecem do mundo real, de suas linguagens e símbolos. Não é necessário reinventar a roda: verde quer dizer ir, vermelho, parar. Textos grandes ou em negrito são mais importantes que textos pequenos. A leitura é da esquerda para a direita e fotos costumam ilustrar o que lemos. Soa familiar?

O que não significa que um website tenha que mimetizar a realidade, muito pelo contrário. Os primeiros sites de bancos tinham imagens em 3D simbolizando uma agência virtual, com um resultado evidentemente falso e ridículo. Pegou tão mal que hoje em dia é difícil ver websites assim. Isso acontece porque a metáfora deve simbolizar o que um elemento significa na vida real, não sua verdadeira forma. Aí está a verdadeira simplificação.

6. Legibilidade

Você consegue ler os textos do seu site? Facilmente? Então está bom. Não? Então não presta. Tão simples assim. Radical demais? Bom, isso é só a minha humilde opinião. Mas vamos à prática: seu público consegue ler seu texto? Mesmo? Está disposto a fazer esse esforço/sacrifício? Então beleza, não está mais aqui quem falou, seu texto está bom.

7. Integração: não deixe seu design desafinar.

Depois de testar todos os conceitos individualmente, é hora de harmonizá-los, agrupá-los, alinhá-los, simplificá-los, ordená-los ou, sintetizando, integrá-los. Não adianta nada um layout seguir alguns princípios em umas páginas para quebrá-los em outras. Como maestro de uma sinfonia, não deixe sua peça desafinar.

Esses são apenas alguns conceitos. A experiência e o bom senso (e uma certa dose de talento) são fundamentais para se fazer design. É bom se reciclar constantemente e buscar sempre novas formas de ação.

Popularity: unranked [?]