mapeamento e wireframes - conceitos básicos, bem básicos

<web>DESIGN</web>

UTFPRDESIGN

GRÁFICO

mapeamento e wireframes Foto: Lixo Arte, de Augusto Molina . Publicado em kenner.com.brMATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

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

Esquemas de categorizaçãoAmbíguos ou Exatos

Ambíguos1. 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)

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 conferir valor ou peso a informação.Ex: Lista de preços, Top 5 músicas, etc...

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

dinâmica 1. mapeie seu projeto . 30 min

Sketches

MindMapping

Fluxograma

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?

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

http://www.gliffy.com/

Projeto Ponto ihttp://www.faberludens.com.br/pt-br/node/391

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

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 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 InterfaceUser Interface

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

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