Zorro, famoso herói do cinema, conhecido por suas aventuras ao defender os fracos e oprimidos utilizando sua habilidade com a espada, inspirou vários filmes e livros da literatura popular, e depois deste post vai inspirar também Webdesigners.

OffTopic: Antes de continuar você pode querer ler 85 caixas de busca para inspiração e 5 Melhores Galerias de sites para Inspiração.

O personagem adota a letra “Z” como sua assinatura (três linhas cruzadas), marcando-a com sua espada em paredes e nas roupas de seus inimigos, como sinal de sua passagem. (fonte: Wikipédia).

Apesar de possuir características bem semelhantes, nós sabemos que o Zorro na sua identidade secreta não era Webdesigner. Mas o que este herói pode nos ensinar?

Existem várias técnicas para elaborar layouts com o máximo de usabilidade e que sejam visualmente agradáveis. Uma destas técnicas tem tudo haver com o personagem em questão.

Este método é conhecido como Z-Layout e carinhosamente apelidado por mim como: a técnica de Zorro (rsrsrs).

O Z-Layout utiliza a letra “Z” como guia para a construção da página, sendo muito simples de ser aplicada, pois constituí em posicionar na parte superior do Z os itens que você deseja que o navegante visualize primeiro ao acessar a página e na parte inferior as chamadas a ação, levando em consideração que o usuário vai seguir de forma natural o caminho do Z da mesma forma que lêem livros (de cima para baixo, da esquerda para direita).

É bom deixar claro que esta não é uma solução definitiva e não é necessariamente aplicável a todos os projetos. Existem mecanismos com maior eficácia e que podem ser utilizados em conjunto com o Z-Layout.

O Z-Layout pode ser utilizado como ponto de partida para construção de um layout por abordar os requisitos fundamentais para qualquer site eficaz: hierarquia, marca, estrutura e apelo à ação.

Veja alguns exemplos de aplicações do Z-Layout:

O “Z” pode ser posicionado de diversas maneiras, buscando sempre a obtenção do melhor resultado.

Para escrever este post utilizei como base o texto em inglês Understanding the Z-Layout in Web Design.

Espero que o Zorro tenha inspirado vocês neste post.

Até a próxima aventura!

Você gostou do post? Não esqueça de Compartilhar com seus amigos. O Dica1 agradece!

Luanildo Silva    Twitter
Front-end da Perfil Virtual. Experiência em desenvolvimento de sites em XHTML,CSS,jQuery e PHP. Desenvolvimento de sites e blogs utilizando a plataforma Wordpress. Graduando em Administração pela UNEF.