0
Arquitetura de Informação sem Wireframe        http://bit.ly/semwireframe    @cruzk                    @gonzatto
Wireframe:a atividade mais executada      pelo AI brasileiro
o que faz AI?
ansiedadede wireframe
Wireframing              Information              Architecture a centralidade      do wireframe
InformationArchitecture               Research                   .                          Etnograph
dissecando   o wireframe
page schematic (esquema de página)                                                       versão tosca do site   arquitetur...
wireframe                             designa:LoremIpsum!   uma pessoa?              um documento            um setor
wireframeÉ...            1. o contorno daquilo que será a interface            2. esboço da interface que o usuário terá c...
wireframeo que é afinal                 Wodtek e Govella (2009, p.182) sugerem imaginar o                 wireframe como a...
om                                              e                              de                                         ...
como  criaçãoPara explorar e desenvolver conceitos e testarpossibilidades de organização visual de elementos.             ...
relações de poder . interface . disputa .controleDa pra deixar       Então deixaas caixinhas                         Posso...
como          !conversa...
wireframe com narrativa guiada  conheça mais no corais.org
wireflowconheça mais no corais.org
pensando sobreo wireframe...
problemas?
UX designer o grande AI o pequeno AI wireframe thinker
AI sem wireframeé possível?
alternativa para...                        documentaçãoImagem de Globalista1
diagrama de descrição de página   conheça mais no corais.org
alta                                    (Prioridade)                           baixa1                               2     ...
alternativa para...comunicação
troca . diálogo . contação de históriasgogósketch . AI ágil . improviso
alternativa para...prototipação
processo divergente . experimentação . baixa fidelidade . articulação                                   09/               ...
e agora?greve de wireframe?
Planejamento        Recuperação                                    Levantamento    Visualização                      Infor...
agradecimentos   @lucianolobato   @usabilidoido   @belkiss
Perguntas?    http://bit.ly/semwireframe@cruzk                    @gonzatto
Arquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframe
Upcoming SlideShare
Loading in...5
×

Arquitetura de Informação sem wireframe

1,210

Published on

Neste artigo é proposto o debate sobre o uso do wireframe, muitas vezes considerado o centro da Arquitetura de Informação. A escolha pela utilização deste documento deve acontecer de forma planejada e não por consequência da naturalização do wireframe como fundamento da Arquitetura de Informação. Para tal, buscamos compreender a atividade do arquiteto da informação, as características e usos do wireframe, suas vantagens e desvantagens. Por fim, são levantadas alternativas ao wireframe tradicional, explorando questões de documentação, colaboração e comunicação. Questiona-se a centralidade no wireframe para que a disciplina não seja subestimada ao ser confundida com um entregável.
Apresentação de Rodrigo Freese Gonzatto (Instituto Faber-Ludens) e Karla da Cruz Costa (Instituto Faber-Ludens) no 5º Encontro Brasileiro de Arquitetura de Informação - 2011 (www.congressoebai.org).

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,210
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Arquitetura de Informação sem wireframe"

  1. 1. Arquitetura de Informação sem Wireframe http://bit.ly/semwireframe @cruzk @gonzatto
  2. 2. Wireframe:a atividade mais executada pelo AI brasileiro
  3. 3. o que faz AI?
  4. 4. ansiedadede wireframe
  5. 5. Wireframing Information Architecture a centralidade do wireframe
  6. 6. InformationArchitecture Research . Etnograph
  7. 7. dissecando o wireframe
  8. 8. page schematic (esquema de página) versão tosca do site arquitetura de informação protótipo blueprintwireframetambém conhecido como:
  9. 9. wireframe designa:LoremIpsum! uma pessoa? um documento um setor
  10. 10. wireframeÉ... 1. o contorno daquilo que será a interface 2. esboço da interface que o usuário terá contato 3. diagrama que especifica uma página do website 4. renderização “bruta” que ilustra quais as informações mais importantes de cada tela 5...
  11. 11. wireframeo que é afinal Wodtek e Govella (2009, p.182) sugerem imaginar o wireframe como a armação usada por um escultor para dar forma e suporte permitindo, depois, adicionar o barro. Seu próprio nome já evidencia a metáfora: "wire", de arame, fio; e "frame", de esqueleto ou estrutura. arame . estrutura
  12. 12. om e de s co u p n lab cid e ic c or ir a or if cr r ic ga iar ar a r ni za a p c ro r o rd o t a t r ip a rwireframeé usado...
  13. 13. como criaçãoPara explorar e desenvolver conceitos e testarpossibilidades de organização visual de elementos. como *colaboração Um “acordo" colaborativo sobre como o como sistema deverá ser protótipaçãoDetalhamento de um projeto para validar o processo deimplementação e a própria arquitetura de informação como documentação Uma das ferramentas para se registrar diversas decisões sobre o projeto
  14. 14. relações de poder . interface . disputa .controleDa pra deixar Então deixaas caixinhas Posso fazer eu escolhermais ali... o wireframe as cores? com você?
  15. 15. como !conversa...
  16. 16. wireframe com narrativa guiada conheça mais no corais.org
  17. 17. wireflowconheça mais no corais.org
  18. 18. pensando sobreo wireframe...
  19. 19. problemas?
  20. 20. UX designer o grande AI o pequeno AI wireframe thinker
  21. 21. AI sem wireframeé possível?
  22. 22. alternativa para... documentaçãoImagem de Globalista1
  23. 23. diagrama de descrição de página conheça mais no corais.org
  24. 24. alta (Prioridade) baixa1 2 3Em qualquer página web, um Ajudar o cliente focar As áreas de conteúdo sãopedaço de informação pode conversas em conteúdo, descritas em texto, como emter maior ou menor peso funcionalidade e prioridade uma especificação funcional, evisual, dependendo do uso dos conteúdos das páginas, distribuídas na página emda cor, contraste, posição e sem travar a criação dos ordem de prioridade , nestetipografia. Mas estas são designers. caso, a prioridade se da maisferramentas de um designer para itens na parte superior evisual, são os fundamentos do na esquerda do que aquelesdesign gráfico, e estão fora na parte inferior e na direita.do negócio do arquiteto deinformação. (BROWN, 2002) 1 2 3 O documento pode conter componentes de interface.
  25. 25. alternativa para...comunicação
  26. 26. troca . diálogo . contação de históriasgogósketch . AI ágil . improviso
  27. 27. alternativa para...prototipação
  28. 28. processo divergente . experimentação . baixa fidelidade . articulação 09/ 0/2 1 011 wire rvor sa erabiscoframe . sketch . desapego
  29. 29. e agora?greve de wireframe?
  30. 30. Planejamento Recuperação Levantamento Visualização Informação Classificação Navegação Gestão7 processosda Arquitetura de Informação
  31. 31. agradecimentos @lucianolobato @usabilidoido @belkiss
  32. 32. Perguntas? http://bit.ly/semwireframe@cruzk @gonzatto
  1. A particular slide catching your eye?

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

×