Módulo 4: Design essencial pra sites

Um site limpo, com espaço para respirar, parece muito mais profissional do que um cheio de elementos. Na dúvida, tire em vez de colocar.

Deixe os elementos alinhados entre si, seguindo linhas invisíveis na página. Quando tudo está alinhado, o site passa organização na hora. Elementos tortos chamam atenção pelo motivo errado.

É a diferença entre os elementos que faz cada um se destacar: texto escuro em fundo claro, um botão numa cor que salta, um título bem maior que o corpo. Sem contraste, tudo se mistura e nada chama atenção.

É o espaço que você deixa em volta e entre os elementos. Dar respiro deixa o site leve e elegante. Quando tudo fica apertado, a página parece confusa e cansa na leitura.

Repita os mesmos estilos pelo site inteiro: as mesmas cores, as mesmas fontes, o mesmo estilo de botão. Essa repetição cria identidade e faz tudo parecer da mesma família.

É a relação de tamanho entre os elementos. O que é mais importante aparece maior, o que é secundário aparece menor. Proporções equilibradas deixam o layout harmônico e agradável de olhar.

Bonito é importante, mas o site também precisa funcionar. A pessoa tem que achar o que procura, entender para onde clicar e navegar sem esforço. Um bom design ajuda o visitante a chegar onde quer.

É a ordem em que a pessoa enxerga as coisas na página. Organize os elementos por importância, do título principal ao detalhe, para guiar o olhar e mostrar o que ela deve ver primeiro.

Os melhores lugares para garimpar referências:

Junte de três a cinco referências e tire de cada uma o que funciona: de uma o layout, de outra as cores, de outra a forma de escrever. O resultado vira algo seu.

O caminho mais simples é escolher uma cor principal, uma cor de destaque para botões e chamadas, e tons de cinza para textos e fundos. Com essas três frentes você monta um site inteiro.

Cada cor carrega uma sensação, e isso ajuda a escolher pelo nicho do cliente:

Use no máximo duas fontes no site: uma para os títulos e outra para os textos. Mais que isso costuma deixar tudo bagunçado.

O segredo está em dar funções diferentes para cada fonte:

É organizar os elementos por importância: o título principal grande, os subtítulos médios, o texto comum menor. Assim a pessoa entende a página num relance.

O espaço vazio em volta dos elementos não é desperdício, é o que dá respiro e elegância. Sites profissionais usam bastante espaço de propósito.

Use imagens grandes o suficiente para ficarem nítidas, mas otimizadas para não pesarem. Imagem pesada deixa o site lento, e site lento perde visitante.

Use estes tamanhos como referência, eles funcionam bem na maioria dos sites:

Cada formato tem a sua função. Escolher o certo deixa a imagem bonita e leve:

Os banners que você mais vai montar nos sites:

Aqui não tem certo ou errado, é escolha de efeito. Você decide quanta tela o seu banner principal ocupa:

O ícone traduz uma ideia numa imagem rápida. Ele quebra o visual, dá ritmo à página e evita que tudo vire um bloco de texto cansativo.

Pense no Instagram: o coração de curtir, o balãozinho de comentar, o avião de enviar. Se cada um deles fosse uma palavra escrita, a tela ficaria bagunçada e pesada. O ícone resolve isso num símbolo que todo mundo entende na hora.

Existem vários estilos, e cada um passa uma sensação diferente:

Minhas bibliotecas gratuitas favoritas para garimpar ícones:

Depois de escolher um estilo, siga com ele no site inteiro. Misturar um ícone contornado, um preenchido e um colorido deixa tudo desalinhado. Se começou com os ícones de traço fino do Tabler, continue só com eles do início ao fim.