Princípios de Design para devs Frontend

Há alguns anos atrás, o que hoje chamamos de desenvolvimento front-end era chamado de Web Design, e era uma época em que nem se falava sobre conceitos que hoje são fundamentais, como responsividade, por exemplo. Mas a cada dia que passa, novas ferramentas, novos conceitos e até novas responsabilidades vão surgindo para o front-end.

Com isso tudo, o front está se tornando uma grande área, sendo até subdividida em Frontend Design e Frontend Engineering. Mas ainda que não tenha tanta afinidade com design, para quem trabalha ou se interessa por frontend, ter conhecimento sobre os fundamentos é muito importante.

Por isso, neste artigo vamos falar sobre os 4 princípios básicos do Design, e como aplicar eles no front.

Preciso mesmo ter noção de design?

O desenvolvimento de aplicações front-end é um processo de criação, que serve para ser a forma como os usuários irão interagir com um sistema. Por isso, é extremamente importante pensar em construir da melhor forma possível para que os usuários tenham uma ótima experiência.

E quando falamos de processo de criação, pensando nas funcionalidades e estética, além de outras questões, estamos falando de design! Então, por que não aprender conceitos que serão uma base para incrementar seus projetos?

Então, vamos agora apresentar os princípios, que são: Alinhamento, Contraste, Proximidade e Repetição.

Alinhamento

Para manter uma organização e facilitar a compreensão dos usuários, é necessário aplicarmos esse princípio. Os elementos (textos, imagens, formas, etc) que utilizamos precisam ter um alinhamento bem definido para que se entenda de que forma eles se relacionam.

Por exemplo, veja este site e me diga: por onde começamos?

Claro que este é um exemplo que dificilmente (assim eu espero) alguém vai pensar em reproduzir, mas serve para ilustrar a falta de organização devido ao não alinhamento.

Com a popularização dos layouts em grade, com linhas e colunas, é mais fácil aplicar este princípio. Mas até em pequenos elementos como botões, muitas vezes não há alinhamento. Nesses casos o querido Flexbox pode ajudar a centralizar os itens, mas mesmo usando o alinhamento no Flexbox corretamente, talvez ainda pode haver má alinhamento à pagina como um todo, por exemplo:

Perceba que há um alinhamento ao centro tanto dos textos, como das imagens, mas as margens da listagem de produtos não estão iguais.

Além disso, para longos textos é importante alinhá-los à esquerda para melhor legibilidade.

Contraste

Bem resumidamente, por contraste entenda: “fazer elementos se destacarem”. E podemos fazer isso através de cores, tamanhos, formas, espaço em branco, etc.

Se não aplicamos contraste, tudo fica muito “igual”, dificultando a leitura ou tornando desinteressante. E se o seu conteúdo for extenso ele vai se tornar chato, como um grande bloco de informação que ninguém vai querer ler. Já se o seu conteúdo for pouco e não utilizar contraste para dar destaque aos elementos, ele vai ficar menor ainda, pouco chamativo.

Veja um exemplo de falta de contraste em um site:

O site no geral até é bem construído e elegante, mas nessa parte deixaram a desejar. Talvez você consiga entender o que está escrito, mas há de concordar de é bem difícil de enxergar as informações. Neste caso precisaria aplicar cores para dar um contraste nos elementos.

É comum o contraste através das cores, mas como falamos acima, existem diversas formas de contrastar. Uma que não pode ser ignorada é o espaçamento, que também tem a ver com o próximo princípio, pois serve para dar um respiro e também destacar o que queremos.

Você pode até pesquisar mais sobre a teoria das cores, mas esse não é o nosso foco aqui. O que você deve ter em mente é: “o que precisa realmente de destaque?” Então, use as cores da identidade visual, aumente tamanhos, use negrito, coloque em uppercase, etc. Mas não abuse:

Se tentar contrastar tudo, então nada vai estar em destaque.

Proximidade

Analise essa imagem:

A imagem inteira é formada por pequenos círculos, mas perceba que devido à distância entre eles, parecem formar um quadrado e dois retângulos. E é exatamente disso que trata este princípio: aproximar elementos tornam eles parte de um mesmo conjunto. E aumentar a distância os fazem serem desagrupados mentalmente.

Dessa forma, até sites com grande carga de conteúdo podem ser “leves” aos olhos do usuário, com os devidos espaçamentos dando um respiro na interface. Mais uma vez, usar layouts em grade, com espaçamentos adequados, pode ser uma boa, pois já ajudam a dividir os elementos em seções e espaçar elas.

Repetição

Esse princípio nos ajuda a mantermos uma consistência visual, uma identidade. Para isso, deve-se repetir os princípios aprendidos aqui e também todos os elementos que fazer parte da identidade visual. Nós queremos ter uma consistência visual, que vai marcar os nossos usuários, certo?

Mais um exemplo:

Este site tenta aplicar as mesmas cores ao longo do layout, mas perceba que é inconsistente, sem falar de outros problemas.

Aqui a lista de coisas que podem ser repetidas é imensa, como cores, fontes, tamanhos, espaçamentos, sombras, formas, etc. Mas os Design Systems hoje em dia nos ajudam bastante com isso, pois eles já vêm com tudo isso padronizado até certo ponto. E também, o uso de componentes é essencial para complementar a repetição em nossa interface (sejam bibliotecas como React, Vue, Angular, etc., ou até mesmo os Web Components).

Extra: PageSpeed Insights

Apesar de não ser especificamente sobre design, para complementar esse artigo, vou apresentar uma excelente ferramenta para todos que trabalham com frontend, que é o PageSpeed Insights. Ao acessar o site, você vê apenas um input para colocar o link do site a ser analisado, então a ferramenta vai te dar realmente várias métricas sobre como o seu site está performando.

Além disso, ele apresenta algumas informações do que é possível fazer para resolver alguns problemas. Use o relatório gerado por ele como um guia do que deve melhorar no seu site.

Chegamos ao fim… será?

Como falei lá no início, neste artigo quis focar em princípios de design, e esses foram apenas princípios básicos. Então, claro que há muito mais a se considerar no desenvolvimento front-end, independentemente do foco que você deseje ter.

Espero ter te ajudado, até mais!