Layout para site: dicas e modelos

Vai criar um site ou reformar o visual do seu? Separei algumas dicas e exemplos de layout para site, e também alguns modelos de site que você pode usar – confira aqui!

  • Facebook
  • Twitter
  • Whatsapp

Se você tem uma empresa, tenho 99,9% de certeza de que ela precisa de um site. E se você leva seu negócio a sério, saiba que um layout para site pode ser determinante nas suas vendas.

Sua empresa precisa estar online, mas você já deve saber disso. Cada vez mais a internet vem substituindo tarefas do dia-a-dia, desde comprar roupas a comprar seu almoço. Se sua empresa está na internet, ela está sendo encontrada por várias pessoas que não a encontrariam se não fosse justamente por causa da internet. Então, além da presença na internet, um layout para site deve ser profissional.

Vamos manter contato?

Assine a newsletter do blog preenchendo o formulário!
Se precisar de algo, solicite um orçamento. É sem compromisso!
Se não quiser nada disso, sem problemas! Continue lendo o post abaixo :D

E quando me refiro a layout, não estou falando sobre o visual do seu site. Ou seja, não estou falando que ele precisa ser bonito. Um layout bem feito, profissional, vai muito além da estética. E é sobre isso que vou falar aqui, nesse post.

Agora, se você já sabe da importância do design e caiu aqui buscando por um profissional para fazer o layout do seu site, fale comigo!

O que é layout para site?

Na internet, um layout significa uma imagem de como será um site quando ele estiver pronto. Ou seja, é apenas uma demonstração visual que é feita antes que seu site seja, de fato, desenvolvido.

Um erro comum é achar que um site está pronto quando o layout está pronto. Não! Como disse, o layout é apenas uma imagem. Ele normalmente é feito antes da fase de desenvolvimento (ou seja, programação — códigos!) para que toda a estrutura seja estudada e aprovada antes.

Se quiser saber mais sobre o assunto, escrevi a respeito aqui: O que é layout?

Layout de site: nenhum é igual ao outro

layout para site

Layout para site: Dicas e exemplos práticos (imagem: Corbis)

É curioso (pra não dizer triste) ver que muitas empresas que estão há anos no mercado não investem em um site profissional.

Normalmente contratam o “profissional” mais barato pra colocar um site no ar e “falar que tem” um site. Nesse caso, o projeto fica muito amador — e nem me refiro a questões estéticas, pois um layout profissional não é um “layout bonito”, mas fortalece a identidade visual da empresa e seu conceito, além de deixar o site mais amigável, mais fácil de navegar.

Foco na navegação fácil e rápida

Nenhum site é igual ao outro, então, é preciso pensar: “Quando alguém visitar meu site, o que ele vai querer procurar?“.

É preciso dar destaque ao que é mais importante ao visitante, porque é ele quem vai utilizar o site. E como se trata de uma empresa, opções de contato e endereço devem estar sempre visíveis, mas sem poluir o visual.

Não é necessário dar destaque pra tudo logo na primeira página de um site, até porque quando você dá destaque a tudo, você não dá destaque a nada. Porém, se sua empresa não necessita de um site com muitas páginas e informações, por que não fazer um site de uma página só? Assim o visitante entra no site e já tem tudo o que ele precisa sem a necessidade de mais cliques.

Facilidade é tudo, principalmente na internet. Aliás, a própria internet é um facilitador. Seu site pode ser o mais simples possível, mas se ele for organizado e fácil de navegar, ele vai te trazer muitos resultados positivos.

Site em flash? Esqueça. Já era!

Site com música? Só se sua empresa for uma rádio, ou uma banda. Isso entra na discussão porque o layout do player deve ser simples e de fácil acesso, principalmente se tiver autoplay (por favor, não faça um player com autoplay!).

Por fim, o que falar sobre páginas de entrada, com animações? A não ser que seja um hotsite e a animação seja um trailer do filme que você está vendendo, por exemplo, esqueça isso. É imprescindível reduzir ao máximo a quantidade de cliques e de espera que um visitante precisa para encontrar o que quer.

Claro, há casos e casos. Sites de conteúdo adulto precisam de uma página de entrada (que pode ser substituída por um modal, uma janelinha que abre na frente do conteúdo). Pense sempre em o que é imprescindível, não em o que “poderia ser legal”.

Se você souber inglês, aproveite para ver essas dicas também:

Pra cada nicho há um layout diferente

Já falei que nenhum site é igual ao outro?

Bom, em alguns casos são quase iguais — ou literalmente iguais, mas aí já é um caso de plágio.

Nichos são determinantes para tipos de layout. Isso porque cada nicho define uma característica diferente de um negócio, o que impacta diretamente no layout de um site. Afinal, o que está em um site é o que a empresa tem a oferecer. Além disso, é preciso saber exatamente o que o seu público está procurando.

Um site profissional deve equilibrar duas coisas: o que a empresa quer passar e o que o visitante precisa.

Por exemplo, se você tem uma empresa de serviços de limpeza, você precisa dar destaque a seus serviços logo de cara. Já o visitante vai querer saber os preços desses serviços. Então, junto com os serviços, traga já um formulário de pedido de orçamento ou um telefone de contato, por exemplo.

Em uma landing page, a “regra” é ir direto ao assunto! Logo de cara, sem necessidade de rolagem, o visitante precisa saber o que está sendo vendido e como comprar. Ou seja, call to action visível e conteúdo resumido em poucas palavras. Isso também passa por uma estratégia de marketing — na verdade, design, desenvolvimento e marketing precisam estar sincronizados sempre.

Ainda na landing page, o ideal é que a cada rolagem o seu visitante não precise voltar pra cima ou rolar ainda mais pra baixo para encontrar um botão e realizar a compra. É importante que o topo da página (um menu simples) acompanhe a rolagem, e nele conste cada seção da página e um botão para realizar o pedido ou cadastro.

Em portfolios a coisa muda bastante também. O portfolio de um fotógrafo, obviamente, deve priorizar imagens. Já em um portfolio de um web designer é preciso falar sobre as tecnologias utilizadas no projeto. Além disso, é muito mais vantajoso um link para o projeto que uma imagem em si, já que um site é cheio de detalhes e um printscreen pode ficar extremamente pesado.

Como você pode ver, há casos e casos. Um site para uma marcenaria não pode ser referência para o site de uma dentista. E não é só sobre o visual, é sobre o tipo de serviço prestado e como ele deve ser apresentado. Analisar a concorrência é imprescindível!

Design responsivo ou versão mobile?

Depende.

Muitas vezes um site pode ter muito conteúdo, como é o caso de grandes portais. Em casos assim, normalmente uma versão mobile é a mais adequada, e até mesmo um aplicativo. Afinal, é preciso ser mais “simples” em design responsivo, já que o visitante precisa ver exatamente o mesmo conteúdo tanto em um smartphone quanto em um monitor 4k.

Se for possível simplificar o portal como um todo para evitar a versão mobile (que é um custo a mais), ótimo! Mas esse é só um exemplo bem básico.

Alguns sites, como corretoras de valores, têm diversas ferramentas que só funcionam bem em telas menores se tiverem formato diferente do visto em telas maiores. Um home broker é cheio de informações, além de ser pesado. É difícil trabalhar com design responsivo nesse caso.

Cada caso é um caso, e falei sobre isso aqui: Design responsivo ou versão mobile: qual é a melhor opção?

Exemplos de layout para site

Separei alguns exemplos de layout para site para uma análise prática de alguns pontos ditos acima, além de outros tão importantes quanto.

Criações de minha autoria

Abaixo, dois exemplos de layout para site que desenvolvi.

Empresa de hospedagem de sites

design adaptativo

PortoFácil (WordPress) — fiz o desenvolvimento front-end e para WordPress.

A PortoFácil é uma empresa de hospedagem de sites. Então, o destaque para os serviços é primordial.

O usuário precisa entrar no site e ver logo de cara os planos de hospedagem. É claro, também há o visitante que já é cliente da empresa, então áreas para contato devem estar em evidência também.

Por fim, a empresa tem um blog com conteúdo para clientes e não-clientes que também merece atenção, mas não é um dos focos principais.

O site foi feito com design responsivo.

Blog de variedades

awebic

Awebic (WordPress) — fiz a criação de layout, logo e identidade visual além de todo o desenvolvimento.

O Awebic tem conteúdo sobre tudo e mais um pouco. E o foco deles é justamente esse: conteúdo.

Por que um blog está aqui já que estamos falando mais sobre empresas? Porque um blog também pode ser uma empresa, pode ser monetizado. Nesse caso, o visual é extremamente simples: o visitante tem o conteúdo e pronto.

Não há barra lateral (depois de um estudo foi constatado que ela era desnecessária pro blog e pros visitantes), o topo é pequeno e acompanha a rolagem. Não há distrações no layout, o que faz com que qualquer tipo de destaque seja realmente destacado, além de facilitar a navegação do visitante.

Caso queira ver mais trabalhos de criação de layout para site, confira meu portfolio.

Mais exemplos de design para site

Como disse mais acima, analisar a concorrência é imprescindível. Vamos a mais exemplos:

Site de buscas

site google

Google — mais direto ao assunto? Impossível.

Há anos que o site da Google é basicamente isso aí. Mesmo com uma estratégia diferente (mais serviços), a estrutura é a mesma.

Afinal, o site é pra buscas. É seu foco, e essa simplicidade deixa o site mais rápido e sem distrações. Se você quer acessar os outros produtos, há o menu ali no topo.

Claro, os outros serviços meio que se vendem sozinhos, então não precisam de destaque aí. Mas o objetivo do site de buscas em si é bem claro.

Site de streaming

prime video

Prime Video: A Netflix da Amazon

Não há muito segredo em sites de streaming. Você vai ver que todos seguem uma estrutura muito parecida (graças à Netflix?).

Ainda assim, há todo um estudo nesse tipo de layout. Há destaques diferentes, e há uma preocupação em tentar exibir algo relacionado com o gosto do assinante.

Porém, a Amazon ainda peca em vários aspectos em outras partes do layout da Prime Video. A navegação não é boa, às vezes é meio confusa. Se você comparar com a Netflix, vai ver que a concorrente é bem mais simples. Logo, mais fácil de utilizar. Logo, melhor!

Apontar erros também é essencial pra entender os acertos.

Portal de notícias

g1

G1 — praticamente um blog!

O G1 sempre foi um portal inovador em termos de layout.

Assim que ele nasceu, já trouxe uma estrutura totalmente diferente da utilizada por outros portais da área. Era mais simples e mais organizada, menos poluída. Não demorou muito e os outros portais começaram a seguir sua estrutura.

Hoje, o layout do G1 é ainda mais simples. Há destaques no topo e depois uma lista de notícias. Praticamente um blog!

Esse tipo de layout para site é bem mais amigável e moderno. Acompanhar as tendências também é necessário. Caso contrário, você vai ter um site ultrapassado, o que pode ser bem ruim.

Modelos prontos para sites

site institucional

Alguns exemplos de modelos prontos para site.

Na seção de modelos para sites (que são templates para WordPress) da FicaOn você pode checar alguns que são focados em nichos específicos.

O da imagem acima é o modelo de site institucional, que como o nome já diz, é ideal para sites institucionais por conta de sua estrutura e organização de elementos.

O modelo de landing page tem diversas variações, adaptando-se para todos os tipos de landing pages que você tiver em mente.

Dá uma navegada no site para ver os modelos! Além de seguirem as dicas e conceitos citados nesse post, são ótimas referências visuais. Além disso, você pode utilizá-los em seus projetos, se desejar.

Quanto custa um layout para site?

Falo sobre isso no post “Quanto custa um layout?“: para saber o custo de um layout é preciso elaborar um orçamento. Bom, isso se você quiser um layout profissional baseado em sua empresa, em suas necessidades.

Afinal, como você pode ver acima, é possível optar por um template pronto para site sem gastar muito. A vantagem é que assim você terá o site no ar mais rápido, além de reduzir custos. A desvantagem é que seu site será genérico, já que o template pode ser utilizado por outras pessoas.

Sim, contratar um profissional para fazer o layout do seu site é a melhor opção, mas sei que em muitas vezes a verba é curta. Eu trabalho na área mas não posso ignorar isso, então indiquei templates prontos como soluções para esse caso. Até porque também faz parte do meu trabalho a instalação e configuração de templates prontos, além de outros serviços como criação de logo.

Mas se você tem verba disponível para investir em algo próprio e exclusivo, não economize!

Não estou dizendo que você deve torrar toda a grana. Estou dizendo para você optar pela melhor opção para sua empresa, que é ter um profissional para apresentar as melhores soluções.

Então, se quiser saber quanto custa um layout, me peça um orçamento!

  • Facebook
  • Twitter
  • Whatsapp

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

2 comentários

  • Dênis Barbosa Batista

    Excelente seu post. Muito explicativo. Ajuda muito.

    Responder

Comente!

Espaço reservado apenas para comentários sobre o post. Então, se você deseja um orçamento, por favor, entre em contato para que possamos conversar.

Quem é Fabio Lobo?

fabio lobo

Sou eu! Quer saber ainda mais sobre mim?

Bom, a maioria dos trabalhos que faço — na área de web design e desenvolvimento front-end — é com WordPress, com foco em usabilidade, facilidade e performance (tudo isso com design responsivo, é claro!). Também sou fundador de outros projetos, como a WOWF e a FicaOn.

Quer saber mais sobre esse tal de Fabio Lobo? Veja meu currículo ou siga-me nas redes sociais acima. Ah! Você também pode acessar meu blog, que é focado em web design e desenvolvimento.