Arquitetura da Informação sem Wireframe

9,036 views

Published on

Apresentação realizada em 22/out/2011 no 5o EBAI - Encontro Brasileiro de Arquitetura da Informação por Karla Cruz e Rodrigo Gonzatto.

Published in: Design
  • Be the first to comment

Arquitetura da Informação sem Wireframe

  1. 1. Arquitetura de Informação sem Wireframe @cruzk @gonzatto
  2. 2. @cruzk @gonzattoArquitetura de Informação sem Wireframe
  3. 3. Wireframe:a atividade mais executada pelo AI brasileiro
  4. 4. o que faz AI?
  5. 5. ansiedadede wireframe
  6. 6. Wireframing Information Architecture a centralidade do wireframe
  7. 7. InformationArchitecture Research . Etnografia
  8. 8. dissecando o wireframe
  9. 9. dissecando o wireframe
  10. 10. page schematic (esquema de página) versão tosca do site arquitetura de informação protótipo blueprintwireframetambém conhecido como:
  11. 11. wireframe designa:LoremIpsum! uma pessoa? um documento um setor
  12. 12. 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...
  13. 13. 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
  14. 14. o m e de sp u co n cid e ic lab c a ir ifi r or cri or ca ga ar ar r niz a t ar p co ipa ro rd r to arwireframeé usado...
  15. 15. 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
  16. 16. relações de poder . interface . disputa . controleDa pra deixar Então deixaas caixinhas Posso fazer eu escolhermais ali... o wireframe as cores? com você?
  17. 17. Como ir alémdo Wireframe “tradicional”?
  18. 18. wireframe com narrativa guiada conheça mais no corais.org
  19. 19. wireflowconheça mais no corais.org
  20. 20. pensando sobreo wireframe...
  21. 21. problemas?
  22. 22. UX designer o grande AI o pequeno AI wireframe thinker
  23. 23. AI sem wireframeé possível?
  24. 24. prototipação comunicaçãodocumentação tirando o wireframe para melhorar
  25. 25. alternativa para... documentaçãoImagem de Globalista1
  26. 26. diagrama de descrição de página conheça mais no corais.org
  27. 27. 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.
  28. 28. alternativa para...comunicação
  29. 29. troca . diálogo . contação de históriasgogosketch . AI ágil . improviso
  30. 30. alternativa para...prototipação
  31. 31. processo divergente . experimentação . baixa fidelidade . articulação 09/ 0/2 1 011 wire rvor sa erabiscoframe . sketch . desapego
  32. 32. e agora?greve de wireframe?
  33. 33. experimentem!
  34. 34. agradecimentos @lucianolobato @usabilidoido @belkiss
  35. 35. Obrigado!@cruzk @gonzatto

×