Post on 23-Dec-2014
description
http://bit.ly/semwireframe
Arquitetura de Informação sem Wireframe
@gonzatto@cruzk
Wireframe:a atividade mais executada
pelo AI brasileiro
o que faz AI?
ansiedadede wireframe
a centralidadedo wireframe
InformationArchitecture
Wireframing
InformationArchitecture
Research
Etnograph
.
dissecandoo wireframe
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
Lorem Ipsum!
wireframedesigna:
um documentoum setor
uma
pess
oa?
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...
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
colaborarespecificar
prototipar
criar
comunicar
decidirorganizar
acordar
wireframeé usado...
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
Então deixaeu escolheras cores?
Posso fazero wireframecom você?
Da pra deixaras caixinhasmais ali...
relações de poder . interface . disputa . controle
como conversa...
!
wireframe com narrativa guiadaconheç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ção
Imagem de Globalista1
diagrama de descrição de páginaconheça mais no corais.org
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
alternativa para...comunicação
gogósketch . AI ágil . improviso
troca . diálogo . contação de histórias
alternativa para...prototipação
09/1
0/2
011
wire
s a
rvore
rabiscoframe . sketch . desapego
processo divergente . experimentação . baixa fidelidade . articulação
e agora? greve de wireframe?
Planejamento
InformaçãoLevantamento
Classificação
Gestão
Recuperação
Visualização
Navegação
7 processos da Arquitetura de Informação
agradecimentos
@lucianolobato @usabilidoido @belkiss
Perguntas?
@gonzatto@cruzk
http://bit.ly/semwireframe