O que é layout de site, loja virtual ou blog?

Taí uma dúvida comum para clientes e novatos na área: O que é layout? O significado é um só, mas a explicação pode variar um pouco. Saiba mais!

Trabalhar com design tem suas, digamos… peculiaridades. Quando se é designer gráfico, explicar o que é layout é bem mais simples do que quando se é web designer… mesmo a explicação sendo exatamente a mesma!

Enquanto que no design gráfico a fase final é a impressão, no web design é a programação. E é comum alguns clientes olharem o layout de um site e pensarem 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?”.

Dúvida completamente normal, visto que um cliente muitas vezes tem zero de experiência com design, então ele não tem a obrigação de saber todo o processo de construção de um site. Então, vou tentar solucionar essa dúvida agora!

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. Simples assim.

Em design gráfico, o layout é basicamente o trabalho que vem antes da arte final. Em web design é praticamente a mesma coisa, tirando o fato de que o layout de um site é a arte final — mas depois disso ainda é feito o desenvolvimento do site, ou seja, a programação.

o que e layout
Esse é o layout do meu site — é apenas uma imagem, você não conseguirá navegar no site através dela.

Até aí tudo bem, mas voltemos à dúvida no segundo parágrafo deste post: “Ué, mas já tá tudo pronto na imagem que você me passou… não podemos colocar o site no ar agora?” — está tudo pronto na imagem, isso é verdade… mas apenas na imagem.

Ainda faltam duas etapas: fazer essa imagem ser navegável em um browser (ou seja, o Front-End) e ser funcional, ter suas ferramentas (ou seja, o Back-End). Saiba mais: O que é Front-End e Back-End?

Ou seja, apenas o visual do seu site está pronto. Agora é hora de fazer ele funcionar!

Tipos e exemplos de layout para internet

Acho que já está bem explicado acima, mas… que tal alguns exemplos práticos de layout?

Veja alguns trabalhos que fiz na área:

Repare que separei em 4 partes. Isso porque cada tipo de projeto tem um tipo diferente de layout. Na prática, não só o visual é diferente, mas o estudo e planejamento também (afinal, o objetivo de um blog é diferente do objetivo de uma loja online).

Quanto custa um layout?

Depende de vários fatores, e não é só a quantidade de páginas.

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. Uma pesquisa geral na área do cliente, no caso — a ideia é saber o que está sendo feito, além de ter uma visão geral de o que os clientes estão acostumados a encontrar em sites do tipo;
  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 — o que, de certa forma, é uma “expansão” de tal identidade;
  4. Criação: O trabalho de criação do design em si;
  5. Ajustes finais: Auto-explicativo!
  6. Desenvolvimento: E aqui começa o trabalho que, na maioria das vezes, é o mais complicado e exige mais tempo — a programação do código. É aqui que o site deixa de ser uma imagem e passa a funcionar como site mesmo.

Escrevi mais a respeito em um texto: Quanto custa um layout?

Agora que sei o que é layout, quero um pra mim!

Opa, então entre em contato! :D

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

Do que você está precisando?

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

Quero um orçamento

Leia também...

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

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.

Layout para portfolio

Confira dicas e exemplos de layout para portfolio e divulgue seus trabalhos na internet! Tenha um portfolio online profissional.

Design de Ambientes Virtuais: como é ser Web Designer

Quer saber como é trabalhar com web design? Confira essa entrevista sobre a área e tire suas dúvidas sobre a profissão!

Comentários

2 comentários até o momento

  • 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

Deixe seu comentário

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

Quero um orçamento