Tudo sobre layout para site, loja virtual e blog

Saiba mais sobre layout: o que é, como é feito, como deve ser e como pedir um para seu projeto. Veja alguns exemplos de meus trabalhos de web design!

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?

Layout para site

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!

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.

Layout para loja virtual

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

Como disse acima, um layout profissional não é um “layout bonito”, vai muito além disso.

Um layout para loja virtual também não deve apenas destacar os principais produtos e pronto, “que comecem as vendas”. Deve fazer com que o visitante sinta-se em casa e saiba como procurar o produto que ele precisa.

E pra isso não é só colocar uma busca enorme no topo do site, claro! Também é preciso elaborar uma navegação simplificada e destacar pontos importantes, como o botão de compra / adicionar ao carrinho, as medidas do produto, zoom das imagens… e muito mais.

Fora isso, tem também o básico: o visitante também precisa ter acesso fácil ao carrinho de compras, ao SAC e as informações principais dele, dentre outros itens que variam de segmento a segmento. E isso vai muito além do visual.

Isso é usabilidade, um dos principais conceitos na web. Um site fácil de usar pode até ser feio, mas vai dar muito mais resultados do que um site lindo e difícil de usar. Até porque lindo e feio são opiniões — usabilidade é um fato.

Se você entender inglês, segue um vídeo bem bacana com algumas dicas:

Em tempo: Não recomendo a PrestaShop, mas o ponto aqui é que as dicas do vídeo são válidas mesmo.

Segmentos são determinantes para tipos de layout

Cada caso é um caso. Por exemplo, uma loja de camisetas precisa destacar mais as imagens do que uma loja de eletrônicos, que precisa destacar mais as informações dos produtos eventualmente até mesmo em vídeos.

Aliás, lojas de vestuário em geral têm evoluído bastante com algumas ferramentas que ajudam o visitante a saber se aquela roupa ou aquele tênis vai, de fato, servir para ele. Isso deixa o cliente mais seguro para fazer a compra, além de minimizar gastos da empresa com eventuais devoluções.

Mas claro, esse ponto não faz parte do layout da loja virtual — mas como destacá-lo na página de forma com que o visitante o encontre facilmente, além da apresentação da ferramenta em si, faz. Design, desenvolvimento e marketing precisam estar alinhados, entrosados.

Pausa para mais um vídeo (em inglês) com dicas úteis da PrestaShop (o pessoal do WooCommerce poderia fazer uns vídeos assim, hein?!):

Seguindo com os exemplos de diferenças, lojas com produtos mais “premium” costumam ter visual mais clean, minimalista. Poucas cores (normalmente branco, preto e alguma outra cor de destaque) e fotos bem trabalhadas. Para esse público, é o que vende.

E as lojas que têm um clube de assinaturas, então? É preciso dividir o que é produto de o que é clube, e planejar bem quais serão os destaques para as vantagens dos assinantes.

Por exemplo, clubes de assinatura de cerveja costumam dar descontos na loja para assinantes do clube. Isso tem que ficar claro, e os descontos também precisam estar em evidência depois que o cliente vira assinante.

Lojas de serviços têm uma apresentação totalmente diferente, já que não vendem produtos. Nesses casos, a estrutura é mais parecida com a de um site instuticional, ou até uma landing page.

Aliás, outro exemplo: às vezes você só quer vender um produto, então pra quê uma loja virtual? Crie uma landing page e vá direto ao assunto!

Como você pode ver, cada caso é um caso mesmo. A criação de um layout de loja virtual é muito mais complexa porque, como eu disse mais de uma vez: não é só visual, é usabilidade… e venda!

Exemplos de layout para loja virtual

Chega de conversa! Nada melhor que ver, na prática, alguns exemplos de layout para loja virtual.

Criações de minha autoria

Abaixo, dois exemplos de layout para loja online que desenvolvi.

Loja de calçados
layout para loja virtual mtoujours
M. Toujours (OpenCart) — fiz o desenvolvimento front-end.

O M. Toujours era uma loja virtual de sapatos artesanais — era, já que esse e-commerce não existe mais.

O principal foco do site são as imagens, já que a loja é do segmento de moda e produtos premium. Como os produtos são calçados, a numeração também merece destaque.

O design clean, além de sofisticação, dá uma valorizada maior às fotos dos produtos.

Loja de serviços online
social+
Social+ (WooCommerce) — fiz a criação de layout, logo e identidade visual além de todo o desenvolvimento.

Social+ é uma loja de serviços online, então não destaca produtos na página inicial. E nesse caso, também não há fotos para os serviços, e sim ícones simples para ilustrar cada caso.

O que mais “vende” os “produtos” dessa loja (no sentido de apresentação, não conversão), nesse caso, são as descrições e os depoimentos, já que não há fotos.

Se quiser ver mais trabalhos de criação de layout para loja virtual, confira meu portfolio.

Outros exemplos de design para loja virtual

Analisar outros exemplos do mercado também é essencial. Vamos lá:

Loja de… tudo e mais um pouco!
loja virtual aliexpress
AliExpress — uma bagunça organizada.

AliExpress tem um modelo de negócio como um todo que tem virado tendência mundial. Mas dropshipping é um assunto para outro post!

Nesse caso a loja precisa apostar em uma estrutura muito simples pra acomodar uma montanha de destaques, e até que faz isso muito bem: o layout foi feito pra você ter vontade de comprar até o que não quer. Uma rolagem na página e pronto, você já está abrindo várias abas.

Como manter uma experiência tão boa quanto — ou até melhor — em telas menores? Com um aplicativo. O app do AliExpress é muito bem feito e também traz vantagens que o site não tem.

Loja de produtos premium
loja virtual apple
Apple — informações pra encher os olhos.

O caso da Apple é diferente porque ela não é uma loja virtual, e sim um site institucional… que vende produtos.

Até chegar a opção de compra você passa por pelo menos uma página, em média duas. Há diversas informações e imagens que valorizam os produtos, sendo que essa é a estratégia da Apple.

E aqui há outro ponto interessante: Não é só colocar um produto no carrinho e pronto! Em alguns casos você monta um computador, por exemplo, como quiser, e vai acompanhando a alteração do valor em tempo real até realizar a compra.

Loja de produtos e serviços
loja virtual amazon
Amazon — o desafio de separar produtos e serviços.

A Amazon (o site gringo) apresenta o maior desafio de todos os apresentados aqui: ela trabalha com produtos de terceiros, produtos próprios e serviços.

Como separar isso tudo em um site sem fazer com que o cliente se perca, sem complicar passos e ainda tentar vender produtos e serviços pra mesma pessoa?

Bom, isso vai além do design, tá mais em estratégia de marketing mesmo. Mas o site é organizado (aliás, mais que muito e-commerce grande nacional) e fácil de navegar.

Porém, é poluído, não há como negar isso. E esse é um ótimo exemplo de como faz sentido o que já defendi algumas vezes aqui: não é porque um site é bonito que ele vende mais, é porque ele é bem feito e fácil de navegar.

Layout para blog

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

Parece clichê, além de ser muito óbvio… mas cada detalhe é importante mesmo.

Um segmento específico pede um layout específico. Estrutura, cores, call to actions, ferramentas… é muito mais complicado do que parece. Isso porque muita gente acha que um layout trata apenas a estética do projeto.

Não, vai muito além disso!

A internet é um meio rápido — seu blog precisa ser também, em todos os sentidos

Acesso blogs diariamente, e o que eu vejo é um contraste. Alguns layouts são muito bonitos, outros são bem feios — mas a grande maioria tem algo em comum, que é falta de organização.

Pra um blog, que define um layout profissional não é ele ser bonito. É ter boa usabilidade, ter um bom equilíbrio visual e, é claro, ser organizado e ir direto ao ponto: quando alguém acessa um blog, esse alguém quer ver o conteúdo. Básico.

Atendo muitos clientes que têm redes de conteúdo com diversos blogs de nicho. Um erro muito comum que vejo entre todos eles assim que recebo um pedido de orçamento de criação de novo layout é: excesso de anúncios e falta de espaços em branco.

Se o foco do blog é conteúdo para monetização, não significa que seu site deverá ser 50% texto e 50% anúncios. Nem que tudo deve ficar espremido na tela para que seu visitante consiga ver todo o conteúdo logo, mas todos os anúncios também.

Essa sede por cliques pode, na verdade, acabar reduzindo suas receitas. Quanto mais banners em uma página, menor o CTR por banner.

E quanto mais banners em uma página, mais pesada e lenta sua página fica.

E quanto mais pesada e lenta sua página fica, maior a taxa de rejeição.

Um blog tem que ser leve e rápido em todos os sentidos. Como assim? Deve ser leve de elementos por página (quanto menos, melhor) e leve visualmente (mais espaços em branco facilitam a leitura e dão a impressão de que os textos são menores do que parecem ser).

Deve ser rápido de velocidade de carregamento e de facilidade para o visitante encontrar o que procura.

Priorize seu leitor. Sempre.

Se você souber inglês, confira algumas dicas nesse vídeo bastante útil:

Tipos de blogs e nichos específicos definem layouts diferentes

Um layout para blog deve ser trabalhado conforme o conteúdo deste blog.

Por exemplo, se o blog tiver posts curtos e frequentes, não faz sentido fazer com que o visitante precise clicar para ler cada post, é demorado e desgastante.

Se o blog tiver posts mais longos e um intervalo maior de postagens, o uso do “continue lendo” é válido, pois mantém o blog mais limpo e o visitante vai precisar clicar uma vez só quando ele acessar esse blog, já que só lerá um post.

Em relação a organização, o uso de categorias pode ser muito útil em alguns casos. Mas nem tanto em outros casos. Nossa, quem diria?!

Por exemplo, em blogs que postam conteúdos muito distintos, pode ser que alguns leitores prefiram apenas um tipo de conteúdo — assim, basta esse leitor abrir apenas a categoria de posts que o agrada. Pra isso, as categorias devem estar bem destacadas.

No caso de blogs com conteúdo uniforme — é o caso de blogs de humor, por exemplo — as categorias já não são tão necessárias, porque é um conteúdo mais rápido, mais dinâmico. Mas mesmo assim elas devem existir e serem fáceis de acessar. Afinal, se um leitor gostar de um tipo de post, ele vai querer ver mais posts sobre o assunto.

Esse tipo de coisa também se resolve com posts relacionados, mas não para por aí: uma hora a lista começa a repetir. Então, ter as categorias bem visíveis e organizadas é muito válido.

A publicidade deve ser posicionada em pontos estratégicos, que estejam a vista mas que não atrapalhe o usuário. Não há nada mais incômodo do que janelas abrindo na frente do conteúdo quando você está lendo algo. Em vez de se interessar pelo anúncio, o visitante vai ficar incomodado com seu blog e com o anunciante.

Por isso, no geral, perceba que o maior foco aqui é o leitor. E é verdade, porque é ele quem vai ler seu conteúdo e clicar em seus anúncios! Então o layout precisa ser agradável e ter uma navegação boa, porque seu conteúdo pode agradar uns e não agradar a outros… mas a usabilidade de seu blog será sempre unanimidade.

Reforçando: O foco do blog é sempre o leitor, que busca o conteúdo. Quanto mais o conteúdo é valorizado no layout, melhor para o leitor. E quanto mais o leitor sentir-se a vontade no seu blog, melhor pra você!

Exemplos de layouts para blog

Agora vamos ver o que foi dito acima na prática, em exemplos de layouts para blog em que trabalhei, além de outros adicionais.

Criações de minha autoria

Abaixo, dois exemplos de layout para blogs que desenvolvi.

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

O Hypescience é um blog com um visual mais dinâmico, magazine.

O design é bastante moderno e arrojado, com destaques de formatos alternados na home. Quando você acessa o blog, tudo parece “saltar”, foge do comum — e isso só foi possível com um estudo de espaços negativos, gestalt e muitos testes.

E, no geral, adivinha?! O visual em si é extremamente simples. O que faz a maior parte do trabalho estético são justamente as imagens. Ou seja, o conteúdo trabalha para o visual — o que faz todo sentido, já que o destaque é ele.

Blog de saúde e qualidade de vida
seu corpo em dia
Seu Corpo em Dia (WordPress) — fiz a criação de layout e desenvolvimento front-end e WordPress.

Já o Seu Corpo em Dia segue um visual mais “padrão” de blog, com uma lista de posts à esquerda e uma barra lateral à direita.

Seguir um visual padrão é ruim? Claro que não! Esse é o modelo que “mais funciona”, já que é o mais utilizado. Todo mundo já se acostumou a esse formato de blog, e algumas variações visuais fazem toda a diferença.

O design foi trabalhado para acompanhar o conceito do blog. Ele dá uma sensação de movimento, com curvas alternando entre si, alinhamentos que fogem um pouco do padrão e visual bem leve e com cores vivas.

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

Mais exemplos de design para blog

Também separei outros três blogs para uma análise.

Rede de “blogs”
blog medium
Medium — revolucionou os blogs.

Pode parecer demais, mas na minha opinião o Medium revolucionou os blogs.

Com uma simplicidade rara, o foco é totalmente no conteúdo. O Medium em si traz um coletado de posts de blogs criados na plataforma, mas é um ótimo exemplo de layout para blog porque funciona como um.

Hoje em dia é possível trabalhar diferentes estruturas no Medium, mas algumas características se mantém. Principalmente no que diz respeito à diagramação dos textos em si.

Blog de humor e entretenimento
blog boredpanda
BoredPanda — a estrutura “hype” atual.

Há tempos o BoredPanda utiliza uma estrutura muito parecida com essa atual, sendo que hoje em dia esse é um dos modelos mais utilizados por blogs na internet. Principalmente os do nicho de humor e entretenimento.

O visual é muito simples, dando bastante destaque à imagens (o que faz toda a diferença na estética final), além de ser bastante dinâmico com ferramentas de votação e posts interativos.

O topo é extremamente minimalista, sendo que a ilustração dá outra cara ao restante do blog. Sem ela, o visual ficaria mais monótono.

Blog sobre web design
blog smashing magazine
Smashing Magazine — Não!

Nessas minhas análises, sempre tento exibir exemplos que têm mais pontos positivos a negativos. Meu foco é dar exemplos que possam ser referências, mas tive que abrir uma exceção com o Smashing Magazine.

Afinal, é muito fácil achar blogs mal feitos… mas é surpreendente quando esse exemplo é um blog da área.

Vamos começar pela home gritante. Esse vermelho é excessivo, irrita os olhos — não faz sentido isso. Aí tem um botão ali, “Seriously, red?”, que quando clicado remove a cor.

Ou seja, já sabem que o vermelho vai incomodar muita gente. Então, em vez de fazer essa gambiarra, por que não eliminar de vez?

A estrutura da home, no geral, é confusa e em algumas partes não parece seguir um grid. Mas o que surpreende mesmo é a página de post, que tem um destaque desproporcional para o autor no topo título alinhado à direita do texto. Abaixo da primeira linha de conteúdo. Preciso falar alguma coisa?

Depois de um trecho, o texto, que originalmente era deslocado à esquerda, passa para o centro. Em tablets, fica mais estreito.

Não é exagero quando digo: esse é um dos piores layouts de blog que já vi na vida. Me desculpem, colegas de profissão, mas esse foi só um resumo dos pontos negativos que encontrei no projeto de vocês.

Bom, pra concluir: um layout para blog tem que ser coerente, ter uma estrutura simples e livre de possíveis confusões e/ou distrações, e as cores devem respeitar os olhos dos visitantes também!

Claro, eu já fiz muita coisa ruim — aliás, costumo dizer que sou apenas muito esforçado. O que fiz aqui são críticas construtivas, não ataques.

Espero que ninguém leve a mal, porque não tem como mostrar exemplos de o que não fazer sem mostrar o que é ruim — o que envolve a minha opinião.

Layout para portfolio

layout para portfolio
Layout para portfolio: dicas e exemplos

Aquela história “casa de ferreiro, espeto de pau” deve ser deixada pra trás.

Não é porque você está cheio de trabalho, por exemplo, que deve “deixar pra lá” algo tão importante como seu portfolio. Muitas vezes uma oportunidade aparece e só por você não ter seu portfolio online essa oportunidade poderá ser perdida.

Ou então você irá fazer algo às pressas e todo mundo sabe que o resultado final não vai ser bom, já que um layout profissional tem que ser pensado, tem que ser planejado – não é só fazer qualquer coisa bonitinha e colocar no ar.

Primeiro, tenha em mente sua profissão – quando alguém for procurar alguém de sua área, o que ele vai querer encontrar?

Por exemplo, se ele buscar por criação de sites, ele precisa cair em uma página com um breve texto sobre o assunto e alguns trabalhos seus para poder avaliar suas qualidades antes de entrar em contato.

Se já for um cliente, provavelmente ele vai querer entrar em contato com você diretamente, não vai querer ler nada. Ou seja, destaque seu trabalho junto com o que você sabe fazer e tem a oferecer e tenha sempre uma opção de contato por perto, em todas as páginas.

Não se esqueça de que você literalmente está se vendendo. Sendo assim, a navegação do portfolio deve condizer com seu trabalho, ser totalmente amigável e leve.

Além disso, trabalhe uma estrutura que destaque seu trabalho – sim, seu portfolio será seu cartão de visitas, mas um layout para portfolio não deve chamar mais atenção que os trabalhos em si. Não exagere, faça o simples e preocupe-se mais em selecionar seus melhores trabalhos.

Equilibre, então, duas coisas: o que você quer passar (ou seja, sua imagem) e o que o visitante de seu portfolio precisa (ou seja, soluções).

Exemplos de layout para portfolio

Seguem dois exemplos de layout para portfolio que desenvolvi.

site responsivo
Layout para portfolio: Fabio Lobo (WordPress) – design e desenvolvimento por mim.

Sim, meu site: Fabio Lobo! Essa é a quinta versão de meu site – no início era mais um portfolio de “estudante” do que de profissional, então eu destacava tudo que eu sabia fazer.

Com o passar do tempo fui dando mais importância a meus trabalhos profissionais e fui focando nos serviços que presto com mais frequência, que são minha especialidade.

Então, na home faço uma rápida apresentação sobre mim e mostro meus principais clientes, o que gera credibilidade. Também tenho um blog, mas não é o foco, então dou um destaque menor a ele no final da página.

Nas internas dos projetos, faço uma breve descrição de cada um e exibo as principais imagens deles. Na página de contato, para facilitar os pedidos de orçamento, utilizo mais de um formulário.

Por fim, no topo e no final da tela há sempre uma opção de contato! E, é claro, o site é responsivo.

front end site responsivo andale
Layout para portfolio: ANDALE! (WordPress) – desenvolvimento por mim.

A ANDALE! foi minha agência virtual em parceria com o André Bets, que era o designer da dupla. Nesse caso o layout – também responsivo – era um pouco mais simples.

A home mostrava logo de cara os principais trabalhos, trazendo abaixo alguns posts de nossos blogs (como tanto eu como o Bets escrevemos muito sobre a área, trazendo informações que muitas vezes são importantes para nossos clientes, é válido ter um destaque para cada blog).

As internas eram parecidas com o exemplo acima: uma descrição curta sobre o trabalho e as principais imagens. A página de contato também trazia mais de um formulário. Como a área dos dois exemplos era a mesma, não foi preciso “reinventar a roda”.

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.

Se quiser saber mais detalhes, escrevi sobre o processo de criação e desenvolvimento de sites aqui.

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:

Modelos de blog

Já escolheu uma estrutura visual para seu blog? Veja dicas de modelos de blog e escolha o melhor para você e seu negócio!

O que é portfolio?

Não sabe o que é portfolio? Normal: há vários tipos de portfolio. Então tire suas dúvidas, confira exemplo e não perca mais tempo: Faça o seu portfolio agora!

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

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