9 regras de design simples para deixar seu site mais bonito

"Eu sou nojento em design."

Eu j√° ouvi isso muitas vezes antes.

Conhe√ßo muitas pessoas que administram sites e criam um √≥timo conte√ļdo, mas insistem que n√£o gostam de design.

Absurdo!

Acho que qualquer um pode dar uma olhada no design, mas se precisar de uma ajudinha, este post é para você.

Neste tutorial, você encontrará 9 Princípios básicos de design que você pode aplicar a tudo o que faz.

Escrevi essas dicas para torn√°-las o mais acion√°veis ‚Äč‚Äčposs√≠vel, para que sejam f√°ceis de implementar em seu site.

Consulte esta lista sempre que precisar fazer uma escolha de design e prometo que o resultado ser√° um pouco mais bonito.

Vamos come√ßar com …

1. Nunca use texto colorido

A menos que você saiba o que está fazendo, o texto colorido tende a ser feio e difícil de ler.

Como uma regra de ouro, sempre faça seu texto em preto ou branco.

Se você tiver um texto colorido no seu site, opte por fazê-lo.

√Č isso que eu quero dizer.

Exemplo 1

Este bot√£o possui texto azul e fundo cinza claro. Parece um pouco plano e o texto sobrecarrega a forma do bot√£o:

Se eu inverter as cores usando azul para o fundo e o texto claro, ficar√° muito melhor:

E enquanto falamos de bot√Ķes …

Se o bot√£o tiver um plano de fundo colorido, ele quase sempre ficar√° melhor com texto em branco.

O texto em preto tende a parecer horrível em cima da cor, a menos que essa cor seja realmente pálida ou apenas um cinza mais claro:

Se você normalmente usa texto colorido em suas postagens, apreciará as idéias no exemplo a seguir.

Exemplo # 2

Como outro exemplo, você pode ter texto colorido em uma postagem porque deseja que ela se destaque, assim:

Este texto não parece muito bom porque é azul!

Existem maneiras mais esteticamente agrad√°veis ‚Äč‚Äčde chamar a aten√ß√£o com as cores. Sem mencionar que certas cores (como azul) fazem o texto simples parecer um link.

Outra abordagem para chamar a atenção para a cor é tornar o texto branco e o fundo azul:

Isso é muita cor, então use com moderação!

Ou você pode reduzir a saturação para que o plano de fundo fique muito pálido e deixar o texto em preto para uma aparência mais sutil:

O texto em preto fica bem em fundos claros.

Ou você pode deixar o texto em preto e adicionar um toque de cor ao redor do texto:

Esse é um aspecto mais simples que ainda se destaca.

Ou você pode combinar um plano de fundo e uma borda:

Essa é outra maneira atraente de usar cores.

Para resumir as regras no texto colorido:

Você deve usar um plano de fundo colorido ou borda colorida ao redor do texto, em vez de alterar a cor do texto. Além disso, o branco sempre fica melhor em fundos coloridos, a menos que a cor seja muito pálida.

Agora vamos escolher as cores que você usará.

widgets

2. Use uma paleta de cores

Escolher cores em movimento é um enorme erro de novato.

Sempre que você aplica cores ao seu site, deve sempre escolha uma cor da sua paleta.

Usando uma paleta, você pode simplesmente selecionar as cores existentes e saber que o resultado ficará bom e "na marca" sem nenhum esforço.

E aqui est√° a coisa …

Sou web designer h√° anos e ainda tenho dificuldade em criar boas paletas de cores.

E é por isso que eu trapaceio

Eu nunca crio minhas próprias paletas de cores. Em vez disso, encontro uma bela paleta de cores que já foi feita e, em seguida, retoco-a para atender às minhas necessidades de design.

Meu recurso secreto para encontrar paletas de cores é o Color Hunt.

Color Hunt

Este site incrível tem uma comunidade de membros que criam e compartilham paletas de cores que eles projetam.

Se você navegar na página inicial, encontrará uma lista interminável de belas paletas para escolher. Ao clicar em qualquer paleta, você será levado à página em que as paletas relacionadas estão listadas abaixo.

P√°gina da paleta

Honestamente, é muito divertido navegar pelas paletas e obter idéias e inspiração para o seu site.

Se você já tem um tom em mente, pode escolher uma cor para começar a usar a barra de pesquisa.

Pesquisa de cores

Palavras-chave predefinidas como "quente" e "frio" também estão disponíveis para encontrar paletas adequadas.

Depois de selecionar uma paleta que você gosta e implementar as cores no seu site, você ficará surpreso com a enorme diferença que ela faz.

Essas duas primeiras dicas devem induzir seus visitantes a pensar que você é um mestre no design de manipulação de cores.

Agora vamos falar sobre as fontes!

3. Usarem apenas 1 ou 2 fontes

As cores devem ser selecionadas na sua paleta. As fontes s√£o semelhantes.

Você deve selecionar uma ou duas fontes e depois reutilizá-las para tudo.

Muitas vezes, quando os usu√°rios do WordPress aprendem a alterar as fontes em seu site, de repente querem us√°-los todos!

Por exemplo, vi pessoas mudarem a fonte de um parágrafo para destacá-lo em uma postagem. Essa é uma péssima ideia. Se você precisar de texto para se destacar em uma postagem, poderá:

  • Aumentar o peso da fonte (negrito)
  • Aumentar o tamanho da fonte
  • Adicionar cor
  • Quando se trata de fontes, voc√™ deve escolha um ou dois para todo o siteE se voc√™ acha que precisa de mais do que isso, considere isso …

    O Google projetou a fonte Roboto (que você também pode usar, está no Google Fonts) e eles usam essa fonte.

    Eles o usam no Google.com, Youtube, Gmail, Google Docs, Chrome, literalmente todos os seus produtos usam essa fonte para todo o texto.

    Portanto, se você está convencido de que precisa de mais de uma fonte para um site bonito, pense novamente!

    4. Use uma fonte popular sem serifa

    Eu tenho outro atalho para você.

    Em vez de explorar centenas de fontes, recomendo que você escolha entre as fontes de maior sucesso na Web.

    Essa abordagem basicamente garante que seu site tenha uma boa aparência.

    Para fazer isso, visite o Google Fonts e você encontrará as fontes de tendências listadas na página inicial.

    Fontes do Google

    Para refinar os resultados, clique no menu suspenso e desmarque todas as op√ß√Ķes, exceto.

    Categorias de fontes

    Se você escolher qualquer uma das fontes listadas agora, seu site ficará incrível.

    Observe que a maior parte do texto do seu site aparece nas suas postagens e, portanto, a qualidade da fonte mais importante é que é fácil de ler.

    Todas as fontes sem serifa mais populares s√£o populares porque s√£o leg√≠veis e atraentes. E caso voc√™ esteja se perguntando …

    √Č isso que eu tamb√©m fa√ßo!

    Ao criar novos temas, geralmente vou ao Google Fonts e procuro inspiração em fontes de tendências.

    Quando quero adicionar um pouco mais de personagem ao design, uso esta próxima tática.

    5. Use uma fonte de tela para títulos

    Se você estiver satisfeito com uma fonte, poderá pular esta tática.

    Mas se voc√™ acha que sua criatividade √© um pouco prejudicada por uma sele√ß√£o t√£o simples, aqui est√° o que voc√™ pode fazer …

    Use uma fonte de exibição para os títulos do site.

    A primeira fonte que você selecionou foi projetada para ser lida em tamanhos pequenos, mas uma fonte foi projetada especificamente para tamanhos grandes (como telas grandes, você entende?).

    O problema é que as fontes de tela geralmente são muito elegantes, portanto, usá-las em excesso pode fazer com que seu site pareça atraente.

    Os cabeçalhos são o local perfeito para usar fontes de exibição porque:

  • Eles s√£o sempre √≥timos
  • Usado com modera√ß√£o
  • Se desejar, voc√™ tamb√©m pode reutilizar a fonte de exibi√ß√£o para o t√≠tulo (ou logotipo) do site.

    Para encontrar uma fonte de exibição para o seu site, visite Fontes do Google novamente, mas desta vez, altere as categorias para incluir apenas fontes de exibição, como esta:

    Fontes de tela selecionadas

    Você verá imediatamente as fontes de tendências mais variadas com as fontes de exibição.

    Fontes de tela

    A partir de agora, existem cerca de 300 fontes de tela no Google Fonts, ent√£o divirta-se navegando e lembre-se de escolher apenas uma.

    Aqui est√° outra dica de design baseada em texto que tornar√° seu site mais bonito.

    6. Tornar itens do menu uma palavra

    De todas as dicas de design listadas nesta postagem, essa é a mais fácil de implementar.

    Dê uma olhada no menu Competir Temas:

    Captura de tela do menu Competir Temas

    Os itens do menu são proporcionais e uniformemente espaçados, o que faz com que pareça bom.

    Ao criar seu menu, você deve transforme cada item de menu em uma palavra. A razão se resume ao espaço.

    Por exemplo, veja como os itens de menu estão espaçados no The New York Times.

    Menu Nyt realçado

    √Č f√°cil navegar pelos t√≥picos e distinguir cada um deles.

    Quando você adiciona mais palavras a um item de menu, interrompe esse espaço. O item de menu fica muito mais longo que os outros e os espaços entre as palavras criam uma lacuna no design.

    Na captura de tela a seguir, adicionei itens de menu falsos ao menu do NYT com v√°rias palavras. Veja como o menu fica confuso:

    Menu Nyt EditadoOs espaços nos itens de menu são difíceis de distinguir dos espaços entre os itens de menu.

    Embora os itens de menu com uma palavra funcionem melhor, é bom usar ocasionalmente uma segunda palavra, se necessário. Apenas verifique se há muito mais espaço entre os itens de menu do que entre palavras nos itens de menu.

    O Wistia usa duas palavras nos itens de menu e parece bom porque há muito espaço entre os itens de menu:

    Menu Wistia

    Encurtar qualquer item longo do menu levar√° apenas alguns minutos e tornar√° seu site imediatamente mais atraente.

    Caso não saiba, você pode diferenciar os rótulos dos itens de menu dos títulos das páginas. Este vídeo ensinará como criar menus personalizados e alterar os rótulos dos menus:

    As dicas a seguir ajudar√£o voc√™ a tornar seu conte√ļdo mais atraente.

    7. Equilibrar texto com mídia

    Se voc√™ deseja que seu site seja incr√≠vel, o conte√ļdo em si deve ser bonito.

    Estude o conte√ļdo de sites populares como Buzzfeed, Washington Post ou Bloomberg Businessweek e voc√™ encontrar√° os mesmos padr√Ķes.

    Eles dividem constantemente o texto com imagens, mapas, v√≠deos, cita√ß√Ķes, tweets e outros recursos visuais.

    BuzzfeedEsta lista do Buzzfeed inclui imagens, bot√Ķes de compartilhamento, links e t√≠tulos ap√≥s quase todos os par√°grafos.

    Eu ligo para ele A regra de 4 par√°grafos.

    Ao editar suas postagens, verifique se inclua um elemento visual em cada 4 par√°grafos.

    O objetivo √© manter o conte√ļdo visualmente interessante para que n√£o fique mon√≥tono e chato √† medida que os leitores passam de um par√°grafo para outro. Os recursos visuais tamb√©m tornam o conte√ļdo mais informativo e divertido de ler.

    Com a prática, você aprenderá a fazer isso naturalmente enquanto digita, mas sempre pode folhear sua postagem depois de fazer isso e encontrar lugares para incluir novas imagens.

    Para dividir uma longa série de parágrafos, você pode adicionar:

  • Imagens
  • Cita√ß√Ķes em bloco
  • V√≠deos
  • Tweets incorporados
  • An√ļncios
  • Tabelas
  • Novos t√≠tulos
  • Listas ūüėČ
  • Tamb√©m √© uma boa ideia aplicar negrito em partes importantes do seu texto para obter aten√ß√£o e criar mais interesse visual.

    E s√≥ para ficar claro: voc√™ n√£o precisa incluir um elemento visual a cada quatro par√°grafos. √Č uma boa aproxima√ß√£o para usar ao dominar esta t√©cnica.

    Como acabei de lhe dizer para incluir muitas imagens em suas postagens, aqui está uma dica para fazê-lo da maneira certa.

    8. Imagens de alinhamento central

    As imagens no WordPress podem ter um dos seguintes alinhamentos:

    Ao adicionar imagens às suas postagens, você deve use sempre o alinhamento central.

    Al√©m disso, verifique se a imagem √© t√£o larga quanto o conte√ļdo da postagem.

    √Č assim que vejo todas as minhas imagens em minhas postagens e a maioria dos editores tamb√©m faz o mesmo.

    Se você escolher um alinhamento à esquerda ou à direita, a imagem "flutua" para o lado, de modo que o texto envolva-o, da seguinte forma:

    Imagem flutuante"Flutuar" é o nome da propriedade CSS usada para quebrar o texto em torno de imagens como esta.

    A √ļltima linha de texto que est√° quase completamente embaixo da imagem sempre parece estranha, mas h√° outra raz√£o pela qual esse n√£o √© mais um estilo popular.

    Pode parecer terrível no celular:

    Imagem móvel ruim

    Os blogueiros costumavam flutuar imagens em suas postagens assim, mas era nessa época que os sites tinham uma largura predefinida e eram visíveis apenas nos computadores.

    Agora, seu conte√ļdo precisa se adaptar aos tamanhos de tela de 400px a 2, 560 px de largura.

    Você provavelmente já selecionou um tema responsivo, mas seu tema não impedirá que você publique imagens flutuantes porque é sua escolha.

    Quero dizer, alinhe todas as suas imagens ao centro e elas ficarão ótimas em todos os dispositivos. Simples assim.

    Se você quiser um pouco mais de variedade, poderá usar o novo estilo de imagem ampla adicionado em Gutenberg (requer suporte a temas):

    Imagem ampla

    Tenho uma √ļltima dica para deixar suas imagens e outras m√≠dias excelentes.

    9. Coloque sua mídia em colunas

    Isso é algo que vejo em muitos sites dos usuários para meus temas.

    Ao adicionar vários elementos multimídia (imagens, áudio, vídeos), eles serão empilhados um após o outro.

    Isso funciona bem, mas não é o melhor uso do espaço. Os usuários precisam rolar muito longe para passar as imagens; eles podem ver apenas uma imagem de cada vez e não sabem quantas imagens restam quando rolam.

    Se você estiver inserindo três ou mais imagens seguidas, use uma galeria.

    Ao usar uma galeria, você pode visualizar todas as imagens de uma só vez sem rolar.

    Galeria

    E eu sei o que voc√™ est√° pensando agora …

    "Isso é bom, mas quero que as imagens sejam maiores que isso".

    √Č para isso que serve. Voc√™ pode instalar um plug-in lightbox como este e, em seguida, os visitantes podem clicar em uma imagem na galeria para ver uma vers√£o maior em tela cheia.

    Gravação de tela 2019 12 17 em 01.58 PM

    Agora, em vez de rolar por todas as imagens, os visitantes podem vê-las todas de uma vez em um atraente layout de galeria. Além disso, quando eles clicam em uma imagem, a mesa de luz exibe a imagem maior do que se tivesse sido inserida na postagem.

    Em outras palavras, o uso de uma galeria oferece o melhor dos dois mundos.

    O bloco Galeria facilita a inclus√£o de galerias de imagens e voc√™ pode usar o bloco Coluna para listar colunas de √°udio e v√≠deo incorporados (e qualquer outro tipo de conte√ļdo).

    Agora, o bloco de colunas √© ainda mais f√°cil de usar no WP 5.3, e voc√™ pode seguir este guia sobre como adicionar colunas a postagens para obter instru√ß√Ķes passo a passo.

    Sempre que você encontrar uma longa lista de mídias incorporadas em sua postagem, sabe que é o momento perfeito para usar colunas.

    Crie um site melhor

    Com estas 9 regras de design, você está pronto para criar um site mais bonito.

    A melhor parte é que não demora muito para implementar qualquer um desses princípios. Simplesmente saber o que fazer é metade da batalha.

    Se voc√™ deseja come√ßar com o p√© direito, escolha um tema que fa√ßa com que seu conte√ļdo pare√ßa √≥timo e esteja no caminho de melhorar a est√©tica.