3 áreas importantes de design para enfocar em cada construção de site

Bem-vindo à parte 3, a postagem final em nossa minissérie “Princípios de design da Web eficazes da Divi”, onde exploramos práticas de design eficazes para ajudar a capacitar novos designers da web e aqueles que se identificam como alguém sem “olho para o design”.

Agora que cobrimos a preparação e aprendemos como ter um olho melhor para o design e examinamos alguns princípios de design eficazes para ter em nossa caixa de ferramentas, vamos nos concentrar em 3 áreas muito importantes do design que são fundamentais para alcançar um site bem projetado.

Vamos direto ao assunto!

3 áreas importantes de design para enfocar em cada construção de site

Se você acompanhou as duas primeiras postagens desta série, me ouviu dizer que não há certo ou errado quando se trata de design, mas junto com os princípios de design eficazes que examinamos, existem alguns importantes , áreas práticas de design nas quais me concentro para garantir sempre a construção de um site atraente e bem-sucedido. E a melhor parte é que essas idéias são transferíveis para qualquer tipo de indústria ou estilo de web design!

1) Tipografia e fontes

Seu site pode ter belas imagens, cores envolventes e elementos de design agradáveis, mas se o tipo parecer estranho ou não se ajustar ao estilo do site, pode ser um grande obstáculo. Como não entraremos nos fundamentos da tipografia nesta série, consulte nossa postagem de 50 termos de tipografia que todo web designer deve saber (e compreender) se quiser aprender mais sobre os fundamentos. Uma compreensão de kerning, lead, tracking, fontes sans e sans-serif será muito útil para a pessoa que procura melhorar o tipo e o design.

Deixe-me oferecer algumas diretrizes práticas de tipografia que adoto como um web designer de sucesso da Divi com clientes que diferem muito em estilos de design e diferentes setores:

Use fontes que combinem bem com a indústria / design de seus sites - No primeiro post desta série, eu me lembrei de um exemplo em que eu reconheci que projetei um site que tinha ótimas imagens e cores, mas a fonte não combinava bem. Resumindo, era um local de fabricação industrial e a fonte que usei inicialmente era um estilo mais moderno e elegante que de fato não combinava com o visual e a marca da empresa.

Isso não significa que você não pode ser criativo com as fontes ou que precisa corresponder ao status quo da indústria, mas, na prática, se estiver trabalhando em um site de serviço profissional, provavelmente não vai querer uma superação a melhor fonte artística envolvida. E vice-versa, se você está trabalhando em algo com uma vibe única, talvez artística, talvez Arial ou Helvetica não vão corresponder à vibe que você está procurando. Isso me leva ao meu próximo ponto de misturar e combinar fontes.

Use de 2 a 3 fontes - um princípio básico de design que resistiu ao teste do tempo por décadas é limitar o número de fontes que você usa. Muitas fontes distraem o leitor, muitas vezes confundem a hierarquia e, francamente, acabam parecendo um velho aviador do faroeste em busca de uma recompensa por um fora da lei. Costumo ficar com uma fonte para cabeçalhos e títulos e, em seguida, normalmente uso uma fonte sans-serif de fácil leitura para todo o meu texto de parágrafo. Às vezes, terei uma fonte de terceiro estilo para o menu principal, mas minha fonte de menu costuma ser simplificada com meus títulos.

Para obter mais idéias sobre como emparelhar fontes, consulte este post anterior sobre Emparelhamento de fontes no design da Web: 7 princípios-chave revelados e explicados

Tenha recursos visuais com seu texto - uma quantidade razoável de texto em seu conteúdo é ótima. Na verdade, é recomendável ter pelo menos 300 palavras por página para ajudar do ponto de vista de SEO. Mas tome cuidado com muito texto e sem recursos visuais suficientes. Para livros, blogs, artigos e outro conteúdo de formato longo, muito texto é esperado, mas se você estiver criando uma página de destino atraente e envolvente, muito conteúdo aborrecerá o usuário antes que ele procure mais. Costumo criar com a mentalidade de que a página inicial deve ser o funil de vendas que leva os clientes até a porta, ENTÃO eles podem mergulhar em mais páginas, blogs e outros recursos para obter informações mais detalhadas.

A página inicial do Elegant Themes é atualmente um exemplo perfeito disso.

Neste exemplo, vemos um título envolvente, um parágrafo de texto com um botão de apelo à ação e um gráfico visual simpático que se liga à mensagem que mantém o utilizador envolvido. Este é um ótimo exemplo a seguir ao organizar uma quantidade razoável de texto com recursos visuais.

Certa vez, tive uma bela primeira página projetada com texto e recursos visuais e quando a passei para o meu cliente para fazer as edições básicas, eles jogaram o que parecia ser um pequeno capítulo de um livro na primeira página, o que arruinou completamente o fluxo do design Eu criei. Então deixe isso ser uma lição e saiba que embora o conteúdo seja ótimo, ele precisa ser colocado de acordo!

Outro grande recurso para consultar são as 20 tendências de tipografia para prestar atenção em 2016, pois essas tendências ainda são muito válidas hoje e irão seguir em frente.

2) Gerenciamento de imagens e cores

Semelhante à tipografia, eu tendo a usar no máximo 2 a 3 cores primárias para as construções do meu site. A menos que seja uma empresa ou organização com uma infinidade de cores na marca, acho que muitas cores (especialmente se não combinam bem) podem distrair e muitas vezes confundir. Aqui estão algumas diretrizes que sigo ao misturar cores e imagens:

Cores básicas e cores de destaque - um método que achei muito bem-sucedido em projetos recentes é pegar a marca de um cliente e, se ainda não o fizer, escolher uma cor de destaque agradável para frases de chamariz, links, etc. Por exemplo, neste site, peguei a marca do logotipo com o cinza e o laranja e adicionei um azul esverdeado / azul escuro sutil para ajudar a fazer o laranja “pop” como a cor de destaque principal.

Otimize as cores com imagens - Uma maneira de combinar o design e as imagens de maneira excelente é combinar as cores do site com algumas das imagens primárias. Este exemplo é um pouco raro, pois consegui combinar as cores do site com a roupa do meu cliente, o que proporcionou uma sensação aerodinâmica muito agradável entre as imagens e as cores do site.

Peguei uma bela cor marrom e laranja da roupa dos meus clientes e consegui juntar todo o site em um belo visual uniformizado. Agora, você raramente estará em uma situação em que pode marcar um site inteiro com uma imagem, mas este mesmo princípio pode ser aplicado ao usar imagens de fundo com frases de chamariz, etc!

Praticamente, se você não tem certeza de como escolher certas cores, aqui estão 10 ferramentas de seleção de cores

Evite cores que são muito vibrantes - frequentemente vejo designers mais novos usarem verdes brilhantes, rosas, amarelos etc. que fazem com que alguém aperte os olhos e se afaste da tela. Não vou apontar nenhum exemplo ruim aqui, mas tenho certeza que você já viu muitos sites onde as cores fizeram você se virar e nunca mais querer olhar para trás. Certamente não há nada de errado com cores vibrantes, apenas certifique-se de que não emitem esse efeito. É aqui que obter críticas construtivas e feedback de outros designers pode valer a pena.

Minha recomendação é usar cores razoavelmente neutras para cores básicas, como texto, gráficos de fundo, etc, em seguida, usar cores mais vibrantes para chamadas para ações, links e áreas mais chamativas do design da página. Se você é novo em design e a cor não é uma área confortável para você, sinta-se à vontade para consultar nossas Técnicas de correspondência de cores para designers da Web do WordPress, que fornecerão muitas opções sobre como escolher melhor as cores.

3) Frases de chamariz fortes

Por último, uma área muito importante do web design é ter chamadas à ação (CTA) fortes e claras. Um dos problemas mais comuns de um web design ruim é ter um conteúdo pesado orientado por texto sem nenhuma chamada de ação clara. O conteúdo é ótimo, mas se for tudo informação e nenhuma conversão, seu cliente certamente não ficará satisfeito. Eu recomendo fazer seu CTA se destacar de outros elementos em seu design com uma cor de destaque ou um belo efeito de foco.

Aqui está um exemplo de como implementei uma frase de chamariz para um cliente recente.

Nesse caso, a principal chamada à ação do cliente para os usuários do site é inscrever-se para receber atualizações por e-mail, então, imediatamente, temos o logotipo saindo de uma imagem de fundo mais escura, um pequeno texto com uma oportunidade imediata de inscrição antes mesmo de rolar para baixo. Idealmente, você deseja chamar a atenção do usuário para a sua frase de chamariz. É aí que ter uma cor de destaque ou efeito vibrante em um site é extremamente benéfico.

Aqui estão algumas diretrizes que sigo quando se trata de frases de chamariz:

Termine sua página inicial com uma frase de chamariz forte - Na maioria das vezes, os designs da minha página inicial são quase uma recapitulação do site como um todo. Por exemplo, se um site tiver uma estrutura como esta:

• Sobre nós
• Serviços
• Testemunhos
• Blog
• Contato

Farei um apelo à ação para cada uma dessas seções na página inicial e, em seguida, um design final e elegante para o apelo à ação principal, que neste caso seria para se inscrever. Aqui está um excelente exemplo do que quero dizer:

A página inicial encapsula essencialmente todo o site e é um ponto de partida para os usuários clicarem para ver galerias, vídeos e mais informações. Talvez essa mentalidade o ajude como nos designs de sua página inicial!

Tenha um apelo à ação na barra lateral - Não se esqueça da oportunidade para um apelo à ação forte na barra lateral! Especialmente se você tiver um site com postagens de blog ou outras páginas que usam frequentemente uma barra lateral. Esta é uma grande oportunidade de colocar um email extra para inscrição, botão de doação ou link para outro CTA principal.

Semelhante ao site acima, um dos principais apelos à ação do meu site pessoal é a inscrição por e-mail e, embora isso seja frontal e central na minha página inicial, gostaria de ter certeza de que também deixaria isso bem claro na postagem do meu blog e nas páginas de tutorial .

Aqui, eu o tenho no canto superior direito de cada modelo de postagem, juntamente com um visual forte acima e abaixo do formulário de inscrição principal. Portanto, se você tiver páginas com barras laterais, lembre-se de que essas áreas são propriedades valiosas para frases de chamariz fortes! E você quer ter certeza de que seu CTA está visível e de preferência no topo da barra lateral que aparecerá primeiro no celular abaixo do conteúdo principal.

Tenha uma frase de chamariz após o conteúdo da subpágina - Por último, e talvez o mais esquecido, é lembrar de ter uma frase de chamariz em suas páginas normais! Eu admito que negligenciei isso até recentemente, quando foi solicitado por um cliente. O exemplo abaixo tem uma forte frase de chamariz no final das páginas principais de serviços.

Quando um usuário de site visualiza essa página, ele obtém todas as informações e, em seguida, tem a chance de entrar em contato com meu cliente se estiver interessado em uma imagem agradável e de boas-vindas à direita e um botão de CTA à esquerda apoiado por uma laranja vibrante que ajuda aquela seção sair da página. Sim, eu sei que disse em um post anterior que geralmente coloco meus CTAs no meio ou direito, mas esse layout pareceu funcionar muito bem

Conclusão da série

Bem, espero que esta série tenha ajudado a inspirá-lo com alguns bons princípios e táticas de web design que você pode aplicar em seus empreendimentos de web design! Vamos fazer uma recapitulação rápida do que vimos em toda a minissérie:

Parte 1

• Preparando sua mentalidade
• Como aprender boas tendências de design
• Obtenha feedback e críticas construtivas sobre o seu trabalho

Parte 2

• Siga a regra dos terços
• Layout e fluxo
• Hierarquia Visual

Parte 3

• Tipografia e fontes
• Imagens e cores
• Frases de chamariz fortes

Novamente, estudos acadêmicos inteiros foram dedicados a um bom design, então estamos apenas arranhando a superfície aqui, mas minha esperança é que esses princípios e práticas ajudaram a apontar aqueles de vocês que desejam melhorar em design na direção certa. Se você tiver quaisquer outros princípios ou métodos de design que o ajudaram e gostaria de compartilhar, sinta-se à vontade para nos informar nos comentários abaixo!

Um brinde a todos nós que nos tornamos melhores Divi Web Designers a cada dia!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!