Qual a importância do Princípio da Gestalt no alinhamento dos layouts de sites? É estranho, mas é comum layouts de sites/interface web serem concebidos de forma a causar má sensação da percepção dos nossos olhos.

Decidi escrever sobre isso, depois de ver um portfólio de alguém que é formado em Design, participante da lista DG – Designer Gráfico, que me fez duvidar de se tratar de uma pessoa com formação na área. Isso sempre acontece. Penso que existem muitos profissionais que não têm diplomas (natos), e estão entrando no mercado de trabalho para ensinar muitos que tem. O ego nas pessoas, em colocar seus diplomas e títulos como escudo, está fazendo muita gente se acomodar. Depois de ver um portfólio web de qualidade tão baixa, pensei: está na hora de falar sobre isso.

O que faz você pensar em um site bonito?

Cores, caixas, formas de elementos, contexto, tipografia, programação, audiência, etc… será que um site bonito se torna sucesso de audiência, ou a audiência faz um site se tornar bonito? Um site é bonito porque faz o seu estilo, ou é bonito porque faz o estilo dos outros? É bonito pelo bom conteúdo ou por que informa, ou tem nome? Bonito por quê?

Um site tem que atender vários tópicos, e ao mesmo tempo tem que apelar (sem agredir), conquistando a percepção ou idéia que as pessoas têm em relação ao design. Um site que informa, deve ter sua arquitetura preparada para informar, e não fazer arte. Um site que é arte, tem que ter sua arquitetura preparada para causar idéia de beleza, modernismo ou sofisticação. Seja qual for a sua natureza, tudo deve estar dentro de um padrão de gestalt, na separação e organização do conteúdo e elementos.

Essa organização é que causa o bem estar, e está presente em tudo. Não poderia estar ausente do processo de criação de layouts de sites.

Alinhamento – Layout de portais

Peguei como exemplo, o site do IG, um portal de grande porte que precisa informar com credibilidade, e estar presente no mundo virtual de forma a satisfazer todos os desejos de quem o assina, ou visita.

Clique na imagem e amplie-a.

Olhando a imagem ampliada, percebe-se os espaços entre cada elemento, em blocos:

1. Bloco de conteúdo do topo, ende todo elemento filho está alinhado no espaço estabelecido;
2. Bloco da área dos menus, que respeitam a área de respiro entre os elementos à direita;
3. Bloco do media center projetado alinhado com os elementos à sua direita, e de tamanho igual ao bloco elemento 4;
4. Publicidade do mesmo tamanho do bloco 3, respeitando o alinhamento entre os seus visinhos;
5. Blocos para as principais notícias, ambos de mesma proporção e respeitando o alinhamento dos elementos visinhos;
6. Blocos de chamadas para destaques, respeitando a margem conforme número de caracteres das chamadas no espaço dinâmico;
7. Bloco para chamadas populares, também de mesmo tamanho da área 8, respeitando sua margem com os demais elementos visinhos;
8. Bloco para chamadas populares, do mesmo tamanho da área 7;
9. Bloco destinado à publicidade, respeitando a margem dos elementos à sua esquerda;
10. Blocos de chamada para turismo, ambos do mesmo tamanho, e respeitando a margem padrão entre os elementos da página.

Visualização da Grid (IG)

Clique na imagem e amplie-a.

Para outro exemplo, peguei o Mega Portal de Criciuma, que serve para entender a diferença entre layout que segue padrão de alinhamento, e layout que não segue:

Clique na imagem e amplie-a.

É visível a diferença ao compararmos com o layout do IG. Este, possui elementos perdidos, e que não respeitam margens, e nem seguem um padrão de tamanho para cada bloco/elemento.

Visualização da Grid (Mega Portal)

Clique na imagem e amplie-a.

Outros dois exemplos:

Está claro, a importancia da organização de elementos e conteúdo em um layout web. Mais interessante, é fazer isso baseado em um design bem feito, para que o visitante chame de “site bonito” e não apenas um amontoado de informação, mesmo que esteja bem organizado e alinhado. Foi possível perceber a falta de tudo isso, no layout do segundo exemplo.

E agora, como você vai desenvolver seu site? Qual exemplo vai seguir?

Links como referência, do Luli Radfahrer:

Grids: cada coisa em seu lugar

O Grid do Mojito

Boa leitura!