Seleccionar página

Pode parecer estranho à primeira vista, mas não se assuste! Este CRAP de que vos falo é formado pelas iniciais de Contraste, Repetição, Alinhamento e Proximidade: os quatro princípios básicos de design descritos por Robin Williams (não o ator, a escritora) no livro Design para quem não é designer. Neste livro a autora apresenta exemplos de aplicação para a mídia impressa. Em um segundo livro, Webdesign para não-designers a autora apresenta exemplos aplicados ao design para web.

Vou falar um pouco sobre cada princípio individualmente, mas vale a pena lembrar que eles devem ser trabalhados em conjunto, pois estão inter-relacionados. Além disso, não devem ser entendidos como regras, embora eu aconselhe fortemente que sejam seguidos se você não tiver a certeza de como quebrá-los conscientemente.

Contraste
“Se dois itens não são exatamente os mesmos, diferencie-os completamente”.

O contraste talvez seja a melhor de oferecer atração visual ao seu projeto. Para isso, a autora sugere que o designer não seja tímido. Se a diferença entre os elementos for pouca, pode-se gerar um conflito visual ao invés de contraste. A página de jogos do console XBOX360 se mostra um bom exemplo de contraste em relação ao todo, pois apresenta imagens em um tamanho grande logo no início da página. A descrição da imagem (localizada no canto inferior esquerdo), no entanto, pode parecer imperceptível à primeira vista. A diferença apenas de tamanho da fonte, sem que haja uma mudança de cores ou de tipo de fonte, torna pequeno o contraste desse grupo de informações.

Repetição
“Algum aspecto do design deve repetir-se no material inteiro”.

A repetição de aspectos de design como estilo e tamanho de fonte, cores ou elementos gráficos, por exemplo, ajudam a unificar o projeto gráfico visual. Repetir elementos de design em um projeto de muitas páginas, como um website, por exemplo, significa dar consistência visual ao mesmo. O site da Apple apresenta um bom exemplo de consistência. O menu é mantido na mesma posição; as cores e organização visual são as mesmas; a identidade visual dos ícones é a mesma; o estilo, tamanho e cores de fonte também se repetem em todas as páginas. É possível notar que há uma diferença estrutural entre a home e as páginas internas. Isso é válido, uma vez que a home é uma página “especial” do site.

Ao projetar uma interface é importante estar sempre atento para que não haja grandes diferenças entre a página inicial e as páginas internas. Ao acessar a página de vídeos do site oficial da Formula1, por exemplo, temos uma quebra de consistência em relação ao restante do site. O usuário perde a referência das páginas anteriores, não encontra mais o logotipo ou menu, além de encontrar uma cor do plano de fundo diferente de todo o restante do site.

Alinhamento
“Nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página”.

As informações não devem ser dispostas em uma página de forma aleatória, apenas para ocupar os espaços em branco. O alinhamento cria uma linha “invisível” que ajuda o leitor a identificar a coesão, a conexão entre os elementos mesmo que estes estejam fisicamente separados. Ao observarmos os detalhes site espanhol da ESPN, por exemplo, é possível perceber as linhas “imaginárias” (destacadas por mim em vermelho) que definem o alinhamento do conteúdo. Interessante notarmos que a proporção e o alinhamento são respeitados mesmo quando temos uma variação no número de colunas.

Este é um pequeno deslize comumente cometido pelos designers. Em um detalhe do portal Terra, por exemplo, apesar de o comprimento da área de conteúdo ser mantido, o alinhamento geral entre as colunas não está muito bem definido.

Proximidade
“Itens relacionados entre si devem ser agrupados”.

Os elementos relacionados devem ser vistos de forma conjunta, coesa, para que formem uma unidade visual. Os itens ou grupos de informações que não possuírem uma relação entre si devem ser desassociados, de forma a evitar confundir o usuário. Um deslize em relação ao princípio da proximidade bastante comum de ser encontrado pode ser visto no detalhe da página de publicações do Nielsen Norman Group. Reparem que o espaço entre o título e a informação a que o mesmo se refere das informações é o mesmo espaço referente ao término da informação anterior. Isso gera uma pequena confusão na leitura. Neste exemplo, no entanto, a compreensão da informação não fica tão comprometida como poderia ficar caso este estilo de design fosse adotado em um menu, por exemplo.

O ideal, no caso anterior, seria que o título estivesse mais próximo do texto a que corresponde e mais distante do texto anterior, como ocorre neste detalhe da página de ajuda do twitter .

Leituras adicionais para auxiliar na elaboração de um bom design de interfaces
Além destes princípios, sugiro a leitura de conceitos relacionados à tipografia, como categoria, combinação e contraste de tipos. O livro da Robin Williams oferece uma base sobre esses assuntos.

Outro assunto que recomendo a leitura é sobre a teoria e o uso das cores. O livro From color to inexistent color (um pouco difícil de ser encontrado), de Israel Pedrosa, traz um conteúdo muito rico sobre o assunto. Vale a pena a leitura.