Você tem apenas 50 milissegundos para causar uma primeira impressão em alguém que visita seu website. Isso é pouco tempo para piscar os olhos, portanto, seu layout é realmente importante.
Criei muitos sites ao longo dos anos, e uma coisa que sempre faz a maior diferença é o layout. É ele que ajuda os visitantes a se sentirem confiantes, a permanecerem por mais tempo e a realmente agirem.
Já trabalhei em tudo, desde páginas de destino até sites de negócios completos, e o layout geralmente é o que causa ou prejudica a primeira impressão. Estes são alguns dos exemplos de layout de site mais eficazes que usei ou marquei como inspiração.
Índice
O que é o layout do site?
O layout do site é a aparência e a organização do site. Um bom layout de site significa que seus visitantes podem encontrar facilmente o que estão procurando e entender do que se trata seu site.
Se um site for confuso ou difícil de usar, as pessoas sairão antes mesmo de ler qualquer coisa. De fato, a pesquisa sugere que elas não permanecerão no site por mais de 15 segundos.
É por isso que o seu deve incluir esses elementos-chave de layout:
- Cabeçalho: A parte superior de seu website. Geralmente contém seu logotipo, uma breve descrição e um menu.
- Navegação: O menu do site. Ele ajuda os visitantes a encontrar a página que estão procurando.
- Área de conteúdo: A parte principal do seu site, onde você coloca todas as informações, imagens e vídeos importantes.
- Barra lateral: uma área extra em seu site para adicionar mais informações, como links de mídia social ou uma barra de pesquisa.
- Rodapé: A parte inferior do seu site, geralmente com informações de contato e links.
Eu nem sempre planejava os layouts adequadamente quando estava começando. Mas quando comecei a prestar atenção à estrutura e ao fluxo, os visitantes ficavam mais tempo e interagiam mais. Independentemente de você estar criando uma página inicial ou uma página de destino, a escolha do layout correto pode mudar a forma como as pessoas experimentam seu site.
Exemplos de layout de site por tipo
Agora que você entende os elementos básicos de um bom layout, vamos dar uma olhada em alguns exemplos de layout de sites populares que funcionam. Você pode usá-los como inspiração para seu próprio design.
Layouts de sites com padrão F
Imagine que você está acessando um site pela primeira vez. Para onde seus olhos vão primeiro?
Você provavelmente olha para o canto superior esquerdo e, em seguida, percorre a página até a direita. Em seguida, você pode olhar um pouco mais para baixo na página, passando novamente da esquerda para a direita. Por fim, seus olhos se movem para o lado esquerdo da página.
Esse padrão é chamado de padrão F porque se parece com um "F" gigante.
Muitos designers de sites usam o padrão F porque a maioria das pessoas olha para os sites dessa forma. Eles colocam itens importantes, como títulos e botões, onde seus olhos têm maior probabilidade de vê-los.
O layout com padrão F facilita que as pessoas vejam rapidamente do que se trata seu site. Ele também parece familiar aos visitantes porque muitos sites populares usam esse design. No entanto, se não for bem projetado, o layout com padrão F pode parecer um pouco entediante.
Você verá que o layout com padrão F é muito usado em blogs, sites de notícias e páginas com muito conteúdo.
Para que você tenha uma ideia melhor de como esse layout de site funciona, aqui estão alguns exemplos famosos:
The New York Times
O New York Times usa o padrão F para mostrar suas principais notícias. Quando você visita o site do jornal, seus olhos provavelmente vão direto para a maior manchete no canto superior esquerdo.
Ao mover-se para a direita, você verá o logotipo e as seções para assinatura ou login. Seguindo o padrão F para baixo na página, seus olhos encontrarão mais manchetes e imagens de outros artigos de notícias importantes.
CNN
Assim como o The New York Times, a CNN usa o padrão F para exibir suas principais notícias.
No canto superior esquerdo, você verá o logotipo da empresa e um menu de categorias de notícias. As notícias mais importantes do dia recebem a maior manchete, geralmente com uma imagem grande embaixo. Ao descer na página, você verá mais manchetes e imagens de outras notícias importantes.
The Washington Post
Assim como a CNN e o The New York Times, o The Washington Post usa o padrão F para mostrar o que é mais importante em seu site. A maioria das pessoas olha primeiro para o logotipo, o que ajuda a criar reconhecimento imediato da marca.
Você também verá botões para se inscrever ou fazer login se passar os olhos por eles. Você verá ainda mais manchetes de notícias seguindo o padrão F ao longo da página.
Layouts de site com padrão Z
Outra maneira de projetar um site é usar um layout com padrão Z. Esse layout usa o formato da letra "Z" para guiar seu olhar pela página. Usei esse layout para páginas de vendas e descobri que ele realmente ajuda a chamar a atenção para o botão de inscrição ou compra sem sobrecarregar os visitantes.
Olhe para o canto superior esquerdo e, em seguida, mova seus olhos para o canto superior direito. Em seguida, olhe diagonalmente para baixo, para o canto inferior esquerdo e, por fim, mova seus olhos para o canto inferior direito. Esse é o padrão Z em ação.
Esse layout ajuda os visitantes a perceber o conteúdo principal e as chamadas para ação em um fluxo natural. Por exemplo, você pode usar esse layout para destacar um botão que o incentive a comprar ou se inscrever em algo.
O layout com padrão Z é ótimo para chamar sua atenção e mostrar o que fazer em seguida. É interessante de se ver e fácil de seguir. É melhor para páginas mais simples. Se o seu site tiver muito conteúdo, ele pode começar a parecer apertado.
Esse layout é ideal para páginas com um foco claro, como promoção de um produto ou coleta de assinaturas.
Aqui estão alguns exemplos de sites que adotam o padrão Z:
Steelsync
O SteelSync ajuda as empresas a organizar seus dados. Seu site usa o padrão Z para mostrar como o serviço funciona.
Primeiro, você vê o logotipo da empresa no canto superior esquerdo. Se continuar seguindo a forma de "Z", você verá o título e uma breve explicação do que eles fazem. Na parte inferior do "Z", há um botão no qual você pode clicar para ver uma demonstração do SteelSync.
Dropbox
O Dropbox é um serviço de armazenamento de arquivos on-line. Seu site usa o padrão Z para incentivar a inscrição.
Você vê o logotipo deles no canto superior esquerdo e, se seguir o padrão Z ao longo da página, verá um grande título e um botão para se inscrever gratuitamente. Na parte inferior do Z, há outro botão para começar.
Shopify
A Shopify ajuda você a criar lojas on-line. Sua página inicial usa o padrão Z para mostrar o que ela faz e como começar.
Seu olhar vai primeiro para o logotipo, no canto superior esquerdo. Seguindo o padrão Z, você verá um botão para iniciar uma avaliação gratuita. O Shopify explica melhor sua plataforma na parte inferior do "Z".
Layouts de site assimétricos
Diferentemente dos layouts que se concentram no equilíbrio, os layouts assimétricos criam interesse visual com elementos distribuídos de forma desigual. Você usa tamanhos, formas e posicionamentos diferentes estrategicamente para chamar a atenção para áreas importantes e criar movimento e energia na página.
Esses layouts podem ser muito atraentes e chamativos, mas exigem um design cuidadoso. É fácil exagerar e deixar o layout desorganizado ou confuso.
O segredo é criar contraste e hierarquia visual. Guie o olhar com propósito sem sacrificar a legibilidade.
Esse layout é uma ótima opção se você quiser que seu site se destaque, especialmente para portfólios criativos, sites de agências e marcas que buscam um visual exclusivo.
Testei esse estilo com clientes do portfólio que queriam algo mais criativo, e ele sempre recebe reações fortes, tanto positivas quanto curiosas.
Aqui estão alguns exemplos criativos de layouts de sites assimétricos em ação:
Home Societe
Essa empresa de móveis usa um layout assimétrico para criar uma sensação moderna e elegante.
Observe como eles não centralizam tudo na página. Eles colocam alguns elementos no lado esquerdo e outros no lado direito, tornando o site mais agradável.
Além disso, à medida que você rola a tela para baixo, o site se move horizontalmente em vez de verticalmente, criando uma experiência de navegação exclusiva.
Edição de 15º aniversário da GQ Japan
A GQ Japan tem tudo a ver com moda, e seu site é tão estiloso quanto as roupas que apresenta.
Eles usam um layout assimétrico para criar um visual arrojado e atraente. É como se eles tivessem pegado elementos de uma página de revista e os colocado no site de uma forma legal e aleatória.
Ele se destaca dos layouts típicos e mostra o lado criativo da marca.
Fórum do estúdio
A Studio Forum é uma empresa que ajuda a criar marcas. Seu site usa um layout assimétrico, de modo que não se parece com um site comum. Eles misturam fotos e texto, quase como se estivessem criando uma obra de arte em vez de apenas um site.
Layouts de site de página única
Como o nome sugere, um site de página única coloca todo o seu conteúdo em uma página longa. Em vez de clicar em várias páginas, os visitantes rolam para diferentes seções do site.
O site de página única da IA guia os visitantes pelo seu conteúdo, passo a passo, sem obrigá-los a clicar. Ele o leva em uma jornada do início ao fim, com cada seção revelando algo novo e interessante.
Os sites de página única são fáceis de navegar e funcionam bem para contar uma história ou apresentar informações de forma clara e linear. No entanto, eles podem se tornar muito longos e cansativos se você tentar incluir muitas informações.
Esse estilo de layout é uma boa opção para portfólios, sites de um único produto e sites de eventos.
Se você precisar de inspiração, aqui estão meus exemplos favoritos de layout de site de página única:
Jamie Windell
Jamie é especialista em branding, e seu site de página única é como um cartão de visita digital. Todas as informações importantes sobre ele e seu trabalho estão logo na primeira página, sem a necessidade de clicar em diferentes seções.
É simples, elegante e fácil de ler, exatamente como um bom cartão de visita deve ser!
Melvin van der Ven
Melvin é um web designer que mostra seu trabalho e suas habilidades em um layout de página única. Você pode saber tudo sobre ele rolando a página para baixo.
É uma escolha de design confiante que ajuda Melvin a mostrar sua personalidade e habilidades e incentiva as pessoas a entrarem em contato.
HPQ Frankfurt
A HPQ Frankfurt está vendendo apartamentos em um novo edifício. Seu site imobiliário apresenta uma descrição do edifício em uma única página e explica suas características exclusivas.
Você pode percorrer todo o site e obter todas as informações sem clicar em nenhum botão para ir para outras páginas. É fácil e elegante, assim como os apartamentos que eles estão vendendo.
Layouts de site em tela dividida
O layout de um site com tela dividida divide a tela em duas partes. Para fazer com que o site se destaque, cores e imagens diferentes são geralmente usadas em cada lado.
É possível usar um layout de tela dividida para destacar informações importantes ou mostrar dois produtos diferentes. Embora possa parecer moderno e interessante, esse layout é mais difícil de usar em telefones celulares porque as telas são muito pequenas.
Aqui estão alguns exemplos para mostrar como esse layout funciona na prática.
Adivinhação educada
O site da Educated Guess usa um layout de tela dividida para mostrar vários conteúdos diferentes ao mesmo tempo, como artigos e vídeos. É uma forma arrojada e moderna de projetar um site.
Biospring
A Biospring é uma empresa de biotecnologia. Seu site usa uma tela dividida, mostrando uma imagem de um lado e o texto do outro. Isso ajuda a chamar rapidamente sua atenção com o visual e, ao mesmo tempo, fornece informações sobre o que ela faz.
CGI de ponta
Assim como a Biospring, a Pinpoint CGI usa um layout de tela dividida para apresentar um visual limpo e organizado. Eles colocam texto em um lado, como informações sobre a empresa e os produtos, e imagens no outro. Isso ajuda a separar as informações e, ao mesmo tempo, mantém as coisas visualmente atraentes.
Design Mobile-First e layouts de site responsivos
De acordo com o Statista, os usuários de dispositivos móveis agora representam mais da metade de todo o tráfego de sites. Se o seu layout não funciona em telefones celulares, você está perdendo visitantes.
É por isso que o design responsivo é tão importante. O layout de um site responsivo se ajusta automaticamente a qualquer tamanho de tela, seja um computador de mesa grande, um tablet ou um smartphone.
Os web designers usam consultas de mídia CSS para tornar os sites responsivos. Não se preocupe, você não precisa saber programar para entender a ideia básica. Essas consultas dizem a um site para alterar seu layout, dependendo do tamanho da tela em que está sendo visualizado.
A melhor maneira de garantir que seu site tenha uma ótima aparência em dispositivos móveis é usar uma abordagem de design "mobile-first". Isso significa que você começa projetando seu site para telefones celulares e, posteriormente, adiciona mais recursos e conteúdo para telas maiores.
Aqui estão alguns exemplos de sites que têm uma aparência fantástica em qualquer dispositivo:
Design relativo
A Relative Design é uma agência criativa cujo site tem excelente aparência em todos os dispositivos.
Se estiver em uma tela grande de computador, você verá uma foto grande e atraente ao lado do texto. A foto e o texto se reorganizam em telas menores, como a de um telefone, para facilitar a leitura.
Isso ajuda a garantir que todos tenham uma boa experiência em seu site, independentemente do dispositivo que estejam usando.
Chá Durasov e o resto
Essa empresa vende chá e café para empresas, e seu site é muito criativo. Parece um horizonte rural, e você o percorre como se estivesse viajando pelo campo.
O que é igualmente bom é como ele funciona bem no celular. Dá para perceber que ele foi projetado com os telefones em mente, pois a rolagem é muito suave e a experiência é igualmente envolvente em uma tela menor.
Salas de jogos inteligentes
A Smart Playrooms projeta espaços de recreação incríveis para crianças. O site deles faz um ótimo trabalho ao se ajustar a diferentes tamanhos de tela.
Em um computador, você vê uma foto grande e colorida de uma de suas salas de jogos. Mas se você acessar o site no celular, o layout muda para que as fotos e o texto sejam mais fáceis de ver. Isso mostra que eles estavam pensando nos usuários móveis quando criaram o site.
Práticas recomendadas de layout de site
É importante que seu website tenha uma boa aparência, mas isso não é suficiente. Você também deve garantir que seu site seja fácil de usar e entender.
Aqui estão algumas dicas para ajudá-lo a criar um layout de site que tenha uma ótima aparência e funcione bem:
Dê ao seu conteúdo algum espaço para respirar
Você já tentou ler algo sem espaços entre as palavras? É muito difícil. O mesmo acontece com os sites.
Certifique-se de que haja espaço suficiente entre o texto, as imagens e outros elementos. Isso é chamado de "espaço em branco" e faz uma grande diferença na facilidade de leitura de seu site.
Saiba como adicionar e remover espaços em branco neste guia.
Guie seus visitantes
Pense em como você quer que as pessoas naveguem pelo seu site. O que você quer que elas vejam primeiro? O que você quer que elas façam em seguida?
Use títulos, imagens e outros elementos de design para orientar logicamente os visitantes em seu site.
Escolha suas cores com cuidado
As cores podem fazer você sentir emoções diferentes. Por exemplo, o azul é frequentemente associado à calma e à confiança, enquanto o vermelho pode ser associado à excitação ou ao perigo.
Ao escolher as cores para o seu site, pense na mensagem que deseja transmitir e na sensação que quer que os visitantes tenham. Certifique-se de que as cores também combinam com o seu logotipo e marca.
Torne seu texto fácil de ler
Nem todas as fontes são iguais. Algumas fontes são mais fáceis de ler em uma tela do que outras. Escolha uma fonte que seja clara e fácil de ler, mesmo em telas pequenas.
O tamanho do texto também é importante. Se o texto for muito pequeno, as pessoas não conseguirão lê-lo. Se for muito grande, pode parecer muito grande.
Para obter mais detalhes, consulte nosso guia sobre tipografia em web design.
Use imagens de alta qualidade
Imagens e vídeos podem tornar seu site mais interessante e envolvente. Imagens muito grandes podem tornar seu site mais lento, especialmente em dispositivos móveis.
Use imagens de alta qualidade que também sejam otimizadas para a Web, o que significa que elas são pequenas o suficiente para carregar rapidamente.
Diga às pessoas o que fazer
O que você quer que as pessoas façam em seu site? Comprar um produto? Se inscrevam em um boletim informativo? Doem para uma causa? Certifique-se de ter "chamadas para ação" claras em todas as páginas do seu site.
Uma chamada para ação diz às pessoas o que fazer em seguida. Use verbos fortes para incentivar a ação, como "Get Started" (Comece a usar), "Learn More" (Saiba mais) ou "Shop Now" (Compre agora). Além disso, use bastante espaço em branco para que suas chamadas para ação se destaquem.
Exemplos de layout de site - Perguntas frequentes
Crie o layout de seu site hoje mesmo
Como você viu, o layout do seu site desempenha um papel importante na forma como as pessoas o experimentam. Um layout bem projetado ajudará você a manter os visitantes envolvidos, a criar uma marca forte e a incentivar as pessoas a agir.
Precisa de uma maneira mais fácil de criar um layout de excelente aparência sem contratar um desenvolvedor?
É aí que entra o SeedProd. Com seu construtor visual de arrastar e soltar e modelos impressionantes, o SeedProd facilita para qualquer pessoa a criação de um site WordPress bonito e de alta conversão.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
