Princípios visuais

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.

 

Contraste

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.

 

Cores (Paleta de Cores)

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.

 

Esquema de Cores

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

Ferramentas on-line de suporte

    • Adobe ( https://color.adobe.com/pt/create/color-wheel/ )
    • Paletton ( http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF )
    • Flat UI Color Picker ( http://www.flatuicolorpicker.com/ )

 

Tipografia

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.



EXPERIêNCIA DO USUáRIO - PRODAP
Rua São José, nº 290 - Cep: 68900-110, Macapá - AP - - experiencia@prodap.ap.gov.br
Site desenvolvido e hospedado pelo PRODAP - Centro de Gestão da Tecnologia da Informação
2017 - 2021 Licença Creative Commons 3.0 International
Amapá