9 Melhores exemplos de layout de site e quando usá-los

Publicados: 2020-12-04

O papel que os layouts de sites desempenham em impactar a qualidade do design é claro para todo designer profissional. O padrão e a estrutura de um site são as primeiras coisas em que pensamos nos primeiros estágios de nosso processo de design. Depois de identificar os objetivos do nosso site e os elementos que ele deve incluir, o design do layout da página efetivamente inicia o primeiro estágio de colocar as ideias no papel.

Somente depois de decidir sobre a anatomia de seu site e como mapear seu conteúdo de acordo, é que você pode construir wireframes lo-fi e explorar o que funciona melhor para o que você deseja alcançar.

É uma página inicial fortemente visual que funcionará melhor para sua estratégia de conteúdo, na forma de um layout de mídia em tela inteira? Ou faz mais sentido distribuir a hierarquia de informações em um formato mais uniforme, usando um layout de tela dividida para exibir várias seções de conteúdo com significado mútuo?

Isso é exatamente o que estamos prestes a explorar, observando nossos nove exemplos escolhidos a dedo de designs de layout de sites usados ​​com mais frequência por designers profissionais.

Avaliar esses exemplos nos ajudará a entender a função de cada tipo de layout na construção de conteúdo de site que atualize nossos objetivos de design. Em última análise, saber quando e como aproveitar o layout certo para nossos sites - nos equipará e nos capacitará para construir estratégias de design mais robustas e criar sites que são ainda mais bonitos.

Use uma grade de site para construir o layout de sua página

Índice

  • O que é um layout de site?
  • O que todo layout de site deve incluir
  • Os 9 layouts de site mais eficazes
  • 1. Layout de coluna única: o iPad mundialmente famoso
  • 2. Layout de duas colunas: Earmark
  • 3. Layout de três caixas: KatchMe
  • 4. Layout de tela dividida: Bose
  • 5. Layout assimétrico: Barriga
  • 6. Barra lateral fixa: Restaurante Arbor
  • 7. Layout de mídia em tela cheia: Dutch National Opera & Ballet
  • 8. Layout da grade: Malika Favre
  • 9. Layout das caixas: TSX Broadway
  • Preparar, configurar, construir

O que é um layout de site?

Um layout de site é uma estrutura que define a estrutura de um site. O layout coloca os principais elementos do site na frente e no centro e fornece aos usuários um caminho claro para navegação. O layout do site é um elemento crítico que determina se o site terá sucesso ou falhará.

Os objetivos de um layout de site são melhorar o engajamento do usuário, tornar as páginas da web visualmente atraentes e organizar o conteúdo do site para que se encaixe em uma sequência clara

O que todo layout de site deve incluir

Embora certamente vejamos a beleza de quantos layouts existem para escolher em um web design profissional, também existem componentes essenciais que cada tipo de layout deve incluir, mesmo se incluídos de uma forma não convencional. Como sabemos pela lei de Jakob, um dos princípios mais fundamentais em web design, é que os layouts de interface e os fluxos de navegação devem ter exclusividade envolvente, mas equilibrados com familiaridade que é lógica e intuitiva para os usuários.

Essencialmente, o que nunca devemos esquecer ao planejar nosso layout de página é incluir:

  • O cabeçalho do site , que deve sempre capturar os elementos de navegação mais simplistas que transmitem a estrutura básica do seu site e como encontrar o que você procura
  • O corpo da página, ou seja , a seção central de sua página da web, como seu conteúdo visual, mensagem principal e assim por diante.
  • O menu de navegação, seja na forma de barra lateral, menu de hambúrguer, subcabeçalho, mega menu, acionado por rolagem, menu fixo ou fixo e talvez outros.
  • O rodapé do site, não importa quão curto ou alto, os rodapés geralmente contêm links de canais sociais, avisos de direitos autorais e links de política de privacidade e outros itens opcionais, como uma duplicata do conteúdo do menu do seu cabeçalho, frases de chamariz, como "inscreva-se", “Contacte-nos”, ou ainda um formulário de inscrição.

E agora, para a inspiração de web design que estávamos esperando, alguns de nossos exemplos favoritos dos layouts de site mais comumente usados.

Veja como otimizar o layout do seu site com o Elementor