Como deixar meu site mais bonito como uma pessoa desenvolvedora?

Esse artigo é pra você pessoa desenvolvedora back-end ou front-end sem muito conhecimento de Design e que está interessada em tornar seus sites mais bonitos

Como deixar meu site mais bonito como uma pessoa desenvolvedora?

Antes de começar, é importante ressaltar que, um site “bonito” é bem relativo. E você ou eu achar um site bonito não é parâmetro de qualidade do mesmo. Existem diversos conceitos do Design que podem nos ajudar a construir interfaces mais acertivas com o nosso usuário. Não irei entrar em méritos específicos de UX nesse texto, irei focar no “I da questão” (entendeu, entendeu? hahah).

Mas se é relativo como você vai me ensinar a deixar mais bonito?

Isso é justamente porque estes conceitos que comentei vão nos ajudar a fazer nossas escolhas de cores, espaçamentos, elementos muito mais embasadas e com menos risco de atrapalhar o nosso usuário.

Dentro do Design existe, a muito tempo, uma discussão entre Funcional e Estético (Forma e Função). Existem projetos que são 100% funcionais e existem projetos que são 100% estéticos. Eles não estão errados por si só, mas se conseguirmos balancear ambos, podemos chegar em um resultado mais interessante.

Uma cadeira de madeira com 4 pernas e sem nenhum tipo de acolchoamento é funcional. Ainda sim elas não são recomendadas em ambientes em que estaremos sentados por muito tempo (como no trabalho, por exemplo).

Ao mesmo tempo que aquelas cadeiras gigantescas, caras e cheias de acolchoamento de escritório não estão fazendo muito mais do que uma cadeira um pouco mais simples e mais barata.

E isso nos leva ao próximo item: Contexto.

O contexto muda tudo

Não adianta você querer construir um site mega colorido pra uma agência de advocacia. Você pode estar seguindo todos os conceitos certos e fazendo o melhor design do mundo. Ele vai, no mínimo, causar uma estranheza nos clientes dessa agência. Isso porque, normalmente, o público-alvo de uma agência dessas envolve adultos buscando soluções para assuntos mais sérios.

Mas, o contexto também significa que você pode quebrar algumas dessas regras. Como o Nubank que, diferente de outros bancos, tem uma marca e uma presença de redes sociais muito mais comunicativa e informal do que um banco tradicional. Eles optaram por um visual mais colorido e usar muito da estética além só do funcional e no caso deles faz todo sentido com o público-alvo que eles querem alcançar.

Você não para de falar deles mas ainda não vi esses conceitos aí

Claro, claro. Vamos aos poucos. Primeiro irei falar das cores. Existem cores que combinam entre si e cores que não combinam entre si. Um texto verde em um fundo vermelho não combinam, você não só terá dificuldade de ler como também vai te causar confusão. Isso porque as duas cores tem muito contraste entre si, fazendo com que as duas fiquem competindo pela sua atenção. É como se tivesse dois carros de som passando na rua com o volume no máximo falando de coisas completamente diferentes.

Chamamos esse caso de Cores Complementares, elas são muito boas usadas lado a lado e não em conjunto. Abaixo temos um exemplo disso:

Dando Vida a sua página Web - Parte 3 2 Peço desculpas ao seu olho por essa imagem, mas é um bom exemplo

Você já deve ter ouvido o termo Call To Action (Chamado Para a Ação, ou CTA), geralmente usado em landing pages. Ele indica um elemento na página, como um botão, que chama atenção para uma ação do usuário. E esse é um caso muito bom de uso de cores complementares: se tiver muitas cores azuis no seu site e você usar um Call To Action laranja, ele provavelmente terá um contraste suficiente para, de fato, chamar atenção. Isso porque o laranja é uma cor complementar do azul.

Ah, gostei, mas… Como eu vou lembrar disso? E como eu sei qual a cor complementar do amarelo? Você não precisa ficar decorando e lembrando de cabeça, isso porque existem diversas ferramentas de cores para te ajudar. Uma delas é o Adobe Color que vai te mostrar uma Roda de Cores e você pode aplicar diversas regrinhas como a de Cores Complementares (sim, existem outras!).

Dando Vida a sua página Web - Parte 3 2 Você pode inclusive ver paletas de cores feitas por outras pessoas no Adobe Color

Nossa agora vou fazer um arco-íris no meu site!

Calma, não é pra tanto. O ideal é usar no máximo duas cores. Uso de muitas cores destoantes é bem complicado de balancear e de deixar bom e, como o objetivo aqui é simplificar, eu diria para parar em duas cores.

Existe outro ponto que é importante sobre cores. Elas não são simples como podem parecer. Nem todo verde é igual. Existem 3 coisas que constroem uma cor no padrão RGB (que é o padrão de monitores, tvs e outras telas a base de luz): Hue ou Matiz, Satuaration ou Saturação e Lightness ou Luminosidade (podendo vir como Brightness ou Brilho). A sigla seria HSL (ou HSB).

Lembre-se desse nome HSL, porque, no CSS você pode definir cores por ele:

  .BotaoBonito {
    background: hsl(145, 25%, 52%);
  }
  • A Matiz (ou hue) define qual a cor em si. No CSS ele vai de 0 a 360, sendo 0 o vermelho, 120 o verde e 240 o azul (os valores intermediários são misturas entre as duas cores mais próximas; 60 seria o amarelo, uma mistura de verde com vermelho).
  • Já a Saturação define a intensidade da cor escolhida. 100% seria a Matiz escolhida em seu máximo e 0% seria o correspondente a esse Matiz em cinza.
  • Por fim, Luminosidade. Ela define o quão claro ou escuro será a cor. 100% de luminosidade é o branco e 0% é preto (independente dos valores escolhidos nos outros pontos do HSL).

Você não precisa aprender a fundo e começar a usar HSL daqui pra frente, mas ele pode te ajudar a ajustar a cor que já tenha sido escolhida.

Lembra que eu falei que texto verde em fundo vermelho não funciona? Então, de novo, depende. Um verde mais claro no texto e um fundo vermelho mais escuro com menos intensidade (ou seja, verde com Luminosidade alta mas Saturação um pouco mais baixa e vermelho com Saturação um pouco mais alta e Luminosidade um pouco mais baixa) podem sim funcionar.

Dando Vida a sua página Web - Parte 3 2 Mexendo na grossura dos textos e das formas ajuda a suavizar a leitura também

Eu disse “saturação mais alta” mas você pode ter percebido que esse vermelho está bem menos vivo que o vermelho da imagem anterior. Isso porque aquele vermelho estava com a saturação no máximo e o ideal é não chegar nesse nível em nenhum dos 3 itens do HSL.

Isso acontece porque não é natural para a gente ver cores tão intensas no dia a dia (tanto na natureza quanto nos produtos que consumimos), e cores muito vibrantes podem fazer seu site causar estranheza no usuário (como aquela imagem causou).

Isso vale também para o preto, é ainda mais difícil ver um preto 100% fora de telas: quando for usa-lo prefira trocar por um cinza escuro. O cinza terá o mesmo efeito causando menos conflito no olho.

Dando Vida a sua página Web - Parte 3 2 Perceba que o texto auxiliar está em um tom ainda mais claro de cinza por ter menos destaque

Experimente mudar um pouco esses valores de HSL da próxima vez que estiver brincando com uma interface. E para escolher cores para o seu projeto eu recomendo o Coolors.

Agora ficou lindo meu site, já posso entregar!

Na verdade… Ainda não. Quero falar um pouco sobre a organização da informação em si.

Esse conceito diz que você precisa deixar claro suas informações e a hierarquia entre elas. Num jornal você sempre vai ver um texto comprido mas com a fonte pequena (texto da matéria), mas o título será curto com fonte grande e em destaque.

E isso é importante: você destacar do jeito certo as coisas certas. O título e texto com tamanhos de fontes inversos não funcionariam e provavelmente você se cansaria de ler mais rápido.

E não existe só um jeito de destacar, não é só colocar uma informação gigante em tela.

Lembra que eu falei das cores complementares? Um CTA que se utilize da combinação certa de cores não precisa ser gigante para estar destacado e chamar a devida atenção.

Dando Vida a sua página Web - Parte 3 2 As cores sozinhas não fazem milagres, mas são uma boa base

Algumas estratégias de destaque estão nas cores, nos efeitos (como borda, sombra, etc), no tamanho e no formato. Você pode combinar elas ou não. Quanto mais estratégias de destaque um único elemento tiver, mais atenção ele vai chamar.

Mas perceba que se colocar demais, ele vai começar a causar o efeito contrário e chamar tanta atenção que começa a incomodar ou ofuscar elementos em volta.

Dando Vida a sua página Web - Parte 3 2 Tá um pouco exagerado o primeiro exemplo, mas é só pra demonstrar as possibilidades de destaque (que não se resumem apenas a textos)

Um ponto interessante levantado pelo Steve Schoger do Refactoring UI é: sua interface não precisa ser uma representação precisa do banco de dados. Isso significa que você não precisa escrever todas as informação com um label atrelado. Por exemplo, o texto “R$ 750,00” não precisa vir com a informação “preço” ao lado, porque a própria informação já diz isso.

Dando Vida a sua página Web - Parte 3 2 Acaba sendo bem menos texto para se ler e mais rápido de captar as informações

Tá, já sei usar as cores e já sei organizar as informações, o que mais?

Existe um negócio em Design chamado Gestalt, é um conjunto de leis criados a partir de como nosso cérebro interpreta elementos que estão juntos ou separados. Você pode pesquisar mais a fundo se quiser (pois é bem mais extenso).

Nesse momento irei falar sobre 4 dessas leis: A Lei da Proximidade, a Lei da Semelhança e da Segregação e a Lei da Continuidade.

  • Lei da Proximidade: Tendemos a entender como um grupo único coisas que estejam muito próximas entre si. Um texto grande perto de um texto mais extenso e pequeno pode ser entendido como um título e subtítulo de um mesmo post, mas se aumentarmos demais o espaço entre eles, será menos óbvia essa relação.
  • Lei da Semelhança e da Segregação: São duas leis distintas, mas opostas. Semelhança basicamente se refere a entendermos como iguais os elementos que tenham formas, cores e outras características parecidas como pertencentes a um mesmo grupo. Enquanto a Segregação se refere a entendermos como diferente se tiver um elemento que destoe muito dos demais em volta (lembra do CTA? Olha ele de novo aqui).
  • Lei da Continuidade: Ela é um ponto além da Lei da Proximidade, pois, se alguns elementos estiverem não só próximos como mantenham um fluxo entre si, nós tendemos a seguir esse fluxo. E é muito útil na hora de realizar a navegação do usuário em tela ou entre telas.

Dando Vida a sua página Web - Parte 3 2 Esse recurso é muito usado nas tabelas de precificação de um serviço, em que uma das opções recebe uma estilização a mais para destaque

E por fim um outro ponto que acredito ser importante é o espaço em branco. É muito importante que suas interfaces tenham espaços de respiro sem conteúdo entre os elementos para não cansar o usuário que estiver navegando.

Isso inclusive vai de encontro a lei da proximidade. Se você agrupar elementos que pertençam a um mesmo grupo e os distanciar de outro grupo de elementos, naturalmente os entenderemos como coisas distintas.

Isso é tudo pessoal

Espero que esse texto tenha conseguido dar uma base para que você possa melhorar suas próximas interfaces em que não tiver acesso a um designer de interfaces no projeto.

Existe muito mais para aprofundar mesmo dentro dos conceitos que falei nessa postagem e se tiver interesse recomendo que busque essas informações.

Posts Recomendados em seguida