3 Princípios de Web Design Eficazes para o “Não Designer”

Bem-vindo à parte 2 de 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”.

Em nosso post anterior, abordamos a preparação de sua mentalidade e examinamos algumas maneiras de aprender como desenvolver um olho melhor para o design. Neste post, vamos nos concentrar em alguns princípios universais de bom design que você pode aplicar imediatamente aos seus empreendimentos de web design para se tornar melhor no lado do “design” do web design.

Vamos direto ao assunto!

3 Princípios de Web Design Eficazes para o “Não Designer”

Conforme mencionado na parte 1 desta série, não há certo ou errado quando se trata de design. O que veremos neste post é amplamente e universalmente aceito como bons princípios de design dentro da comunidade de web design em geral. Essa também é minha orientação pessoal como designer gráfico / impresso que se tornou web designer da Divi com quase uma década de experiência e, mais importante, centenas de clientes felizes e satisfeitos. Emprego esses princípios em cada design de site da Divi que construo e, embora haja sempre aquele cliente que quer algo atroz ou fora do comum, isso o atenderá bem pelo menos 9 em cada 10 vezes

1) Regra dos terços

Uma das práticas mais comuns em web design, design gráfico, design de impressão, fotografia e outros meios criativos é seguir uma regra simples - a regra dos terços. Resumindo, a Regra dos Terceiros trata de simetria e equilíbrio. O objetivo da regra dos terços é ajudá-lo a alcançar mais equilíbrio e harmonia no design. E a melhor parte é - você pode aplicar a Regra dos Terceiros a gráficos, imagens, layouts de páginas da web inteiras e muito mais!

Existem inúmeras conversas online sobre se a regra dos terços é científica ou não, mas, independentemente, a opinião popular mostra que se uma imagem ou design for muito semelhante na metade esquerda e na direita ou superior e inferior, o público pode encontrá-lo enfadonho ou enfadonho. No mínimo, a regra dos terços o mantém interessante e pode levar a um bom fluxo, que abordaremos a seguir.

Em nosso post anterior sobre Dicas de design para otimizar seu conteúdo da Web Divi, também é referido como um sistema de grade, que é uma ótima maneira de pensar visualmente sobre isso. Imagine uma grade parecida com esta:

Com esta grade imaginária em sua imagem, gráfico ou layout, você pode facilmente colocar conteúdo próximo a um ou mais dos principais pontos de interseção.

Manter os objetos e pontos focais em 1 ou mais dos 4 pontos de interseção geralmente resultará em uma aparência muito mais equilibrada e simétrica, em oposição ao segundo exemplo, onde o assunto está abaixo do ponto de interseção. Dê uma olhada na imagem abaixo. O primeiro exemplo NÃO segue a regra dos terços.

Este exemplo ESTÁ seguindo a regra dos terços.

Embora o primeiro exemplo ainda seja uma boa imagem, usar a regra dos terços fornece uma sensação totalmente diferente à imagem ao cruzar o primeiro plano com os pontos de interseção da parte inferior na regra dos terços. Vejamos a imagem com a grade da regra dos terços.

Agora vamos olhar para a imagem sem alinhar a regra das interseções de terços.

Você pode ver uma grande diferença em relação a como os designs atraentes geralmente se alinham com um ou mais dos pontos de interseção. Embora a Regra dos Terceiros seja mais comumente falada em fotografia e videografia, é igualmente importante para o design de sites. Vou mostrar como apliquei a regra dos terços ao meu site pessoal. Aqui está um instantâneo do design inicial “acima da dobra”, que se aplica ao que o visualizador vê antes de rolar para baixo.

Agora, vamos colocar a regra dos terços da grade sobre a seção principal e ver como fica. Nesse caso, vou me concentrar no conteúdo abaixo do menu principal, onde implementei a regra dos terços.

Neste exemplo, existem 4 elementos principais que estão nos ou próximos aos pontos de interseção. Resumindo, eu queria acentuar o seguinte:

1. Uma breve descrição de quem eu sou e do que trata este site.
2. Uma imagem que permite que novos usuários se sintam mais confortáveis ​​e confiáveis ​​ao ver de quem vão ouvir.
3. Um gráfico do meu último e-book dando às pessoas um motivo para se inscreverem.
4. Finalmente, um e-mail de call to action se inscreve nos 2 quadros finais, que é onde os olhos do usuário vão parar.

Com a regra dos terços, geralmente não é a melhor prática ter algo em todos os pontos de interseção (especialmente na fotografia), mas geralmente sigo esse layout nas compilações do meu site. E em uma nota lateral: como lemos da esquerda para a direita, geralmente tenho frases de chamariz no meio ou no lado direito da tela, pois é onde nosso olho termina. Entraremos em chamadas para ações com mais detalhes na postagem final desta série, mas este é um bom exemplo de como implementei a Regra dos Terceiros em meu design.

Portanto, se você não tem certeza sobre como fazer o layout de uma página da web ou está lutando para misturar imagens, texto e talvez uma frase de chamariz, tente seguir a regra dos terços e deixe-a ser o seu guia.

2) Layout e fluxo

Quando se trata de layout e design de uma página da web, novamente não existe um estilo certo ou errado. Muitas vezes depende do projeto, dos desejos do seu cliente, do seu estilo de design e, muitas vezes, do mercado que você almeja. Na maioria das vezes, em serviços digitais ou como agências de web design, moda e fotografia, designs mais modernos e da moda com uma aparência minimalista. Com o design moderno, muitas vezes vem mais espaço aberto, menos conteúdo orientado por texto, mais imagens e talvez mais rolagem. (Alguns dos meus clientes antiquados estremeceram!)

Em mercados de negócios mais tradicionais, como manufatura, escritórios de advocacia, indústrias de colarinho azul, etc., você provavelmente encontrará sites com mais conteúdo orientado por texto, menos espaço aberto e, sem dúvida, com imagens e elementos de design que são menos ... atraentes. E por alguma razão, a maioria dos meus clientes nesses setores se opõe veementemente ao excesso de rolagem. Portanto, saber projetar um layout com bom fluxo é fundamental! Eu descobri frequentemente que tenho que tentar equilibrar MEU estilo de design criativo com o que funciona dentro da indústria do meu cliente, público-alvo e desejos e necessidades do meu cliente. Com tudo isso dito, existem alguns princípios básicos de layout e fluxo que podem ser aplicados independentemente de com quem você esteja trabalhando ou do setor em que esteja.

Olhando para o post anterior mencionado acima, uma diretriz muito importante a seguir é um padrão z de design. Você encontrará isso com frequência em muitos dos novos kits profissionais de layout Divi que são fornecidos semanalmente.

Vamos dar uma olhada no que quero dizer.

No primeiro exemplo à esquerda, há uma imagem à esquerda, o texto à direita com um botão de call to action legal, então seu olho lê para baixo e à esquerda para uma outra seção de texto / CTA e, em seguida, com outra imagem à direita e repita. Vis-versa, na imagem à direita, um padrão reverso está lá. Texto para imagem para imagem para texto, etc. Seguir esse padrão de estilo z é uma ótima maneira de manter os leitores interessados ​​e é uma ótima maneira de equilibrar texto e imagens.

Esta não é a única opção para o layout em fluxo em um bom design de página, mas é uma boa prática levarmos o conteúdo da esquerda para a direita e depois para baixo. Em seguida, da esquerda para a direita, para baixo e assim por diante. Portanto, em caso de dúvida, tente seguir o padrão de estilo z como uma forma de ajudar a organizar o fluxo do conteúdo da sua página. E uma nota final sobre rolagem - eu tendo a manter meus sites dentro de 3-5 rolagens. Na maioria das vezes, quanto mais você rolar, maior será a página e mais lento será o carregamento. Novamente, não há certo ou errado em relação à rolagem, mas se você ainda não trabalhou com clientes com uma mentalidade mais antiquada, você certamente encontrará alguma oposição. Tento reafirmar a esses clientes que a rolagem não deve ser temida. A mídia social nos treinou para rolar constantemente e assimilar o conteúdo rapidamente.

3) Hierarquia Visual

O último princípio principal que gostaria de apontar aqui é a hierarquia visual. Resumindo, a hierarquia ajuda o usuário a saber quais são as informações mais importantes e fornece uma direção muito clara de onde seus olhos devem ir em seu design. Hierarquia costuma ser referenciada com tipografia (que abordaremos em nosso terceiro post), mas também pode ser muito importante nos elementos gráficos, imagens e no design geral do site.

Não vou apontar intencionalmente sites que sinto falta no departamento de "bom design", mas tenho certeza que você já encontrou muitos sites que têm uma miscelânea de texto e imagens que são todos do mesmo tamanho, sem clareza chamadas para ações, certo? É isso que queremos evitar. Usar uma boa hierarquia é a melhor maneira de orientar o usuário do seu site a saber O QUE ele deve clicar ou fazer a seguir.

Aqui está um exemplo de um design recente que criei com a hierarquia em mente:

Embora o logotipo e o número de telefone no canto superior direito sejam claramente grandes e visíveis, o maior conteúdo e a cor mais vibrante acima da dobra é a frase de chamariz para clicar no botão.

Meu cliente queria especificamente que as pessoas solicitassem facilmente uma inspeção assim que entrassem no site, então usei essa ideia de hierarquia visual para, com sorte, conseguir exatamente isso! Outro exemplo de como usei hierarquia recentemente é o design acima da dobra neste site:

Nesse caso, a principal chamada à ação do cliente é fazer compras online ou contatá-los diretamente. O logotipo, a breve descrição e até o número de telefone são predominantes, mas o Divi Double Button é o maior elemento que você vê inicialmente na esperança de fazer os usuários clicarem no que procuram, caso não role mais.

Então, novamente, embora esses sejam apenas alguns exemplos de hierarquia visual, pode ser um método muito poderoso para direcionar os usuários do seu site a fazer o que você quer que eles façam ou ir aonde você quer! Como um aparte, eu recomendo fortemente verificar nosso post anterior sobre Erros Comuns de Design da Web a Evitar.

No Fechamento

Espero que esses princípios de design eficazes tenham ajudado em seus empreendimentos de design, seja você um iniciante no design da Web ou esteja procurando melhorar em design! Novamente, existem muitos princípios que poderíamos repassar, mas esses são os 3 principais que tentam implementar em todos os designs de meu site.

Se você tiver quaisquer outros princípios de design que gostaria de compartilhar, deixe-nos saber nos comentários abaixo!

Amanhã: três áreas importantes de design para enfocar em cada construção de site

Agora que cobrimos a preparação de nossa mentalidade, como aprender a ter um olho melhor para o design e examinamos alguns princípios básicos de design, nossa postagem final irá explorar alguns dos aspectos mais importantes do web design para nos concentrarmos. cada construção de site. Até então!

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!