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!

Aos webmasters de plantão, segue uma referência de blog que fala sobre: webmasters, blogueiros, dicas para criação de sites, hospedagem de sites, produtividade, otimização, divulgação e monetização de sites.

Criarsites é um blog sobre desenvolvimento web, criado por Celso Lemes que reside no Japão.

Ele disse em seu blog, que depois de perceber que era possível ter algum retorno financeiro com internet, ele começou a aprender sobre desenvolvimento web.

The following is a paid review.
Este post foi pago pelo ReviewME.

A rede Walmart aposenta seu logo, adotado em 1992. Criado pela Lippincott, de Nova York, o novo logo ainda não está sendo usado no Brasil.

Grace Moon, uma jovem estudante na Califórnia venceu uma competição do Google que propunha a criação de um Doodle , usado em ocasiões sazonais.

A criatividade dela custou US$10 mil em bolsa de estudos, mais US$25 mil para sua escola Canyon Middle School, em Castro Valley.

A designer Cristina Jacó escreveu um artigo interessante sobre como a profissão de designer, hoje é vista pelo MEC - Ministério da Educação e Cultura.

Para ler o artigo na íntegra, acesse “Como o MEC compreende a formação em Design“, no portal Imasters.

Apesar de não ser mais novidade para quem já trabalha profissionalmente com desenvolvimento web, muitos aindas não conhecem a maneira de corrigir problemas de renderização nos browsers.

CSS Reset faz com que todas as propriedades das tags sejam zeradas desde o início, através dos seletores que aplicam no HTML e/ou XHTML. Quem pesquisar por CSS Reset vai encontrar um padrão que promete fazer com que os principais browsers que dominam o mercado, renderizem de igual pra igual. Eu, que uso o IE7, IE6, Firefox, Opera e Netscape para testar meus trabalhos, tive alguns probleminhas entre eles, com a tag <table>. Então, fiz um ajuste para solucionar o problema. Abaixo, segue o CSS Reset que uso no meu dia-a-dia:

Aproveito para deixar muma dica, que é sempre setar as propriedades de estilo e tamanho de fonte no seletor body. Exemplo:

Esta semana peguei um formulá¡rio de boleto online para torná-lo semântico e acessível, e no momento em que alterava aqui e ali, pensei: preciso escrever artigos voltados ao desenvolvimento web.

Não vou falar de tags como h1, h2, h3, h4, h5, h6 ou p, span, blockquote etc. Todos já estão "carecas" de saber o que é certo e o que é errado.

Tive a idéia de escrever um artigo sobre formulários depois de alterar um boleto online que continha um fonte totalmente fora da realidade. Então, estou pegando um simples formulário escrito em HTML, para deixá-lo acessével e correto, semanticamente falando.

Há vá¡rios tópicos que eu poderia abordar sobre usabilidade, mas não quero o fazer agora. O que eu quero é mostrar a parte "por trás", da coisa. Sei que muitos ainda se esquecem de escrever corretamente formulários HTML, pensam em tudo, mas quando chega a hora, esquecem de coisas simples que fazem grande diferença aos usuários de leitores de tela ou para aqueles que por algum motivo, não podem usar o mouse.

O preview abaixo, é de um simples formulário de 5 campos, escrito do modo antigo:

Clique aqui para ver o código fonte.

Vamos fazer a mágica? Abaixo, segue a lista das etapas para a transformação do formulário:

1. Adaptação do fonte para XHTML 1.0 Transitional;
2. Eliminanação das tags table, tr, td e font;
3. Folha de estilos separada da estrutura de marcação;
4. Insersão de tags específicas para formulários semânticos e acessíveis: fieldset, legend, label, optgroup, tabindex e accesskey;
5. Validação do formulário.

Pronto! Confira o resultado do novo formulário semântico e acessível logo abaixo ou clique aqui para ver o resultado:

Baixe os fontes formulário acessível

SGV, ou Scalable Vector Graphics (Gráficos Vetoriais Escaláveis) é uma linguagem baseada em XML, projetada para a criaação de gráficos vetoriais estáticos e dinâmicos, ou animados através de comportamentos JavaScript/DOM. A linguagem foi criada pelo W3C e também pode ser manipulada com ASP, PHP e JSP.

Essa tecnologia permite três tipos de objetos gráficos:

• figuras geométricas vetoriais;
• imagens raster/bitmap;
• texto.

A grande vantagem do formato SVG, é que não há perda de qualidade nas imagens quando ampliadas, ao contrário do que acontece com os formatos convencionais (por pixels), como: JPG, BMP, GIF e PNG. Também é uma linguagem Open Source. Nenhuma marca tem direitos exclusivos sob a utilização da mesma, e não exige a legalização de determinados softwares/aplicativos.

Onde está a graça?

Na possibilidade de criação de gréficos e figuras geométricas de forma dinâmica. Jé imaginou a criação de gráfcos a partir de valores vindos de bancos de dados? Para se ter uma idéia, o Google Analytics faz algo parecido, porém utilizando a tecnologia Flash.

Exemplo de gráfico gerado a partir de dados fornecidos pelo usuário:

No caso acima, o grafico foi gerado depois de eu setar o número 40 para o campo de canditado 1, e 100 para candidato 2. Se eu tivesse setado 60 para o campo candidato 1, a porcentagem cresceria, imediatamente.

Infelizmente, não são todos os browsers que suportam SVG. Atualmente, talvez os únicos que suportam: Firefox e Opera

Saiba mais sobre Gráficos Vetoriais Escaláveis.