A importância de Layouts de Websites

Quando se pensa em criar um website, quais são as primeiras coisas que lhe vêm à cabeça? Para muitos, estas incluiriam hospedagem web, escolhas de construtores, e outras semelhantes. Antes de pensar no conteúdo e nas ligações das redes sociais, no entanto, deve também considerar a disposição do seu website - por outras palavras, como vai ser o seu site.

É certo que, embora não seja realmente uma grande prioridade quando se está apenas a começar e a ver como criar um website com um construtor ou um CMS, ainda assim é algo que deveria estar em mente, não obstante. Demora 0,05 segundos para um utilizador decidir se gosta ou não do seu website[1] - 0,05 segundos!

Provavelmente não preciso de lhe dizer isto, mas o design do layout do seu website desempenha um enorme papel neste processo de tomada de decisão.

Neste artigo, discutiremos algumas coisas gerais a ter em mente quando pensarmos no layout do seu website, e também dar-lhe-ei alguns exemplos de sites que o fizeram bem.

Porque são importantes os layouts de websites?

Para começar a falar sobre layouts de websites e ideias de layouts de websites, devemos provavelmente abordar de imediato a questão principal - porque é que alguém deveria procurar utilizar os melhores layouts de websites nas suas plataformas?

Por outras palavras, porque é que os layouts de websites são tão importantes, sequer?

Para começar, consulte os dados estatísticos mencionados na parte introdutória do artigo - se o seu utilizador se decidir pelo seu site em 5 milissegundos, há pouco espaço para erros.

O layout do seu site nem sequer vai "acrescentar" à experiência do visitante - francamente, vai constituir a maior parte do mesmo.

Agora, poderá estar disposto a pensar que coisas como imagens, tamanhos de caixas de texto e a sua localização estão entre os principais responsáveis quando se trata de o visitante gostar ou não gostar do seu site - até certo ponto, isso é verdade. Dito isto, se todas essas coisas forem colocadas aleatoriamente ao longo da página, bem... Isso não torna realmente as coisas melhores, pois não?

Reacções iniciais à parte, os layouts do site são também importantes simplesmente devido à experiência global do utilizador. Isto inclui tudo, desde assuntos mais triviais, tais como imagens "eye-candy", até ao utilizador poder realmente encontrar a informação que procura de uma forma fácil.

Finalmente, o layout do seu website, quer queira ou não, transmite uma certa mensagem sobre a sua marca. Para ter uma melhor compreensão do que quero dizer, pode simplesmente visitar um dos websites mais populares da web, como o Facebook ou a Amazon - têm layouts muito distintos, e são imediatamente reconhecíveis.

Regras gerais relativas ao layout de websites

Como qualquer outro elemento no seu processo de criação de sites, a elaboração de layouts de sites de topo de gama pode ser uma tarefa bastante assustadora. Dito isto, no entanto, existem algumas regras gerais que poderá seguir, e que o ajudarão a gerar algumas ideias únicas de layouts de websites.

1. O Padrão "F"

Ao pesquisar os layouts de websites e qual é a melhor maneira de criar um dos seus próprios, poderá encontrar um termo "Padrão "F"".

Para ser franco, é uma grande regra a seguir tanto ao pensar nas ideias de layout do website, como também na localização (também - formatação) do seu conteúdo no layout específico da sua escolha.

O padrão "F" refere-se ao nosso movimento natural dos olhos (atenção) quando visitamos um website e lemos alguma informação sobre o mesmo. Seguindo este padrão específico, pode otimizar o conteúdo da sua página para que os "pontos de atenção" exibam apenas a informação mais relevante, e também algumas chamadas à ação.

Naturalmente, o padrão "F" também influenciará o layout do website que poderá optar por empregar no seu site. Verdade seja dita, um grande número dos melhores layouts de websites utilizam este padrão!

2. Simplicidade é a chave

Hoje em dia, é bastante comum encontrar sites que têm layouts super-intrincados. Estes podem variar desde tudo, desde intros baseados em vídeo e opções de menus interativos e brilhantes, até alguns menus drop-down de última geração e janelas alternativas com scroll.

Tudo isso é bom e bonito - na verdade, quanto mais único for o seu site, mais memorável ele será para o utilizador, também. Há apenas uma regra única que deve ter sempre em mente - a simplicidade é sempre algo que emprega no seu site.

Como é que a simplicidade se encaixa em alguns layouts elaborados e modernos de websites, pode perguntar? Bem, na verdade é bastante simples (sim, fiz isso de propósito), na verdade - a maioria das pessoas está habituada a um padrão específico do site. Ou seja, espera-se que o menu principal esteja no topo da página, que a barra de pesquisa esteja localizada no topo direito ou no meio, e assim por diante.

Se se referisse às melhores práticas de design do layout do site, faria bem em manter as coisas assim, também.

Imagine visitar um sítio que tenha o menu principal até ao fim da página, ou que menus são criados de forma a só aparecerem se algumas condições específicas forem cumpridas. Escusado será dizer que isso é um incómodo, para pôr as coisas de uma forma leve.

3. A colocação de secções é importante

Agora, pode pensar que isto é algo bastante óbvio, mas, infelizmente, muitas vezes não é esse o caso. 

Não importa que tipo de site está a tentar criar, e se é ou não uma plataforma baseada no eCommerce, a localização das suas secções específicas deve ser sempre cuidadosamente escolhida.

Tenha em mente, porém, que não estou a falar do aspecto visual do tema - as secções podem certamente ser intrincadas e interativas! Em vez disso, ao pensar na colocação de secções no layout do seu site, deve concentrar-se em fornecer aos visitantes do seu site a quantidade máxima de informação útil e ligações internas diretamente no início.

O que é que isto significa? Basicamente, se estiver atualmente a realizar uma venda e mandar fazer um banner que promova essa venda, este deve provavelmente estar localizado no topo da página inicial, e também ser clicável, para que possa direcionar o utilizador para a secção de venda efetiva do seu site.

Consegue perceber o que quero dizer?

Um design de alta qualidade do site terá secções integradas nele de forma bastante simples. É certo que isto pode revelar-se uma tarefa bastante complexa - é por isso que os web designers profissionais são tão procurados, afinal de contas!

Exemplos de layout de websites na vida real

Agora que já cobrimos algumas das principais "regras de base" a seguir quando pensamos em ideias de layouts para a web, vamos avançar e dar uma vista de olhos a alguns exemplos da vida real daquilo de que falámos acima.

1. Amazon

Tal como referido anteriormente no tutorial, a Amazon fez um excelente trabalho com o layout do seu website. Isto deve-se a duas grandes razões - é muito reconhecível, e também de fácil utilização.

O aspeto do reconhecimento deriva de uma combinação do esquema de cores e do layout real do site. O representativo menu negro-azul no topo da página, combinado com a fonte dos itens do menu invoca uma resposta inegável de "yup, estou definitivamente na Amazon!"

O layout é de natureza simplista, mas funciona muito bem com o modelo de negócio da Amazon. Embora a marca tenha uma lista impressionante e extensa de itens de menu para o cliente navegar, todos eles estão escondidos nas barras laterais, para que não assustem o cliente ao visitar o site pela primeira vez.

Quanto às ideias de layout do site, a Amazon faz um ótimo trabalho ao integrar algumas notícias e outros anúncios na secção horizontal auto-deslizável no meio da página inicial. É um design bastante popular, e funciona muito bem.

2. Squarespace

Embora possa parecer algo irónico incluir neste artigo o layout da página inicial de uma empresa construtora de websites, o Squarespace é um exemplo perfeito de um dos layouts de websites atualmente populares - aquele que utiliza uma fotografia em tamanho real no fundo da página inicial.

Embora este tipo de design provavelmente não lhe dê quaisquer novas ideias de layout do site à primeira vista, o Squarespace faz um trabalho espantoso de fazer com que a imagem se misture no layout geral do site. Além disso, essa mesma imagem serve também para comercializar o produto da marca - um criador de wites. Muito inteligente!

O Squarespace utiliza uma abordagem minimalista quando se trata do layout geral da página - não há muitas opções a explorar. Dito isto, as opções que ESTÃO ali integradas, estão-no de forma criativa e inteligente - um grande exemplo!

3. Bethesda

Bethesda é uma das empresas de desenvolvimento de jogos mais conhecidas em todo o mundo.

Ao visitar a página inicial da empresa, é imediatamente saudado pelo seu conteúdo atualmente relevante. A partir da redacção deste artigo, essa seria a série Fallout.

O interessante sobre o layout de Bethesda é que é basicamente concebido de forma a promover o produto atual da empresa, e também a fornecer aos visitantes informações úteis sobre outras notícias.

Percorrendo a página, é óbvio que Bethesda utiliza diferentes secções para os diferentes tipos de conteúdos disponíveis no seu site. A marca evita características cintilantes e, em vez disso, concentra-se em centrar o máximo possível de informação relevante na página principal.

4. Wikipedia

Embora a Wikipédia seja um site que a maioria de nós visita com bastante frequência, é raro que as pessoas prestem atenção aos layouts do site que são visíveis neste site.

Concentrando-se na primeira página, no entanto, oferece um design de menu radial pouco usual. Não só é único, como também capta a atenção do utilizador!

Uma vez que a Wikipédia é mais comumente utilizada para procurar algumas informações, a barra de pesquisa está mesmo no centro da página. O website também apresenta um design estéril, simples e acolhedor.

5. Forbes

A Forbes é o exemplo perfeito de ideias de layouts de websites que se destinam a websites relacionados com notícias, mas que ainda promovem um design de websites limpo e organizado.

Ao visitar a Forbes, pode ver que - até certo ponto - o website utiliza o padrão "F". Isto é evidente ao percorrer a primeira página - enquanto é dominado por imagens, os dados textuais são curtos, concisos e diretos, ao mesmo tempo que estão concentrados numa secção específica do website.

No topo dessa página, a Forbes tem uma lista simples, mas óbvia, de tópicos que pode navegar utilizando o menu pendente. Uma forma limpa de alojar muitos artigos diferentes!

Os Melhores Construtores de Websites para um Layout de Websites Topo de Gama

Com alguns exemplos de grandes layouts de websites dados, numa nota final, vale a pena mencionar alguns construtores de websites que lhe vão fornecer os meios para criar e utilizar layouts modernos e únicos no seu próprio site.

Embora os construtores mencionados abaixo sejam algumas das principais opções, existem outras para verificar, também - lembre-se que tudo depende do tipo de website que se pretende criar, e do tipo de layout que se pretende utilizar.

• Squarespace. O Squarespace oferece modelos modernos e elegantes, todos eles otimizados tanto para uso móvel como de computador. Cada modelo virá com diferentes layouts de websites, todos eles personalizáveis até certo ponto. Os preços dos planos do Squarespace começam em $12 por mês.
• Zyro. Se pretende alguma funcionalidade de comércio eletrónico e layouts e modelos modernos de websites, Zyro não deve deixá-lo desapontado. Um construtor bem feito, os preços do Zyro começam a $1,30 por mês - uma pechincha!
• Shopify. Se pretende criar uma plataforma de eCommerce, não há francamente melhor construtor do que Shopify para o ajudar com a tarefa em mãos. Não só é super simples de usar, mas o construtor também tem alguns modelos e opções de layout surpreendentes para você escolher - todos eles otimizados para as suas necessidades de eCommerce. Os preços começam em $29 por mês.
• WordPress. Embora a opção construtor do WordPress seja decente, se quiser liberdade total com os layouts do seu website e a sua gestão, deve procurar usar o WordPress.org. Com um pouco de know-how e alguns plugins WP decentes, será capaz de criar qualquer layout de site que possa imaginar. Além disso, é completamente livre de usar - tudo o que precisa de fazer é encontrar um provedor de hospedagem de sites.

Conclusões

Com isso, deverá agora ter mais conhecimento quando se trata de diferentes layouts de websites, e dos processos que vão no sentido de criar os melhores layouts para as suas próprias necessidades específicas de websites.

Verifique a nossa lista de criadores de sites líderes da indústria, e - quer escolha Zyro, Squarespace, ou WordPress.org - desejo-lhe boa sorte na criação dos melhores layouts de websites que puder!

Referências

1. Gitte Lindgaard Gary Fernandes Cathy Dudek & J. Brown: 'Atenção web designers: Têm 50 milissegundos para causar uma boa primeira impressão!