Mapeamento e wireframes

2.198 visualizações

Publicada em

Material de apoio para a disciplina de WebDesign - UTFPR. Profa. Claudia Bordin Rodrigues

Publicada em: Educação
1 comentário
3 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.198
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.420
Ações
Compartilhamentos
0
Downloads
3
Comentários
1
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mapeamento e wireframes

  1. 1. <web>DESIGN</web> UTFPR DESIGN GRÁFICO mapeamento e wireframes MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
  2. 2. Mapeamento Por quê categorizar? Categorizar, ou classificar, é agrupar entidades ou coisas por semelhança. Categorizar é o processo cognitivo de dividir as experiências do mundo em grupos de entidades, para construir uma ordem do mundo físico e social que o ser humano participa e atua. Categorização é um mecanismo cognitivo fundamental que simplifica a interação do indivíduo com o ambiente em que vive.
  3. 3. Esquemas de categorização Ambíguos ou Exatos
  4. 4. Ambíguos 1. Por assunto: divide a informação em diferentes tipos, diferentes modelos ou perguntas. Ex: Página Amarelas, Supermercado, Editoriais 2. Por tarefa: organiza a informação em conjuntos de ações. Usado bastante em softwares. Ex: Menu aplicativos do Windows (Salvar, Abrir, Editar,...) 3. Por público-alvo: indicado para customizar conforme as diferenças do público-alvo. Ex: Loja de departamento (masculino, feminino, etc..) 4. Por metáfora: indicado para orientar o usuário em algo novo baseando-se em algo familiar para ele. Ex: Desktop do computador (baseado em uma mesa de trabalho)
  5. 5. Exatos 1. Alfabeto: indicado para grande conjunto de informações e público variado. Ex: Dicionário, Lista Telefônicas, Enciclopédia, etc... 2. Tempo: indicado para mostrar a ordem cronológica dos eventos. Ex: Livros de história, Guia de TV, histórico de notícias, etc... 3. Localização: Compara informações vindas de diferentes locais. Ex: Previsão do tempo, pesquisa política, etc... 4. Seqüência: organiza os itens por ordem de grandeza. Indicado para conferir valor ou peso a informação. Ex: Lista de preços, Top 5 músicas, etc...
  6. 6. http://articles.sitepoint.com/article/wire-frame-your-site parte1. mapeie seu projeto
  7. 7. Sketches
  8. 8. MindMapping
  9. 9. Fluxograma
  10. 10. Dan Harrelson http://videos.visitmix.com/MIX09/C10F
  11. 11. Wireframes são os esqueletos dos websites, feitos pelos Arquitetos da Informação / Designers. Quanto mais simples, melhor. O wireframe não especifica design gráfico. Sua função é apresentar os elementos que vão compor a página. Wireframes O que são?
  12. 12. T. Scott Stromberg http://404uxd.com/2008/02/28/the-fine-art-of-wireframes
  13. 13. http://www.gliffy.com/
  14. 14. Projeto Ponto i http://www.faberludens.com.br/pt-br/node/391
  15. 15. http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
  16. 16. São modelos que já propõem-se a dar certo grau de fidelidade ao design da interface. São feitos com finalidade de apresentação e podem ser usados como modelos de testes [assim como os wireframes]. Podem utilizar-se de ferramentas mais sofisticadas para a modelagem de elementos gráficos. Protótipos de Interface User Interface
  17. 17. http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
  18. 18. webutfpr.tumblr.comMATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte. Mãos a obra! Hora de projetar

×