partes de um site

Vários aspectos comuns de um bom web design tornam os sites mais fáceis e agradáveis de usar. Saber quais são esses elementos te ajudará a entender por que você gosta de alguns e não de outros, bem como o que deseja adicionar ao seu.

É importante observar que esses são termos padrão para partes distintas de um site. Eles são muito comuns, no entanto, outras terminologias podem ser usadas.

Os elementos individuais em uma página, para que servem e por que você precisa deles serão abordados neste artigo no que diz respeito às diferentes partes de um site.

Por que é importante conhecer as partes de um site?

Compreender a anatomia de um site irá ajudá-lo a criar um site visualmente atraente e fará com que seus visitantes encontrem o que estão procurando com facilidade. Você pode não saber nomear as várias partes de um site, mas se tiver passado mais de cinco minutos na internet, provavelmente as reconhecerá.

Quando você navega na Internet, você espera que os sites funcionem de uma maneira específica, assim como a maior parte do mundo lê da esquerda para a direita e de cima para baixo. As informações mais relevantes devem, portanto, ser encontradas no canto superior esquerdo. O canto superior direito é o segundo local mais importante.

Os usuários do seu site esperam a mesma coisa. É por isso que os layouts das páginas da web são semelhantes entre si e por que o design do seu site deve conter algumas características únicas. Lembrando que a anatomia de um site se refere ao layout geral.

A anatomia fundamental de um site

Algumas partes de um site são tão importantes para o web design que devem estar presentes em todos para que funcionem de forma eficaz. Esses componentes trabalham juntos para construir a base de um site.

1. Cabeçalho

Cabeçalho do site George Clark III

Imagem retirada do site George Clark III

Esta é a parte de um site que contém o logotipo e, na maioria dos casos, o menu de navegação. O cabeçalho é a área na parte superior da página que permanece visível e constante à medida que as pessoas navegam em seu site.

Anteriormente, o cabeçalho era usado para exibir um banner ou imagem promovendo sua marca, semelhante à foto de capa de uma página do Facebook. No entanto, os sites atuais são mais simples, e a tendência é que seu logotipo e navegação sejam os únicos elementos no cabeçalho.

2. Menu

Menu do site Globe Hop

Imagem retirada do site Globe Hop

O menu é apresentado na forma de um mapa de palavras. Ele explica como encontrar o que os usuários estão procurando em seu site. O menu geralmente está situado logo acima ou abaixo do cabeçalho, mas também pode ser encontrado nos dois sentidos.

O menu deve ser simples e direto. Às vezes isso pode exigir muito brainstorming e planejamento. Afinal, apenas as categorias mais significativas devem ser listadas. Lembre-se: os visitantes esperam encontrar o que procuram nesta parte com três cliques ou menos.

Você pode utilizar menus suspensos para manter a navegação do menu simples: quando o leitor mantém o mouse sobre um item, uma nova lista aparece para ele escolher.

3. Imagens

Imagens do site Emily Penn

Imagem retirada do site Emily Penn

Logo abaixo do banner, costuma-se existir uma imagem, uma série de fotos ou, em raras ocasiões, um vídeo. O cabeçalho e a imagem principal juntos formam a seção superior do seu site, também conhecida como acima da dobra, e são cruciais para causar uma boa primeira impressão. O visual em destaque, em particular, tem um impacto significativo em relação a permanência dos seus consumidores em seu site — se eles ficam ou saem em poucos segundos. É por isso que esta imagem deve comunicar algo vital sobre o seu negócio. É crucial que ela se conecte ao restante do seu site, seja com fotos de seus produtos ou serviços ou simplesmente dando uma ideia geral do que é a sua marca.

4. Conteúdo do site

Conteúdo do site Amy Chambers

Imagem retirada do site Amy Chambers

Esta é a mais importante entre as diferentes partes de um site. As palavras postadas que falam sobre seu site, o que você tem a oferecer e como os visitantes podem se beneficiar de suas ofertas são chamadas de conteúdo. O material de um site pode abranger uma ampla variedade de tópicos. Geralmente se refere aos parágrafos que explicam o objetivo do seu site, mas também pode estar relacionado aos textos dos botões.

Embora o texto nos botões e menus possa parecer sem importância, ele é na verdade a força motriz por trás dos sites. É a informação que explica o que os usuários devem esperar ao clicar em "Comprar agora" ou "Carrinho de compras". Reserve um tempo para fazer um layout completo do conteúdo do seu site para que qualquer visitante possa compreender sua marca tão bem quanto você.

5. Barra lateral

Barra lateral destacada do blog da Strikingly

Imagem retirada do site Strikingly

Uma barra lateral é uma pequena coluna vertical que acompanha o conteúdo do seu site. Anúncios, conexões com outras informações, CTAs (Chamadas à Ação) e uma caixa de pesquisa são frequentemente encontrados na barra lateral. Considere a barra lateral como um complemento ao conteúdo principal do seu site.

Nos últimos anos, tem havido uma tendência de excluir totalmente a barra lateral e apresentar seu conteúdo em uma única coluna. A eliminação da barra lateral faz sentido para alguns sites, mas não para todos. A escolha pessoal e/ou se o estilo (com ou sem barra lateral) oferece uma melhor experiência ao usuário ou uma maior taxa de conversão são os fatores decisivos.

6. Controle deslizante

Controle deslizante de imagem do site Hayashida Rice

Imagem retirada do site Hayashida Rice

Um controle deslizante é usado para exibir imagens, como uma apresentação de slides em que as imagens deslizam da direita para a esquerda ou vice-versa. Os controles deslizantes podem ser usados em qualquer lugar em um site, mas normalmente são usados em páginas iniciais para substituir (ou complementar) uma imagem em destaque.

Eles estão se tornando menos populares à medida que os sites evoluem e mais atenção é dada à velocidade de carregamento da página e à maximização das experiências do usuário em dispositivos móveis. Em suma, controles deslizantes são bem úteis dependendo dos seus objetivos.

7. CTAs (Chamadas à Ação)

Controle deslizante de imagem do site Hayashida Rice

Imagem retirada do site Founder Mastermind

Uma call-to-action, ou CTA, a mais importante entre as partes de um site, é um pequeno texto que incentiva os clientes a dar o próximo passo. CTAs são frequentemente encontradas em botões e incluem palavras como "Comece agora" ou "Compre aqui". Esse estilo de escrita instrui os usuários sobre como realizar uma ação específica. Assim, quando eles clicam em um botão, eles sabem exatamente o que esperar.

As CTAs são uma parte crucial de um site, pois permitem que os usuários usem ou comprem seu serviço/produto. Você pode experimentar diminuição nas vendas e uma taxa mais alta de clientes que abandonam seu site sem realizar nenhuma ação se não adicionar esses botões.

8. Rodapé

Rodapé do site Emilio Rios

Imagem retirada do site Emilio Rios

De forma simplificada, um rodapé aparece no final da página. Normalmente inclui um mapa com conexões para todas as partes do site. Isso ajuda os visitantes a encontrar os seus serviços, incluindo aqueles que não estavam inclusos no cabeçalho.

Os rodapés do site geralmente incluem informações básicas de contato, permitindo que as pessoas entrem em contato com você ou localizem sua empresa. Esse tipo de informação é fundamental para o sucesso do seu negócio. Uma barra de mídia social que contém ícones pequenos, porém reconhecíveis, e que direcionam os leitores para suas páginas de redes sociais também pode ser incluída no rodapé. Essa prática ajuda a atrair seguidores nessas plataformas, o que pode levar ao aumento da exposição da marca e eventual crescimento dos negócios.

9. Página de destino

Página de destino do site Swish

Imagem retirada do site Swish

Ao veicular anúncios no Google ou Facebook (ou em qualquer outro lugar), você deve fornecer uma página de destino para as pessoas visitarem quando clicarem no anúncio – daí o nome. Depois de entender a estrutura básica de um website, gradualmente você se lembrará de todas as partes de um site.

As páginas de destino variam das demais, pois todos os elementos de distração, como cabeçalho, rodapé ou barra lateral, são excluídos ou minimizados. O principal objetivo de uma página de destino é fazer com que os visitantes tomem uma ação (por exemplo, baixar um relatório, inscrever-se em newsletters, comprar alguma coisa, etc.) e aumente as conversões. O conteúdo de uma página de destino deve ser o mais focado possível.

10. Página inicial

Página inicial do site Fighting Pretty

Imagem retirada do site Fighting Pretty

A página inicial também é conhecida como página principal. Na maioria dos casos, é onde você deve começar no que diz respeito às partes de um site. Vincular seu logotipo à sua página inicial é uma boa técnica, pois oferece aos visitantes uma opção de “escape” ou “reset” se eles se perderem em seu site.

11. Blog

Blog Strikingly

Imagem retirada do site Strikingly

Um blog é um site por si só. Então, qual é exatamente a diferença entre um blog e um site? Não há muita, para falar a verdade. Tudo se resume a como as informações são organizadas e apresentadas.

  • Uma postagem é quando você escreve em um blog e as postagens do blog são publicadas em ordem cronológica, semelhante às entradas de um diário. O termo "blog" vem de "weblog".
  • Quando você publica algo em um site, isso é chamado de página e as páginas da web não são exibidas em nenhuma ordem específica. Elas são simplesmente uma coleção de páginas vinculadas (Página inicial, Sobre, Fale Conosco, etc).
  • As entradas do blog permitem a interação do leitor por meio de comentários.
  • As páginas da web são geralmente de natureza instrutiva sobre os produtos ou serviços de uma empresa, portanto, não apresentam uma seção de comentários. Elas costumam usar um tom mais profissional e autoritário enquanto o tom das postagens de blog é mais descontraído e coloquial.
  • Um blog pode existir como um site separado ou como uma das partes de um site.

Este artigo, por exemplo, é uma postagem de um blog que faz parte de um site maior, o Strikingly.

Em conclusão

Espero que este guia simples sobre as diferentes partes de um site tenha sido útil. Para se comunicar de forma inteligente com um web designer ou desenvolvedor, você não precisa entender a tecnologia subjacente. Você se sairá bem se tiver uma compreensão fundamental da linguagem quando se trata das partes de um site.

Se você ainda ficou com alguma dúvida, não se preocupe! Criadores de sites como o Strikingly podem te ajudar. O Strikingly, por exemplo, permite que os usuários compartilhem seus pensamentos com o mundo por meio de sites únicos e bem projetados. Nossos serviços gratuitos de design de sites são usados por mais de três milhões de empreendedores, pequenas empresas, artistas e estudantes do mundo todo.

Nossos modelos personalizados facilitam a criação de sites, permitindo que você concorra com empresas maiores. Munido de uma variedade incrível de ferramentas e do melhor software de web design gratuito, comece a trabalhar no desenvolvimento do seu site agora mesmo!