Como projetar um site para iniciantes

1. Estabeleça metas e prioridades antes de começar

Quando se pensa em design e desenvolvimento de web bem-sucedidos, nomes de domínio, um web host confiável, esquemas de cores de sites e sistemas de gerenciamento de conteúdo vêm à cabeça. No entanto, um design de site bem-sucedido é feito a partir de prioridades claras. Inicie o projeto do site determinando o que é mais importante para o seu negócio para que você saiba o que o site deve incluir.

"Anote o que o sucesso significa para você e trabalhe a partir daí", diz Jonathan. "Esse processo ajudará a decidir o que deve fazer parte do seu site."

Pode ser útil conferir outros sites em seu setor para inspiração de design. Navegue pelas páginas e tome nota das informações que eles fornecem, como comunicam suas marcas e o que oferecem para atrair e manter a atenção do visitante. Observe o que você acha que funciona bem e o que quer melhorar com seu próprio design.

Esta lista de elementos importantes do site ajudará você a criar um mapa do site. Um mapa do site, como o nome sugere, mapeia o seu site estabelecendo as páginas que você terá, como elas serão vinculadas umas às outras e ajudará a estabelecer sua arquitetura de informações mais tarde.

Considere incluir esses tipos básicos de páginas da web em seu site.

• Página inicial:
  

Esta é a página principal do seu site, então muitas vezes será a primeira página que os novos visitantes verão. Eles devem ver as informações mais importantes de que precisam primeiro, para entender o que você oferece e saber facilmente como navegar até o que precisam fazer em seguida.

• Quem somos:
  

Aqui, os visitantes podem descobrir as informações básicas sobre o seu negócio, por exemplo, como você começou, sua localização, sua missão e perfis dos principais membros da sua equipe. Você também pode incluir links para o horário de funcionamento e endereços (se tiver), links para páginas de redes sociais e informações de contato.

• Serviços:
  

Dependendo do que sua empresa ou organização faz, pode ser muito útil para novos visitantes ter uma página com explicações breves sobre os serviços que você oferece ou conteúdo visual de seus produtos e links para páginas detalhadas para saber mais sobre esses serviços.

• Carreiras:
  

Se você geralmente precisa de novos membros da equipe, considere uma página onde possa destacar as vagas disponíveis ou ter um formulário onde as pessoas possam perguntar sobre elas.

• Blog:
  

Se publica conteúdo regularmente, uma página de blog pode ser um local central para os visitantes encontrarem você. Isso pode incluir atualizações de produtos ou serviços, artigos relacionados ao que você oferece, perfis de novos projetos e qualquer outro conteúdo que ajudará a educar os visitantes do site sobre sua organização.

2. Crie um protótipo para visualizar seu site

Um protótipo é um esboço da estrutura do seu site. Assim como a planta de uma casa, ele oferece uma imagem bidimensional do layout, estrutura e funcionalidade do seu site.

Os protótipos podem ser criados simplesmente com caneta e papel ou digitalmente, usando ferramentas de design de site ou um criador de site que pode ajudar você a comunicar visualmente a estrutura do seu site. Há três tipos de protótipos e à medida que você desenvolve seu site, vai iterar de um para o outro, ganhando mais "fidelidade" ou detalhes, à medida que avança.

• Protótipos de baixa fidelidade: Esses esboços iniciais, que normalmente têm formas simples e texto de espaço reservado, são bons para mapear o fluxo de navegação. "Neste estágio, concentre-se apenas no conteúdo e em como o usuário vai interagir com ele, em vez de como o site vai realmente ficar", diz Jonathan. "Este é o nível de planejamento, então você está apenas esboçando o site e pensando sobre hierarquia."

• Protótipos de média fidelidade: Neste estágio, você ainda não tem imagens ou texto ativos. Você está criando renderizações em preto e branco que mostram uma representação precisa do layout do site. Há ferramentas disponíveis para criar essas renderizações que oferecem avaliações gratuitas, como Sketch ou Balsamiq. "Este estágio é o esqueleto do seu site", diz Jonathan. "Você não precisa de design específico, mas precisa de linhas limpas e dimensionamento preciso."

• Protótipos de alta fidelidade: Neste último estágio do design, você está criando um modelo que se parece com o seu site de verdade, com imagens, esquema de cores e texto real. Agora, você pode projetar coisas como seus menus e conteúdo interativo. "É neste momento que você adiciona cor e texto, mas não confunda isso com um protótipo funcional", diz Jonathan. "Ainda é apenas um exemplo da hierarquia do seu site."

3. Projete com o seu público em mente

Conforme avança pelas fases do design do site, concentre-se em criar um ativo para atender o seu público. Afinal de contas, esse é o ponto principal. Pense nas necessidades do seu público-alvo em cada estágio do desenvolvimento do seu site, desde a definição de prioridades até a formatação e a determinação da navegação.

"Por mais empolgante que seja criar um site completamente único e não convencional, o usuário final deve sempre ser a prioridade", diz Jonathan.

Consulte esta lista de verificação para criar uma experiência de usuário (UX) positiva.

• Forneça uma hierarquia visual:
  Uma hierarquia sólida facilita que visitantes reúnam informações rapidamente e entendam onde ir em seu site para saber mais. A hierarquia visual inclui espaçamento, cores, espaço em branco, repetição e muito mais.
• Simplifique:
  Enquanto você projeta, mantenha uma experiência direcionada ao visitante considerando se todos os elementos são necessários para os usuários. Você pode estar adicionando recursos que complicam o site e dificultam a navegação do seu público.
• Tenha uma chamada à ação (CTA) clara:
  "Fazer um pedido", "Comprar agora", "Cadastrar-se", "Entrar em contato conosco" e outras CTAs devem ser fáceis de encontrar e intuitivas. Continue se perguntando se o design do seu site permite que seu público saiba facilmente para onde você quer que ele vá em seguida dentro de seu site.
• Torne-o acessível:
  Seu site deve ser responsivo e acessível de qualquer dispositivo. Analise os diferentes aspectos visuais e de desempenho do seu site em PCs, tablets e telefones celulares. Certifique-se de que os usuários possam visualizar textos e imagens corretamente em diferentes dispositivos e que os botões e as CTAs sejam facilmente clicáveis em telas de vários tamanhos.

4. Use fotos para contar sua história

Um site é uma experiência visual, então concentre-se em imagens que atraiam o seu público-alvo para ajudar a comunicar o que a sua marca representa. Se você ainda não tem suas próprias fotos para ilustrar seus produtos ou serviços, há muitas fontes de imagens de acervo. Sites como Unsplash, Pexels e Pixabay oferecem uma ampla seleção de imagens gratuitas para você começar.

Jonathan sugere encontrar uma série de imagens de acervo do mesmo conjunto ou fotógrafo. "Fazer isso permite que você mantenha a consistência do estilo em todo o seu site", diz ele. "Isso fará com que seu site pareça mais profissional e sua empresa mais confiável."

Lembre-se destas dicas ao escolher imagens.

• Suas imagens devem contar uma história.
  Não escolha uma foto apenas porque ela parece bonita. Pense se a imagem funciona com o seu conteúdo para dar vida à sua marca.
• Mesmo que esteja usando imagens de acervo, seja original.
  Não escolha a opção mais óbvia. Você não quer escolher algo que um visitante reconhecerá imediatamente como uma foto de acervo que ele viu em uma dúzia de outros sites.
• As pessoas nas imagens devem se parecer com o seu público-alvo:
  

Isso fará com que os visitantes sintam que o seu site – e a sua marca, produto ou serviço – é algo com o que eles possam se identificar e precisar.

• Seja consistente com o estilo da imagem:
  Certifique-se de que os elementos visuais do seu site permaneçam fiéis à sua marca. Mantenha cores, fontes e imagens consistentes, para que elas reforcem a imagem da sua marca.
• Recorte imagens de acervo para maior impacto:
  Se você vende sorvete artesanal, por exemplo, e encontra uma imagem que mostra uma criança fofa comendo uma casquinha de sorvete com sua família, corte a foto para destacar a criança. Ela receberá mais atenção e parecerá única, em comparação com outros sites que podem ter usado a imagem na íntegra.

5. Acompanhe seu desempenho e melhore conforme avança

Um site evoluirá continuamente à medida que seu negócio crescer. Acompanhe seu desempenho desde o início usando os relatórios do seu site para ver o que está funcionando e o que está com baixo desempenho. Depois, ajuste para melhorar a experiência dos usuários e os resultados para você.

Integrar o Google Analytics ao seu site pode ajudar a rastrear a atividade para ver quais páginas estão recebendo mais tráfego e onde as pessoas estão clicando. Testes A/B – em que você compara duas versões diferentes entre si – ajudarão você a determinar quais elementos do seu site estão funcionando melhor e permitirão que tenha certeza de que sua CTA motiva seus visitantes. "Se quiser criar CTAs que convertam e contribuam para uma experiência memorável na web, você precisa testar continuamente o que funciona melhor", diz Jonathan.

Uma maneira de ver como os usuários estão interagindo com seu site é usar uma ferramenta de mapeamento de calor como a Hotjar, diz Jonathan. O mapeamento de calor fornece uma representação gráfica codificada por cores de onde os olhos das pessoas são naturalmente atraídos no site. Isso pode mostrar quais áreas do seu site estão recebendo mais atenção e pode orientar a melhoria e iterações futuras do seu design.

"Como trata-se do tráfego em tempo real que está sendo rastreado, ele é adequado tanto para sites novos quando de longa data", ele observa. "E a melhor parte é que a apresentação de mapas de calor é simples e fácil de entender."

Preste atenção aos detalhes

Ao projetar seu site, lembre-se de que ele é o hub para sua atividade de marketing. Ele pode ser a primeira impressão que alguém tem do seu negócio e você quer que seja uma boa impressão, então não pule etapas.

Dedique tempo e esforço para acertar, aconselha Jonathan. Verifique se todos os recursos funcionam em telas de qualquer tamanho, para que os usuários possam navegar e usar o site. Caso contrário, eles vão simplesmente procurar a concorrência.

"O design de web barato não lhe dará a flexibilidade e o controle necessários para tornar seu espaço digital identificável e funcionalmente seu", diz ele. "Cada elemento é importante, mesmo os básicos. Não economize em qualidade."