PrincÃpio da Gestalt no alinhamento dos layouts de sites
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:
- Bloco de conteúdo do topo, ende todo elemento filho está alinhado no espaço estabelecido;
- Bloco da área dos menus, que respeitam a área de respiro entre os elementos à direita;
- Bloco do media center projetado alinhado com os elementos à sua direita, e de tamanho igual ao bloco elemento 4;
- Publicidade do mesmo tamanho do bloco 3, respeitando o alinhamento entre os seus visinhos;
- Blocos para as principais notÃcias, ambos de mesma proporção e respeitando o alinhamento dos elementos visinhos;
- Blocos de chamadas para destaques, respeitando a margem conforme número de caracteres das chamadas no espaço dinâmico;
- Bloco para chamadas populares, também de mesmo tamanho da área 8, respeitando sua margem com os demais elementos visinhos;
- Bloco para chamadas populares, do mesmo tamanho da área 7;
- Bloco destinado à publicidade, respeitando a margem dos elementos à sua esquerda;
- 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
Boa leitura!
Tags: Web Design e CSS
