Princípios Design Gráfico

Dentro da área de IHC (Interação Humano-Computador) existem diversos princípios a serem seguidos para se chegar no melhor design para seu produto.

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, com a intenção de gerar entendimento, estruturar o problema e propor soluções para o mesmo.

É possível definir essas regras geralmente como:

1. Proximidade e alinhamento: Elementos pertencentes a um mesmo grupo devem estar próximos
2. Equilíbrio, proporção e simetria: Componentes devem ser complementares
3. Contraste, cores e brancos: O contraste traz dinamismo e ação para uma página, chama a atenção e causa impacto 
4. Ordem, consistência e repetição: O designer tem toda a liberdade para criar as regras, mas deve segui-las
5.  Simplificação: Simplicidade: sinônimo de elegância, objetividade e, acima de tudo, clareza
6. Legibilidade: Textos existem para serem lidos 
7. Integração: O design não pode “desafinar”

Esses princípios garantem com que o design do seu produto possua a melhor usabilidade ao seu usuário, seguindo padrões internacionais de usabilidade.

Porém, muito além dessas regras, existem também os princípios de Design Gráfico que garantem que seu material irá possuir a melhor comunicabilidade possível com o usuário, são eles:

• Metáfora
• Clareza 
• Contraste 
• Consistência (Repetição) 
• Alinhamento 
• Proximidade  

Metáfora

Associar apresentação e elementos visuais a itens familiares relevantes

Exemplo: se você está construindo uma interface para uma “loja de departamentos”, poderia “copiar”/ imitar uma pessoa caminhando pela loja com um carrinho de compras.

Clareza

Todo elemento da interface deve ter uma razão para estar ali e quanto menos elementos possíveis possam ser colocados, melhor. Espaços em branco garantem melhor impacto da mensagem ao usuário além de ser melhor aceita pelo olho do mesmo.

CRAP

Os princípios Contraste, Repetição, Alinhamento e Proximidade são representados com a sigla CRAP.

Contraste:

1. Atrai a atenção 
2. Guia os olhos pela interface
3. Explore o contraste para dar foco ou fortalecer a aparência da interface
4. Pode ser usado para distinguir controle ativo
5. Pode ser usado para realçar o item mais importante
6. Ideia de hierarquia
7. Use geometria para auxiliar o sequenciamento

Repetição:

1. Consistência no layout, cor, imagens, ícones, tipografia, texto, … 
2. Em uma mesma tela, e entre diferentes telas
3. Mantenha a metáfora sempre (everywhere)
4. Plataforma pode ter um ‘style guide’ (Adote-o!)
5. Continuidade
6. Ajuda a organizar a informação
   

Alinhamento:

1. Permite ao olho percorrer o display mais facilmente 
2. Organização 
3. Coesão
4. Uso de Grades

Proximidade:

1. Itens próximos entre si aparentam estar relacionados
2. Distância implica em ausência de relação