• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Especificação - Wireframe
 

Especificação - Wireframe

on

  • 3,545 views

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

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

Statistics

Views

Total Views
3,545
Views on SlideShare
3,438
Embed Views
107

Actions

Likes
8
Downloads
126
Comments
0

5 Embeds 107

http://www.slideshare.net 40
http://aulasjoaorafael.blogspot.com.br 37
http://grupowebcce.blogspot.com 21
https://iesb.blackboard.com 6
http://aulasjoaorafael.blogspot.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Especificação - Wireframe Especificação - Wireframe Presentation Transcript

  • 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/ 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
  • 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 Library http://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ção Jeferson Jess Luis Felipe Fernandes Vinicius Krause