10 mandamentos de web design para cada projeto

Você tem um livro de regras quando se trata de design de sites? Existem algumas regras que se aplicam a praticamente todos os projetos de web design - vamos chamá-los de “mandamentos de web design”.

Não importa quão grande ou pequeno seja o site, essas regras são a base para um bom design. Se você seguir essas diretrizes básicas e torná-las parte de seu pensamento para cada projeto iniciado, evitará muitas das armadilhas nas quais os designers podem se deparar!

1. Você deve ser consistente

Torne o design o mais fácil possível para os usuários interagirem com

O design consistente é fácil de usar e entender o design. O engajamento e as ações do usuário, bem como o visual, devem ter aparência e uso semelhantes em um único design.

Isso significa que os botões são da mesma cor e usam os mesmos estados de foco para ajudar os usuários a saber como interagir, os títulos são do mesmo tamanho e usam o mesmo tipo de letra em todo o design, e elementos como cores seguem uma paleta identificável e associada a a marca.

Outros elementos visuais também devem seguir um estilo consistente, bem como um plano de estilo e uso para elementos como ícones ou fotografia, vídeo ou ilustrações. O design deve ter uma voz usada para blocos de cópias que correspondam à estética geral.

Todos esses elementos de consistência contribuem para a usabilidade geral, tornando o design o mais fácil possível para a interação dos usuários.

2. Você deve usar espaço em branco

Espaço adicional ao redor dos elementos pode ajudar a criar separação e facilitar a leitura.

Não é necessário colocar cada elemento no espaço acima do pergaminho. Use espaço em branco para estabelecer ritmo e fluxo, criar hierarquia visual e ajudar os usuários a se moverem no design.

Se o conteúdo for bom, eles rolarão.

E o espaço em branco pode realmente ajudar a incentivar essa ação do usuário, puxando o olho para baixo da tela.

Espaço em branco é ainda mais importante à medida que os tamanhos de tela ficam menores. Espaço adicional ao redor dos elementos pode ajudar a criar separação e facilitar a leitura. (Pense em como um pouco de espaço extra pode ser benéfico quando se trata de apertar botões com facilidade.)

Não sabe onde incluir espaços em branco no design? Começa aqui:

• Ao redor de botões ou outros elementos interativos
• Como espaçamento entre linhas do tipo para facilitar a leitura
• Entre elementos, para que as coisas estejam no leste para diferenciar, como quebrar em fotos incorporadas em blocos de texto
• Nos campos de formulário, para facilitar o toque em telas móveis
• Em torno de qualquer elemento no qual você deseja que os usuários se concentrem

3. Você deve usar uma grade

Uma grade é a base da experiência do usuário. Quando você cria com uma grade, o site final é mais preciso, consistente e os elementos são colocados em uma ordem que faz sentido visual.

As grades são horizontais e verticais, embora a grade de design da Web mais conhecida possa ser a grade vertical de 12 colunas para alinhar elementos.

A grade é algo que apenas você vê no processo de design e, se tiver problemas para encontrar canais para elementos ou para criar um esboço organizado, uma grade pode ser um salva-vidas total.

4. Você não deve esquecer os padrões do usuário

Os usuários fazem as coisas de uma certa maneira e esperam coisas específicas do seu design. Para ter o máximo de sucesso possível, o design deve usar padrões de usuário comumente aceitos (soluções recorrentes para problemas de design), para que as pessoas saibam exatamente como o design funciona.

Os padrões de usuário comuns incluem:

• Ordem das informações em formulários, começando com um nome ou e-mail e terminando com "enviar"
• Colocação de menus de navegação
• Localização e natureza clicável do ícone do carrinho de compras para comércio eletrônico
• Como as notificações funcionam
• Ícones para pesquisa e bate-papo, entre outras coisas

Os Padrões de Design de UI possuem uma longa lista de padrões de usuário para todos os tipos de situações de design.

5. Você deve usar similaridade nas ações da interface do usuário

Todo elemento em um design de site deve funcionar como qualquer outro elemento do mesmo tipo. Esses elementos também devem ter uma identidade visual para que os usuários saibam o que são e o que fazem rapidamente.

Existem tantas ações de interface do usuário que podem ser incorporadas a um design que é obrigatório cumprir o princípio de similaridade da Gestalt. O agrupamento de elementos e ações visuais para que eles sejam visualmente identificáveis ​​ajudará a criar uma melhor experiência geral para os usuários.

6. Você deve usar bem a tipografia

Afaste-se do desenho e veja se é fácil ler as letras à distância.

Você não precisa ser um tipógrafo mestre, mas definitivamente ajuda.

Muito do que constitui um bom design está enraizado na legibilidade e legibilidade. E esses conceitos dependem de como você escolhe e usa tipos de letra.

Em caso de dúvida, opte por pares de tipos de letra simples, como serif e sans serif. Afaste-se do desenho e veja se é fácil ler as letras à distância. Em seguida, observe as letras em uma tela pequena, como uma tela de telefone, para garantir que seja fácil ler rapidamente também.

Tente usar o texto em um ambiente de alto contraste, como texto claro sobre fundo escuro ou texto escuro sobre fundo claro, para que cada palavra seja fácil de ler.

7. Você não deve esquecer as telas da retina

Até as telas menores podem renderizar elementos e imagens com quase perfeição em pixels.

É necessário considerar como você lida com imagens, ícones e outros elementos para que tudo seja renderizado perfeitamente, independentemente do tamanho da tela. Quando possível, o uso de um formato vetorial pode ser a solução ideal, razão pela qual o SVG cresce em popularidade o tempo todo.

Se você não tiver uma imagem com resolução adequada para tamanhos de tela comuns, não a use. Nenhuma imagem é melhor do que uma imagem ruim ou pixelizada.

8. Serás honesto

Seu design deve ser fiel à sua pequena empresa, informação ou marca e transparente no que você faz. Não roube um design ou imagem, não use palavras-chave falsas para direcionar tráfego e seja fiel a quem e o que é o seu conteúdo.

Com tanta confusão na Web, os usuários desejam interagir com designs autênticos. Enganar os usuários para que façam algo ou se inscreverem em um produto ou serviço ou apenas induzi-los a enganar sobre um tópico ou informação deve ser contra seu código de ética pessoal. Não assuma projetos que esperam isso do design.

9. Você não deve ignorar a acessibilidade

A web deve ser utilizável por tantas pessoas quanto possível. Embora possa parecer difícil garantir que o design seja acessível, não é tão complicado quanto você imagina.

O Google tem um ótimo guia para acessibilidade de sites, que define assim:

Em termos gerais, quando dizemos que um site é acessível, queremos dizer que o conteúdo do site está disponível e que sua funcionalidade pode ser operada por qualquer pessoa. Como desenvolvedores, é fácil supor que todos os usuários possam ver e usar um teclado, mouse ou tela sensível ao toque e interagir com o conteúdo da página da mesma maneira que você. Isso pode levar a uma experiência que funciona bem para algumas pessoas, mas cria problemas que variam de simples aborrecimentos a interrupções de exibição para outras.

A acessibilidade, portanto, refere-se à experiência de usuários que podem estar fora da faixa restrita do usuário "típico", que podem acessar ou interagir com as coisas de maneira diferente do que você espera. Especificamente, diz respeito aos usuários que estão enfrentando algum tipo de deficiência ou incapacidade - e lembre-se de que essa experiência pode não ser física ou temporária.

Muitos dos princípios do bom design, como tamanho, contraste e espaço, contribuem para a acessibilidade geral.

O WebAIM possui uma lista de verificação, além de outras ferramentas, para ajudá-lo a determinar se seu design está acessível. A lista de verificação abrange quatro áreas relacionadas à acessibilidade: o projeto é perceptível, operacional, compreensível e robusto?

10. Você deve ser responsivo

É praticamente desnecessário dizer em 2018, mas seu site deve ser responsivo. Isso inclui todos os elementos, de texto a imagens, botões e toda a estrutura.

Todo design deve funcionar em todos os dispositivos. Período.

Conclusão

Um conjunto sólido de regras pode ajudá-lo a entrar em um projeto de design mais rapidamente e trabalhar com mais consistência. Observe que nenhum desses mandamentos diz como um projeto deve ser; eles estão enraizados na teoria de como você descreve e cria cada site.

Você tem regras adicionais de design da web para adicionar a esses mandamentos? Vamos saber o que eles são nas mídias sociais. Apenas certifique-se de marcar o Design Shack!