1) O documento discute alternativas para o wireframe na arquitetura de informação, como diagramas de descrição de página e conversas guiadas. 2) É sugerido que o wireframe pode ser substituído por documentação textual, prototipação de baixa fidelidade e experimentação para comunicação e desenvolvimento do projeto. 3) Há uma reflexão sobre a centralidade do wireframe e a possibilidade de uma "greve de wireframe" na prática da arquitetura de informação.

1. Arquitetura de Informação
sem Wireframe
http://bit.ly/semwireframe
@cruzk @gonzatto

2. Wireframe:
a atividade mais executada
pelo AI brasileiro

3. o que faz AI?

5. ansiedade
de wireframe

6. Wireframing
Information
Architecture
a centralidade
do wireframe

7. Information
Architecture
Research
.
Etnograph

8. dissecando
o wireframe

9. page schematic (esquema de página)
versão tosca do site
arquitetura de informação protótipo
blueprint
wireframe
também conhecido como:

10. wireframe
designa:
Lorem
Ipsum! uma pessoa?
um documento
um setor

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

12. wireframe
o 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

13. 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 r
wireframe
é usado...

14. como
criação
Para explorar e desenvolver conceitos e testar
possibilidades de organização visual de elementos.
como
*colaboração
Um “acordo" colaborativo sobre como o
como sistema deverá ser
protótipação
Detalhamento de um projeto para validar o processo de
implementação e a própria arquitetura de informação
como
documentação
Uma das ferramentas para se registrar diversas
decisões sobre o projeto

15. relações de poder . interface . disputa .
controle
Da pra deixar Então deixa
as caixinhas Posso fazer
eu escolher
mais ali... o wireframe
as cores?
com você?

16. como !
conversa...

17. wireframe com narrativa guiada
conheça mais no corais.org

18. wireflow
conheça mais no corais.org

19. pensando sobre
o wireframe...

20. problemas?

21. UX designer o grande AI o pequeno AI wireframe thinker

22. AI sem wireframe
é possível?

23. alternativa para...
documentação
Imagem de Globalista1

24. diagrama de descrição de página
conheça mais no corais.org

25. alta (Prioridade) baixa
1 2 3
Em qualquer página web, um Ajudar o cliente focar As áreas de conteúdo são
pedaço de informação pode conversas em conteúdo, descritas em texto, como em
ter maior ou menor peso funcionalidade e prioridade uma especificação funcional, e
visual, dependendo do uso dos conteúdos das páginas, distribuídas na página em
da cor, contraste, posição e sem travar a criação dos ordem de prioridade , neste
tipografia. Mas estas são designers. caso, a prioridade se da mais
ferramentas de um designer para itens na parte superior e
visual, são os fundamentos do na esquerda do que aqueles
design gráfico, e estão fora na parte inferior e na direita.
do negócio do arquiteto de
informação. (BROWN, 2002) 1 2 3
O documento pode conter
componentes de interface.

26. alternativa para...
comunicação

27. troca . diálogo . contação de histórias
gogósketch . AI ágil . improviso

28. alternativa para...
prototipação

29. processo divergente . experimentação . baixa fidelidade . articulação
09/
0/2 1
011
wire
rvor sa
e
rabiscoframe . sketch . desapego

30. e agora?
greve de wireframe?

32. Planejamento
Recuperação
Levantamento
Visualização
Informação
Classificação
Navegação
Gestão
7 processos
da Arquitetura de Informação

33. agradecimentos
@lucianolobato @usabilidoido @belkiss

34. Perguntas?
http://bit.ly/semwireframe
@cruzk @gonzatto