Princípios básicos para um web design harmonioso

Sonja Hoffmann Última atualização em 21.10.2020
7 min.
Princípios básicos de web design
Última atualização em 21.10.2020

Como diz o ditado: Não há segundas oportunidades para uma primeira impressão. Quando acessas um site desconhecido, decides em poucos segundos se este site é “boa” ou “mau”. É infinitamente difícil fazer uma análise objetiva, especialmente com as tuas próprias criações. Felizmente, existem princípios de design bem testados que podes usar como guia. Aqui tens uma síntese.

O que é afinal um "bom" web design?

O web design é bastante complexo: é preciso mais do que apenas um olho para uma boa tipografia e um sentido apurado para um layout visual apelativo. O web design oferece oferece uma incrível variedade de possibilidades para te expressares de forma criativa. Mas também oferece pelo menos as mesmas oportunidades para te perderes no processo de design. Especialmente quando estás profundamente enraizado no processo de design, é fácil "te perderes na floresta". O resultado pode ser um design que consideramos “mau”.

A nossa avaliação é muitas vezes intuitiva, por isso é difícil explicar porque o mesmo elemento de design encaixa perfeitamente num site enquanto parece perdido e deslocado noutro.

O que faz um site de sucesso?

Bons sites apresentam informações de forma clara e eficiente para que os utilizadores possam encontrar intuitivamente o seu caminho no site. Normalmente, um site orientado para o utilizador é bem-sucedido através de uma interação bem equilibrada de tipografia, elementos interativos e muitos ajustes visuais. 

E como isto não é suficientemente complicado, também estamos limitados por aquilo que os navegadores dos nossos potenciais utilizadores podem realmente exibir. Eventualmente também pelos conhecimentos técnicos do desenvolvedor ou pela ferramenta que utilizamos para criar o site em questão. 

Também deves ter em conta as tendências atuais e a identidade corporativa do teu cliente. O Web design é, em princípio, a soma de UX, UI e design gráfico, o CI e as tendências atuais, considerando as condições técnicas.

A criação de um website é um projeto bastante extenso. Não admira que normalmente uma equipa inteira esteja por trás disto. Muitas vezes, os indivíduos (e infelizmente as equipas) tendem a prestar mais atenção às áreas onde são particularmente fortes. Enquanto outras áreas recebem menos atenção - ou, em casos extremos, nenhuma. Isto cria um desequilíbrio que te pode fazer sentir que um site é de qualidade inferior e desarmonioso.

O "bom" web design é o resultado de um equilíbrio entre as diferentes áreas de design e as condições técnicas.

Uma vez que uma análise detalhada de todas as áreas iria além da abrangência deste artigo, vou-me agora focar principalmente no design visual. 

Contraste, espaço em branco e cor

O contraste está muitas vezes associado à escolha das cores primárias do design, bem como ao espaço em branco na composição. No entanto, o espaço em branco aqui não significa necessariamente o espaço que fica branco. Em vez disso, deve ser entendido como as lacunas entre os elementos. Este espaço é também chamado de "espaço negativo" e pode, aliás, ainda ser colorido.

Muitos espaços em branco normalmente fazem uma página parecer mais arrumada e clara. Esta abordagem muitas vezes anda de mãos dadas com o minimalismo. Isto significa remover consistentemente tudo do layout que é desnecessário e não traz nenhum valor acrescentado reconhecível ao design. Seja texto, elementos decorativos ou uma inundação de CTAs.

Dica

Ao planeares contraste e cor, deves também ter em mente o seguinte: Conteúdos de difícil leitura podem fazer com que pessoas com deficiências visuais (por exemplo, reconhecimento de cor) não consigam perceber este conteúdo.

Justamente com a tendência de preencher cabeçalhos de sites com grandes imagens panorâmicas, encontramos muitas vezes sobreposições de texto que são difíceis de decifrar.

Um exemplo bem-sucedido de muitos espaços em branco e contraste

Princípios básicos para um web design harmonioso
Princípios básicos para um web design harmonioso

https://aiven.io/

Um mau exemplo de contraste

Aqui está um exemplo que apresenta um problema de contraste, especialmente na versão móvel. O apelo à ação desaparece completamente no fundo "ruidoso".

why-ux-fails
https://www.opitz-consulting.com/

Às vezes não é tão fácil para os designers filtrarem as cores certas para um design. Felizmente, existem ferramentas que nos permitem testar rapidamente diferentes combinações antes de gastarmos muito tempo a criar um layout caro.

Teoria das cores: Estas ferramentas ajudam-te na seleção de cores

Ferramenta de cor Material Design

Material Design Color Tool cria estruturas de fios de baixa fidelidade usando duas cores primárias.

material-design-color-tool

Adobe Color Wheel

Adobe Color Wheel não só ajuda a criar paletas de cores diferentes, como também extrai as paletas de cores usadas dos designs existentes. Recentemente, isto também é possível com base em gradientes de cor.

adobe-color-wheel

Ao selecionares as cores adequadas, vale a pena observares de perto a marca do cliente: Que esquema de cores é usado? Em que medida posso desviar-me dele?

Os fundamentos da teoria da cor também são inevitáveis: dependendo do setor de negócio do teu cliente, podes escolher uma cor com o efeito psicológico apropriado. Não é por acaso que o azul é frequentemente usado em áreas mais sérias - como seguros, consultadoria e sites de comparação. O azul inspira confiança e tem um efeito calmante. No entanto, não se deve ser demasiado geral, pois mesmo nuances da mesma cor podem evocar emoções muito diferentes.

Conhece a regra dos 60-30-10?

Esta é recomendada como uma regra dourada para a utlização de esquemas de cores. Aqui está o princípio aplicado: a cor principal representa cerca de 60% do layout, uma cor complementar abrange 30%, e uma terceira cor define outros destaques com 10%. Este arranjo tem um efeito particularmente equilibrado sobre o utilizador.

Disposição simétrica ou assimétrica dos elementos de design

Em seu artigo "Os Princípios do Design e sua Importância", a autora e designer Cameron Chapman explica suas duas abordagens mais importantes para o equilíbrio no web design. De acordo com isso, ela distingue o conteúdo de acordo com sua conspicuidade - ou seja, se ele é mais chamativo ou menos proeminente. 

Por conseguinte, o desafio seguinte é organizar o conteúdo de forma a transmitir uma sensação de equilíbrio. A decisão de design “organizar simetricamente ou assimetricamente” pode ajudar aqui.

Como funcionam as duas abordagens?

A abordagem simétrica organiza elementos com um destaque semelhante em conjunto. Com a abordagem assimétrica, por outro lado, os conteúdos mais proeminentes e menos visíveis são organizados em conjunto. 

Por exemplo, o layout pode ser mantido limpo. Os elementos estão claramente separados uns dos outros, como é o caso do Couro Azul. Muitas vezes, tal conteúdo é colocado ligeiramente fora do centro para dar um pouco mais de espaço ao elemento mais fraco e criar um equilíbrio.

Couro Azu

Zero, por outro lado, usa o mesmo princípio - mas com um arranjo mais livre. O elevado uso do espaço em branco faz com que este pareça elegante e contemporâneo.

Esta abordagem funciona muito bem em ecrãs maiores (a partir do tamanho de um tablet). Os dispositivos mais pequenos, como os smartphones, por outro lado, beneficiam de módulos claramente separados, dispostos um por baixo do outro.

Definir e estabelecer prioridades

Antes de começarmos com o design de um site, deve ser claramente definida a mensagem a ser comunicada. Muitas vezes, a clareza no conceito de marketing também traz clareza no layout do design.

Assim que as mensagens-chave tenham sido determinadas, é importante realçá-las usando cores e/ou tipografia.

Neste exemplo, podes ver como ambas ficam combinadas:

vaqueiro
https://cowboy.com

No entanto, também há muitas possibilidades de implementação aqui. O conteúdo pode ser enfatizado não apenas através de tipografia e cor em negrito. Também através de imagens - como no restaurante Jamie Oliver's - e através de uma interação de diferentes princípios, você pode trazer o conteúdo selecionado em foco.

restaurante do Jamie Oliver

Proporção, coesão e hierarquia

O conteúdo de uma página deve ser apresentado de uma forma que faça sentido na sua hierarquia. Por isso, colocas as coisas mais importantes no topo. Partindo de uma importância decrescente, vais trabalhando para baixo. Portanto, deves-te perguntar: Que informação é mais importante para o visitante do meu site? O que é apenas informação adicional? 

Esta é também a razão pela qual o menu de navegação está normalmente localizado na parte superior. Além de ser um padrão UI, é simplesmente um dos aspetos mais importantes de uma página. Afinal, o menu nada mais é do que uma visão geral do conteúdo principal que tu ofereces lá. Por assim dizer, o índice do teu site.

Hierarquia visual: o que é realmente importante

Hierarquia também pode ser criada através do chamado movimento. Aqui organizamos o conteúdo da página de tal forma que o olho é guiado através dela. Isto pode ser conseguido, por exemplo, com a ajuda de formas e arranjos. Este portfólio é um exemplo interessante de como algo assim pode parecer:

portefólio

O olho é guiado da esquerda para a direita através do ecrã. O ponto 01 tem aqui claramente a maior hierarquia, embora todos os elementos sejam iguais em tamanho e inicialmente pareçam iguais. 

Então, a proporção também desempenha um papel: elementos do mesmo tamanho, cor e forma dão-nos basicamente a sensação de pertencerem juntos e terem a mesma função. Isto é especialmente importante com elementos interativos.

O exemplo acima apresentado demonstra que um design consistente pode contribuir em grande parte para a harmonia visual: 

  1. formas uniformes são usadas para todas as imagens,
  2. todas as imagens harmonizam-se em cores, 
  3. ao todo são usadas apenas duas fontes e tamanhos diferentes, 
  4. apenas uma cor é usada para a tipografia e separadores,
  5. os separadores representam um elemento de design recorrente - e unem visualmente a imagem e os dois títulos.

Princípios básicos em web design - Conclusão

Apesar de todos os princípios básicos acima mecionados, as regras existem para serem quebradas. Esta é a única maneira de criar designs novos e interessantes!

As abordagens que apresentei aqui brevemente não são, naturalmente, novas. Em vez disso, são alterações da pesquisa científica e/ou psicológica que foram transferidam para os meios de comunicação de hoje. Eu pessoalmente acho importante conhecer estas teorias e métodos. De qualquer forma, muitas vezes implementamos regras intuitivamente, porque o nosso olho criativo "aprendeu" a fazer isso.

Além disso, o conhecimento sobre diferentes abordagens em design ajuda a avaliar os próprios projetos. Pensa nisso como uma lista de verificação a ser consultada quando notares que algo não está a funcionar bem visualmente. Muitas vezes, não tens a distância necessária do teu próprio projeto para avaliá-lo objetivamente. 

Os princípios de design aqui indicados estão longe de estar completos. Se quiseres aprofundar o assunto, és bem-vindo a dar uma olhada nestes artigos e e-books: 

Qual é a sua opinião sobre os princípios do design? Que perguntas você tem para Sonja? Esteja à vontade para usar a função de comentários. Quer ser informado sobre novos artigos sobre web design e desenvolvimento para agências e freelancers? Depois siga-nos no Twitter, Facebook ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.