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