Uma revisão de projetos consistentes na Web

A linguagem visual de um site impressiona um visitante muito além de seu primeiro vislumbre.

Na verdade, ao observar os melhores sites, você percebe que os pequenos detalhes falam com você inconscientemente e que a consistência melhora a sua experiência no site e, como resultado, aumenta a probabilidade de você voltar.

Neste artigo, exploraremos o que torna um design consistente e mostraremos alguns dos designs de site mais consistentes por aí.

Por favor, comente no final do artigo sobre a consistência desses sites e fique à vontade para adicionar links para outros que seguem este princípio.

O que queremos dizer com consistência no design? De acordo com esta definição , consistência pode ser definida como: “Uma uniformidade harmoniosa ou acordo entre coisas ou partes.”

Seu objetivo como designer é criar um pedido, para tornar mais fácil para os usuários encontrarem as informações que estão procurando. Consistência pode ajudá-lo a atingir esse objetivo.

Lista de Verificação dos Detalhes

Primeiro, vamos definir os critérios pelos quais determinaremos se os sites que analisamos aqui são consistentes. Definir critérios para si mesmo também beneficiaria seu próprio trabalho de design diário. Como gosto de dizer, um bom design é criado primeiro com boa observação . Aqui estão nossos critérios:

Consistência tipográfica:

Existe um ritmo vertical consistente?
O alinhamento tipográfico é consistente?
As opções de tipos de letra são consistentes?
A navegação tipográfica é previsível nas páginas?

Consistência gráfica:

As imagens do site transmitem um clima consistente?
As cores nas imagens correspondem?
As texturas das imagens são consistentes?
Os tamanhos das imagens são consistentes com a estrutura geral do site e entre si?

Consistência de cores:

As cores são usadas consistentemente nas páginas?

Consistência de ícones e botões:

Os ícones do site são da mesma família?
Os ícones correspondem em tamanho?

Um site não precisa atender a esses critérios, mas a lista é um bom ponto de partida para ajudar a tornar seus projetos consistentes e harmoniosos.

Ok, agora temos uma boa lista de verificação para brincar. Vamos rever nossos sites, aprender com eles e se inspirar!

52 semanas de experiência

Quais são alguns dos destaques do site:

O espaço em branco no cabeçalho é dividido igualmente.
A tipografia é alinhada de forma consistente, alinhada à esquerda com uma direita esfarrapada.
A navegação paginada persistente no topo é inteligente e familiar.
Imagens para posts são sempre preto e branco.

Agora, como este artigo é sobre detalhes, quero destacar dois pequenos problemas com este site, ambos no rodapé: Primeiro, observe como o botão de pesquisa "Ir" tem uma reflexão, enquanto os outros elementos no site não refletem. (compare, por exemplo, o botão RSS no topo).

Em segundo lugar, observe que o espaço entre os cabeçalhos e o texto é muito mais estreito no rodapé em comparação ao restante do site.

Fitas de vermelho

Primeiro, o elemento mais proeminente do site: o vermelho! Belamente e consistentemente usado desde o logotipo até os cabeçalhos, até os links para os botões.
Em seguida, a textura dos gráficos de botão é a mesma usada para o logotipo.
Além disso, observe que os botões são visualmente todos da mesma família, até mesmo os ícones sociais na parte inferior.
O tipo de exibição é uma boa serifa de slab - novamente, usada consistentemente do logotipo para os cabeçalhos para os botões.
Por fim, os elementos de texto em todo o site são alinhados de forma consistente, alinhados à esquerda e à direita.

Yaron Schoen

A primeira coisa que chama a atenção é como a ilustração no cabeçalho é reproduzida com profundidade. Mesmo os quatro elementos gráficos abaixo saem de seus contêineres e jogam com profundidade da mesma maneira.
A tipografia está perfeitamente alinhada em uma grade.
O tipo de letra é bem escolhido e executado. A home page e outras páginas também exibem continuidade.
As cores também são muito consistentes, tocando bem com o azul escuro ao verde azulado, desde o cabeçalho até o rodapé.

Fuzzco

Veja a textura na navegação superior; Ele também é usado para as imagens próximas ao fundo.
Confira o tipo no cabeçalho das páginas; bem feito com Flash personalizado, dando-lhe uma sensação criativa.
A serifa é consistente em toda a home page, mas quebra um pouco nas páginas internas.
As cores na navegação superior correspondem ao rodapé, harmonizando e enquadrando o conteúdo.

Styleboost

O tamanho definitivamente torna este site consistente: grande . Botões grandes, imagens grandes (todas consistentes em tamanho), tipo grande, grande espaço em branco.
A cor é mantida a um mínimo e usada bem. O azul claro mantém a harmonia e o cinza secundário brinca com profundidade e hierarquia.
Os botões são todos grandes e uniformes. Eles também são ligeiramente arredondados, correspondendo à caixa de pesquisa.
A estrutura da grade é simples e informa o que vem a seguir. Até mesmo o rodapé é proporcional, o que parece estar próximo da proporção áurea.

Monstro Delicioso

Este site não é novo, mas é bonito em como ele permaneceu consistente ao longo dos anos e não envelheceu um pouco. A atenção aos detalhes ajudou.

Observe as texturas. O site é enquadrado por uma prateleira de madeira, que se liga ao tema do software que está sendo oferecido pela empresa.
Os elementos gráficos, como grama e plantas, mantêm a harmonia.
Cada seção tem cantos arredondados, até mesmo os botões de apresentação de slides.
O amarelo esverdeado domina a página, convidando você a entrar neste mundo imaginativo e memorável.

Richard Meier & Partners Architects.

Foi desenhado por Massimo Vignelli , conhecido por ter dominado a grade e produzir designs modernos, consistentes e lógicos.

Observe o alinhamento dos elementos gráficos. O tipo à esquerda no menu alinha com as imagens abaixo.
A regra horizontal abaixo da sub-navegação é persistente, ajudando os usuários a se orientarem no site.
O espaço entre a navegação e o conteúdo do corpo é consistente, dando aos olhos um caminho claro a seguir.
E a tipografia é simples, flush esquerda e sans-serif, caindo consistentemente na grade.

A equipe por trás Arquitetos da Informação também dominou a simplicidade, o design da grade e a consistência.

Observe como a navegação no topo está alinhada com o conteúdo do corpo abaixo.
A paleta de cores é simples e consistente: vermelho, branco e preto.
Os elementos textuais estão alinhados uniformemente. Observe como o espaço entre as regras horizontais é consistente na página.

Wilson Miner

As datas e o meta-conteúdo são alinhados na primeira coluna, seguidos pelo conteúdo do corpo.
Observe como a navegação no topo cai na grade, alinhando-se ao conteúdo abaixo.
A tipografia é um simples branco e preto: branco para títulos de seção, preto para cópia do corpo.

Tapbots

A primeira coisa que me chama a atenção é o excelente uso do espaço em branco, particularmente o espaçamento entre o logotipo e a navegação, tanto acima quanto abaixo.
Todos os ícones parecem vir da mesma família, criando harmonia.
O uso da profundidade, do gráfico superior às ilustrações do rodapé, também é consistente.
As cores combinam na página: o preto no topo corresponde ao rodapé; o botão vermelho na parte superior corresponde ao botão de pesquisa abaixo; e a navegação cinza corresponde à barra cinza no rodapé.

Empacotando

O design consistente requer muitas ferramentas e pode ser difícil de conseguir.

Uma dica que posso oferecer é começar com uma boa grade e depois construir um wireframe em cima dela. Isso lhe dará uma visão panorâmica dos elementos gráficos e como eles se relacionam entre si.

Os exemplos acima devem fornecer uma reflexão sobre a execução do seu design. Consistência é composta de muitas partes, que são ingredientes essenciais no processo.

Escrito exclusivamente para Webdesigner Depot por Noam Almosnino, um web designer no Brooklyn, Nova York. Siga Noam no Twitter ou visite o site dele hellonoam.com .

Conhece outros sites consistentes para compartilhar conosco? Por favor, poste-os nos comentários!

desenhar Designer de Web consistência