O documento discute mapeamento e wireframes para design de interfaces. Explica que mapeamento envolve categorizar informações para simplificar a interação do usuário. Detalha esquemas de categorização como por assunto, tarefa, público-alvo e metáfora. Também discute wireframes, definindo-os como esqueletos de sites para apresentar elementos das páginas de forma simples. Fornece links para ferramentas e exemplos de wireframes.

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

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

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

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

9. http://articles.sitepoint.com/article/wire-frame-your-site
parte1. mapeie seu projeto

10. Sketches

11. MindMapping

12. Fluxograma

13. Dan Harrelson
http://videos.visitmix.com/MIX09/C10F

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

19. T. Scott Stromberg
http://404uxd.com/2008/02/28/the-fine-art-of-wireframes

20. http://www.gliffy.com/

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

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

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

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

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