Homepage Design: Como fazer da sua homepage um sucesso

8 min.
Dicas de design da página inicial

A página inicial ou homepage é para muitos o santuário de um site. Deve servir a inúmeros propósitos e servir diferentes grupos-alvo. E o melhor de tudo, ao mesmo tempo. Como se parece um bom endereço e um design de página inicial orientada para o alvo? Aqui estão as dicas mais importantes de uma visão geral.

Estou falando dos negócios abaixo, mas os princípios se aplicam em muitas partes a um simples blog, ao seu site de interesse especial, ou também ao site da sua banda. A página inicial deve:

  • Mostrar a empresa, a agência ou o serviço do melhor lado
  • Mapear simultaneamente todas as áreas de actividade empresarial
  • Mostrar que a empresa está atualizada, através de notícias e conectando o Facebook, Instagram, etc.
  • Mas também a história contada com a história dos fundadores deve caber
  • A subscrição da newsletter deve estar sempre visível

Da mesma forma, você normalmente quer mapear novas ofertas de emprego, direções, seu endereço, todos os números de telefone com contatos. E assim por diante.

página inicial de optimização de imagens
Uma página inicial segundo o lema: Uma imagem diz mais de mil palavras

Podes ver onde isto vai dar: A página inicial não pode e não deve fazer tudo, por favor. Você tem que abordar o assunto conceitual e estrategicamente e pensar exatamente no que realmente deve ser exibido lá e por quê. A minha abordagem certamente não é a única, e pode até nem ser a melhor para o seu negócio. Mas vou tentar justificar qualquer indicação. No entanto, também aceito de bom grado outras opiniões e sugestões nos comentários.

A página inicial é uma página de destino

Como todas as páginas do seu site, a página inicial é uma página de destino. Veja o nosso post sobre a melhor forma de desenhar páginas de aterragem. Quando te apercebes disso, já conseguiste muita coisa. Porque depois estás a repensar.

Idealmente, você até já coletou dados sobre a sua página inicial. De onde vêm as pessoas que aterram na sua página inicial? O que é que eles querem alcançar? Como você pode ajudá-los a fazer isso? Que objectivo é que a página de aterragem tem para si? Que informações você quer transmitir?

Análise do seu site

A recolha de números sobre a sua página inicial e outras subpáginas é extremamente importante. Afinal, é a única maneira de descobrir se o seu conteúdo e design estão funcionando. Leia nossos guias sobre KPIs de conteúdo, hub de conteúdo e teste de conteúdo.

De onde vêm os seus visitantes?

Na maioria dos casos, os utilizadores vêm através do Google, através das suas actividades de marketing (pode ser um cartão de visita, por exemplo) ou através dos perfis das redes sociais na sua página inicial. Estes visitantes podem não saber realmente o que o seu negócio faz. No entanto, eles estão obviamente à procura de um negócio que ofereça os seus serviços ou informações. Caso contrário, eles não se dariam ao trabalho de visitar a sua página inicial.

Em muitos casos, eles podem ler um artigo no seu site que você compartilhou na Instagram, por exemplo, e depois ir para a página inicial. Para ver o que a empresa realmente faz. Agora você tem que oferecer algo para os usuários! E a primeira coisa é responder à pergunta:

O que é que o site ou a empresa faz, afinal?

Infelizmente, isto é muitas vezes esquecido. A primeira coisa que uma página inicial tem que responder para seus visitantes é: "Estou no lugar certo aqui? Porque eles vêm de algum lugar, aterram na tua página - e ainda não sabem nada. Eles precisam de confirmação logo no início de que aterraram na página certa. É como um pequeno doce para começar a sua experiência de usuário (UX):

Você veio ao lugar certo. Você pode respirar com calma, relaxar e obter suas informações!

A minha sugestão aqui é: Três a quatro frases que explicam de forma breve mas precisa o que você oferece. Com um link por baixo, se quiser saber mais. É para isso que serve a internet, para obter mais informações com um clique.

Página inicial Texto Básico
A página inicial de uma prática com texto introdutório sóbrio

É aqui que muitas vezes fico com mais vento contrário: primeiro tens de envolver as pessoas emocionalmente para que elas fiquem. Tipo, "Vamos colocar uma foto enorme na página inicial e depois deixar a notícia rolar através de um deslizador. Para que eles possam ver a grande empresa global que somos.

Sobre os grandes deslizadores: Eles não funcionam. Muitos já escreveram sobre isso. A página Devo usar um carrossel? é um bom começo. Também a afirmação "isto é importante, nós o colocamos na barra lateral" não funciona mais, porque a barra lateral simplesmente não está atualizada - e não se encaixa bem no web design responsivo.

Apelo emocional

Eu dou um retumbante "sim" ao dirigir-se ao grupo alvo a um nível emocional. Isto não só vincula os seus clientes a um nível factual, como também apela ao cérebro de uma forma completamente diferente. Na minha opinião, porém, a primeira mensagem ainda deveria ser "O que você realmente faz?". Como é que o nível de emoções também pode ser trazido para dentro?

Esta é uma decisão estratégica que deve ser baseada na identidade corporativa (CI) da sua empresa. O seu IC inclui a forma como se dirige ao seu grupo alvo. Há basicamente três possibilidades:

  • Sobre o texto
  • Sobre o design
  • Sobre fotos ou vídeos

Discurso sobre o texto

As pessoas usam um site muito diferente. Isto significa que você não sabe como eles encontram algo no seu site. Por exemplo, a primeira coisa que eles usam é o menu, pesquisar e depois digitalizar os cabeçalhos ou links na sua página. No entanto, o primeiro ponto de fixação mais comum é o primeiro texto da página que lhe dá informações. Numerosos estudos têm demonstrado que este é o caso. Você pode "moldar" este texto de forma bem diferente com a ajuda do endereço e da tonalidade.

"Eu sou Phillip Roth, estou fazendo um site para o seu negócio" soa diferente de "Ei, eu sou um influenciador de web design otimizando o seu UX maluco para os KPIs mais altos!" Dê uma boa olhada no seu público-alvo e ajuste o seu tom de voz em conformidade. É tanto uma parte da sua identidade corporativa como do seu design.

Endereçamento através do design

Um design apelativo não só transmite profissionalismo, como também toca emocionalmente. Veja o nosso artigo sobre os princípios básicos para um web design harmonioso. Cores, seleção de fontes, elementos de design - tudo isso pode transmitir confiança, alegria, frieza, loucura e muitas outras emoções aos visitantes. O design corporativo é parte da mensagem global que a sua empresa quer transmitir. Elementos de construção de confiança, tais como certificados, podem trazer mais pontos de bónus.

Página inicial Imagens Emoções
Página inicial com apelo emocional e texto introdutório

Fotos ou vídeos

A imagem da sua empresa também é moldada pela linguagem visual. Você é uma empresa global com 600 funcionários e arranha-céus frescos em Xangai ou uma pequena fábrica com uma bela oficina? Você é um treinador com belas salas de oficina ou um médico com uma clínica chique? Isso é o que os seus visitantes querem saber e ver. Eles querem descobrir: "Posso me sentir confortável lá?", "O produto me atrai?", "É uma empresa à qual eu poderia me candidatar?", "Pessoas normais trabalham lá?". "Eles são simpáticos?".

Tudo isto pode ser transmitido em milissegundos com uma ou mais belas imagens. Mas para isso, as imagens têm de ser autênticas. Porque o que você mostra de si mesmo e da sua equipe tem que ser real hoje em dia. Caso contrário, as pessoas não se vão sentir levadas a sério. Ninguém mais quer ver a foto de estoque com a estranha telefonista loira. Tão pouco como uma estranha sala de reuniões cheia de pessoas sorridentes, mas "falsas".

Talvez você tenha até um bom vídeo explicativo que resume seus serviços em 30 segundos. Ou talvez você tenha um vídeo ao fundo que mostre o seu hotel chique e a bela paisagem circundante. Qualquer coisa que suporte a sua identidade corporativa e a mensagem associada é boa!

Página inicial Conceito de cor
Página inicial com fotografias apelativas e conceito de cor uniforme

E agora?

Então agora temos a atenção dos visitantes. Eles agora sabem: "Estou no lugar certo, sinto-me confortável. O que se segue agora é uma decisão estratégica: Agora você pode aprofundar a informação que você só brevemente tocou aqui. Agora você pode perseguir - além da primeira impressão - seu segundo objetivo.

Faz sentido, neste momento, pensar sobre qual é realmente este objectivo. Veja também a estratégia de conteúdo associada. Porque se os visitantes não estão fixados no seu menu ou na pesquisa de informações, então eles começam a rolar. Então, o que lhes oferece a seguir?

As possibilidades são múltiplas:

  • Conte uma história
  • Aprofundar a informação sobre a sua oferta de serviços
  • Mostrar grandes eventos, compromissos ou notícias
  • Ofereça uma ferramenta para marcar compromissos, depois nem sempre lhe ligam directamente
  • Eu pessoalmente vendo o máximo através da minha newsletter, ofereço-a em vários lugares no site
  • Link para sua página de emprego se você está procurando por novos funcionários
  • Mostrar ótimas críticas

Como pode ver, existem agora centenas de formas de desenhar ainda mais a página inicial. E certamente não há nenhuma receita padrão para levar os seus clientes à conclusão desejada. Vais ter de experimentar. No entanto, tenha em mente que a sua página inicial ou página de destino não recebe atenção infinita. Muito raramente alguém percorre 27 metros - e ainda assim absorve toda a informação.

Homepage Testemunhos
A página inicial com um orçamento e os serviços oferecidos

Para este conceito eu gosto de usar as chamadas wireframes ou maquetes. Ou seja, você separa em retângulos simples com molduras cinzentas o conteúdo da página inicial. Sem conteúdo real, sem design. Você pode fazer isso em uma folha de papel ou com programas como Adobe XD, Sketch, Photoshop, InDesign ou até mesmo no Powerpoint. Como eu disse, deixe o desenho fora disto por agora. Neste momento, você quer saber, por exemplo:

  • O que deve definitivamente ir na página inicial?
  • O que não precisa de lá ir?
  • Estará tudo a tornar-se demasiado?
  • O objetivo pode ser alcançado com o espaço disponível?
  • Os visitantes vêem a chamada à acção suficientemente cedo?
Mockup Wireframes Adobe XD
Wireframes em Adobe XD

Vá directo ao assunto!

Agora que você definiu seu objetivo secundário e deu aos usuários toda a informação que você pode caber no espaço limitado, você deve esclarecer seu objetivo. O melhor lugar para fazer isso é no final da página. Como eu disse: Aí você pode destacar as informações mais importantes, colocar a chamada para a ação ou convidar o usuário a entrar em contato com uma foto sua - ao lado dos seus dados de contato. Qualquer que seja seu segundo objetivo da página: Agora você pode colocá-lo antes que seu rodapé venha. A sua página inicial é - como eu disse no início - uma página de aterragem.

O rodapé pode funcionar novamente como uma navegação secundária, por exemplo, se você quiser oferecer mais informações lá. Muitos também gostam de olhar para a sua impressão, quer você seja um fornecedor sério. Mas tenha cuidado! Demasiados elementos no seu rodapé podem distrair-se do seu objectivo real. Se, por exemplo, o registo para a newsletter está lá, mas só se escreve uma newsletter uma vez por ano, então isto talvez seja menos intencional.

Conclusão

Pense na sua página inicial como uma página de destino. Dê aos seus visitantes a sensação de que aterraram na página certa. Reforçar este sentimento com um endereço orientado para o grupo alvo, um design chique e imagens de apoio autênticas.

Defina o seu objectivo secundário com precisão. Conduz os visitantes até lá. Se possível, verifique com análises e testes A/B se isso funciona. E o que funciona ainda melhor. Na minha opinião, não se pode fazer uma homepage muito mais perfeita do que isso.

Como podem ver nas páginas que criei (ver screenshots) neste post, nem sempre os meus conselhos levaram ao resultado que eu queria :-; fico contente por ouvir de vocês, nos comentários, novos insights, só por essa razão! Talvez você tenha encontrado a fórmula perfeita para a sua página inicial?

As suas perguntas sobre o posto

Tem perguntas para o Phillip? Ou uma dica para o design da página inicial? Estamos ansiosos pelo seu comentário. Você quer ser informado sobre novos artigos sobre WordPress e webdesign? Depois siga RAIDBOXES no Twitter, Facebook, LinkedIn ou através da nossa newsletter.

Phillip é um designer freelancer e desde 2011 concebe, desenha, cria e mantém sites WordPress acessíveis para os seus clientes em Colónia. Durante muitos anos ele co-organizou o WordCamp Europe e outros WordCamps locais. Como designer de comunicação, o Phillip também gosta de desenhar logótipos, equipamentos comerciais e material publicitário, incluindo stands de exposições.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.