View
2.695
Download
3
Category
Preview:
DESCRIPTION
Aula sobre o desenvolvimento de wireframes do curso de Arquitetura de Informação em Curitiba - PR
Citation preview
Especificação - Wireframes
Wireframe:“Estrutura de Arame”
É o documento de representação da organização, diagramação e funcionamento dos elementos de uma página.
Arquitetos de Informação; que mostram e validam uns com os outros o futuro site, além de usarem na forma de protótipo em testes de usabilidade.
Diretores de Criação; que usam como base gráfica para o desenvolvimento do Layout.
Redatores; que preenchem a estrutura com o conteúdo.
Desenvolvedores; que irão fazer tudo funcionar.
Clientes; que validam tudo de acordo com os requisitos do projeto.
Usuários; que irão usá-lo como protótipo nos testes de usabilidade.
Quem é que usa?
Estamos chegando na ponta do Iceberg
Sketch (Rabiscoframe) Identificação (Mockup) Representação
Desenvolvimento Layout
Projetando uma Vaca: As etapas do Wireframe
Protótipo
Sketch (low fidelity)
Etapas do Wireframe:
Identificação (Mockup )
Etapas do Wireframe:
Representação (High Fidelity)
Etapas do Wireframe:
Protótipo Navegável
Etapas do Wireframe:
Fore UI http://www.foreui.com/
Axurehttp://www.axure.com/
IRisehttp://www.irise.com/
Omnigrafflehttp://www.omnigroup.com/applications/OmniGraffle/
Balsamichttp://www.balsamiq.com/
Justprotohttp://www.justproto.com/en/
Mockup Screenshttp://mockupscreens.com/
Denimhttp://dub.washington.edu:2007/projects/denim/
Fluid IAhttp://www.fluidia.org/
Oversitehttp://taubler.com/oversite/
Microsoft Visiohttp://office.microsoft.com/pt-br/visio/FX100487861046.aspx
Adobe InDesign
Power Point (Nããããããããããão!!!!)
Ferramentas - Prototipação e Wireframe
Vantagens- Validação consistente e persuasiva com o cliente.- Facilita a compreensão de montagem do layout e da programação dos aplicativos.- Possibilita o teste com usuários antes da definição do layout.
Desvantagens- Requer esforço e tempo, o que pode atrasar o processo e aumentar custos- O foco pode se desviar prematuramente da arquitetura de informação para a interface e design visual.- Pode amarrar o trabalho do designer
Vantagens- Rapidez
- Custo- Liberdade para o designer
- Facilita a refação
Desvantagens- Pouca credibilidade (principalmente com
clientes)- Maior margem de erros
- Difícil de ser testado- Exige mais de programadores e designers
- Requer desenvolvimento em conjunto.- Menos intuitivo.
Baixa fidelidade X Alta fidelidade
- Coloque nomes claros nas páginas do Wireframe e nos arquivos de protótipos, incluindo a data da última revisão.
- Enumere as páginas do Wireframe/Protótipo.
Dicas:
Faça comentários, descreva textualmente as interações. Pode usar as laterais do protótipo para isso.
Avalie se é mais produtivo simular as interações ou explicá-las.
Dicas:
- Consulte Bibliotecas de padrões de navegação (Pattern Libraries). Comece a fazer a sua própria.- Estabeleça padrões para o desenvolvimento de Wireframes em grupo.
Dicas:
Martijn van Welie http://www.welie.com/patterns/
Yahoo Pattern Libraryhttp://developer.yahoo.com/ypatterns/
E muitas outras:http://delicious.com/viniciuskrause/biblioteca-de-padroes
Algumas bibliotecas de padrões:
Distribua o conteúdo em ordem de importância decrescente, de cima para baixo, da esquerda para direita.
Mais importante
Menos importante
Dicas:
Lembre-se das convenções. Se não lembrar, dê uma olhada no que já existe.
Dicas:
Faça testes informais com você mesmo e com outras pessoas enquanto desenha.
Dicas:
WIREFRAME NÃO É LAYOUT !!!
Dica final:
Arquitetos de InformaçãoJeferson JessLuis Felipe FernandesVinicius Krause
Recommended