Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Quando você começa a aprender teoria de design gráfico, pode se surpreender ao descobrir que há regras específicas que você precisa seguir ao projetar.

Essas regras são conhecidas como princípios de design, e neste artigo, você aprenderá os fundamentos dos 13 princípios de design.

Saber o que são princípios de design lhe dará uma melhor compreensão de como criar designs mais harmoniosos e melhores experiências de usuário.

Aqui está o que abordaremos neste guia:

1. O que são princípios de design?
2. Os 13 princípios do design:
   • Equilibrio
   • Variedade
   • Ênfase
   • Contraste
   • Hierarquia
   • Repetição
   • Pattern (Padrão)
   • Movimento
   • Ritmo
   • Proporção
   • Alinhamento
   • Unidade
   • White space (espaço em branco)

O que são princípios de design?

Os princípios de design são um conjunto rigoroso de regras.

Os designers seguem essas regras para criar experiências agradáveis ​​para o usuário e produtos finais visualmente atraentes.

Essas regras são ferramentas e diretrizes que ajudam o designer a criar um senso de harmonia e equilíbrio em seus designs.

Elas garantem usabilidade e um efeito geral agradável para visualizadores e usuários.

Os 13 Princípios do Design

Equilíbrio

Cada elemento de design em uma página tem um peso diferente, dependendo do seu tamanho, forma ou cor.

Esse peso é conhecido como peso visual.

O equilíbrio no design é como você organiza e posiciona elementos em uma composição, e é sobre distribuir o peso desses elementos.

Uma composição sem equilíbrio significa que um elemento domina todos os outros.

Para criar equilíbrio, você precisa posicionar os elementos corretamente.

Por exemplo, pode ser que um elemento de um lado seja muito "mais pesado" do que o resto e seja avassalador, fazendo com que o design pareça instável.

Existem dois tipos de equilíbrio:

• Equilíbrio simétrico
• Equilíbrio assimétrico

Com o equilíbrio simétrico, pense em desenhar uma linha vertical invisível no centro da página e dividi-la em dois lados.

Os itens em ambos os lados da linha têm peso visual distribuído uniformemente e criam uma imagem espelhada.

A ordem, a posição e o alinhamento dos elementos são iguais em ambos os lados, criando consistência no design.

O equilíbrio assimétrico é o oposto do equilíbrio simétrico.

Os elementos em ambos os lados têm arranjos diferentes, pois também têm uma ordem e posicionamento que variam na composição.

Embora cada lado tenha um peso visual diferente, o design geral mantém um peso visual igual em ambos os lados.

Não há imagem espelhada, e ambos os lados parecem diferentes, mas o design ainda é estável.

Por exemplo, o design assimétrico pode ser quando três elementos mais leves em um lado, empilhados um sobre o outro, equilibram um único item mais pesado no lado oposto.

O equilíbrio assimétrico cria interesse visual e adiciona um toque moderno ao design.

Variedade

A variedade cria interesse visual e evita que o design se torne monótono e previsível.

A variedade é criada usando elementos que não são semelhantes entre si.

Com o uso da variedade, você tem uma boa chance de manter o interesse e o engajamento dos espectadores.

A variedade no design é alcançada com o uso de muitas coisas diferentes, algumas das quais são:

• variando tamanhos,
• variando formas,
• variando cores,
• variando texturas,
• variando a tipografia

Ênfase

O propósito da ênfase é criar um ponto focal.

Um ponto focal é um objeto que se destaca instantaneamente e chama a atenção do espectador ou usuário à primeira vista.

Quando há ênfase em um elemento de design, significa que o objeto específico é destacado do resto e, portanto, é de grande significância e importância.

Por exemplo, você pode pensar em ênfase como um texto com todas as letras maiúsculas e em negrito.

A ênfase pode ser o heading (título) principal em um site.

Também pode ser uma mensagem de algum tipo.

Você pode querer transmitir algo crucial ou cauteloso aos seus espectadores e precisa ter certeza de que seu público esteja ciente disso e se concentre nisso primeiro.

A ênfase também pode ser um botão grande com uma cor brilhante sob um item para compra - isso pode funcionar como um chamado para ação para os visitantes.

É o que você quer que os outros percebam primeiro - as informações essenciais que alguém precisa estar ciente e prestar atenção ao ver seu trabalho pela primeira vez.

É uma parte específica do conteúdo que precisa se destacar do resto do design.

Além do texto e da cor, a ênfase é obtida com tamanho, forma, peso, textura e posição, para citar alguns.

Ao criar ênfase, certifique-se de fazê-lo sem perturbar o equilíbrio geral da composição e sem criar um efeito avassalador e chocante.

Contraste

Enquanto a ênfase é sobre acentuar um único elemento, o contraste tem a ver com o grau aparente e destacado de diferença entre dois ou mais elementos de design que estão próximos.

Essa diferença pode ser que um elemento tenha um background escuro e o outro tenha um background claro.

Também pode ser que um elemento tenha um tom mais frio, enquanto o outro tenha um tom mais quente. Ou que um elemento seja maior e o outro seja menor em tamanho. Ou usar uma fonte serifada em algum texto e um texto sem serifa em outro pedaço de texto.

Por exemplo, preste atenção na webpage dos artigos publicados no domínio da freeCodeCamp.

Ao navegar na página de um computador desktop ou laptop, você verá que no canto superior direito, há dois botões nos quais você pode clicar:

• o botão 'Forum' tem um background escuro que é a mesma do resto da navigation bar,
• o botão 'Donate' tem um background amarelo brilhante que o destaca.

Isso é considerado contraste. Há dois elementos muito diferentes um ao lado do outro, mas um chama mais a atenção e exige sua atenção.

No geral, o contraste destaca dois elementos totalmente opostos com características altamente diferentes. A diferença tem que ser perceptível.

Existem diferentes tipos de contraste, como contraste de cor ou contraste de tamanho, forma ou textura.

O objetivo é criar variação e interesse e, portanto, criar foco e ênfase, mantendo o equilíbrio no design.

Um bom contraste anda de mãos dadas com as melhores práticas de acessibilidade e a criação de produtos e serviços utilizáveis ​​para todos. É necessário levar em consideração pessoas com deficiência visual.

Pense em outro exemplo.

Digamos que há um elemento com um background cinza claro e algum texto cinza escuro. Então, há outro elemento com a mesma cor de fundo, mas há algum texto preto.

Qual é mais fácil de ler? O segundo com o texto preto.

Há um contraste de cor maior entre o background e a cor do foreground (texto).

Há uma falta de contraste no primeiro elemento - isso torna a leitura do texto muito mais difícil.

Hierarquia

A hierarquia organiza elementos visuais em ordem de importância.

O papel da hierarquia no design é criar um sistema de ranking visual de acordo com a prioridade lógica do conteúdo. Ela ajuda a guiar os espectadores das informações mais importantes para as menos importantes, criando um fluxo e arranjo lógicos desse conteúdo.

Pense na ordem típica dos elementos em uma webpage.

Lemos de cima para baixo, então o olho do espectador deve ser atraído imediatamente para as informações essenciais antes de começar a rolar a página.

Então, isso significa que as informações cruciais precisam estar no topo da página - elas precisam ser as informações mais proeminentes e ter o rank mais alto na página.

Veja o exemplo a seguir.

No topo de uma webpage, normalmente há o logotipo da empresa primeiro.

Depois, há uma navigation bar ou dropdown menu, que ajuda os usuários a decidir a área do site com a qual desejam interagir.

Também pode haver uma barra de pesquisa para os usuários inserirem palavras-chave para pesquisar um tópico específico e economizar tempo.

Então, pode haver uma chamada para action ou o "heading" (título) principal que reforça o propósito da página e seu conteúdo.

Então, pode haver a área principal que conteria um subheading (subtítulo) com algum texto, depois outro subheading com mais texto, e assim por diante.

Essa ordem cria organização visual e ajuda os espectadores a distinguir qual conteúdo parece ser o mais importante e merece sua atenção.

Ele orienta os espectadores do início do conteúdo até o fim - da maior prioridade para a menor prioridade.

A posição dos elementos significa importância - a informação mais importante está sempre mais alta em uma página, enquanto se algo estiver na parte inferior, não é tão importante.

Outras maneiras de criar hierarquia no design são usar cores para criar contraste e alternar o tamanho dos elementos de maneiras diferentes.

Sem hierarquia, todo o conteúdo pareceria o mesmo, e nada se destacaria e sinalizaria importância, o que levaria à confusão para os visualizadores.

Repetição

Repetição é quando um elemento específico é repetido várias vezes ao longo do design.

O papel da repetição no design é criar consistência e unidade.

A repetição cria relacionamentos e associações entre elementos aparentemente separados e diferentes e cria um vínculo entre eles - um elo comum que une tudo.

Para obter repetição, você usa a mesma cor específica ou o mesmo color scheme (esquema de cores) várias vezes ao longo do design.

Ou usa um tipo de fonte específico ou uma frase recorrente ao longo da página.

Um elemento comumente repetido em designs é um logotipo, que desempenha um papel crítico na criação de uma identidade de marca.

Um logotipo fará com que os espectadores e usuários se familiarizem com a marca. Eles reconhecerão e distinguirão sua voz e tom de outras marcas.

Os usuários memorizarão e identificarão o logotipo com a visão e missão da empresa.

Eles saberão do que se trata a marca.

Pattern

Pattern, à primeira vista, parece ser muito semelhante à repetição, pois implica que os elementos ocorrem várias vezes ao longo da página.

No entanto, eles têm diferenças significativas.

Enquanto a repetição lida com o mesmo elemento se repetindo ao longo do design, um pattern se concentra em vários e diferentes elementos de design se repetindo da mesma forma ao longo da composição.

Um pattern no design é sobre a repetição de mais de um elemento.

Um exemplo de pattern no mundo real são ladrilhos e papéis de parede.

Um exemplo de web pattern é o uso de backgrounds em sites e applications para criar harmonia e uma sensação coesa.

Movimento

Movimento é como os olhos se movem ao visualizar e interagir com uma composição.

Movimento se refere à maneira como o olho do observador viaja e o caminho que ele percorre ao longo de um design.

O designer usa o movimento para guiar o observador em torno de diferentes elementos do design.

Eles criam diferentes áreas focais para cada ponto no tempo para capturar efetivamente a atenção do observador, movendo-se de um elemento para outro em uma sequência direcionada bem pensada.

Normalmente, o olho do observador vê primeiro o elemento mais importante, depois o segundo mais importante, depois o terceiro e assim por diante.

Um exemplo de movimento pode ser ver uma escada em espiral quando você está no topo - seu olho se moverá ao longo das diferentes linhas e bordas.

O movimento na web pode ser criado por:

• O uso de efeitos animados,
• O uso de efeitos de blurring,
• O uso de efeitos em espiral,
• O uso de linhas e bordas,
• O uso de diferentes sinais de direção que fornecem orientação, indicando ao espectador para mover seu foco para a esquerda, direita ou olhar para baixo ou para cima.

Ritmo

Ritmo envolve a combinação de repetição, variedade e movimento.

Ritmo é como vários elementos de design que são diferentes uns dos outros se repetem em uma ordem específica.

Repetir ou alternar um grupo de elementos diferentes na mesma ordem e em intervalos específicos é uma maneira de criar ritmo no design.

Existem cinco tipos diferentes de ritmo no design, dependendo do tipo de intervalo:

• Ritmo randômico
• Ritmo regular
• Ritmo fluido
• Ritmo progressivo
• Ritmo alternado

Os elementos seguem um tempo e se movem e fluem de forma organizada.

Assemelha-se à sensação de seguir uma coreografia de dança ou se mover ao ritmo de uma música.

Em vez de trazer a atenção para apenas uma área do design ou guiar o observador de uma parte diferente para outra, o ritmo se concentra em mover os olhos do observador por toda a composição.

Proporção

Proporção em design se refere ao tamanho e peso visual de dois ou mais elementos visuais.

Proporção também é a relação entre esses elementos visuais.

A relação é baseada no tamanho. É como o tamanho de um objeto se compara e é correlacionado ao tamanho do outro objeto.

Essencialmente, é como os elementos escalam em tamanho em relação uns aos outros.

Por exemplo, proporção compara e mede a importância dos elementos uns para os outros.

Digamos que há dois objetos - um é maior e o outro é muito menor.

O elemento maior será mais perceptível, o que indica que ele é mais importante do que o menor.

Um design bem proporcionado significa que o tamanho de todos os elementos preserva o equilíbrio, a unidade e a harmonia para todo o design.

Boa proporção significa que todos os elementos se relacionam bem entre si.

Alinhamento

Alinhamento se refere a como os elementos visuais são alinhados, ordenados e estruturados em comparação uns aos outros e em comparação com todo o design.

É uma maneira de criar uma conexão e fluxo visual entre objetos relacionados e criar um resultado mais unificado no design.

Ao alinhar os diferentes objetos visuais, você ajuda a guiar seu visualizador por todo o design.

As formas mais comuns de alinhamento são alinhamento à esquerda, alinhamento à direita e alinhamento centralizado.

Unidade

Unidade no design é como diferentes elementos visuais se unem para criar coesão e completude no design e um efeito harmonioso.

Com unidade, itens aparentemente diferentes criam uma sensação de "unidade". Isso pode ser alcançado de algumas maneiras diferentes.

Por exemplo, elementos de tamanhos diferentes podem ter a mesma cor e estar próximos uns dos outros.

Isso faz com que pareçam pertencer um ao outro ou como se estivessem relacionados e fossem semelhantes de alguma forma.

White space

White space também é conhecido como espaço negativo.

Essencialmente, white space se refere a áreas que não têm elementos visuais e áreas com espaço vazio e não utilizado ao redor de elementos já existentes em um design.

White space não significa necessariamente que o espaço vazio seja branco - pode ser de qualquer cor. Ele se refere mais ao vazio e ao espaço disponível em seu design e ao fato de que algumas áreas não contêm nada.

White space é sobre não adicionar nenhum elemento à composição e adota uma abordagem mais minimalista e simplista ao design. Às vezes, menos é realmente mais.

White space cria espaço para respirar no design.

Quando muita coisa acontece em uma página, os visualizadores podem facilmente ficar sobrecarregados com todas as informações que precisam absorver. O white space ajuda a evitar que isso aconteça. Ele torna qualquer texto disponível mais legível e cria uma experiência de usuário melhor em todos os aspectos.

White space elimina qualquer desordem desnecessária e cria um ponto focal. Portanto, use o white space ao redor de elementos importantes para destacá-los.

Conclusão

Espero que agora você tenha um entendimento de alto nível dos princípios de design e tenha uma ideia melhor de como implementá-los em seus designs futuros.

Obrigado pela leitura!

Fonte

Artigo escrito por Dionysia Lemonaki