# 4 princípios fundamentais de design

> Domine os 4 princípios fundamentais do design visual. Aprenda tipografia, espaçamento, cor e hierarquia para criar projetos profissionais e impactantes!

URL: https://dpw.dev/design/4-principios-fundamentais-design/  
Publicado em: 2019-02-25  
Categoria: design  
Autor: Tárcio Zemel

Antes de ser um expert em design, é preciso dominar os fundamentos. Neste artigo, conheça **4 princípios fundamentais de design** que constituem este fundamente e veja de que maneira é possível estudar e se aprimorar em cada um deles.

> Artigo baseado em [Before you can master design, you must first master the fundamentals](https://medium.freecodecamp.org/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda).

Linguagem é uma forma que as pessoas usam para se comunicar com outras. **Visual design é uma linguagem visual.** E aprender design visual não é diferente de aprender uma nova linguagem de programação ou idioma.

**Bons designs não nascem do nada. São criados.** A chave para ser um designer melhor é rigor. Você só irá progredir se houver um esforço consciente de sua parte. E aplica princípios fundamentais de design faz parte deste esforço.

## Princípio #1: Volte para o básico com tipografia

É possível dizer muito sobre um designer simplesmente olhando para sua tipografia. Isso porque **tipografia é base fundamental para o design**.

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_JS9qoaHxjQDrOzMevwT64g.webp" alt="4 princípios fundamentais de design: exemplos de texto como imagem." />
  <figcaption>[Texto como imagem](https://dribbble.com/shots/1829402-Discount-Logotype)</figcaption>
</figure>

É possível criar designs completos apenas com tipografia. Também, basear designs usando como base fontes de sua escolha. Para melhorar a tipografia em seus projetos, comece primeiro pelo básico.

Desenvolva um vocabulário para descrever a tipografia. Aprenda o que termos como _tracking_, _kerning_ e _leading_ significam. O artigo [A Beautifully Illustrated Glossary Of Typographic Terms You Should Know](https://designschool.canva.com/blog/typography-terms/) é um ótimo recurso para aprender estes termos.

Então, se você deseja um entendimento compreensivo de como aplicar a tipografia na web, leia [Web Typography: The Elements _of_ Typographic Style Applied to the Web](https://webtypography.net/toc/).

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_vpYtKQ-Dpf74I697FrWTZQ.webp" alt="4 princípios fundamentais de design: exemplo de uso de fontes diferentes de forma harmoniosa." />
  <figcaption>[Como usar diferentes fontes conjuntamente (Font pairing) pode fazer ou quebrar um design](https://www.behance.net/gallery/35768979/Typography-Google-Fonts-Combinations)</figcaption>
</figure>

Finalmente, aprenda como usar diferentes fontes em conjunto. Um excelente recurso para isso é [FontWolf](https://www.typewolf.com/site-of-the-day/fonts/circular) e [FontPair](http://fontpair.co/). Ser capaz de unir as fontes irá mudar drasticamente as dinâmicas de seus projetos.

Para uma exploração mais profunda da tipografia, você pode ler o artigo [Typography can make your design... Or break it.](https://medium.com/@JonathanZWhite/typography-can-make-your-design-or-break-it-7be710aadcfe)

## Princípio #2: Use espaço para criar equilíbrio

Um outro princípios fundamental do design é saber usar espaçamento. Espaçamentos ajudam a estabelecer movimento vertical e/ou horizontal. É fundamental para criar hierarquia visual e formar associações entre os elementos.

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_Go7ZCGcIMD8t4W-XQ9M8fA.webp" alt="4 princípios fundamentais de design: exemplo do uso de espaçamento para criar harmonia visual." />
  <figcaption>[Crie movimento e harmonia visual](https://dribbble.com/shots/3318361-Weekly-Mixtape-08-Margin)</figcaption>
</figure>

É sempre recomendado visitar sites como [Behance](https://www.behance.net/) e [Dribbble](https://dribbble.com/) para encontrar inspirações em como usar os espaçamentos. Mas **é importante desenvolver sua própria intuição para usar espaçamentos e criar movimento e harmonia.**

Ao se estudar tipografia, certamente nota-se notado a importância do espaçamento. Ajustar _kerning_ e _leading_ para fontes é um ótimo exercício para desenvolver a visão para espaçamentos.

Por essa razão, é uma boa testar o [KernType](http://type.method.ac/), um jogo onde você compara seu resultado com o de um(a) tipógrafo(a). :-)

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_8BkonUnCDEgfhmwxESTI7g.webp" alt="4 princípios fundamentais de design: simplificação de um pôster vencedor de prêmio por Craig Welsh." />
  <figcaption>[Simplificação de um pôster vencedor de prêmio por Craig Welsh](http://www.howdesign.com/design-competition-galleries/poster-design-awards/poster-design-winners/)</figcaption>
</figure>

Outro exercício que irá ajudar a desenvolver a visão é o seguinte: pegue um design existente, desenhe um eixo X e Y, simplifique o design a formas básicas, analise como o design está equilibrado e então reorganize os elementos.

Preste muita atenção em como espaços negativos afetam o equilíbrio dos elementos.

## Princípio #3: Use tamanho para estabelecer hierarquia visual

Quando se trata de criar hierarquia visual, o dimensionamento é incomparável. **Usando tamanhos para transmitir relações visuais entre elementos, é possível estabelecer fluxo (_flow_).**

![4 princípios fundamentais de design: 2 botões de tamanhos diferentes, evidenciando hierarquia visual.](/images/blog/4-principios-fundamentais-design/1_vzUuGyuZAkjNL01dUxKj0Q.webp)

Tamanho é uma das razões pelas quais grids são úteis. É possível usar grids para ajudar a dimensionar elementos usando índices para transmitir importância.

Uma vez que se tenha determinado um tamanho para um elemento, mantem-se a mesma proporção em todas as instâncias. **Em design, consistência é rei.**

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_De1u6HLHDzrq1Y_uosNguQ.webp" alt="4 princípios fundamentais de design: exemplo do uso de tamanhos e espaçamentos para estabelecer hierarquia visual." />
  <figcaption>[Use tamanhos para estabelecer hierarquia visual](https://dribbble.com/shots/2475367-Intercom-s-Developer-Hub)</figcaption>
</figure>

### Exercício para desenvolver a visão para dimensões

A chave é pedir _feedback_.

Esboce uma landing page. Depois, peça a um(a) amigo(a) que olhe seu design. Peça para que circule os elementos que se destacam mais. Depois, peça para enumerar os elementos circulados baseando-se no peso visual de cada um. Os resultados são os esperados por você?

Quando fizer este exercício, tenha algumas questões em mente:

- Qual é a meta de conversão da landing page? Como você pode otimizar para atingir seu objetivo?
- Qual a relação entre elementos diferentes? Quais elementos você gostaria de enfatizar?
- Seu layout guia os olhos do usuário pela página?

## Princípio #4: Use cor para transmitir significado

É praticamente desnecessário comentar, mas, certamente, _um dos mais importantes princípios de design é saber usar as cores_.

As cores desempenha muitos papéis. Transmitem _significado_, criam _ressonância emocional_ e trazem _união_ ao design.

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_BzRqDemAU1GJnv-IZQ46jQ.webp" alt="4 princípios fundamentais de design: exemplo de um site que usa bem as cores." />
  <figcaption>[Cor ajuda a transmitir significado no design](https://dribbble.com/shots/3302492-Desktop-Search-Results)</figcaption>
</figure>

Para um aprofundamento nos estudos sobre cor, é recomendado ler o artigo [Designing in Color](https://medium.freecodecamp.com/designing-in-color-abd358660a7b). Aqui estão alguns pontos chave do artigo:

- Identifique a proposta de seu design antes de escolher uma paleta de cores. **Um bom design alinha a paleta de cores com seu propósito.**
- Identifique sua audiência. Pessoas percebem cores de forma diferente. Cores tem efeitos diferentes em pessoas de acordo com a preferência pessoal, cultural, educação e experiência de cada uma.
- **Ao escolher uma paleta de cores, simplicidade é a chave.** Escolha uma cor neutra para o fundo. Então, escolha uma cor primária e outra secundária. Finalmente baseando-se em suas outras cores, escolha uma cor de erro e outra de sucesso para diferentes estados da UI.

Uma vez que você tenha um bom conhecimento da base de teoria das cores, resume-se a experimentação e iteração. **Tente ativamente sair da sua zona de conforto e tente novas combinações de cor.**

<figure>
  <img src="/images/blog/4-principios-fundamentais-design/1_mNh06wbZh_pWx55ZHb0C7g.webp" alt="4 princípios fundamentais de design: frame de um desenho animado e uma paleta de cores possível que se pôde extrair dele." />
  <figcaption>Filmes e séries são excelentes recursos para inspiração de cores</figcaption>
</figure>

> **Dica:** Para mais informações sobre cores, conheça nosso [guia completo sobre cores na web](/design/cores-na-web-guia-completo/).

### Exercício para desenvolver a visão para cores

Gaste um tempo compilando paletas de cores para coisas que você goste, como fotografia, revistas, suas séries favoritas etc. -- [em nosso Instagram](https://www.instagram.com/desenvolvweb/), também postamos paletas de cores para inspiração. Então, pegue um design existente e aplique cores diferentes.

Anote como isso muda o humor e tom do design. O significado mudou?

Trate seu trabalho como um ofício, em que há sempre algo que você pode melhorar. **Confie em si mesmo para ser a motivação para se tornar um designer melhor.**

## Conclusão

Revisando, estes são os princípios de design mostrados:

1. **Volte para o básico com tipografia**
2. **Use espaço para criar equilíbrio**
3. **Use tamanho para estabelecer hierarquia visual**
4. **Use cor para transmitir significado**

**Antes de ser um _expert_ em design, é preciso dominar os fundamentos.** Estes princípios de design certamente constituem esses fundamentos. Portanto, saber muito bem a respeito de todos eles é fundamental.

E você, considera algum outro ponto como fundamental no design? Tem alguma indicação de estudos que seja fundamental para o design? Comente!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml