mapeamento e wireframes - conceitos básicos, bem básicos
DESCRIPTION
Material de apoio a disciplina de Webdesign, curso de Tecnologia em Design Gráfico, UTFPR. Seja legal, cite mais as fontes e participe de uma web colaborativa.TRANSCRIPT
<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
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