Mapeamento de conteúdo - aplicativo

578 visualizações

Publicada em

Aula da disciplina de Tecnologias Digitais aplicadas ao Design Gráfico, UTFPR

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
578
No SlideShare
0
A partir de incorporações
0
Número de incorporações
123
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mapeamento de conteúdo - aplicativo

  1. 1. concepçãoavaliaçãoeProjeto de Artefatos InterativosarquiteturaprototipaçãoavaliaçãoClaudia BordinRodrigues da SilvaUTFPR
  2. 2. MapeamentoEstruturas - wireframesInterface InteraçãoProtótipo Interativo
  3. 3. MapeamentoPor quê categorizar?Categorizar, ou classificar, é agrupar entidades ou coisas por semelhança.Categorizar é o processo cognitivo de dividir as experiências do mundo emgrupos de entidades, para construir uma ordem do mundo físico e social queo ser humano participa e atua.Categorização é um mecanismo cognitivo fundamental que simplifica ainteração do indivíduo com o ambiente em que vive.
  4. 4. Esquemas de categorizaçãoAmbíguos ou Exatos
  5. 5. Ambíguos1. Por assunto: divide a informação em diferentes tipos, diferentes modelosou perguntas.Ex: Página Amarelas, Supermercado, Editoriais2. Por tarefa: organiza a informação em conjuntos de ações. Usado bastanteem softwares.Ex: Menu aplicativos do Windows (Salvar, Abrir, Editar,...)3. Por público-alvo: indicado para customizar conforme as diferenças dopúblico-alvo.Ex: Loja de departamento (masculino, feminino, etc..)4. Por metáfora: indicado para orientar o usuário em algo novo baseando-seem algo familiar para ele.Ex: Desktop do computador (baseado em uma mesa de trabalho)
  6. 6. Exatos1. 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 conferirvalor ou peso a informação.Ex: Lista de preços, Top 5 músicas, etc...
  7. 7. http://articles.sitepoint.com/article/wire-frame-your-site
  8. 8. Fluxograma
  9. 9. http://www.gliffy.com/
  10. 10. Wireframes são os esqueletos dos websites, feitos pelosArquitetos 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.WireframesO que são?
  11. 11. Projeto Ponto ihttp://www.faberludens.com.br/pt-br/node/391
  12. 12. http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
  13. 13. Acervo pessoal. Claudia Bordin Rodrigues.
  14. 14. Acervo pessoal. Claudia Bordin Rodrigues.
  15. 15. Acervo pessoal. Claudia Bordin Rodrigues.
  16. 16. São modelos que já propõem-se a dar certo grau de fidelidadeao design da interface.São feitos com finalidade de apresentação e podem ser usados comomodelos de testes [assim como os wireframes].Podem utilizar-se de ferramentas mais sofisticadas para a modelagem deelementos gráficos.Protótipos de InterfaceUser Interface
  17. 17. http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
  18. 18. cenários estoryboards
  19. 19. Designing withVideoA deaf person in train, Designing with Video, Ylirisku y BuurWorkshop, Designing with Video, Ylirisku y BuurSalu YliriskuJacob BuurKitchens Impressions, Designing with Video, Ylirisku y Buur
  20. 20. cenáriossimuladoshttp://www.youtube.com/watch?v=A4pDf7m2UPE
  21. 21. Futuro das Interfaceshttp://www.youtube.com/watch?v=rP5y7yp06n0Microsoft Surface, Courier e Kinect
  22. 22. Apple Tablet IpadIkeahttp://www.youtube.com/watch?v=yIGd4aBzhTU&feature=relatedGuinness Bookhttp://www.youtube.com/watch?v=ghPkhnCJYw4&NR=1
  23. 23. Mãos a obra!Hora de projetar

×