Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Mapeamento e wireframes

3.456 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung

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

×