Dois websites podem ter conteúdo idêntico e produzir resultados completamente diferentes. Um parece fácil de navegar e lê-se com clareza. O outro parece disperso e difícil de seguir. O conteúdo é o mesmo. O esquema não é. O esquema (layout) do website é a estrutura invisível que decide se o conteúdo chega às pessoas ou é ignorado.
O esquema de um website refere-se à forma como o conteúdo é organizado e estruturado numa página. Determina onde os elementos são colocados, como se relacionam entre si e por que ordem o visitante os encontra. Um bom esquema guia os visitantes pelo conteúdo de forma natural. Um mau esquema obriga-os a esforçar-se para encontrar o que precisam.
Esquema não é o mesmo que design. O design trata do aspeto: as cores, os tipos de letra e o estilo visual. O esquema trata de onde as coisas ficam e de como estão organizadas. Uma página pode ser bonita e ter um esquema que confunde os visitantes, ou ser simples e ter um esquema que funciona na perfeição.
Quais são os principais tipos de esquema de website?
Esquema de coluna única
Um esquema de coluna única empilha todo o conteúdo na vertical, numa só coluna ao centro da página. É o esquema mais simples e o mais adaptado a telemóvel, porque não precisa de adaptação quando um ecrã largo passa a um estreito. Os artigos de blogue, as páginas de conteúdo longo e a documentação usam muitas vezes esquemas de coluna única, porque a ordem de leitura linear corresponde à forma como esse conteúdo é consumido.
Esquema de duas colunas
Um esquema de duas colunas divide a página em duas secções lado a lado. A versão mais comum coloca o conteúdo principal numa coluna esquerda mais larga e o conteúdo complementar, como uma barra lateral com navegação ou links relacionados, numa coluna direita mais estreita. Os esquemas de duas colunas funcionam bem em páginas com uma área de conteúdo principal clara que beneficia de contexto de apoio ao lado.
Esquema em grelha
Um esquema em grelha organiza o conteúdo num sistema estruturado de linhas e colunas. As páginas de listagem de produtos, as galerias de portefólio e as páginas de índice do blogue usam muitas vezes grelhas, porque permitem mostrar de forma consistente vários itens com a mesma importância. A regularidade visual de uma grelha torna-a fácil de percorrer com o olhar. O desafio é garantir que a grelha se recolhe de forma sensata em telemóvel, onde os itens costumam ter de passar de três ou quatro colunas para uma ou duas.
Esquema de largura total
Um esquema de largura total estica as secções por toda a largura da janela do navegador. As secções de destaque, as imagens de fundo e os separadores de secção usam muitas vezes largura total para criar impacto visual e separar áreas de conteúdo. O conteúdo dentro de uma secção de largura total costuma ter uma largura máxima legível, por isso o fundo estica de ponta a ponta mas o texto não.
Esquema de revista
Um esquema de revista usa uma disposição assimétrica de blocos de conteúdo de vários tamanhos, de forma semelhante à organização do conteúdo editorial nas revistas impressas. Usa-se em sites de notícias e plataformas com muito conteúdo, onde várias histórias de importância diferente têm de ser mostradas em conjunto. A variedade visual de um esquema de revista cria hierarquia através do tamanho e da posição, mas exige um design cuidadoso para não parecer caótico.
Esquema de cartões
Um esquema de cartões apresenta o conteúdo em blocos individuais, cada um com uma estrutura consistente: uma imagem, um título, uma breve descrição e, por vezes, um link ou uma ação. Os cartões são modulares, o que os torna fáceis de percorrer e de reorganizar. Funcionam bem para produtos, artigos de blogue, membros da equipa, serviços e qualquer tipo de conteúdo em que muitos itens do mesmo género têm de ser mostrados em conjunto.
Como escolhes o esquema certo para uma página?
O esquema certo depende do objetivo da página e da forma como os visitantes vão consumir o conteúdo.
As páginas em que os visitantes leem do princípio ao fim, como artigos, guias ou páginas passo a passo, funcionam melhor com esquemas de coluna única ou de duas colunas simples, que seguem um caminho linear claro. As páginas em que os visitantes exploram e escolhem entre opções, como listagens de produtos ou visões gerais de serviços, funcionam bem com grelhas ou esquemas de cartões que permitem comparar itens de relance.
As páginas que precisam de causar uma forte primeira impressão, como páginas iniciais e páginas de destino, beneficiam de secções de largura total para impacto visual, combinadas com colunas contidas para conteúdo legível. O esquema deve corresponder ao tipo de conteúdo: usar uma grelha para um artigo longo cria a experiência de leitura errada, tal como um esquema de coluna única para um catálogo de produtos torna a navegação desnecessariamente difícil.
O artigo sobre como criar uma página inicial que funciona trata de como estruturar as escolhas de esquema especificamente para páginas iniciais, onde é mais alto o risco de errar.
Como funciona o esquema em telemóvel?
Todos os esquemas de várias colunas num computador precisam de uma versão para telemóvel em que essas colunas se empilham na vertical. Uma grelha de produtos de três colunas passa a uma grelha de uma ou duas colunas. Um esquema de duas colunas com barra lateral recolhe-se numa só coluna. A questão não é se se deve adaptar o esquema para telemóvel, mas como o fazer sem perder a ordem de leitura nem a hierarquia visual.
A ordem de recolhimento importa. Quando um esquema de duas colunas se empilha em telemóvel, a coluna esquerda costuma aparecer acima da coluna direita. Se o conteúdo da barra lateral aparecer antes do conteúdo principal quando o esquema se recolhe, a experiência de leitura em telemóvel estraga-se. Testar o esquema num telemóvel real antes de publicar revela estes problemas, que raramente se veem nas pré-visualizações de computador.
Algumas escolhas de esquema que funcionam num computador devem ser repensadas por completo para telemóvel. Um esquema de revista complexo com cinco tamanhos de conteúdo diferentes pode ter de se simplificar para uma grelha de cartões de duas colunas em telemóvel, para continuar utilizável. O artigo sobre como tornar um website adaptado a telemóvel trata de todas as considerações de esquema e design para ecrãs mais pequenos.
Como é que o esquema afeta a hierarquia visual?
O esquema e a hierarquia visual trabalham em conjunto. O esquema dá a estrutura: onde ficam as secções, quantas colunas existem, como os blocos de conteúdo estão organizados. A hierarquia visual dá o peso: quais os elementos dentro dessa estrutura que são notados primeiro, em segundo e em último lugar.
Um esquema que coloca o conteúdo mais importante no topo e no maior espaço prepara a hierarquia visual para funcionar naturalmente. Um esquema que enterra o conteúdo importante numa barra lateral ou o coloca abaixo de material menos importante trabalha contra a hierarquia, por melhor que cada elemento esteja estilizado. Acertar primeiro no esquema torna bastante mais fácil estabelecer uma hierarquia visual clara. O artigo sobre o que é a hierarquia visual explica como as ferramentas de ênfase, tamanho, contraste e espaçamento funcionam em qualquer esquema.
Como é que o esquema afeta o SEO?
O esquema afeta o SEO sobretudo através da experiência do utilizador que cria. Uma página com um esquema claro e lógico mantém os visitantes mais tempo na página e reduz a probabilidade de saírem de imediato. Estes sinais de comportamento contam para os motores de busca ao longo do tempo.
O esquema também afeta a forma como os motores de busca leem a estrutura de conteúdo da página. O conteúdo que aparece cedo no HTML da página tende a ter mais peso do que o que aparece tarde, mesmo que o esquema visual o faça parecer igualmente em destaque. Colocar os títulos e o conteúdo mais importantes no topo do código-fonte da página, e não só visualmente, está alinhado com a forma como os motores de busca processam as páginas. O artigo sobre o que é o SEO trata dos fatores técnicos e de conteúdo que afetam a posição das páginas.
Como a WEMASY trata do esquema
O criador de websites da WEMASY inclui um sistema de esquema baseado em secções, onde escolhes numa biblioteca de blocos de esquema pré-construídos para cada secção da página. Os esquemas de coluna única, duas colunas, grelha, largura total e cartões estão todos disponíveis como secções de arrastar e largar. Cada bloco de esquema adapta-se automaticamente ao telemóvel, recolhendo colunas e ajustando o espaçamento sem configuração separada para telemóvel. O editor visual mostra pré-visualizações de computador e de telemóvel, para verificares que o esquema funciona em todos os dispositivos antes de publicares.
Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.
Perguntas frequentes
Qual é o esquema de website mais comum?
O esquema mais comum em websites de negócio combina uma secção de destaque de largura total no topo com uma área de conteúdo de várias colunas ou de cartões por baixo e um rodapé de coluna única. Esta estrutura dá à página inicial impacto visual no topo, flexibilidade para secções de funcionalidades no meio e um ponto de referência consistente no fim. Dentro de cada página, os esquemas de coluna única são os mais comuns em páginas centradas em conteúdo, como artigos de blogue e descrições de serviços. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
O que é um wireframe e como se relaciona com o esquema?
Um wireframe é um diagrama simplificado e com pouco detalhe do esquema de uma página, que mostra onde ficarão os blocos de conteúdo, a navegação e os elementos principais. É criado antes de qualquer decisão de design visual, focando-se apenas na estrutura e na colocação do conteúdo. Os wireframes usam-se para planear e testar decisões de esquema sem a distração de cores, tipos de letra ou imagens. Para um dono de negócio que usa um criador de websites, o modelo que escolhes funciona, na prática, como um wireframe com design aplicado por cima.
Todas as páginas de um website devem usar o mesmo esquema?
Não necessariamente, mas devem parecer consistentes. Uma página inicial, um artigo de blogue e uma página de listagem de produtos têm tipos de conteúdo e objetivos diferentes, por isso beneficiam de esquemas adequados a cada um. O que deve manter-se consistente é o cabeçalho, a navegação, o rodapé e o estilo visual geral. Dentro desses elementos consistentes, o esquema da área de conteúdo pode variar para se adequar ao objetivo da página. O objetivo é o site parecer coerente, e não todas as páginas terem exatamente a mesma estrutura.
O que é um esquema em grelha responsivo?
Um esquema em grelha responsivo é uma estrutura em grelha que adapta o número de colunas à largura de ecrã disponível. Num ecrã de computador largo, pode mostrar quatro colunas. Num tablet, reduz para duas. Num telemóvel, recolhe-se para uma. A grelha responde automaticamente ao tamanho do ecrã, sem precisar de designs separados para cada dispositivo. A maioria dos criadores de websites modernos implementa grelhas responsivas por defeito, para que o esquema se ajuste corretamente sem configuração manual para cada ponto de quebra.
Como é que a escolha do esquema afeta a velocidade de carregamento da página?
O esquema em si tem um impacto mínimo na velocidade de carregamento. O que afeta a velocidade é o conteúdo dentro do esquema: imagens, vídeos, scripts e tipos de letra. Um esquema em grelha complexo com imagens otimizadas carrega mais depressa do que um esquema simples de coluna única com imagens não otimizadas. Dito isto, os esquemas com muitas imagens de fundo de largura total ou efeitos de deslocamento em paralaxe podem aumentar o tempo de carregamento se essas imagens não estiverem bem comprimidas. O esquema é o contentor. O que lá vai dentro determina a velocidade.