Princípios de Web Design
Tags: webdev, webdesign, ux, beginners
Published: 2022-04-12 18:26:10

Quando as pessoas visitam seu site, a primeira coisa que sentem é o design dele.
Mesmo que a página seja moderna e tenha uma ótima funcionalidade, um design ruim pode tornar todo o resto da página ou aplicação inútil.
Neste post, apresento alguns dos princípios que aprendi em meus estudos de web design e comento um pouco a respeito de cada um dos pontos.
Vamos lá!

---

# Cores

Escolher a cor certa é muito importante e você não pode simplesmente escolher qualquer uma com base na suas favoritas.
Um site colorido não significa exatamente usar todas as cores diferentes, seja sensato e escolha uma única cor como base da paleta, depois de escolher a principal, pense em combinações que harmonizam e sejam agradáveis para utilizar no design do projeto.
<br>
### <font color="red">Vermelho</font>

Vermelho lembra Amor, Energia e Intensidade.
É o mais poderoso, mais forte e mais brilhante no círculo cromático.
O tema vermelho é usado principalmente em sites de comércio eletrônico, entretenimento e moda. Com grande poderes vem grandes responsabilidades - logo, usar muito vermelho cria uma impressão negativa em seu design.
Importante ressaltar que, o vermelho não é adequado para sites relacionados à natureza...

![exemplos site vermelho](https://miro.medium.com/max/1400/0*dwQ2x7Gnr7Rr6oc_.gif)
### <font color="#FFD700">Amarelo</font>

Amarelo é para Alegria, Intelecto e Atenção.
Você deve ter cuidado com o amarelo porque usar amarelo brilhante como plano de fundo **pode prejudicar os olhos do usuário**, especialmente quando seu site precisa ser usado por um longo tempo.
Amarelo é ótimo para títulos, logotipos, botões, etc. Então, para resumir, se o seu site ou app é do tipo em que os usuários precisam gastar bastante tempo, o amarelo não é a melhor escolha.

![exemplos site amarelo](https://miro.medium.com/max/1400/0*PTDy9ntuA9-xNEM2.gif)
### <font color="green">Verde</font>

Verde é sobre Frescura, Segurança e Crescimento.
É por isso que a maioria das empresas de alimentos, nutrição e produtos orgânicos usa uma paleta de cores verde.
É assim que eles transmitem o frescor de seus produtos digitalmente.
Portanto, se o seu site for relacionado à comida ou à natureza, o verde é sua escolha.

![exemplos site verde](https://miro.medium.com/max/1400/0*Jkf5IWcf_rcqXf_E.gif)
### <font color="blue">Azul</font>

Estabilidade, Confiança e Serenidade.
Agora você sabe por que a maioria das empresas financeiras, sites de empresas de criptomoedas são azuis!
Além disso, alguns dos principais sites de mídia social, como Twitter e LinkedIn, têm o tema azul porque fazem as pessoas se sentirem seguras, confiantes e positivas usando sua plataforma.
Então já sabe, use as redes sociais para espalhar positividade. 😉

![exemplos site azul](https://miro.medium.com/max/1400/0*pTqiZauTHFxefIPy.gif)
### <font color="purple">Roxo</font>

Finalmente roxo, roxo mostra Realeza, Riqueza e Feminilidade. As palavras dizem tudo...
Portanto, os sites direcionados às mulheres provavelmente usarão roxo.

![exemplos site roxo](https://miro.medium.com/max/1400/0*WXx-1oPA0dju2zpM.gif)

---

# Tipografia

A tipografia é outra coisa muito importante na criação de um site.
De forma geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação escrita.
Se o seu site tiver mais conteúdo textual, a escolha da fonte se tornará um dos elementos mais importantes na construção.
Vamos ver nesse tópico um pouco mais sobre fontes.
Vamos falar a respeito de duas grandes famílias de fontes muito utilizadas.
<br>
### Serifa ou Serif

<center>
<img src="https://miro.medium.com/max/1400/0*-uWtwelpKXp9I7iL.jpg" width="300" alt="Exemplo de fonte com Serifa">
</center>
A fonte com serifa é inspirada nas esculturas de mármore dos tempos antigos.<br> 
É difícil esculpir ângulos de 90 graus, então é por isso que a fonte serif tem curvatura tipo triângulo.<br> 
O tipo de letra com serifa faz você se sentir sério, autoritário e velho.<br> 
Serif <b>tem muitos subtipos</b> como estilo antigo, transicional e moderno.
Como as cores, as fontes também têm humores.<br> 
Hoje a fonte serif é vista como Tradicional, Estável e Respeitável.<br>
<b>VOGUE</b> é um dos melhores exemplos de uma font com serifa:
<center>
<img src="https://miro.medium.com/max/992/0*Zh3I3SE3fDCpCJLj.jpg" width= 300px; alt="exemplo de fonte vogue">
</center>

### Sem serifa ou Sans-Serif

<center>
<img src="https://miro.medium.com/max/1400/0*x2VokyWjI65_Zv6W.jpg" width="300" alt="Exemplo de fonte com Serifa">
</center>
Sans serif é Sensível, Simples e Direto. Sans serif tem ângulos retos perfeitos.
A maioria das startups tende a usar tipo de letra sem serifa.
Você pode usar sem serifa para o corpo do texto porque torna o texto mais legível!<br><br>

<center>
<b style="font-size: 20px">Tip-1</b> 💡
</center><br> 
Ao escolher fontes <b>não use mais que duas ou três fontes diferentes</b> no seu projeto.

<br><br>

<center>
<b style="font-size: 20px">Tip-2</b> 💡
</center><br>

<b>Evite usar essas fontes:</b> comic sans, kristen, curlz, viner e papyrus.
São difíceis de ler e são apenas para diversão.

Antes de decidir sobre uma família de fontes, passe pelo [cssfontstack](https://www.cssfontstack.com/) para saber quais fontes são seguras de usar.

---

# Interface do usuário (UI)

Depois de aprender sobre teoria das cores e tipografia, a próxima coisa que você precisa saber é sobre o design da interface do usuário.
A interface do usuário (UI) é o conjunto dos controles e canais sensoriais mediante as quais um usuário pode comunicar-se com uma máquina.
Uma boa interface do usuário deve ter um alto grau de usabilidade, ser amigável, intuitiva e te ajuda a criar um melhor relacionamento com seus clientes; Inclusive pode representar uma vantagem em termos de posicionamento ou SEO, pois incrementa o tempo de permanência do usuário.



##### Existem cinco fatores de UI:

1. Hierarquia
2. Layout
3. Alinhamento 
4. Espaços em Branco (Whitespaces) 
5. Público

Vamos entender esses fatores com exemplos:
<br>
###→ Hierarquia

Um exemplo rápido de hierarquia de texto:
![Exemplo de hierarquia de texto](https://miro.medium.com/max/1400/0*IL3jBxfQ4tNnAUZ5.png)

Aqui o principal é de quem é esse certificado e para o que resta é mais apropriado. Os usuários podem não ter tempo de ler todo o texto, para isso destacar as informações mais importantes primeiro hierarquicamente.

![Exemplo de hierarquia de cores](https://miro.medium.com/max/1400/0*5eqHtPRQXqd1I2pQ.png)

Veja os pontos destacados pelas caixas verdes. Essas são as coisas que a maioria das pessoas considera sobre um produto, certo? Então essa é uma hierarquia de cores. Use a cor de forma inteligente para destacar as coisas que precisam atrair os usuários.

![Exemplo de hierarquia de tamanho](https://miro.medium.com/max/1400/0*RuaY0q0wFJ3m8Fog.png)

Agora veja esta página de inscrição da Netflix. Aqui 1 > 2 > 3 de tamanho.<br> A primeira coisa que eles querem mostrar aos visitantes é sobre o que é a Netflix.<br> A segunda coisa preferida é que eles querem seu e-mail.<br> E a terceira coisa é pequena em comparação com as outras duas porque eles não consideram muito.

###→ Layout

O layout é sobre como você organiza os elementos do seu site.
Não seja tão sem graça colocando tudo no mesmo lugar que a Wikipedia; Separe os elementos em partes diferentes.
Se houver muito texto, corte cada linha para 60 caracteres.
![exemplo de layout](https://miro.medium.com/max/1400/0*_b3St7awC6KfgQP3.gif)

###→ Alinhamento

Alinhamento é sobre como você posiciona um elemento em relação a outros elementos.
Veja este exemplo:
![exemplo de alinhamento](https://miro.medium.com/max/1400/0*S8i32OEguEwlHS0O.gif)
Tem a diferença? Mesmo que ambos os sites tenham o mesmo conteúdo, apenas o alinhamento de diferentes elementos faz grande diferença.

###→ Espaços em branco

Espaços em branco ou whitespaces refere-se ao espaço em torno de elementos.
![exemplo de espaço em branco](https://miro.medium.com/max/1400/0*Hftlfb0gW3tu7cRI.gif)

###→ Público

Sim, o público é um fator de interface do usuário. Conheça o seu público-alvo, projete para o seu público.
Por exemplo, o tema para YouTube e YouTube kids é diferente.
![exemplo de audiência](https://miro.medium.com/max/1400/0*BAti0EUkcZ-rOsro.gif)

Todo o tema dos sites de jogos é completamente diferente de outros sites.
![sites de jogos](https://miro.medium.com/max/1400/0*vjvZ0VLVebEFTtei.gif)

---

# Experiência do usuário (UX)

Vamos para UX. Até agora tentávamos atrair usuários, agora precisamos impressionar o usuário.
Enquanto a interface do usuário atrai o usuário, a UX deixa o usuário confortável usando seu site.

Novamente, há cinco fatores que você precisa considerar em UX:

1. Simplicidade
2. Consistência
3. Padrões de leitura
4. Todo o design da plataforma
5. Padrões escuros

### → Simplicidade

Muito conteúdo no mesmo lugar traz dores de cabeça para os usuários, pois eles não conseguem entender onde procurar. Mantenha as coisas simples organizando e reduzindo o conteúdo. Simples é bonito. O site da Amazon tem UI e UX ruins (se você souber o motivo, comente abaixo), mas existem muitos sites de comércio eletrônico com designs simples.

### → Consistência

A consistência torna seu site fácil de entender e navegar, especialmente se seu site for usado por pessoas que não são da área de tecnologia, crianças ou idosos.

### → Padrões de Leitura

Os padrões de leitura referem-se a como um usuário visualiza seu site. Existem alguns layouts chamados Z-layout, F-layout etc., que podem ser usados ​​para projetar o layout de seus elementos.

### → F-Layout

No F-layout o conteúdo importante estará no lado esquerdo.
Veja este exemplo:
![exemplo de F-layout](https://miro.medium.com/max/1400/0*INYy2s9Aqx5wVT_H.jpg)

### → Z-Layout

##### Inclui:

1. Logo
2. Botão de inscrição ou similar
3. Algum texto
4. Botão de chamada para ação

![exemplo de Z-layout](https://miro.medium.com/max/1400/0*mhETQ_Q9t5aRa6Lz.jpg)

### Responsividade em todas as plataformas

No final das contas, você não cria apenas um site apenas para desktops, ele precisa ser responsivo entre diferentes dispositivos.

### Evite padrões escuros

Padrões escuros referem-se a ações que enganam o usuário em benefício da empresa. Você pode obter benefícios a curto prazo, mas falhará a longo prazo.

---

Portanto acredito que, se você seguir esses princípios, poderá criará um ótimo design no seus projetos.
<center>
<img src="https://i.pinimg.com/originals/df/39/2f/df392fb90619818047bf4f09e0adbc36.gif" width="350px">
</center>
Que outros princípios você considera importante e de extrema atenção na hora de construir um bom design para web?
Comenta aqui abaixo 👇