Arquitetura de Informação sem wireframe

1.402 visualizações

Publicada em

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).

Publicada em: Tecnologia
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.402
No SlideShare
0
A partir de incorporações
0
Número de incorporações
482
Ações
Compartilhamentos
0
Downloads
38
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×