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

1. concepção
avaliaçãoe
Projeto de Artefatos Interativos
arquitetura
prototipação
avaliação
Claudia Bordin
Rodrigues da Silva
UTFPR

2. Mapeamento
Estruturas - wireframes
Interface Interação
Protótipo Interativo

3. 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.

7. Esquemas de categorização
Ambíguos ou Exatos

8. 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)

9. 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...

10. http://articles.sitepoint.com/article/wire-frame-your-site

11. Fluxograma

12. http://www.gliffy.com/

13. 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?

14. Projeto Ponto i
http://www.faberludens.com.br/pt-br/node/391

15. http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

18. Acervo pessoal. Claudia Bordin Rodrigues.

19. Acervo pessoal. Claudia Bordin Rodrigues.

20. Acervo pessoal. Claudia Bordin Rodrigues.

22. 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

23. http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

24. cenários e
storyboards

25. Designing with
Video
A deaf person in train, Designing with Video, Ylirisku y Buur
Workshop, Designing with Video, Ylirisku y Buur
Salu Ylirisku
Jacob Buur
Kitchens Impressions, Designing with Video, Ylirisku y Buur

26. cenários
simulados
http://www.youtube.com/watch?v=A4pDf7m2UPE

27. Futuro das Interfaces
http://www.youtube.com/watch?v=rP5y7yp06n0
Microsoft Surface, Courier e Kinect

28. Apple Tablet Ipad
Ikea
http://www.youtube.com/watch?
v=yIGd4aBzhTU&feature=related
Guinness Book
http://www.youtube.com/watch?
v=ghPkhnCJYw4&NR=1

29. Mãos a obra!
Hora de projetar