IFTO - INSTITUTO FEDERAL DE CINCIA E TECNOLOGIA DO ESTADO DO TOCANTINS

CHARLES ALBERT MARTINS DOS ANJOS JOS BARBOSA ALMEIDA

O LAYOUT: DISPOSIO ESPACIAL DOS ELEMENTOS

PALMAS 2011
1. Introduo Desde os primeiros registros de comunicao grfica ou visual, o posicionamento dos elementos que compem o que quer que se queira comunicar sempre teve suma importncia, especialmente aps notarmos que o resultado da comunicao muitas vezes depende deste posicionamento.

A disposio dos elementos influencia a informao em diversos aspectos, que se beneficiam de sua boa distribuio, como informaes principais virem antes de informaes secundrias, dar destaque a cabealhos ou quaisquer tipo de elemento que caracterize resumidamente o contedo daquela informao, entre outros. O estudo dessa disposio est especialmente presente na rea de informtica, onde a grande maioria das informaes est na internet - um meio de comunicao primariamente visual. Muitos dos conceitos de disposio esto espalhados na internet atravs de diversos sites, dos mais variados gneros, fazendo deste o ambiente ideal para seu estudo e aperfeioamento, a um ponto em que os conceitos que ditavam essa disposio e antes eram definidos por documentos impressos (livros, revistas, jornais) e transcrevia-se para a internet, agora fazem o inverso: a internet os define e as publicaes impressas os seguem.

2. Importncia do Layout Na hora de apresentar um produto a algum, preciso ter bem claros os objetivos que devero ser alcanados com tal exposio. A partir desta conscincia que se deve selecionar os componentes visuais que devero participar da construo de uma apresentao adequada, de acordo com os objetivos traados. E nesse sentido que o layout, se torna to importante. Visto que este dever cumprir um papel de suma importncia, ou seja, criar a primeira impresso e provocar interece pelo produto ofertado. Para cumprir a sua funo e causar a impresso desejada, a construo de uma layout deve seguir alguns padres. Sobre estes padres, vale lembrar que dependem muito do que se est apresentando, o tipo de abordagem que ser adotada, alm de muitos outros, dentre eles preferncias pessoais do designer e os recursos de mdias disponveis para a apresentao. 3. Disposio Espacial dos Elementos Os elementos grficos ou de diagramao devem ser dispostos de acordo com sua representatividade no projeto. Com isso, cada um deles deve ser postado numa rea da tela, agrupando-os de maneira a receberem a ateno esperado para cada um destes, de maneira que o layout cumpra o seu papel, facilitando o acesso as informaes principais, prendendo a ateno do usurio aos recursos e informaes contidas neles. A seguir tentaremos explanar um pouco sobre as reas ou regies principais da tela e quais informaes visuais devero compor cada uma delas: 3.1 rea Principal a regio principal da tela. Onde, consequentimente sero colocadas as informaes referentes as funcionalidades disponveis na pgina, aquelas que devero receber ateno especial, tais como menus de navegao, logomarca do proprietrio da pgina alm das informaes consideradas de maior relevncia e que devam ser percebidas mais facilmente pelo usurio.

Est localizada lado superior esquerdo, formando um tringulo limitado pela diagonal formada do canto superior direito ao canto inferior esquerdo. Por isso as informaes colocadas nesta rea costumam ser visualizadas primeiro. Com isso, dependendo do tipo de projeto e do pblico alvo, dispem-se as informaes que indentifiquem o proprietrio da pgina (logomarca) ou, como no caso do portal google, menus que direcionam para os produtos disponveis. Tudo depende do projeto de layout, de como foi definido ou quais objetivos se pretende alcanar. Sendo assim, o mais importante na hora distribuir as informaes ao longo de toda a pgina, ter convico de que a soluo adotada a melhor para alcanar os objetivos esperados e, claro ter estes objetivos bem claros.

3.2 rea Secundria Oposta rea principal, est localizada no lado inferior esquerdo da pgina e oposta rea principal. Esta regio naturalmente recebe pouca ateno dos usurios do sistema. Por isso precisa recebe ateno especial quanto as informaes a serem dispostas ali. Como, geralmente se comea a olhar a pgina da esquerda para a direita e de cima para baixo, entre os dois pontos extremos, canto superior esquerdo e canto inferior direito, cruza-se o olhar pelo meio da tela formando um Z. Tudo que est acima da diagonal formada recebe excelente visibilidade. Logo, a metade de baixo desse z trata se da rea secundria. 3.3 reas Mortas So reas de pouca relevncia, ou seja, como o prprio nome deixa claro, trata-se de reas pobres no que se refere ateno recebida do usurio. As informaes a serem colocadas nestes pontos devem ser aquelas de pouca relevncia e/ou as que s so colocadas por obrigaes distintas. O melhor deixar estas reas com pouca ou nenhuma informao importante para o contedo da pgina.

Esta regies quando deixadas com pouca informao visual torna o layout mais suave, evitando o acontecimento de poluio visual. importante, ainda, citar a localizao destas reas. Esto situadas opostas opostas principal e secundria e se resumem aos espaos prximos aos cantos da pgina. 3.4 Centro ptico o ponto aonde a viso se dirige. Pode tambm ser chamado de rea de contedo. onde as as informaes visuais mais apelativas, por assim dizer so colocadas. Nesta rea so colocadas as informaes que despertem o interece do pblico e os motive a continuar na pgina. Est localizada, geralmente no centro da pagina, podendo variar o seu posicionamento de acordo com as necessidades do projeto, a quantidade e o tipo de informaes a serem expostas. 4. Agrupamento de Elementos Trata-se da distribuio dos obejetos constituintes do layout, separando-os de acordo com alguns critrios. Tipos de mdias e classificao das informaes 5. Concluso Aps observar os itens descritos anteriormente, pode-se tirar algumas concluses acerca da disposio especial de elementos na confeco de projetos de layouts. A principal delas que o sucesso de uma pgina depende de multiplos fatores, tratados em conjunto e nunca separadamente. Isto implica dizer que, para se obter um bom layout preciso levar em conta a maior quantidade possvel de componentes e objetos devam compor a pgina. Referncias

Regras normalizao ABNT , Guia da UNIP:: http://www.unip.br/servicos/biblioteca/download/manual_de_normalizacao.pdf http://www.ifd.com.br/blog/design/diagramacao-da-pagina-web/ http://www.avellareduarte.com.br/projeto/desenvolvimento/desenvolvimento2/desenv olvimento21ad.htm http://www.avellareduarte.com.br/projeto/desenvolvimento/desenvolvimento2/desenv olvimento21a.htm