Princípios básicos para um web design harmonioso

Sonja Hoffmann Atualizado em 21.10.2020
7 min.
Princípios básicos de web design
Última actualizaçã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 geralmente também anda de mãos dadas com o minimalismo. Isto significa remover consistentemente do layout tudo o que é desnecessário e não traz nenhuma mais-valia ao design. Seja texto, elementos decorativos ou uma enchente 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

Ferramenta de cor Material Design cria wireframes de baixa fidelidade com um padrão de duas cores primárias.

material-design-color-tool

Adobe Color Wheel

Adobe Color Wheel não apenas te ajuda a criar diferentes esquemas de cores, mas também extrai os esquemas de cores usados de designs existentes. Recentemente, isto também foi 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.

Sabes 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

No seu artigo "Os Princípios do Design e a sua Importância" , a autora e designer Cameron Chapman explica as suas duas abordagens mais importantes para o equilíbrio no web design. Assim, ela diferencia o conteúdo de acordo com a sua visibilidade - isto é, se ele se ele chama mais a atenção ou se é 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. 

Aqui o layout pode ser mantido limpo, por exemplo. Os elementos estão claramente separados uns dos outros, como é o caso deste exemplo do Couro Azul . Muitas vezes estes conteúdo são colocados ligeiramente descentrados para dar um pouco mais de espaço ao elemento mais fraco e criar um equilíbrio.

Couro Azu

Zero no entanto, utiliza o mesmo princípio - no entanto, com um arranjo mais livre. Devido ao alto uso do espaço branco, ele tem um efeito 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, há também muitas possibilidades de implementação. Afinal de contas, os conteúdos não podem ser enfatizados apenas pela tipografia ousada e pela cor Também através de imagens - como com o restaurante do Jamie Oliver - e através de uma interação de diferentes princípios colocas 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

A hierarquia também pode ser criada através do chamado movimento. Aqui organizamos o conteúdo da página de forma a que os olhos seja guiado através dela. Isto pode ser alcançado usando formas e arranjos, por exemplo. Este portefólio é um exemplo interessante da possível aparência disto:

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 tua opinião sobre os princípios do design? Que perguntas tens para a Sonja? Podes usar a função de comentário. Quer ser informado de novas publicações sobre web design e desenvolvimento para agências e freelancers? Então segue-nos no TwitterFacebook 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 * .