Os conteúdos de um produto web (sistema ou site), podem ter melhor nitidez e fácil entendimento. Para tal convém conhecer algumas recomendações sobre contraste, cor e tipografia.
O emprego deste recurso visa o combate a apresentação monótona de elementos, seja com emprego de monocromia ou policromia.
Contraste com monocromia
Contraste com policromia
O recurso pode ser usado também para facilitar a leitura de elementos que tem alto impacto ou que precisem atrair a atenção do usuário. Através do contraste é possível inclusive agregar visibilidade também nos elementos 3D (exemplo de contraste com monocromia).
Elemento com baixo contraste, chama menos atenção
Elemento com alto contraste, chama mais atenção
O contraste das cores não é apenas importante para destacar itens de texto ou interface, também é um dos princípios fundamentais que determina a sua paleta de cores do site ou sistema inteiro. As cores podem ser divididas em dois grupos:
• Cores quentes - O vermelho indica cuidado e perigo. Laranja é convidativo (tornando-o perfeito para chamadas à ação). Amarelo pode adicionar energia à interface, mas, deve ser usado com moderação.
• Cores Frias - O verde representa saúde e riqueza e relaxa os olhos (perfeito se você precisar representar segurança ou crescimento). Azul escuro representa profissionalismo e confiança (bom para sites corporativos), mas pode criar frieza se usado demais. O azul claro é mais relaxante e amigável (como visto no Facebook e Twitter). Utilizar verde, roxo acalma os olhos enquanto cria uma sensação de luxo (tornando-o ideal para sites de beleza).
Em alguns frameworks e templates de interfaces que estão disponíveis na internet, esses esquemas de cores já está bem definido e sua finalidade já aparece no título do elemento, o que torna mais fácil a implementação. Para a interface das ferramentas do PRODAP, adotar tons mais frios como o branco e o cinza nas maiores partes da interface, alternando com o azul ou o verde, por exemplo.
Neste exemplo o contraste entre as cores chama a atenção para os recursos de navegação.
A teoria e a aplicação das cores são uma ciência completa própria. Algo como simples como modificar o matiz ou a saturação da cor pode mudar completamente a maneira sua interface parece. Ao aplicar cores à sua interface, você precisa entender teoria básica das cores, esquemas de cores mais usados e a aplicação adequada de ferramentas de cores.
Thomas Cannon, designer e escritor da área visual, divide teoria das cores em três partes no que diz respeito ao web design:
• Contraste - Estendendo-se além de “quente” e “frio”, todos os tons de cor tem um oposto definido, cujo contraste é muito maior que qualquer outro. (Usando a roda de cores abaixo, você pode localizar o oposto de cada sombra encontrando a cor correspondente no lado oposto da roda.) O uso mais eficaz de contraste é com texto e plano de fundo.
• Complementação - O oposto do contraste, complementação é a uso de cores que acentuam ou se complementam. Estas são as cores imediatamente ao lado de uma cor na roda de cores (os complementos de laranja são vermelho e amarelo). O melhor uso da complementação é ao selecionar uma cor no esquema, e verificar as situadas próximas.
• Vibração - A vibração de uma cor transmite uma emoção ou atmosfera específica. Por exemplo, cores mais brilhantes tendem a energizar um usuário e torná-lo mais alerta, enquanto tons mais escuros tendem a ser mais relaxantes e tranquilos. CNN.com usa uma faixa vermelha em sua navegação superior para aumentar o estado de alerta, uma decisão de cor que corresponde perfeitamente ao conteúdo do site.
O esquema de cores do seu site - as cores primárias prioritariamente usadas nas principais áreas – propõe um ótimo efeito visual. Existem três mais aceitas estruturas para um esquema de cores:
Triádica
A mais básica e equilibrada das três estruturas, o esquema oferece um excelente equilíbrio de vibração e complementação. Na Roda de cores de 12 etapas, selecione as 3 cores localizadas a 120 graus uma da outra. Você pode usar uma cor para o segundo plano e as outras duas para o conteúdo e áreas de navegação.
Roda de cores utilizada neste esquema
Exemplo de aplicação deste esquema
Composto
O esquema composto usa cores contrastantes e complementares. Pode ser complicado, mas gratificante se bem feito. A base da roda das cores é a mesma que o anterior.
Esquema de cores
Exemplo de aplicação do esquema
Análogo
Concentrando-se apenas na complementação, e não no contraste, o esquema análogo é usado para destacar um conjunto específico de cores vibrantes, quanto mais vibrante, mais critério exige na escolha.
Esquema de cores
Exemplo de aplicação do esquema
• Adobe ( https://color.adobe.com/pt/create/color-wheel/ )
• Paletton ( http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF )
• Flat UI Color Picker ( http://www.flatuicolorpicker.com/ )
Assim como os outros elementos visuais de uma página, a tipografia do seu site, geralmente conhecida como fonte de texto, também afetará seu UX. Designer topográfico galês Mark Boulton descreve alguns passos simples para ajudar a moldar suas palavras. Meça o vão que vai conter o texto. A quantidade ideal de caracteres por linha é 52-78 (incluindo espaços), então escolha uma fonte com uma medida para conseguir isso. Veja o esquema abaixo:
Boulton compôs uma lista com os tamanhos recomendados, em pixels, para o tipo de texto:
1. 11px / 16.5px - cópia do corpo e guia.
2. 24px - cabeçalho principal usado como cabeçalho de seção na página inicial, portfólio página inicial e entradas.
3. 18 px - títulos para lançamentos contábeis manuais e subtítulos de portfólio.
4. 16 px - Todos os títulos terciários de navegação e de conteúdo.
5. 13px - todos os outros elementos encabeçados.
Referências de tamanho para web
A Revista Comstock apresenta fontes e tamanhos variados com a sua premiada interface. Como um periódico de notícias de negócios, seu texto é o conteúdo principal, sua interface é principalmente diferenciada pelo tamanho do texto. Observe a alternância entre fontes, tamanhos e cores, dependendo da necessidade.
Fontes diferentes e os tamanhos de texto são usados na área de navegação e conteúdo primário e secundário. Por mostrada com moderação apenas quando você passa o mouse sobre a navegação, a cor vermelha atenção e incentivar ações.
