Especificação - Wireframe

3,051
-1

Published on

Aula sobre o desenvolvimento de wireframes do curso de Arquitetura de Informação em Curitiba - PR

Published in: Technology

Especificação - Wireframe

  1. 1. Especificação - Wireframes
  2. 2. Wireframe: “ Estrutura de Arame” É o documento de representação da organização, diagramação e funcionamento dos elementos de uma página.
  3. 3. 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?
  4. 4. Estamos chegando na ponta do Iceberg
  5. 5. Sketch (Rabiscoframe) Identificação (Mockup) Representação Desenvolvimento Layout Projetando uma Vaca: As etapas do Wireframe Protótipo
  6. 6. Sketch (low fidelity) Etapas do Wireframe:
  7. 7. Identificação ( Mockup ) Etapas do Wireframe:
  8. 8. Representação (High Fidelity) Etapas do Wireframe:
  9. 9. Protótipo Navegável Etapas do Wireframe:
  10. 10. Fore UI http://www.foreui.com/ Axure http://www.axure.com/ IRise http://www.irise.com/ Omnigraffle http://www.omnigroup.com/applications/OmniGraffle/ Balsamic http://www.balsamiq.com/ Justproto http://www.justproto.com/en/ Mockup Screens http://mockupscreens.com/ Denim http://dub.washington.edu:2007/projects/denim/ Fluid IA http://www.fluidia.org/ Oversite http://taubler.com/oversite/ Microsoft Visio http://office.microsoft.com/pt-br/visio/FX100487861046.aspx Adobe InDesign Power Point (Nããããããããããão!!!!) Ferramentas - Prototipação e Wireframe
  11. 11. 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
  12. 12. - 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:
  13. 13. 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:
  14. 14. - 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 Library http://developer.yahoo.com/ypatterns/ E muitas outras: http://delicious.com/viniciuskrause/biblioteca-de-padroes Algumas bibliotecas de padrões:
  15. 15. Distribua o conteúdo em ordem de importância decrescente , de cima para baixo, da esquerda para direita. Mais importante Menos importante Dicas:
  16. 16. Lembre-se das convenções . Se não lembrar, dê uma olhada no que já existe. Dicas:
  17. 17. Faça testes informais com você mesmo e com outras pessoas enquanto desenha. Dicas:
  18. 18. WIREFRAME NÃO É LAYOUT !!! Dica final:
  19. 19. Arquitetos de Informação Jeferson Jess Luis Felipe Fernandes Vinicius Krause
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×