Baixe nosso manual gratuito para criar o seu site com confiança.
O e-mail informado é inválido.
Obrigado por se cadastrar.
Ao informar seu e-mail, você indica que leu e entendeu nossa Política de Privacidade e concorda em receber marketing do Squarespace.
Quer criar uma página da web que seja linda e que estimule a ação? Um layout bem projetado mantém os usuários envolvidos e os guia em direção aos seus objetivos, seja para fechar uma compra, se cadastrar em uma newsletter ou saber mais sobre você ou sua empresa.
A seguir, guiaremos você pelos princípios para criar um layout mais interessante, cobrindo desde padrões e exemplos comuns até orientações testadas e aprovadas para o design visual.
O que é preciso para ter um ótimo layout de site?
Pense no layout da página como uma loja física. Os clientes esperam encontrar certas coisas em lugares específicos. Da mesma forma, você pode usar padrões de design conhecidos para orientar os visitantes do site e deixá-los à vontade nas suas páginas.
Você não precisa reinventar a roda. Basta começar com uma estrutura básica e depois dar o seu toque pessoal para destacar sua marca e o que você oferece.
Cada layout da página inclui o seguinte:
Elementos essenciais
Hierarquia visual
Fluxo do design
Equilíbrio dos espaços em branco
Analisaremos separadamente cada um desses componentes.
Confira conselhos de design de sites dadas por um designer do Squarespace
Elementos essenciais
O layout de uma página precisa dos seguintes elementos para mostrar o que os visitantes esperam ver quando acessam um site.
Navegação: os usuários precisam navegar intuitivamente pelo site. Essa é uma consideração importante em todas as páginas. O menu (geralmente parte do cabeçalho) e o link devem facilitar para as pessoas acessarem diferentes partes do site. Ele normalmente inclui o logotipo, a navegação da página principal e um botão de chamada para ação (CTA).
Cabeçalho/seção hero: o cabeçalho do site é a seção superior da página. Ele inclui alguns conteúdos e recursos visuais que mostram sua marca e o que você faz. Normalmente, ele hospeda a navegação, um título, uma breve descrição da página, um visual (imagem ou gráfico) e uma chamada para ação.
Área de conteúdo: é onde ficam as informações detalhadas nas quais seus visitantes podem se aprofundar. O conteúdo escrito, imagens e outros elementos-chave (vídeos, CTA, formulários) ficam na seção de conteúdo da página. Ele pode incluir recursos e benefícios do produto, processo ou histórico do cliente, depoimentos sobre sua empresa e outros.
Barra lateral: essa coluna vertical, geralmente no lado direito ou esquerdo da página, destaca outras informações que as pessoas podem achar úteis, como "Contato", "Horário de funcionamento" ou um link para páginas relacionadas.
Rodapé: na parte inferior da sua página fica o rodapé, que pode conter o link da página, dados para contato, link para mídias sociais e um formulário de cadastro da newsletter, além de informações sobre direitos autorais e a política de privacidade.
Não subestime o poder da previsibilidade. Quando encontram um layout familiar, os visitantes podem se concentrar no conteúdo e na mensagem em vez de se esforçarem para se acharem.
Hierarquia visual
A hierarquia visual orienta os visitantes pela página, levando-os primeiro às informações mais importantes. Isso garante que eles vejam as principais mensagens e os incentiva a interagir com o conteúdo.
Para criar uma hierarquia visual, use elementos de design como:
Cor: use cores contrastantes para destacar os principais elementos.
Estilo e tamanho das fontes: use fontes maiores e mais grossas nos títulos importantes; e fontes menores no texto principal.
Posicionamento dos elementos: posicione os elementos mais importantes em uma posição mais alta na página.
Pergunte-se: "Quando chego a esta página (ou seção), o que vejo primeiro?" Com isso, você sabe como os visitantes observam naturalmente seu conteúdo.
Tipicamente, a hierarquia visual é mais ou menos assim:
Texto do título
Imagem/gráfico
Texto principal
Chamada para ação (CTA)
Fluxo do design
Ao lerem uma página da web, as pessoas tendem a examinar o conteúdo em padrões previsíveis. Dois padrões comuns são o padrão F e o padrão Z. Entendendo esses padrões, você pode criar um layout mais envolvente.
Padrão F:
Os leitores se concentram principalmente nas seções superior e à esquerda da página.
As primeiras linhas do texto e as primeiras palavras de cada linha recebem mais atenção.
Coloque o conteúdo mais importante na parte superior e esquerda da página.
Padrão Z:
Os leitores percorrem o topo da página, depois descem diagonalmente até o canto inferior esquerdo e, por fim, atravessam a parte inferior.
Use a parte superior e inferior da página para chamar a atenção e transmitir mensagens importantes.
Ao considerar os padrões de leitura, você pode posicionar estrategicamente os elementos para capturar a atenção de um público maior. Lembre-se de que os padrões dependem de onde seu público-alvo vive: os visitantes que falam um idioma que lê da direita para a esquerda, por exemplo, podem ler a página de forma diferente.
Equilíbrio dos espaços em branco
O espaço em branco, ou espaço negativo, é exatamente isso: um espaço vazio entre o texto e os elementos visuais em uma página da web. Talvez você não pense muito nos espaços em branco até chegar a um site tão desorganizado que fica difícil encontrar alguma coisa. O espaço em branco é importante porque separa os elementos principais, criando um espaço confortável entre as seções.
Use espaços em branco para criar um visual limpo e nítido, o que melhora a legibilidade das páginas. Esse espaço em branco também criar o fluxo de design mencionado acima e destaca detalhes importantes para os visitantes.
Três exemplos de layout para sites
1. Kearny
Este site para uma comunidade Unfold Studio espaço faz bom uso de uma imagem em destaque ou seção hero que cria uma reação emocional, colocando detalhes importantes no padrão F.
2. Forma
Um design equilibrado e com cabeçalho forte. Este layout funciona bem para facilitar a navegação e a página focada no conteúdo, seguindo livremente um padrão Z em cada seção da página.
3. Spotted
O layout em estilo de grade, abaixo do hero deste site, apresenta bom contraste e facilidade na navegação.
Seis padrões comuns do layout
Confira estes padrões de layout para descobrir formas eficazes e fáceis de os visitantes estruturarem uma página da web. Você pode achar que um layout diferente funciona melhor para uma página ou seção diferente no seu site.
Coluna simples: o layout de coluna simples tem tudo a ver com simplicidade. Como todo o conteúdo é organizado em uma só coluna vertical, este recurso funciona bem em páginas com foco em conteúdo, principalmente blogs. Com o uso dele nos espaços em branco, o conteúdo importante é priorizado em relação a outros conteúdos da página.
Duas colunas: esse padrão de layout é muito versátil. Você cria um design equilibrado e visualmente atraente ao combinar texto, imagens e outros elementos de várias formas.
Várias colunas (grade): para os designers de sites que desejam incluir uma variedade de elementos em cada página, um padrão de grade no layout maximiza a flexibilidade e estabelece uma estrutura. Você pode adicionar ou subtrair colunas conforme necessário até chegar ao que você quer.
Imagem em destaque/seção hero: imagens grandes chamam a atenção. Você pode transmitir muitas informações e, ao mesmo tempo, evocar uma forte reação emocional com uma imagem em destaque cuidadosamente escolhida. O layout da seção hero define o tom da sua página e geralmente é seguido por outro padrão de layout.
Tela dividida: para apresentar diferentes opções lado a lado para contrastar informações, o layout com padrão tela dividida é eficaz. Ele também funciona bem nas chamadas para ação, em que você pode apresentar informações pertinentes de um lado e uma chamada para ação (CTA) do outro lado.
Assimétrico: esse estilo varia de tamanho e peso para criar interesse visual e contraste. Exemplos: uma imagem em negrito e de tamanho grande combinada com uma fonte delicada e minimalista; ou um conjunto de elementos intencionalmente colocados fora do centro. É uma boa opção para quem quer incluir mais arte, tendências ou diversão a um site.
Dicas para escolher o layout correto
Qual padrão de layout de site é ideal para você? Siga estas etapas para determinar o layout correto.
Finalidade da página: qual é a finalidade da página? Você vende produtos? Apresenta um portfólio? Dá informações? O design do layout deve ajudar os visitantes a identificarem o objetivo principal da página.
Defina o tipo de página: considere o tipo de página (blog, portfólio, oferta de serviços ou produtos, página de informações etc.). O que está acontecendo na página o guiará em direção a um padrão de layout que o exiba melhor.
Teste variações: antes de finalizar sua decisão e publicar a página, teste duas ou três ideias diferentes de layout para ver qual padrão transmite sua mensagem de forma mais eficaz.
Exemplo: o objetivo de uma página Serviços é divulgar os detalhes sobre os serviços que você oferece e convencer as pessoas a serem um cliente ou freguês seu. A página pode ser disposta em uma coluna simples com estes elementos:
Hero: imagem de largura total com texto e uma chamada para ação / botão de CTA
Sobre Nós seção: uma grande seção de texto explicando os serviços que você oferece
Recursos e benefícios: destaque os três principais benefícios, use três colunas de conteúdo
Seção de processo: uma visão geral de alto nível dos passos do seu processo, como um carrossel
Preços: mostrando os preços e o que você entregará
Depoimentos: um controle mostrando depoimentos positivos
CTA final: imagem de largura total com texto e um botão de CTA
Tanto para quem é novo no design de layouts quanto para quem já é profissional, no Squarespace também é possível gerar sugestões automáticas para o layout. A ferramenta Trocador de Layouts mostra diferentes opções de layout e as aplica rapidamente antes de publicar uma página.
Recomendações para o design visual
Qualquer que seja o padrão que você decida adotar nos layouts, siga estas recomendações para criar um design visual eficaz.
Equilíbrio: toda página que você criar precisa ser visualmente equilibrada. Quando próximos demais, os elementos criam desarmonia. O equilíbrio pode ser feito com simetria (efeito espelhado), assimetria (visual dinâmico) ou equilíbrio radial, que chama a atenção para um ponto focal.
Contraste: crie contrastes para melhorar a legibilidade. Siga as recomendações para tipografia, cores, tamanhos da fonte e estilos da fonte, para você criar páginas agradáveis aos olhos e fáceis de ler.
Repetição: é perfeitamente normal repetir elementos de design, desde que você crie uma padronização e um visual coeso. Alguns dos elementos que você pode repetir são o uso das cores, os estilos de fonte, o espaçamento e o layout da seção.
Alinhamento: use uma grade para alinhar os elementos da página. Isso deixa o site limpo e organizado.
Proximidade: ao agrupar elementos relacionados na página, você melhora a organização e a legibilidade da página.
Usando uma grade em prol das decisões de layout
A grade pode ser útil em praticamente qualquer design de layout de site. Com ela, você testa diferentes posicionamentos de elementos e, ao mesmo tempo, ofereça uma estrutura para fazer isso.
Usando uma grade, você pode brincar com as seguintes noções básicas:
Colunas: criam separações na largura da página. Evite que as colunas se batam; use espaços em branco para dar mais clareza.
Linhas: separam a página na horizontal. Crie a quantidade certa do espaçamento entre as linhas.
margem: separa o conteúdo entre colunas e linhas.
Escolha um padrão de layout que melhor se adapte ao seu conteúdo e às suas metas; e não tenha medo de testar diferentes layouts até encontrar o equilíbrio e o apelo visual para o seu site. Ao seguir essas recomendações, você cria com segurança os layouts mais eficazes para o seu site.