Ir para conteúdo

[Dsg Blog] Design e experiência – parte 2


Jvchequer

Posts Recomendados

imagebutton.gif?url=http%3A%2F%2Fdesign.blog.br%2Fweb-design%2Fdesign-e-experiencia-%25e2%2580%2593-parte-2&source=design_blog&style=normal&service=bit.ly

O projeto de interfaces web é desenvolvido em princípio por camadas. Mas o que são essas camadas de fato?

 

 

 

É bem simples, em primeiro momento, o designer de interfaces é responsável pela disposição dos elementos em tela, um exemplo prático disso pode ser visto neste link. Podemos chamar isso de Wire Frame, que nada mais é do que, um mapa onde pode-se ter uma visualização macro da tela desenvolvida.

 

A partir do Wire Frame, o designer de interface começa a visualizar o que funciona bem na tela ou não. Um Wire Frame bem desenhado, com um fluxo de informações destribuido corretamente faz com que as chances de sucesso da interface seja grande, por que, por meio disso já pode ser eliminado todo o excesso de informação da tela. Como já sabemos, um usuario em web, busca por informações objetivas, ou seja, nada de esconder ou criar varios niveis de interação para se chegar ao objetivo. Quanto mais rapido e evicaz o processo, melhor será. Pois bem, o designer tem uma grande noção disto, logo que concluido o Wire Frame.

 

Um modo simples para se desenhar um bom fluxo de informação pode levar em consideração aspectos como cultura, relevância dos textos, padrões de leitura em web. Como um designer projeta para um publico especifico, posso dizer que conhecer os costumes do mesmo conta bons pontos.

 

imagem-1-540x436.jpg

 

Nesta imagem, podemos perceber que não existe um template completo, entretanto, o que podemos ver é como funcionará a disposição dos elementos em uma tela. O desenvolvimento do Wire Frame, pode se dizer que já faz parte do processo do design das interfaces. Com esse Wire Frame o desenvolvimento da parte gráfica fica simplificada, pois os elementos já estão previamente posicionados.

 

Segundo o instituto Nielsen Group um internauta faz a leitura da página da seguinte maneira: o primeiro olhar é vertical, seguido de dois olhares horizontais, formado o que chamamos de leitura em F. Segue um exemplo prático da leitura em F:

 

imagem-2.jpg

 

*Neste exemplo, o conteúdo textual está em Lorem Ipsum, isto não é recomendado, por que, com ele não pode ser feita uma simulação 100% real da interface. Mas como neste caso é só um exemplo, está bom!

 

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

 

.

Artigos relacionados

designblogbr?d=yIl2AUoC8zA</img> designblogbr?i=MpFGPvPPcUQ:H70t6MF-gnI:F7zBnMyn0Lo</img> designblogbr?d=qj6IDK7rITs</img> MpFGPvPPcUQ

 

View the full article

Link para o comentário
Compartilhar em outros sites

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...