Se voc\u00ea tiver texto colorido em seu site, deve optar por usar cores pr\u00f3ximas.<\/p>\n
Aqui est\u00e1 o que quero dizer.<\/p>\n
Exemplo 1<\/h3>\n
Este bot\u00e3o tem texto azul e um fundo cinza claro. Parece meio plano e o texto ultrapassa a forma do bot\u00e3o:<\/p>\n
Se eu inverter as cores usando o azul para o fundo e o texto claro, fica muito melhor:<\/p>\n
E enquanto falamos de bot\u00f5es …<\/p>\n
Se o bot\u00e3o tiver um fundo colorido, quase sempre ficar\u00e1 melhor com texto branco.<\/p>\n
O texto em preto tende a ficar horr\u00edvel em cima da cor, a menos que a cor seja realmente p\u00e1lida ou apenas um cinza mais claro:<\/p>\n
Se voc\u00ea costuma usar texto colorido em suas postagens, apreciar\u00e1 as ideias do pr\u00f3ximo exemplo.<\/p>\n
Exemplo # 2<\/h3>\n
Como outro exemplo, voc\u00ea pode ter algum texto colorido em uma postagem porque deseja que ele se destaque, como este:<\/p>\n
Este texto n\u00e3o parece bom porque \u00e9 azul!<\/p>\n
Existem maneiras esteticamente mais agrad\u00e1veis \u200b\u200bde chamar a aten\u00e7\u00e3o com as cores. Sem mencionar que certas cores (como o azul) fazem com que o texto simples pare\u00e7a um link.<\/p>\n
Outra abordagem para chamar a aten\u00e7\u00e3o com cores \u00e9 tornar o texto branco e o fundo azul:<\/p>\n
\u00c9 muita cor, ent\u00e3o use com modera\u00e7\u00e3o!<\/p>\n
Ou voc\u00ea pode diminuir a satura\u00e7\u00e3o para que o fundo fique muito claro e, em seguida, tornar o texto preto para uma apar\u00eancia mais sutil:<\/p>\n
O texto em preto fica bem em fundos claros.<\/p>\n
Ou voc\u00ea pode deixar o texto em preto e adicionar um toque de cor como uma borda ao redor do texto:<\/p>\n
Este \u00e9 um visual mais simples que ainda chama a aten\u00e7\u00e3o.<\/p>\n
Ou voc\u00ea pode combinar um fundo e uma borda:<\/p>\n
Esta \u00e9 outra forma atraente de usar cores.<\/p>\n
Para resumir as regras sobre texto colorido:<\/p>\n
Voc\u00ea deve usar um fundo colorido ou uma borda colorida ao redor do texto em vez de alterar a cor do texto. Al\u00e9m disso, o branco sempre fica melhor em fundos coloridos, a menos que a cor seja muito clara.<\/p>\n
Agora vamos escolher as cores que voc\u00ea usar\u00e1.<\/p>\n
S\u00f3 para voc\u00ea saber, eu tive que escrever um pouco de CSS para adicionar bordas aos par\u00e1grafos acima. Gutenberg ainda n\u00e3o tem uma op\u00e7\u00e3o de fronteira. Voc\u00ea pode adicionar bordas j\u00e1 com widgets Elementor<\/a>.<\/p>\n Escolher as cores na hora \u00e9 um grande erro de novato.<\/p>\n Sempre que voc\u00ea aplicar cores ao seu site, voc\u00ea deve sempre escolher uma cor de sua paleta<\/strong>.<\/p>\n Usando uma paleta, voc\u00ea pode simplesmente selecionar a partir de suas cores existentes e voc\u00ea sabe que o resultado ficar\u00e1 bonito e "na marca" sem nenhum esfor\u00e7o.<\/p>\n E aqui est\u00e1 a coisa …<\/p>\n Sou web designer h\u00e1 anos e ainda me esfor\u00e7o para criar belas paletas de cores.<\/p>\n E \u00e9 por isso que eu trapaceio \ud83d\ude09<\/p>\n Nunca crio minhas pr\u00f3prias paletas de cores. Em vez disso, encontro uma paleta de cores linda que j\u00e1 foi feita e a ajusto para atender \u00e0s minhas necessidades de design.<\/p>\n Meu recurso secreto para encontrar paletas de cores<\/a> \u00e9 Color Hunt<\/a>.<\/p>\n Este incr\u00edvel site tem uma comunidade de membros que criam e compartilham as paletas de cores que projetam.<\/p>\n Se voc\u00ea navegar na p\u00e1gina inicial, encontrar\u00e1 uma lista intermin\u00e1vel de belas paletas para escolher. Clicar em qualquer paleta o levar\u00e1 para sua p\u00e1gina, onde as paletas relacionadas est\u00e3o listadas abaixo.<\/p>\n Honestamente, \u00e9 muito divertido navegar pelas paletas e obter ideias e inspira\u00e7\u00e3o para o seu site.<\/p>\n Se voc\u00ea j\u00e1 tem um tom em mente, pode escolher uma cor para come\u00e7ar usando a barra de pesquisa.<\/p>\n Existem tamb\u00e9m palavras-chave predefinidas dispon\u00edveis como “quente" e “frio” para encontrar paletas adequadas.<\/p>\n Depois de selecionar uma paleta de que goste e implementar as cores em seu site, voc\u00ea ficar\u00e1 surpreso com a diferen\u00e7a que faz.<\/p>\n Essas duas primeiras dicas devem fazer com que seus visitantes pensem que voc\u00ea \u00e9 um mestre em design de cores.<\/p>\n Agora vamos falar sobre fontes!<\/p>\n As cores devem ser selecionadas em sua paleta. As fontes s\u00e3o semelhantes.<\/p>\n Voc\u00ea deve selecionar uma ou duas fontes e reutiliz\u00e1-las para tudo.<\/p>\n Muitas vezes, quando os usu\u00e1rios do WordPress aprendem como alterar as fontes em seus sites, eles de repente querem usar todas elas!<\/p>\n Por exemplo, j\u00e1 vi pessoas alterarem a fonte de um par\u00e1grafo para destac\u00e1-lo em uma postagem. \u00c9 uma m\u00e1 ideia. Se precisar de texto para se destacar em uma postagem, voc\u00ea pode:<\/p>\n Quando se trata de fontes, voc\u00ea deve escolher uma ou duas para todo o seu site<\/strong> e, se achar que precisa de mais do que isso, considere o seguinte …<\/p>\n O Google projetou a fonte Roboto (que voc\u00ea tamb\u00e9m pode usar – est\u00e1 no Google Fonts<\/a> ), e eles usam essa fonte em todos os lugares.<\/p>\n Eles a usam para Google.com, Youtube, Gmail, Google Docs, Chrome – literalmente, todos os seus produtos usam essa fonte para todo o texto.<\/p>\n Portanto, se voc\u00ea est\u00e1 convencido de que precisa de mais de uma fonte para um belo site, pense novamente!<\/p>\n Eu tenho outro atalho para voc\u00ea.<\/p>\n Em vez de navegar por centenas de fontes, recomendo que voc\u00ea escolha uma das fontes de maior sucesso na web.<\/p>\n Essa abordagem basicamente garante que seu site ter\u00e1 uma boa apar\u00eancia.<\/p>\n Para fazer isso, visite Google Fonts<\/a> e voc\u00ea encontrar\u00e1 as fontes de tend\u00eancia listadas na p\u00e1gina inicial.<\/p>\n Para refinar os resultados, clique no menu suspenso Categorias e desmarque todas as op\u00e7\u00f5es, exceto Sans Serif.<\/p>\n Se voc\u00ea escolher qualquer uma das fontes listadas agora, seu site ficar\u00e1 incr\u00edvel.<\/p>\n Lembre-se de que a maior parte do texto do seu site aparece nas suas postagens e, portanto, a qualidade mais importante da fonte<\/strong> \u00e9 que ela \u00e9 f\u00e1cil de ler.<\/p>\n Todas as fontes sans serif mais populares s\u00e3o populares porque s\u00e3o leg\u00edveis e atraentes. E caso voc\u00ea esteja se perguntando …<\/p>\n Isso \u00e9 o que eu tamb\u00e9m fa\u00e7o!<\/strong><\/p>\n Ao projetar novos temas, geralmente vou ao Google Fonts e procuro as fontes de tend\u00eancias em busca de inspira\u00e7\u00e3o.<\/p>\n Quando quero adicionar um pouco mais de car\u00e1ter ao design, uso a pr\u00f3xima t\u00e1tica.<\/p>\n Este site tamb\u00e9m usa uma fonte sans serif popular chamada Proxima Nova, que est\u00e1 dispon\u00edvel com o Adobe Typekit.<\/p>\n Se voc\u00ea estiver satisfeito com uma fonte, pode pular essa t\u00e1tica.<\/p>\n Mas se voc\u00ea sentir que sua criatividade est\u00e1 um pouco prejudicada por uma sele\u00e7\u00e3o t\u00e3o simples, aqui est\u00e1 o que voc\u00ea pode fazer …<\/p>\n Use uma fonte de exibi\u00e7\u00e3o para os t\u00edtulos do seu site.<\/strong><\/p>\n A primeira fonte que voc\u00ea selecionou foi projetada para ser lida em tamanhos pequenos, mas uma fonte de exibi\u00e7\u00e3o \u00e9 projetada especificamente para tamanhos grandes (como telas grandes, entendeu?).<\/p>\n O fato \u00e9 que as fontes de exibi\u00e7\u00e3o costumam ser muito estilosas, ent\u00e3o o uso excessivo delas pode fazer seu site parecer extravagante.<\/p>\n Os t\u00edtulos s\u00e3o o lugar perfeito para usar fontes de exibi\u00e7\u00e3o porque:<\/p>\n Se desejar, voc\u00ea tamb\u00e9m pode reutilizar a fonte de exibi\u00e7\u00e3o do t\u00edtulo do seu site (ou logotipo).<\/p>\n Para encontrar uma fonte de exibi\u00e7\u00e3o para seu site, visite o Google Fonts novamente, mas, desta vez, altere as categorias para incluir apenas fontes de exibi\u00e7\u00e3o, como esta:<\/p>\n Voc\u00ea ver\u00e1 imediatamente nas fontes de tend\u00eancia quanto mais variedade existe com fontes de exibi\u00e7\u00e3o.<\/p>\n Existem cerca de 300 fontes de exibi\u00e7\u00e3o no Google Fonts a partir de agora, ent\u00e3o divirta-se navegando e lembre-se de escolher apenas uma!<\/p>\n Aqui est\u00e1 outra dica de design baseado em texto que deixar\u00e1 seu site mais bonito.<\/p>\n Se voc\u00ea n\u00e3o sabe como alterar a fonte em seu site, siga este tutorial<\/a>.<\/p>\n De todas as dicas de design listadas neste post, esta \u00e9 a mais f\u00e1cil de implementar.<\/p>\n D\u00ea uma olhada no menu Temas do Compete:<\/p>\n Os itens do menu s\u00e3o proporcionais e espa\u00e7ados uniformemente, o que os torna bonitos.<\/p>\n Ao criar seu menu, voc\u00ea deve transformar cada item de menu em uma palavra<\/strong>. A raz\u00e3o se resume ao espa\u00e7amento.<\/p>\n Por exemplo, observe como os itens de menu est\u00e3o espa\u00e7ados uniformemente no The New York Times.<\/p>\n \u00c9 f\u00e1cil navegar pelos t\u00f3picos e diferenci\u00e1-los.<\/p>\n Quando voc\u00ea adiciona mais palavras em um item de menu, ele interrompe o espa\u00e7amento. O item do menu torna-se muito mais longo do que os outros e os espa\u00e7os entre as palavras criam um desn\u00edvel no design.<\/p>\n Na captura de tela abaixo, adicionei itens de menu falsos ao menu do NYT com v\u00e1rias palavras. Veja como o menu se torna confuso:<\/p>\n2 Use uma paleta de cores<\/h2>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc684325.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc8a511a.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcacb74b.png\")
<\/a><\/p>\n3 Use apenas 1 ou 2 fontes<\/h2>\n
\n
4 Use uma fonte sans serif popular<\/h2>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcd25332.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcf5158d.png\")
<\/a><\/p>\n5 Use uma fonte de exibi\u00e7\u00e3o para t\u00edtulos<\/h2>\n
\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd17935f.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd3839b9.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd58ccc4.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd7ab322.png\")
<\/a><\/p>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd98dfd4.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbdbf3389.png\")
<\/a><\/p>\n