Layout de sites – Definição e onde buscar inspiração

Layout é aquele tipo de palavra que usamos para uma infinidade de coisas, mas não paramos para entender de fato o que significa.

Sendo pronunciada como ‘leiaute’ no nosso bom portuguê, por definião ela representa um esquema, arranjo, design ou plano.

O que isso significa pra gente:

Quando falamos de layout de sites, portanto, estamos nos referindo ao design das páginas, aplicativos ou outros formatos digitais. Como vemos e interagimos com a tecnologia.

Tradicionalmente, o layout de sites é uma parte do website que não é executada por desenvolvedores web, mas sim por designers de interface ou designers gráficos.

Em projetos mais complexos podemos até destrinchar esse grupo de designers em:

• Designer de interface de usuário ( UI )
• Designer de experiência de usuário ( UX )
• Arquiteto de informação ( AI )
• Web designer
• Mobile designer
• Interaction designer

Por aí vai…

Como esse artigo faz parte do nosso guia de como criar um site, o que importa pra gente é como criarmos nós mesmos nossos layouts – sendo designers ou leigos.

Para isso, nesse artigo vou te explicar um pouco sobre como os layouts de websites são feitos, onde buscamos inspiração para criar os nossos próprios designs e ferramentas gratuitas de layout.

O artigo pode ajudar tanto designers quanto pessoas que somente querem criar um site elas mesmas. Naturalmente, a qualidade de um layout planejado e criado por um designer experiente será, provavelmente, muito superior.

Porém, com as dicas que dou aqui qualquer pessoa pode criar algo legal e profissional.

1 – Como layouts são feitos

Em primeiro lugar, precisamos entender que um layout só será bom se você já entende que tipo de site quer criar e para que ele está sendo desenvolvido.

O primeiro artigo dessa nossa séria de como criar um site fala exatamente sobre isso. Dá uma olhada.

Um tempo atrás, pensar no layout de um site era uma tarefa complicada. Tinha que pedir realmente um designer para pensar em toda a estrutura, mandar para um desenvolvedor e depois ficar num vai e volta de alterações.

No entanto, hoje existem muito mais formas de criar um layout bacana.

A quantidade de ferramentas e exemplos disponíveis gratuitamente na internet nos possibilita criar, alterar e buscar inspirações.

Quer um site institucional minimalista de uma só página?

Tranquilo, temos umas 100 opções gratuitas, umas 500 pagas e você ainda pode usar todos os milhares de sites online como inspiração para o seu próprio utilizando uma ferramenta de criação de layouts visual e fácil de usar.

Dou ênfase às maneiras simples de trabalhar pois não há muita necessidade de adquirir softwares caros e passar horas e mais horas aprendendo como mexer neles.

Tudo que é necessário é entender o que você deseja fazer, copiar exemplos bem sucedidos e alterar para dar um ar original. Com o tempo você não precisa mais copiar e já conseguirá desenvolver os seus próprios layouts.

2 – Como fazer o layout perfeito

Já sabe qual é o tipo de website que deseja criar? Então está na hora de algumas dicas de como fazer um layout bonito e efetivo para seu projeto.

Entendimento

Em primeiro lugar, é preciso definir o que sucesso significa para você. Entender o tipo do website é uma coisa, mas entender como você considera se ele é um sucesso é outra.

Sucesso pode ser apenas criar o website. Pode ser receber um contado de um potencial cliente. Fazer uma venda. Conseguir que alguém compartilhe seu conteúdo. Etc.

O layout do website deve refletir esse objetivo e também vai determinar onde buscaremos nossas inspirações para o criar.

Referência

A segunda ação é buscar inspiração. Abaixo explico com mais detalhes onde pode encontrar excelentes exemplos de tudo quanto é website.

Nos inspirar significa encontrar um outro layout que se parece muito com o que queremos atingir. Quando eu faço um website para um cliente, uma das primeiras coisas que eu pergunto é se ele ou ela tem alguma referência de site que gostam e por que gostam desse exemplo.

Quando buscamos esse exemplo é importante tentar racionalizar o que nos faz gostar dele. É a simplicidade? É alguma funcionalidade específica? Ou será que são as cores e imagens? Fontes?

Algumas áreas que são interessantes você prestar atenção:

• Qual o papel que as imagens tem nesse layout? Será que eu teria condição de implementar algo com imagens similares para meu projeto?
• Como as cores estão harmonizando? Os detalhes que estão na cor da marca ou são partes maiores do site? Qual o sentimento que essas cores passam?
• Que tipo de fonte está sendo usada? Mais simples, clássica, moderna? A leitura ta fácil? Qual o tamanho dela?
• Quais ícones representam cada parte do site? Elementos visuais, como ícones, ajudam a passar o entendimento de conceitos e nos identificar com algo.
• Para onde será que minha atenção está sendo direcionada? É para um botão? Para ver um produto? Para comprar alguma coisa?
• O que a organização desse site prioriza? Através da ordem do menu, da sequência de informações quando eu rolo a página.
• Quais ações eu posso tomar nessa página? Onde posso clicar? Onde não consigo clicar mas gostaria?
• Existem animações? Como elas contribuem para a experiência que estou tendo?

Esses questionamentos tem como objetivo tirar nossa cabeça do automático. Quando estamos olhando um design ou uma arte tendemos a sentir mais do que racionalizar.

“Nossa, como me sinto seguro nesse site.”

“Eita, to achando um pouco suspeita essa página.”

Existem milhares de estudos sobre como esses elementos visuais afetam nossa percepção e até mesmo quais cores, fontes ou imagens são melhores para cada tipo de pessoa. Homens mais velhos talvez confiem mais em determinado tipo de layout de mulheres mais novas. Pessoas ricas ou pessoas pobres. Por aí vai.

Criação

Já com a escolha de referências, pode partir para o terceiro passo: criar o seu.

Utilizando alguma das ferramentas que mostro no final desse artigo, você pode criar uma organização da informação do seu site.

Sugiro o seguinte processo:

1. Pense em quais informações gostaria de ter em seu site
   1. Ex: Sobre mim, sobre minha empresa, informação de produtos, serviços prestados, portfólio, estudos de caso, textos informativos, dados de eventos, etc.
2. Tente organizar em quais páginas essas informações podem se agrupar
   1. Ex: Páginas de sobre, portfólio, contato, loja online, home, franquias, onde encontrar, etc.
3. Pense em quais funcionalidades você gostaria que seu site tivesse
   1. Tudo aquilo que envolve uma ação do usuário com o seu site
   2. Ex: Enviar um formulário de contato, preencher um questionário, editar um documento, enviar fotos, agendar uma reunião, criar um evento, comprar um produto, etc.
4. Esboce de forma visual
   1. Utilize as ferramentas para criar uma visualização mais rudimentar e rápida de como seu site é.
   2. Se você for um designer e está fazendo isso para um cliente, então pode até apresentar esse esboço para ele antes de gastar mais tempo já desenvolvendo o website.
5. Teste cores e fontes
   1. Às vezes as fontes e cores que imaginamos não ficam igual a visão na nossa cabeça. Por isso é importante testar e ver onde ficam mais interessantes.
6. Altere até ficar do jeito que gosta
   1. Como é fácil e rápido fazer alterações nesse momento, aproveite para mostrar outras pessoas e chegar num formato que te agrada.

Prática

O quarto passo é o momento de realmente desenvolver o website. Nos próximos artigos dessa série de como criar um site vamos por a mão na massa e realmente desenvolver nosso site com as diversas ferramentas recomendadas de acordo com o nível de dificuldade que escolheu.

A maior parte das alternativas que vou te apresentar nessa séria são de edição visual e simples. Então o processo é basicamente de pegar seus esboços e copiá-los para seu site em si.

“Mas não podia fazer direto no editor visual do site essa primeira versão do layou?“

Claro! É bem possível fazer sim os primeiros esboços direto nos editores visuais de websites. Inclusive, depois que já estiver mais acostumado a desenvolver páginas esse processo é até mais rápido.

No entanto, num primeiro momento eu sugiro muito você utilizar uma ferramenta mais simples que já possui alguns blocos de layout prontos para treinar o processo de pôr uma ideia que está só na sua cabeça em algo digital.

Tendemos a ter dificuldade de executar nossas ideias. Em geral o que pensamos é bem mais legal do que conseguimos executar com nossas habilidades ou funcionalidades das ferramentas.

Então o treino é sempre bacana com algo mais rápido para dar a sensação de progresso e desenvolver suas habilidades.

Refinamento

Por fim, o processo de criação de layout de sites é o passo de refinar sua execução.

Sempre tem alguma parte do layout que planejamos que não fica tão legal no site em si. Então é importante passar pelas fontes, cores, ícones, imagens, funcionalidades, etc.

Passe um pente fino por cada detalhe do seu projeto lembrando das razões que lhe levaram até esse momento.

Agora que já entendemos um pouco do processo, vamos às dicas mais objetivas.

3- Onde buscar inspiração para criação de layouts

Como já mencionei acima, o que não falta hoje é lugar bacana para achar inspiração de layout.

Olha só:

A internet tem de tudo, mas a maioria dos sites realmente não foram feitos por pessoas que fizeram esses questionamentos que menionei. Isso significa que muitas referêncais podem não ser as mais adequadas.

Layout não é somente o visual, mas também a organização da informação.

Por isso, vou te passar algumas referências bacanas:

• Themeforest: Esse mercado de venda de layouts e templates é das melhores referências que temos hoje de bons designs. Inclusive, se você preferir não criar o seu próprio pode comprar um diretamente lá e já resolver seu problema.
• Awwwrds: Se quer realmente algo bem contemporâneo e estar na vanguarda do design e experiência, então esse é o site que você deve consultar. Ele funciona como um concurso de melhores designs e layouts e vasculha a internet por bons layouts.
• Pinterest: Se há algo que o Pinterest é melhor do que qualquer outra plataforma é na facilidade de achar inspiração apra tudo. Para layout de sites não é diferente. Basta pesquisar por website layout e veja a quantidade de coisa bacana que aparece.
• ElegantThemes: Vamos ver mais sobre essa empresa nessa nossa série de como criar um site, mas já adianto que você pode encontrar muitos layouts já prontos e orientados para você consultar ou adquirir. Vale a pena dar uma olhada pois toda semana adicionam mais ao banco de opções do seu principal produto, o Divi.

Algo que sugiro que você faça também é monte uma planilha ou documento e sempre que acessar um site que goste do layout anote o link do site.

Anote também por que gostou daquele específico website. Às vezes é por causa de uma parte específica, fonte, cor, estrutura, organização do conteúdo, etc.

4 – Ferramentas de criação de layout

Existem uma infinidade de ferramentas para criação de layout de site. Algumas gratuitas, algumas pagas e outras no meio do caminho.

Abaixo vou listar algumas para que você dê uma olhada, mas primeiro vou te apresentar a mais simples, gratuita e fácil de usar:

Mockflow – Com essa ferramenta você consegue fazer protótipos gratuitamente e de forma bem simples.

Em seguida, mesmo sendo um pouquinho mais difícil – mas ainda de graça – é o:

Adobe XD

Seguindo, temos essas outras várias opções legais:

• Canva
• Mockplus
• Balsamiq
• Moqups
• Figma
• Pencil Project
• Wireframe.cc
• JustInMind
• Evrybo – Vale a pena aproveitar enquanto estão de graça no Beta
• Invision Studio
• Marvel

Conclusão

Nesse artigo apresentei um pouco do processo que utilizo para pensar no layout dos meus websites e também como você pode se inspirar para criar os seus próprios layouts.

Esse artigo faz parte da série Como criar um site. Seguindo nossa ordem, agora está na hora de colocar colocar esse layout em prática no tipo de site que escolheu.

Seja ele WordPress ou em outro formato, temos todos os tutoriais por aqui.

Divirta-se!