Design da homepage: Como fazeres da tua página inicial um sucesso

8 min.
Homepage Design Tipps

A página inicial ou homepage é para muitos o santuário de um site. Deve servir inúmeros propósitos e servir diferentes grupos-alvo e, de preferência, ao mesmo tempo. Como deve ser uma boa abordagem e qual a aparência de um design de uma homepage orientada para o alvo? Aqui estão as dicas mais importantes.

Vou falar a seguir de empresas, mas os princípios aplicam-se em muitas partes a um simples blogue, à tua "página de interesse especial", ou também ao site da tua banda. A homepage deve:

  • Mostrar o melhor lado da empresa, agência ou prestação do serviço
  • Mapear simultaneamente todas as áreas de atividade empresarial
  • Mostrar que a empresa está atualizada, através de notícias e ligação ao Facebook, Instagram, etc.
  • Mas também a "storytelling" com a história d@s fundador@s deve estar presente
  • A subscrição da newsletter deve estar sempre visível

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

optimize images homepage
Uma página inicial segundo o lema: Uma imagem vale mais que mil palavras

Já podes ver onde isto vai levar: A página inicial não pode e não deve fazer tudo. Tens de abordar o assunto de forma conceitual e estratégica e tens de pensar exatamente no que de facto deve ser exibido lá e porquê. A minha abordagem certamente não é a única, e pode até nem ser a melhor para o teu negócio. Mas vou tentar justificar todas as indicações. No entanto, também gostaria de ler outras opiniões e sugestões nos comentários.

A página inicial é uma landingpage

Como todas as páginas do teu site, a página inicial é uma landingpage (página de destino). Vê nosso artigo sobre a melhor forma de desenhar landingpages. Quando te aperceberes disto, então muita coisa já terá sido conseguida. Então, pensa nisso.

Idealmente, até já recolheste dados através da tua homepage. De onde vêm as pessoas que chegam à tua página inicial? O que é que elas querem alcançar? Como podes ajudá-las a fazer isso? Qual é o objetivo da tua landingpage? Que informações queres transmitir?

Análise do teu site

A recolha de números através da tua página inicial e outras subpáginas é extremamente importante. Afinal, é a única maneira de descobrires se o teu conteúdo e design estão a atingir o objetivo. Lê os nossos guias sobre KPIs de conteúdo, hub de conteúdo e testes de conteúdo.

De onde vêm os teus e tuas visitantes?

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

Em muitos casos, el@s podem ler um artigo no teu site que partilhaste no Instagram, por exemplo, e depois ir para a página inicial para ver o que a empresa realmente faz. Agora tens de oferecer algo para @s utilizad@res! E a primeira coisa é responder à pergunta:

Afinal o que é que o site ou a empresa fazem?

Infelizmente, isto é muitas vezes esquecido. Relativamente aos/às visitantes, a primeira pergunta à qual uma homepage tem de responder é: "Vim ao lugar certo? Porque el@s vêm de algum lugar, chegam à tua página - e ainda não sabem nada. No momento em que chegam à tua página, el@s precisam da confirmação de que "aterraram" na página certa. É como um pequeno doce para começar a sua experiência de utilizador (UX):

Vieste ao lugar certo. Podes respirar fundo, relaxar e obter as tuas informações!

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

Homepage Basic Text
A página inicial de um consultório médico com texto introdutório sóbrio

É aqui que muitas vezes costumo sentir os ventos contrários: primeiro tens de envolver as pessoas emocionalmente para que elas fiquem na tua página. Do género, "Vamos colocar uma foto enorme na página inicial e depois deixar a notícia rolar através de um controle deslizante. Para que as pessoas possam ver a grande empresa global que somos".

Em relação aos grandes controles deslizantes: eles não funcionam. Muitos já escreveram sobre isto. A página Should I use a carousel? é um bom ponto de partida. Também a afirmação "isto é importante, vamos colocar na barra lateral" já não funciona, porque a barra lateral simplesmente não está atualizada - e não se encaixa bem no web design responsivo.

Abordagem emocional

Eu dou um retumbante "sim" à abordagem emocional ao grupo-alvo. Isto não só vincula os teus e tuas 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 é que vocês realmente fazem?". Como é que o nível de emoções também pode ser trazido?

Esta é uma decisão estratégica que deve ser baseada na identidade corporativa (IC) da tua empresa. A tua IC inclui a forma como te diriges ao teu grupo-alvo. Há basicamente três possibilidades:

  • Através do texto
  • Através do design
  • Através de imagens ou vídeos

Abordagem através do texto

As pessoas usam um site de formas muito diferentes. Isto significa que tu não sabes como elas encontram algo no teu site. Por exemplo, a primeira coisa que elas usam é o menu, pesquisam e depois digitalizam os títulos ou links na tua página. No entanto, o primeiro ponto de fixação mais comum é o primeiro texto da página que lhes dá informações, tal como vários estudos o têm demonstrado. Podes "moldar" este texto de forma bem diferente com a ajuda da abordagem e do tom.

"O meu nome é Phillip Roth, vou fazer um site para o seu negócio" soa muito diferente de "

Abordagem através do design

Um design apelativo não só transmite profissionalismo, mas também toca no lado emocional. Vê o nosso artigo sobre os princípios básicos para um web design harmonioso. Cores, seleção da fonte, elementos de design - tudo isto pode transmitir aos/às visitantes confiança, alegria, loucura, algo fixe e muitas outras emoções. O design corporativo é parte da mensagem global que a tua empresa quer transmitir. Elementos que transmitem confiança, tais como certificados, podem trazer mais pontos de bónus.

Homepage Images Emotions
Página inicial com abordagem emocional e texto introdutório

Imagens ou vídeos

A imagem da tua empresa também é moldada pela linguagem visual. És uma empresa global com 600 funcionári@s e arranha-céus fantásticos em Xangai ou uma pequena fábrica com uma bonita oficina? És um@ coach com um belo espaço ou um@ médico@ com um consultório chique? É isto que os teus e tuas visitantes querem saber e ver. El@s querem perceber: "Posso me sentir confortável lá?", "O produto diz-me alguma coisa?", "É uma empresa à qual me poderia candidatar?", "Trabalham lá pessoas normais?". "Eles são simpáticos?".

Tudo isto pode ser transmitido em milésimos de segundos com uma ou mais bonitas imagens. Mas para isso, as imagens têm de ser autênticas. Porque o que tu mostras de ti mesmo e da tua equipa tem de ser real hoje em dia. Caso contrário, as pessoas não se vão sentir levadas a sério. Já ninguém quer ver a foto de arquivo com a desconhecida telefonista loira. Exatamente como uma desconhecida sala de reuniões cheia de pessoas sorridentes, mas "falsas".

Talvez tenhas até um bom vídeo explicativo que resume os teus serviços em 30 segundos. Ou talvez tenhas um vídeo como pano de fundo que mostra o teu hotel chique e a bela paisagem circundante. Tudo o que sirva de suporte à tua identidade corporativa e à mensagem associada é bom!

Homepage Color Concept
Homepage com fotografias apelativas e conceito de cor uniforme

E agora?

Então agora temos a atenção d@s visitantes. Agora sabem: "Estou no lugar certo, sinto-me confortável. O que se segue depois é uma decisão estratégica: podes aprofundar a informação que até agora apenas abordaste brevemente. Para além da primeira impressão, agora podes perseguir o teu objetivo secundário.

Faz sentido, neste momento, pensar sobre qual é realmente este objetivo. Vê também a estratégia de conteúdo associada. Porque se @s visitantes não são fixad@s no teu menu ou na pesquisa de informações, então começam a fazer scroll. Então, o que lhes vais oferecer a seguir?

As possibilidades são múltiplas:

  • Conta uma história
  • Aprofunda as informações sobre a tua oferta de serviços
  • Mostra eventos espetaculares, envolvimento ou novidades
  • Oferece uma ferramenta para agendamento de consultas/aconselhamento, assim não te contactam sempre directamente
  • Eu pessoalmente vendo mais através da minha newsletter, ofereço-a em vários lugares no site
  • Remete para a tua página de emprego se estás à procura de nov@s funcionári@s
  • Mostra avaliações positivas

Como podes ver, existem centenas de maneiras de se conceber a página inicial. E certamente não há nenhuma receita padrão para levar os teus e tuas clientes ao final desejado. Vais ter de experimentar. No entanto, tem em mente que a tua página inicial ou landingpage não recebe atenção infinita. Muito raramente alguém faz um scroll de 27 metros - e ainda assim absorve toda a informação.

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

Para esta conceção eu gosto de usar as chamadas wireframes ou mockups. Ou seja, dispões o conteúdo da página inicial em retângulos simples com molduras cinzentas. Sem conteúdo real, sem design. Podes fazer isto numa folha de papel ou com programas como Adobe XD, Sketch, Photoshop, InDesign ou até mesmo no Powerpoint. Como eu disse, deixa o design fora disto por agora. Neste momento, queres saber, por exemplo:

  • O que deve definitivamente estar na página inicial?
  • O que não precisa de lá estar?
  • Será demasiado?
  • É possível alcançar o objetivo com o espaço disponível?
  • Os/As visitantes vêem a Call to Action suficientemente cedo?
Mockup Wireframes Adobe XD
Wireframes em Adobe XD

Vai direto ao assunto!

Agora que definiste o teu objetivo secundário e deste aos utilizadores e utilizadoras toda a informação que conseguiste colocar no espaço limitado, deves esclarecer o teu objetivo. O melhor lugar para fazer isso é no final da página. Como já disse: aí podes destacar as informações mais importantes, colocar a "call-to-action" (chamada para a ação) ou convidar o/a utilizador/a a entrar em contacto através de uma foto tua - juntamente com os teus dados de contacto. Qualquer que seja o teu objetivo secundário da página: agora podes colocá-lo antes do teu rodapé aparecer. A tua página inicial é - como disse no início - uma landingpage.

O rodapé pode funcionar novamente como uma navegação secundária, por exemplo, se lá quiseres oferecer mais informações. Muits pessoas também gostam de olhar para o teu aviso legal, para se certificarem de que és um fornecedor sério. Mas tem cuidado! Demasiados elementos no teu rodapé podem desviar do teu objetivo real. Se, por exemplo, o registo para a newsletter está lá, mas só escreves uma newsletter uma vez por ano, então talvez isto não seja oportuno e não conduza ao teu objetivo.

Conclusão

Pensa na tua página inicial como uma landingpage. Dá aos teus e tuas visitantes a sensação de que "aterraram" na página certa. Reforça este sensação com uma abordagem orientada para o grupo alvo, um design chique e imagens de suporte autênticas.

Define o teu objetivo secundário com precisão. Conduz @s visitantes até lá. Se possível, verifica se isto funciona com Analytics und A/B-Tests. E o que pode funcionar ainda melhor. Na minha opinião, não se pode fazer uma página inicial muito mais perfeita do que isto.

Como podes ver nas páginas que criei (ver screenshots) neste artigo nem sempre os meus conselhos levaram ao resultado que eu queria :-; É por esta razão que gostava de conhecer novos insights nos comentários! Talvez até tenhas encontrado a fórmula perfeita para a tua página inicial?

As tuas perguntas sobre o artigo

Tens perguntas para o Phillip? Ou uma dica para o design da página inicial? Envia-nos o teu comentário. Queres ser informado/a sobre novos artigos sobre WordPress e web design? Então segue a 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 e suas 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 *.