Quantos tipos de layout você consegue identificar em apenas oito segundos?
Se você está acompanhando o curso Presença Digital de Zero a Dez, está vendo que gerar presença na internet para criar um negócio digital não é tarefa fácil.
O trabalho é árduo. Não começa pela mera seleção dos tipos de layout do seu site ou dos seus perfis em redes sociais.
Começa sim com uma criteriosa seleção de nicho de mercado. Passa pela criação de uma persona que represente o seu público-alvo. E chega até a escolha de um modelo de negócio e de um posicionamento de mercado.
Depois, começamos a falar da criação de um hub digital. De um site que centralize todas as suas ações on-line.
A criação da estrutura do site foi o tema de aula anterior.
Todo o trabalho feito até agora, no entanto, não sobreviverá a uma análise de apenas oito segundos.
Segundo o estudo Trust and mistrust of online health sites, este é o tempo médio que a maioria das pessoas leva para analisar os tipos de layout de um site.
Em outras palavras, você tem somente até oito segundos para causar uma primeira boa impressão antes que o visitante feche a aba do seu site e continue navegando pela internet!
E qual a melhor forma de causar essa boa primeira impressão?
O estudo mostrou que, quando as pessoas não confiavam nos sites que visitavam, 94% das vezes essa desconfiança estava relacionada a problemas no visual.
Por isso, você tem que se esforçar ao máximo para escolher os tipos de layout corretos para as páginas do seu site.
Pense bem. Em oito segundos, não dá tempo de ler um texto. De analisar a qualidade do conteúdo. De verificar a estrutura do seu site.
Oito segundos e a subjetividade
Tudo o que o visitante vai fazer é olhar o visual do seu site. Quem sabe ler a manchete e passar o olho em algumas fotos.
A partir daí ele vai decidir se para ou continua.
Por isso a seleção dos tipos de layout corretos para as páginas do seu site é tão importante.
Observe que estamos falando de tipos de layout corretos, não necessariamente bonitos.
Beleza é algo subjetivo.
O que é bonito para uns, não é bonito para outros. Por “sorte”, você tem uma boa ideia do que é bonito para a sua persona, se cumpriu bem a tarefa de criação da persona.
Os tipos de layout corretos não são necessariamente bonitos. Mas se adaptam perfeitamente aos objetivos do modelo de negócio que você definiu no início do curso.
Agora que você já tem uma estrutura para o seu site, pois cumpriu a tarefa de criar sua arquitetura da informação, é chegada a hora de escolher os tipos de layout que representem o posicionamento de mercado que você demarcou na tarefa sobre posicionamento.
Viu como a fase de planejamento do curso é importante?
Sendo assim, vamos ver como criar o melhor layout possível para o seu site, analisando:
- Os diferentes tipos de design
- Como encontrar um bom designer
- 12 princípios de de design
- Os cinco melhores tipos para o layout do seu site
- Que caminho adotar para criar o seu layout
- Temas WordPress sugeridos
Tudo certo? Vamos começar vendo os diferentes tipos de layout.
Os diferentes tipos de layout
Muita gente chama o visual de um site de design. Mas na verdade o design engloba todas as camadas que compõem um site.
Design não é apenas o que parece. Design é como funciona. ~ Steve Jobs
Por isso, vou me referir sempre à parte visual como layout.
Existem diversos tipos de layout que você pode escolher para o seu site. Você pode optar por um visual minimalista ou mais rebuscado, clássico ou criativo, claro ou escuro…
O importante, no entanto, é ter sempre em mente dois fatores essenciais:
- O foco na experiência do usuário.
- Os objetivos de cada página, de acordo com o seu modelo de negócios.
O primeiro ponto serve para absolutamente tudo o que você for fazer na criação e manutenção do seu negócio digital.
Se você mantiver a sua persona sempre em mente e fizer tudo – desde o layout até o conteúdo – focando sempre na experiência do usuário, as chances de sucesso aumentam exponencialmente.
Focar na experiência do usuário significa, muita vez, abrir mão do que você considera mais bonito ou funcional para substituir por aquilo que a sua persona considere melhor.
Isso quer dizer que não importa se você acha azul a cor mais bonita do mundo. Se a sua persona prefere verde, é verde que o visual do seu site deve ser.
Como encontrar um bom designer
Encontrar designers e desenvolvedores que tenham uma metodologia de desenvolvimento centrado no usuário, infelizmente, não é tarefa fácil.
O ideal seria você fazer testes antes mesmo de o site ir ao ar. Assim conseguiria selecionar os tipos de layout que mais se adaptam tanto à sua persona quanto aos objetivos de cada página.
Na prática, o que acontece é que você e o seu designer/desenvolvedor devem criar a solução que acreditam ser a melhor. Depois vão colocar no ar e coletar o feedback e as métricas de cada visitante.
Lembre-se de que, embora o seu layout deva ser coeso através das diversas páginas do seu site, cada uma delas possui um objetivo específico.
O objetivo de uma página de captura é cadastrar o e-mail do visitante em troca de uma recompensa digital.
O objetivo de uma página de post é fazer com que o visitante leia o conteúdo do seu artigo.
O objetivo de uma página de vendas é fazer com que a pessoa compre.
Por isso, os tipos de layout variam de acordo com cada página, mas todos eles devem seguir os princípios de um bom layout.
12 princípios de de design para todos os tipos de layout
Embora as espécies de layout variem de acordo com cada tipo de site ou de página, existem algumas heurísticas ou princípios que valem para praticamente qualquer projeto na web.
Longe de querer esgotar o assunto, seguem 12 princípios para atentar ao criar o layout do seu site:
1. Responsividade
O seu site deve adaptar-se a diferentes tamanhos de tela. Em outras palavras, ele deve ser bonito e funcional tanto em uma telinha de celular quanto em uma TV de 32 polegadas. Você não sabe como os usuários farão seus acessos.
2. Usabilidade
O seu site deve ser fácil de usar, até pelo usuário mais inexperiente do seu público-alvo. Projete o layout como se a sua persona não tivesse que pensar para descobrir como utilizar o seu site.
3. Acessibilidade
Boa parte das pessoas que vão acessar o seu site possui algum tipo de deficiência.
E aqui não estamos falando apenas de cegos. Pense em um idoso que tem dificuldade para manejar o mouse (e por isso precisa de botões maiores). Ou de um daltônico que não enxerga as cores como você (e por isso precisa dos contrastes corretos).
4. Simplicidade
Diretamente ligado aos dois pontos anteriores. Quanto mais simples for o seu site, mas fácil será para as pessoas navegarem por ele. Quanto menos coisas houver na sua página, mais evidentes ficarão os objetivos dela.
Segundo John Maeda, a maneira mais simples de alcançar a simplicidade é por meio de uma redução conscienciosa. A simplicidade consiste em subtrair o óbvio e acrescentar o significativo.
5. Velocidade
Como dissemos, você tem apenas oito segundos para causar uma primeira boa impressão. Se você utilizar um layout cheio de elementos, e ainda combinar isso com uma hospedagem ruim, a velocidade do seu site irá espantar boa parte dos visitantes.
O recomendado é que o tempo de carregamento da página (Page Load Time, que pode ser checado em sites como GTMetrix) não ultrapasse quatro segundos.
6. Encontrabilidade
Para que o seu site seja útil para a sua persona, primeiro ela precisa encontrá-lo. E depois precisa encontrar os conteúdos de interesse dentro do seu site.
O primeiro ponto você resolve com boas técnicas de otimização para mecanismos de busca. Conhecida como SEO, tal otimização será abordada nas futuras aulas deste curso.
Mas o segundo ponto é diretamente ligado aos modelos de layout que você escolher para as páginas do seu site.
Uma boa dica é posicionar a caixa de busca interna no canto superior direito do seu site, assegurando-se que ela tenha uma largura que comporte pelo menos 27 caracteres, segundo a Nielsen/Norman Group.
7. Consistência
Outro aspecto fundamental para o visual do seu projeto é a consistência entre os elementos ao longo das diversas páginas que formarão o seu site.
O ideal é sempre manter o mesmo esquema de cores, fontes e posicionamento de determinados itens (como logo, menu, caixa de busca etc.).
8. Alinhamento e Proximidade
Além de consistentes, os elementos do seu site devem estar corretamente alinhados e agrupados. Assim os usuários perceberão claramente como as informações se organizam.
Além disso, com alinhamento e proximidade, você pode utilizar os espaços em branco para fazer separações e assim reduzir a quantidade de elementos no seu layout.
9. Balanço
Ao escolher um layout ou contratar um designer para produzir um, certifique-se de que os elementos estejam balanceados ao longo da página, evitando situações em que o visual fique sobrecarregado de um lado e praticamente sem informações de outro.
10. Contraste
Uma das questões mais importantes na hora de se elaborar um layout é o contraste entre as cores. Principalmente o contraste entre a cor da fonte do texto e a cor de fundo.
Preto no branco é o contraste máximo e você deve ter cuidado para não se afastar muito disso.
Lembre-se de que nem todos enxergam as cores da mesma forma, então quanto mais contraste, melhor.
11. Objetividade
Se você estiver acompanhando o curso Presença Digital de Zero a Dez passo a passo, executou um bom planejamento antes de chegar a esta parte do layout.
Assim, você deve saber qual é o objetivo de cada página do seu site e qual o perfil da pessoa que está acessando.
Dessa forma, assegure-se que o visual está servindo à forma. Ou seja, que as espécies de layout de cada página deixam a informação perceptível. Para que cada uma delas cumpra seus objetivos específicos de conversão.
12. Tolerância a erros
Por mais que você se esforce em deixar o seu site o mais simples, fácil de usar e de acordo com padrões conhecidos de navegação, o fato é que a sua persona em algum momento vai errar ao utilizá-lo.
E o seu site precisa ser tolerante com os erros das pessoas. Caso contrário elas não conseguirão navegar por ele e acabarão desistindo, procurando um concorrente.
Os cinco melhores tipos de layout
O melhor tipo de layout não é o mais bonito, o mais simples ou o mais criativo.
O melhor layout é aquele que converte!
Conversão nada mais é do que fazer com que a pessoa que visita uma página do seu site cumpra o objetivo previsto para aquela página.
Se uma pessoa visita uma página que é a íntegra do artigo do seu blog, a conversão ocorre quando ela lê o artigo.
Se estamos em uma página de captura, a conversão acontece quando ela preenche o campo do e-mail.
Se é uma página de vendas, a conversão se dá quando a pessoa compra o produto.
É por isso que o visual de cada parte do seu site tem que ser pensado tendo em mente a experiência do usuário e o objetivo específico de cada página.
Com isso em mente, e sempre tendo como base os princípios de design acima listados, eis os cinco melhores tipos de layout para você utilizar no seu projeto:
1. Clássico
No visual clássico você coloca todos os elementos que imagina que a sua persona necessite, seguindo os princípios de design e baseando-se no que é testado e aprovado. O melhor exemplo de visual clássico é o de algum grande portal ou blog tradicional.
2. Criativo
Aqui você deixa os padrões de lado para propor uma navegação inventiva. Uma em que a persona praticamente tem que descobrir como se navega. É um tipo de layout arriscado, mas que funciona para certos projetos (como o portfólio de uma agência de criatividade, por exemplo).
3. Esqueumórfico
Esqueumorfismo é um tipo de design em que se utilizam simulacros de objetos (chamados esqueumorfos) para aproveitar o conhecimento que as pessoas têm do “mundo real” na navegação.
Pense em um site de classificados on-line que organize os seus anúncios com a mesma aparência de um jornal impresso, por exemplo.
4. Minimalista
Este é, de longe, o meu tipo de layout preferido. No design clean ou minimalista, você parte de um visual clássico e vai retirando tudo o que não é absolutamente necessário.
Para cada elemento que aparece na tela, você deve se perguntar se ele precisa mesmo estar ali.
5. De página única
Por fim, você pode colocar todo o conteúdo do seu site em uma página única. Uma página que precisa ser muito bem estruturada e dividida.
Existem casos em que esse layout se aplica, especialmente para quem está começando e quer colocar logo uma página simples no ar, seja uma página de captura ou uma árvore de links.
Que caminho adotar para criar o layout do seu site
Como dissemos antes neste curso, na hora de criar o seu site há três caminhos que você pode adotar:
- Criar você mesmo o layout.
- Contratar um desenvolvedor para criar o seu site.
- Escolher uma solução pronta, como um tema de WordPress.
A primeira opção só deve ser adotada se você é um profissional da área ou se tem um excelente conhecimento de design e das ferramentas de criação.
A segunda opção é a mais recomendada. Mas requer que você tenha algum dinheiro para investir.
Aliás, se você está realmente empenhado em criar uma forte presença na internet, você deve estar preparado para realizar alguns investimentos.
Não é porque o negócio é digital que ele não vai exigir algum investimento real. O valor a ser investido, em regra, é bem mais baixo do que o necessário para a abertura de um negócio físico. Mas, ainda assim, ele existe.
A opção de escolher uma solução pronta, como um tema de WordPress (sistema de gerenciamento de sites), é um meio termo que pode ser a melhor saída para projetos em fase inicial de execução.
O caminho aqui é, primeiro, você definir a estrutura do seu site e os objetivos. Depois, sair em busca de um tema que se adapte às suas necessidades. Nunca o caminho contrário.
Temas WordPress sugeridos
Abaixo seguem alguns temas WordPress que sugiro.
- Genesis Framework: O Genesis é um framework para WordPress que possui diversos “temas filho”. Esses temas variam muito no visual. Não é o tema mais fácil nem mais bonito, mas é tão bem estruturado que os prós superam os contras.
- Voice: um excelente tema para sites que querem o estilo magazine. Ou seja, para sites noticiosos que organizem suas informações como se fosse uma revista ou portal.
- Kleo: se você vai estruturar o seu projeto como uma rede social, o melhor tema é o Kleo. Apesar de sobrecarregado, ele possui a flexibilidade necessária para se adaptar a diferentes estruturas, o que impede que você caia na armadilha de adaptar o seu projeto ao tema, e não o contrário.
- Épico: este tema premium é indicado para quem vai estruturar seu projeto como um blog focado na criação de uma lista de e-mails, que é o método que sugerimos aqui no curso Presença Digital de Zero a Dez.
Seja qual for a opção que você escolha, tenha sempre em mente a experiência do usuário e os seus objetivos com o site.
Criar ou escolher layout baseando-se apenas na beleza é um erro que você não quer cometer!
Bibliografia
Livro: Não me faça pensar
Não me faça Pensar, de Steve Krug, é tido como o livro sobre usabilidade mais procurado do mundo. Trata-se de uma verdadeira obra-prima sobre como aplicar conceitos de usabilidade da forma mais simples, rápida e eficiente possível. Steve Krug usa uma abordagem de bom senso e consegue transmitir os ensinamentos de uma forma agradável e bastante divertida.
Como o nome do livro diz, a primeira grande lei da usabilidade aplicada a projetos web é não fazer o usuário pensar. Cumprindo essa lei, as chances de seu projeto obter sucesso crescem exponencialmente. Parece simples (e de fato é), mas não é fácil.
Uma dica: se você vai contratar algum desenvolvedor para criar o layout do seu site, pergunte como quem não quer nada se ele já leu esse livro. Se a resposta for negativa, talvez seja melhor procurar outro desenvolvedor.
Livro: As Leis da Simplicidade
Neste livro, John Maeda apresenta as dez Leis da Simplicidade, provando por que, nos meios digitais, quanto mais simples um projeto for, melhor.
As lições práticas do livro podem ser aplicadas não somente no layout do seu projeto, mas em todas as camadas do seu negócio digital, desde a criação do conteúdo até a entrega e suporte de possíveis produtos digitais.
Mesmo que você opte por outras espécies de layout, como o criativo ou esqueumórfico, ainda assim as leis da simplicidade vão ajudar bastante no seu projeto. Leitura mais do que recomendada.
Livro: Design para quem não é designer
Você só deve partir para a criação de um layout se realmente tiver grande conhecimento de design e nas ferramentas de criação.
Porém, se você vai escolher um tema para WordPress, ou mesmo se apenas quer conversar com o seu desenvolvedor com algum conhecimento de causa, o pequeno clássico Design para quem não é designer é um manual básico para transformar você de um leigo em uma pessoa que entende minimamente sobre o assunto.
Plano de Ação
Ao final de cada aula do curso Presença Digital de Zero a Dez, ofereço uma série de tarefas específicas para você executar.
A ideia é não ficarmos apenas na teoria, mas partirmos para transformar, na prática, sonhos em realidade.
Tarefa: Crie o layout do seu site
Pegue a estrutura do site que você criou e – idealmente – contrate um desenvolvedor para criar o layout do seu site.
Se isso não for possível por questões financeiras, procure um tema para WordPress que se adapte à estrutura que você criou. Ao adaptar o tema, lembre-se de seguir sempre os 12 princípios de design que listei nesta aula. Para ajudar você nisso, a próxima aula será exclusivamente sobre temas para WordPress.
Preocupe-se sobretudo em manter a consistência no esquema de cores, nas fontes e no posicionamento dos itens de navegação.
Assim que o seu projeto estiver dando retorno financeiro, contrate um desenvolvedor para avaliar e aprimorar o seu layout.
Quando tudo estiver pronto, avance para a próxima aula.
