Arquitetura de Informação sem wireframe
-
Upload
ebai -
Category
Technology
-
view
1.166 -
download
1
description
Transcript of Arquitetura de Informação sem wireframe
![Page 1: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/1.jpg)
http://bit.ly/semwireframe
Arquitetura de Informação sem Wireframe
@gonzatto@cruzk
![Page 2: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/2.jpg)
Wireframe:a atividade mais executada
pelo AI brasileiro
![Page 3: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/3.jpg)
o que faz AI?
![Page 4: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/4.jpg)
![Page 5: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/5.jpg)
ansiedadede wireframe
![Page 6: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/6.jpg)
a centralidadedo wireframe
InformationArchitecture
Wireframing
![Page 7: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/7.jpg)
InformationArchitecture
Research
Etnograph
.
![Page 8: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/8.jpg)
dissecandoo wireframe
![Page 9: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/9.jpg)
wireframetambém conhecido como:
blue
prin
t
page schematic (esquema de página)
protótipo
vers
ão t
osca
do
site
arquitetura de informação
![Page 10: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/10.jpg)
Lorem Ipsum!
wireframedesigna:
um documentoum setor
uma
pess
oa?
![Page 11: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/11.jpg)
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...
![Page 12: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/12.jpg)
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
wireframeo que é afinal
![Page 13: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/13.jpg)
colaborarespecificar
prototipar
criar
comunicar
decidirorganizar
acordar
wireframeé usado...
![Page 14: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/14.jpg)
comocriação
Para explorar e desenvolver conceitos e testar possibilidades de organização visual de elementos.
como*colaboraçãoUm “acordo" colaborativo sobre como o sistema deverá ser como
protótipaçãoDetalhamento de um projeto para validar o processo de implementação e a própria arquitetura de informação
comodocumentação
Uma das ferramentas para se registrar diversas decisões sobre o projeto
![Page 15: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/15.jpg)
Então deixaeu escolheras cores?
Posso fazero wireframecom você?
Da pra deixaras caixinhasmais ali...
relações de poder . interface . disputa . controle
![Page 16: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/16.jpg)
como conversa...
!
![Page 17: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/17.jpg)
wireframe com narrativa guiadaconheça mais no corais.org
![Page 18: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/18.jpg)
wireflowconheça mais no corais.org
![Page 19: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/19.jpg)
pensando sobreo wireframe...
![Page 20: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/20.jpg)
problemas?
![Page 21: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/21.jpg)
UX designer o grande AI o pequeno AI wireframe thinker
![Page 22: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/22.jpg)
AI sem wireframe
é possível?
![Page 23: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/23.jpg)
alternativa para...documentação
Imagem de Globalista1
![Page 24: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/24.jpg)
diagrama de descrição de páginaconheça mais no corais.org
![Page 25: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/25.jpg)
baixaalta
Ajudar o cliente focar conversas em conteúdo, funcionalidade e prioridade dos conteúdos das páginas, sem travar a criação dos designers.
Em qualquer página web, um pedaço de informação pode ter maior ou menor peso visual, dependendo do uso da cor, contraste, posição e tipografia. Mas estas são ferramentas de um designer visual, são os fundamentos do design gráfico, e estão fora do negócio do arquiteto de informação. (BROWN, 2002)
As áreas de conteúdo são descritas em texto, como em uma especificação funcional, e distribuídas na página em ordem de prioridade , neste caso, a prioridade se da mais para itens na parte superior e na esquerda do que aqueles na parte inferior e na direita.
O documento pode conter componentes de interface.
1 2 3
(Prioridade)
1 2 3
![Page 26: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/26.jpg)
alternativa para...comunicação
![Page 27: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/27.jpg)
gogósketch . AI ágil . improviso
troca . diálogo . contação de histórias
![Page 28: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/28.jpg)
alternativa para...prototipação
![Page 29: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/29.jpg)
09/1
0/2
011
wire
s a
rvore
rabiscoframe . sketch . desapego
processo divergente . experimentação . baixa fidelidade . articulação
![Page 30: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/30.jpg)
e agora? greve de wireframe?
![Page 31: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/31.jpg)
![Page 32: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/32.jpg)
Planejamento
InformaçãoLevantamento
Classificação
Gestão
Recuperação
Visualização
Navegação
7 processos da Arquitetura de Informação
![Page 33: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/33.jpg)
agradecimentos
@lucianolobato @usabilidoido @belkiss
![Page 34: Arquitetura de Informação sem wireframe](https://reader033.fdocuments.net/reader033/viewer/2022051313/549926b4b479594d5c8b456a/html5/thumbnails/34.jpg)
Perguntas?
@gonzatto@cruzk
http://bit.ly/semwireframe