Layout para site: tipos, exemplos e boas práticas

O que é layout para site? Qual é o processo de criação? Confira exemplos e entenda conceitos de web design para seu site ter um layout que dê o retorno desejado.

Por Fabio Lobo, atualizado em 03/08/2020. 7 pessoas falando sobre isso!

É comum algumas pessoas olharem para um layout e acharem que o site já está pronto. “Ué, mas já tá tudo pronto na imagem que você me passou… não podemos colocar o site no ar agora?”. Mas a própria pergunta já se responde: um layout para site é apenas uma imagem.

É apenas uma imagem, mas não é “só” uma imagem. Não me refiro à quantidade (um layout pode ser composto por várias telas ou apenas uma), e sim à importância.

A criação de um layout não é um trabalho de embelezamento ou uma pintura. Web Design envolve design como função, usabilidade, acessibilidade, responsividade, além de identidade visual e alguns conceitos de marketing digital.

Trabalho com isso há um tempinho, então decidi escrever esse texto com alguns exemplos práticos pra fugir da mesmice do “faça isso e aquilo”. Aqui você vai ver:

  • O que é layout;
  • Exemplos e tipos de layout;
  • Boas práticas para layout envolvendo design e identidade visual;
  • O que está incluso no processo de criação (importante para saber quanto custa um layout);
  • E respostas para dúvidas comuns.

Vamos em frente!

ilustração de pessoas adicionando elementos de um layout na tela de um computador

O que é layout?

Segundo o New Oxford American Dictionary:

Layout

  • a maneira pela qual as partes de algo são organizadas ou dispostas;
  • a maneira pela qual textos ou fotos estão definidas em uma página;
  • o processo de criação do material em uma página ou em um trabalho;
  • uma coisa arranjada ou estabelecida de uma forma particular.

De forma mais específica – aplicada ao design gráfico e ao Web Design – e didática, um layout (ou “leiaute”) é um desenho, um esquema de como um trabalho vai ficar.

Em design gráfico, o layout é basicamente o trabalho que vem antes da arte final.

Em Web Design é praticamente a mesma coisa. Na verdade o layout de um site é a arte final do projeto – a diferença é que ainda fica faltando o código para, assim, o layout se transformar em um site.

Esse código é dividido em duas etapas: fazer o layout ser navegável em um navegador, que é a etapa do front-end; e ter suas ferramentas e funcionalidades, que é a parte do back-end.

Resumindo: o layout de um site é apenas uma imagem que representa como o site será visualizado em um navegador.

Exemplos de layout

Nenhum site é igual ao outro. E se for, é plágio.

Reuni diversos exemplos de layout para site, incluindo lojas virtuais e blogs. Irei comentar sobre cada caso, destacando as principais diferenças entre um tipo e outro.

Pra deixar a lista mais completa e organizada, separei os exemplos de layout em tipos – ou seja, categorias de sites que normalmente necessitam de estruturas e elementos diferentes de layout.

Nota: há printscreens de sites abaixo, e algumas imagens podem ser um pouco pesadas. Fica o aviso caso você esteja utilizando uma rede de dados móveis no Brasil, que é aquela beleza!

Tipos de layout para site

Institucional

printscreen da home

Em um modelo de site tradicional ou institucional, a estrutura costuma ser bem simples.

Um topo com todos os links principais para navegação no site, uma página inicial com todas as principais informações sobre a empresa e chamadas para serviços/produtos (em alguns casos a home pode trazer um banner em formato de slideshow, destacando as principais seções).

As páginas internas também costumam ser bem tradicionais, com pouco textos e imagens. A não ser que o site seja um portfolio, aí certamente as imagens terão mais destaque.

Alguns sites institucionais fazem uso de blogs para manter os clientes informados e/ou trabalhar com marketing de conteúdo.

Portal

printscreen de layout de portal

Um portal certamente é o tipo de site mais complicado de criar e desenvolver.

Com várias categorias, subcategorias, seções e até blogs internos e “subsites”, um portal deve ser bem trabalhado para trazer os principais destaques na página inicial, que deve ser bem livre de editar.

Isso porque alguns portais costumam adicionar mais destaques em épocas de eventos, e para isso não prejudicar as outras áreas, a estrutura da página inicial é alterada – normalmente alguns banners são adicionados no topo e o número de chamadas de seções menos importantes é reduzido.

A página interna de um portal não é muito diferente de um post em um blog: além do conteúdo, há uma série de posts relacionados e uma seção de comentários. A ideia também é “prender” o leitor no site, fazendo com que ele navegue em outras publicações.

Outra coisa que não falta em portais são anúncios, é claro, principalmente para tornar financeiramente viável um site desse porte. Em alguns casos a publicidade é extremamente invasiva, e o ideal é que ela seja trabalhada de forma que esteja sempre visível e fácil de ser acessada, mas que nunca atrapalhe a leitura nem a navegação.

Hotsite

printscreen da home

Um hotsite é um site de vida curta voltado exclusivamente a um produto, serviço ou evento, por exemplo. De “vida curta” porque normalmente ele é feito para algum lançamento ou enquanto algum evento durar – ou seja, ele é uma “campanha”.

No final da campanha, o hotsite não tem mais utilidade. No caso de Dexter, o hotsite foi feito para o lançamento da 3ª temporada da série em DVD, então todo o conteúdo era voltado para essa temporada – fotos, vídeos, curiosidades etc. A home trazia chamadas para todo o conteúdo, destacando também um link para a compra do DVD.

Um hotsite ganha pontos quando é interativo. No exemplo citado, havia um jogo em formato de quiz onde os visitantes testavam seus conhecimentos sobre a série.

Landing Page

printscreen de layout de landing page

Uma landing page tem um conceito muito parecido com o de um hotsite.

Normalmente ela é uma página que vende exclusivamente um produto/serviço, trazendo todas as informações sobre ele e botões call-to-action para converter vendas, tudo isso em uma página só (ou seja, não há distrações – o usuário entra na página e terá tudo o que for necessário para comprar aquele produto/serviço).

Uma landing page não tem “data de validade”, já que é feita pra impulsionar vendas de maneira constante.

Você pode ter uma loja online e fazer uma landing page para impulsionar vendas de um produto novo, por exemplo, atraindo visitas pra ela através de anúncios no AdWords. Nesse caso, ela é uma página de apoio para sua loja.

Site de uma página

printscreen de layout de site de uma página

É tipo uma landing page, só que sem o objetivo único de converter.

Um layout de site de uma página, ou one page site, é exatamente o que o nome diz. Pode ser utilizado por diversos segmentos, de sites institucionais a portfolios de freelancers.

Nesse layout, todo o conteúdo está na home, é claro. Então, o menu deve facilitar a navegação entre as seções para que o visitante não precise ficar rolando a tela para cima e para baixo toda hora.

Tipos de layout para loja virtual

Varejo em geral

printscreen de loja virtual de varejo

De todos os modelos de loja online, esse certamente é o mais complicado. De longe!

Uma loja de varejo conta com uma lista de produtos gigantesca (principalmente quando há um marketplace), então é preciso fazer uma navegação detalhada, com categorias e subcategorias bem definidas, além de dar destaque às principais categorias na home sem deixá-la muito pesada.

O exemplo nesse caso é o Magazine Luiza, que tem uma página inicial para desktop com um slideshow principal, três banners secundários (isso pode variar dependendo do tipo de destaque que eles pretendem fazer) e abaixo uma lista com as principais categorias que trazem um “carrossel” com alguns produtos.

Além disso, há destaque para captura de e-mail também na home.

O menu do topo também é bem organizado, mas limitado. Afinal, seria insano colocar todas as categorias de produtos por ali. Sendo assim, apenas as principais são destacadas.

A página de produto tem como foco principal o produto em questão, mas também traz uma série de produtos relacionados e produtos que outras pessoas compraram junto com esse produto.

Isso faz com que o visitante consiga fazer uma pesquisa de preços e de produtos similares na mesma página, assim ele não precisa sair para pesquisar em outros sites. Ou seja, mais chances de ele fechar a compra por ali mesmo.

Vale ressaltar a diferença da página de produto para desktop e mobile. Enquanto no desktop há diversas informações sobre o produto, opiniões de compradores e mais de uma lista com produtos relacionados, o visitante que acessa a loja pelo smartphone vê uma página muito mais simples e direto ao ponto.

Além do tamanho da tela fazer toda a diferença, fora a velocidade de conexão, dispositivos móveis nasceram pra trazer praticidade no dia-a-dia. Ou seja, normalmente no seu computador você tem mais tempo pra ler e navegar – em seu smartphone, não.

Então, é preciso diferenciar um dispositivo de outro e entregar a estrutura mais adequada para cada caso.

Loja de serviços

printscreen de layout de loja virtual de serviços

Lojas de serviços em geral têm uma estrutura muito semelhante. Mas para ilustrar melhor, escolhi o nicho de diaristas.

No caso do Blumpa, a home traz um misto de site institucional com loja virtual. O que faz todo sentido, afinal, estamos falando de uma loja de serviços – que, por sinal, tem apenas um produto.

Porém, há também uma divisão, já que são dois públicos diferentes que acessam o site: clientes em potencial e interessados em trabalhar como diaristas.

Essa divisão é bem definida, já que o maior foco da empresa é vender serviços – sendo assim, a parte para diaristas é separada, com destaque bem simples. Enquanto isso, a parte de serviços de limpeza tem maior peso, com diversas chamadas e atalhos logo na home.

O serviço tem preço variável, então a contratação é feita em etapas: o visitante define endereço, cômodos e serviços adicionais, por exemplo. Ele também tem a liberdade de definir a quantidade de horas necessárias para a limpeza.

Um grande ponto positivo dessa empresa em relação a outros concorrentes é justamente fechar todo o processo de contratação e pagamento diretamente no site, evitando contatos por telefone ou e-mail para um orçamento. Isso gera agilidade, o que certamente converte mais vendas.

Marketplace de delivery

printscreen de loja virtual de marketplace (delivery)

O Ifood pode ser um exemplo óbvio, mas não deixa de ser o ideal. Não vou falar sobre o app, mas sobre o site em si.

Apesar de a lista de restaurantes ser gigantesca, é tudo muito bem organizado e dividido. A home mesmo já traz logo de cara diversas promoções, além de categorias e uma lista de restaurantes próximos de seu endereço.

A estrutura da página de produtos é ótima, mas sua organização depende do representante do restaurante. Em alguns casos, é tudo muito bem feito, com descrições, fotos e opções bem detalhadas. Já alguns restaurantes não têm o mesmo cuidado e não usam fotos boas, reais ou nenhuma foto mesmo – sem falar nas descrições confusas ou mal escritas.

É importante ressaltar esse ponto porque um marketplace é isso aí: cada um tem o controle sobre o que anuncia. Então, é importante planejar uma estrutura que deixe tudo minimamente em ordem.

Há também um destaque para quem quer cadastrar o próprio restaurante. Como esse não é o foco principal do site, essa chamada é bem discreta.

Catálogo online

printscreen de layout de catálogo online

Catálogos digitais são mais um site institucional que loja online em si. Isso porque os produtos estão listados, mas não podem ser comprados online.

Um catálogo pode ser planejado para se tornar uma loja online futuramente, bastando incluir meios de pagamento, a página de login do cliente, os valores finais etc.

Não há uma estrutura específica para esse tipo de loja, já que qualquer segmento pode ter um catálogo online. Mas há um ponto positivo como nesse exemplo aqui: um carrinho de compras.

Há casos de lojas online que vendem produtos sob medida ou então apenas serviços. Ou seja, não há um valor fechado para os itens à venda – normalmente o visitante deve preencher manualmente um formulário com informações referentes ao produto/serviço. No final do pedido essas informações são enviadas à empresa, que retorna com o cliente orçamento final e com as opções de compra.

Nesse exemplo você pode selecionar os produtos que deseja e, ao final, preenche um formulário simples para solicitar o orçamento. Todos os produtos já estarão selecionados, o que facilita – e muito – para o usuário.

Tipos de layout para blog

Tradicional

printscreen da home

Topo com menu e busca, área de conteúdo com posts à esquerda e barra lateral à direita, rodapé com copyright. Esse é o modelo de blog tradicional.

Já foi, de longe, o modelo mais usado – até porque era o padrão dos blogs. E até hoje a meu ver é o modelo mais bacana, pois é fácil de navegar e vai direto ao ponto.

Algumas variações podem ser feitas, como deixar apenas resumos dos posts dependendo do tamanho dos seus textos, por exemplo.

Sem barra lateral

printscreen de layout de blog sem lateral

A barra lateral pode fazer falta – ou dar essa impressão – pra muita gente. Banners de publicidade, de parceiros, links etc… mas em um blog pessoal, por exemplo, uma barra lateral seria apenas algo a mais na tela.

Isso é muito importante: Muita gente vê uma necessidade grande em ter uma barra lateral, mas não sabe bem como usá-la e acaba colocando um monte de coisa por ali. Quase como se houvesse necessidade de preencher um espaço vazio.

Quanto mais itens você tem em uma barra lateral, menos destaque cada item terá, então menos cliques e/ou menos atenção cada coisa vai ter. Pense como um usuário e veja se uma barra lateral realmente será útil para seu leitor.

Além disso, lembre-se de que acessos através de dispositivos móveis, como smartphones, são maioria. Então, muita gente nem vai ver a barra lateral.

Revista (magazine)

printscreen da home

O modelo revista (ou “Magazine”) é o mais utilizado por sites de notícias e portais, como citado mais no início do texto.

Normalmente traz um slideshow ou uma série de destaques no topo, terminando com uma lista ordenada de últimas atualizações. Esse tipo de modelo também é indicado para blogs com muitas atualizações semanais.

De resto, as demais páginas são como as de um blog. A utilização da barra lateral é opcional.

Misto

printscreen de layout de blog misto

Por fim, um layout misto para blog é, basicamente, a junção de algumas das estruturas citadas acima.

Por exemplo, um blog com uma lista comum de posts e barra lateral, e com alguns destaques divididos por categorias na home. É um misto de blog tradicional com magazine, como o layout dos sites da globo.com.

Esse tipo de layout é mais versátil e ajuda a equilibrar a quantidade de destaques principais com os últimos posts publicados.

Um layout não tem que ser bonito

Diga em voz alta: “Meu site não é uma obra de arte!”.

Agora faça uma lista de quantos sites e blogs você acessa só porque são bonitos.

Blog, por exemplo, é conteúdo. O Zequinha pode ter o blog mais bonito do mundo, mas isso é irrelevante se ele não postar nada de bom.

Sendo assim, quando você quer um design profissional, ele deve ser trabalhado de acordo com o conteúdo do seu projeto. O objetivo é fazer com que o visitante navegue facilmente e encontre o que quer a pouquíssimos cliques e com um carregamento veloz.

Por isso sempre tenho um pé atrás com sites prontos. São úteis, claro, mas você fica preso a um layout. Ou seja, você faz o processo contrário: em vez de criar um layout para o conteúdo de seu site, você cria o conteúdo de acordo com o que o tema pronto tem a oferecer.

Ah, e sobre o título dessa dica, não estou dizendo que seu layout pode ser feio. Só não pense em design como algo bonito – mas sim como algo que leva o conteúdo do seu blog para seus leitores, como “algo que funciona”.

Se seu layout é feio mas for leve e fácil de navegar, por exemplo, os visitantes voltarão e o potencial de fidelizar leitores é grande.

Se seu site for bonito, porém difícil de navegar e pesado demais, seus seguidores vão elogiar o layout no Twitter, mas certamente os novos visitantes que você poderia estar conquistando não irão retornar. Culpa da dificuldade de navegação e demora para as coisas carregarem.

Pesquisa é tudo e traz resultados; bonito é relativo porque envolve gostos pessoais.

Quando for contratar alguém para fazer o design do seu blog, peça algo focado no seu conteúdo e que facilite para o usuário, não algo bonito e cheio de coisas que você acha que seus leitores irão usar. “Menos é mais” significa “o suficiente é o bastante”.

Identidade visual é coisa séria

Lançou seu primeiro design há um tempinho e quer renová-lo? Ótimo! Mas jamais faça uma mudança brusca na identidade visual do seu layout “só por fazer”.

O que compõe uma identidade visual é o logo, além dos estilos e cores do seu layout. Uma identidade visual só deve ser alterada por completo se for uma evolução, ou se o layout atual é muito ruim, ou então se a empresa mudou de área, por exemplo.

Se seu blog passará a ser direcionado para outro público ou trará um conteúdo diferente, uma mudança mais radical é coerente. Se seu blog vai continuar exatamente com o mesmo conteúdo, pra que mudar tudo?

Um dos exemplos que citei acima diz muito sobre isso: O globoesporte.com já teve vários layouts diferentes, mas a identidade visual sempre foi a mesma.

Sabe o que é isso? É fortalecer uma marca na cabeça das pessoas. Quanto mais você mantém sua marca intocável e trabalha o conteúdo ao redor dela, mais lembrada ela será.

Sempre que for fazer montagens em imagens, como posts em redes sociais, use cores e tipografias da sua identidade visual. Não estou falando pra você usar marca d’água em tudo e só, e sim fazer com que seus posts casem com a identidade da sua marca.

Um mascote, quando tem um propósito, também fortalece sua marca. Utilizar o mascote de seu blog como avatar no Twitter e fazer alterações eventuais de acordo com o que está em alta no momento, como colocar barba ou uma fantasia de super herói, passa a ser um conteúdo complementar para o blog.

As pessoas vão passar a prestar mais atenção na sua marca procurando saber qual será a próxima montagem. E se você chegou a esse ponto, não altere seu mascote. Não importa se você enjoou dele, a figura virou uma personalidade e ajudou a fidelizar seu público.

Se você muda sua identidade visual sem um propósito, você não leva sua marca a sério.

ilustração de um site sendo construído

Quanto custa um layout?

Certamente você teve essa dúvida.

A verdade é que não há um preço fixo, já que nenhum site é igual ao outro. Depende de vários fatores, não só da quantidade de páginas.

Você pode ter uma noção lendo esse texto, mas o ideal é pedir um orçamento para saber exatamente quanto vai custar o seu projeto..

Para você ter uma ideia da complexidade na criação de um layout para um projeto de internet, ele é dividido nas seguintes etapas:

  1. Elaboração de briefing: Definição de o que será feito no projeto – o que o cliente precisa e o que é necessário segundo recomendações do Web Designer;
  2. Pesquisa: Análise da concorrência e parceiros. A ideia é saber o que está sendo feito na área, além de ter uma visão geral de o que o público está acostumado a encontrar em sites do segmento;
  3. Logo e/ou identidade visual: Eventualmente esse trabalho pode já estar feito, mas, ainda assim, o Web Designer precisa definir toda a estrutura do projeto com base na identidade visual do cliente;
  4. Criação: O trabalho de criação do layout em si:
    1. Rascunho: Um esboço de como o site deverá ser. É muito mais produtivo rabiscar tudo no papel antes de iniciar a trabalhar no computador;
    2. Wireframe: A estrutura, o esqueleto do layout. É uma versão melhorada do rascunho, sem efeitos, cores, tipografia etc. Ou seja, define apenas onde cada elemento do layout deverá estar;
    3. Layout: Enfim, a criação do layout com base no wireframe. Aqui sim é aplicada a identidade visual, tipografia, estilos, ícones, imagens e por aí vai;
    4. Ajustes finais: Auto-explicativo, certo? É preciso deixar o layout 100% antes da fase final, que é de desenvolvimento. Afinal, se os ajustes forem feitos depois que o site já estiver programado, o trabalho (logo, os custos) são maiores;
  5. Desenvolvimento: E aqui começa o trabalho que, na maioria das vezes, é o mais complicado e exige mais tempo – a programação. É aqui que o site deixa de ser uma imagem e passa a funcionar como site mesmo.

Se quiser se aprofundar, escrevi sobre esse tema aqui, com mais detalhes.

É, não é fácil criar um layout para site. Mas não se preocupe: se você precisa de um, conte com a ajuda de um profissional!

Créditos das imagens: Freepik e sites citados.

Revisão

Leu tudo até aqui? Veja abaixo se não restou nenhuma dúvida!

O que é layout?

Layout é uma imagem que define como o site irá aparecer nos navegadores. Antes do layout final ser criado, é preciso trabalhar um rascunho e um wireframe para definição da estrutura do projeto.

O que é Web Design e Web Designer?

Web Design é o trabalho de criação de sites e demais projetos para a internet. Web Designer é o profissional que trabalha com Web Design.

É preciso ser Web Designer para criar layouts?

Para criar layouts profissionais, é preciso ser Web Designer. Mas qualquer um pode criar layouts utilizando ferramentas e materiais gráficos prontos. A diferença estará no resultado final.

Posso copiar o layout de outro site?

Não, você não pode copiar o layout de outro site. Isso, além de crime, é injusto tanto para o profissional que fez o trabalho quanto para a empresa que pagou pelo layout.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

Principais conceitos de Web Design e Desenvolvimento

Você sabe o que é pregnância da forma, leiturabilidade e escaneabilidade? Conheça conceitos de web design que fazem muita diferença na criação de sites e apps.

Como é o trabalho de um Web Designer

Profissão: Web Designer — Saiba como é o trabalho de um Web Designer nesse bate-papo com um estudante da área.

O que é Front-End e Back-End?

Quem mexe com código é programador? Saiba mais sobre as profissões denominadas Front-End e Back-End - conheça as diferenças.

Comentários

7 comentários até o momento

  • Fábio, não entendi nada….

    quando cliquei no link para ler seu post 5 dicas para melhorar o Design do seu blog, não abriu, está com erro 404. =/

    E quando cliquei no link que levaria para o Oblogo, está abrindo um site sobre benefícios naturais.. O.o

    ¬¬

    Responder
    • Olá, Muriel!

      Infelizmente o Oblogo foi desativado. Recuperei o post para postá-lo na íntegra por aqui!

      Responder
  • Oi tudo bem? Eu achei as propostas muito legais , sabeeu preciso melhorar o meu blog ele tem quase 200 páginas , teve um dia que ele pifou , vc acha o que fia tirei muitas paginas , para o blog poder rodar. Sabe eu sou meio doida eu acho que eu trabalho com uns 10 nichos diferentes e produto barato e produto caro , somente sei que até agora não ganhei 1 real , o meu blog tem visitas um dia bateu uns 130, mas fica na média dos 70 , mas tenho que tomar cuidado para ele não explodir de novo.
    Olha moço desculpa o mau jeito viu
    uma boa noite,
    flávia.

    Responder
  • Cara, seu blog é muito útil, parabéns por esse dom de conhecimento em sua área.
    Minha dúvida é: o web design tem a obrigação de saber apenas como fazer o layout ( sei que quanto mais souber em outras áreas, melhor é) em uma agência? ou em agências não tem o front-end, sendo assim o WD tem ou é obrigado a saber dar as funções na imagem que ele criou, fazendo parte do curso de WD?
    Sou nob nisso tudo, mas pareço gostar dessa área, e espero que tenha entendido a pergunta.

    Responder
    • O Web Designer precisa ter pelo menos noções de HTML e CSS pra saber se o que ele tá fazendo vai funcionar. Mas em algumas agências, contratam o Web Designer pra já fazer o front-end também, então é bom estar preparado e, principalmente, saber seu foco!

      Valeu pelos elogios :D

      Responder
  • Parabéns pelo conteúdo! É muito pertinente

    Responder

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento