SlideShare uma empresa Scribd logo
Arquitetura de Informação
 sem Wireframe


   @cruzk        @gonzatto
@cruzk        @gonzatto


Arquitetura de Informação
 sem Wireframe
Wireframe:
a atividade mais executada
      pelo AI brasileiro
o que faz AI?
ansiedade
de wireframe
Wireframing



              Information
              Architecture




     a centralidade
          do wireframe
Information
Architecture
               Research
                   .


                          Etnografia
dissecando
    o wireframe
dissecando
    o wireframe
page schematic (esquema de página)




                                                         versão tosca do site
     arquitetura de informação               protótipo




                                 blueprint
wireframe
também conhecido como:
wireframe
                              designa:

Lorem
Ipsum!   uma pessoa?




               um documento
           um setor
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...
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
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
                                   ar



wireframe
é usado...
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
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ê?
Como ir além
do Wireframe “tradicional”?
wireframe com narrativa guiada
  conheça mais no corais.org
wireflow
conheça mais no corais.org
pensando sobre
o wireframe...
problemas?
UX designer o grande AI o pequeno AI wireframe thinker
AI sem wireframe
é possível?
prototipação
    comunicação
documentação




               tirando o wireframe
               para melhorar
alternativa para...
                        documentação




Imagem de Globalista1
diagrama de descrição de página
   conheça mais no corais.org
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.
alternativa para...
comunicação
troca . diálogo . contação de histórias




gogosketch . AI ágil . improviso
alternativa para...
prototipação
processo divergente . experimentação . baixa fidelidade . articulação




                                     09/
                                    0/2  1
                                   011




                                                                         wire
                                                                        rvor  sa
                                                                        e
rabiscoframe . sketch . desapego
e agora?
greve de wireframe?
experimentem!
agradecimentos




    @lucianolobato   @usabilidoido   @belkiss
Obrigado!




@cruzk           @gonzatto

Mais conteúdo relacionado

Destaque

1ª aula indexacao 2013
1ª aula indexacao 20131ª aula indexacao 2013
1ª aula indexacao 2013
Gisele Dziekaniak
 
Como diagramar uma revista
Como diagramar uma revistaComo diagramar uma revista
Como diagramar uma revista
Marcos Carneiro
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
Márcio Darlen Lopes Cavalcante
 
DiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da Diagramacao
Daniel Castro
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
Marcelo Vianna
 
Design Driven Innovation
Design Driven InnovationDesign Driven Innovation
Design Driven Innovation
lucattony
 

Destaque (6)

1ª aula indexacao 2013
1ª aula indexacao 20131ª aula indexacao 2013
1ª aula indexacao 2013
 
Como diagramar uma revista
Como diagramar uma revistaComo diagramar uma revista
Como diagramar uma revista
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
DiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da DiagramacaoDiagramaçãO E Elementos Da Diagramacao
DiagramaçãO E Elementos Da Diagramacao
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Design Driven Innovation
Design Driven InnovationDesign Driven Innovation
Design Driven Innovation
 

Semelhante a Arquitetura da Informação sem Wireframe

Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
renatamruiz
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
Luiz Agner
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
Edyd B. Junges
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
UTFPR
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
Claudia Bordin Rodrigues
 
DDD - Step by Step
DDD - Step by StepDDD - Step by Step
DDD - Step by Step
Diego Dezembro
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
Doisnovemeia Publicidade
 
Protótipos Mobile na Prática
Protótipos Mobile na PráticaProtótipos Mobile na Prática
Protótipos Mobile na Prática
Mergo
 
Protótipos mobile na prática
Protótipos mobile na práticaProtótipos mobile na prática
Protótipos mobile na prática
Richard Jesus
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
João Alves
 
Axure - Crie wireframes e protótipos profissionais!
Axure - Crie wireframes e protótipos profissionais!Axure - Crie wireframes e protótipos profissionais!
Axure - Crie wireframes e protótipos profissionais!
Saldit Software
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Ros Galabo, PhD
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Pedro de Albuquerque Borges
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Processo de Desenvolvimento de Software - Prototipação
Processo de Desenvolvimento de Software - PrototipaçãoProcesso de Desenvolvimento de Software - Prototipação
Processo de Desenvolvimento de Software - Prototipação
Natanael Simões
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
Silvia Dotta
 
Congresso iv
Congresso ivCongresso iv
Congresso iv
IP10
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?
Fabio Souza
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
Rogério Chiavegatti
 

Semelhante a Arquitetura da Informação sem Wireframe (20)

Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
 
Design de Interação em Produtos Eletrônicos
Design de Interação em Produtos EletrônicosDesign de Interação em Produtos Eletrônicos
Design de Interação em Produtos Eletrônicos
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
 
DDD - Step by Step
DDD - Step by StepDDD - Step by Step
DDD - Step by Step
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Protótipos Mobile na Prática
Protótipos Mobile na PráticaProtótipos Mobile na Prática
Protótipos Mobile na Prática
 
Protótipos mobile na prática
Protótipos mobile na práticaProtótipos mobile na prática
Protótipos mobile na prática
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
Axure - Crie wireframes e protótipos profissionais!
Axure - Crie wireframes e protótipos profissionais!Axure - Crie wireframes e protótipos profissionais!
Axure - Crie wireframes e protótipos profissionais!
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
Processo de Desenvolvimento de Software - Prototipação
Processo de Desenvolvimento de Software - PrototipaçãoProcesso de Desenvolvimento de Software - Prototipação
Processo de Desenvolvimento de Software - Prototipação
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
 
Congresso iv
Congresso ivCongresso iv
Congresso iv
 
Como publicar um projeto open hardware?
Como publicar um projeto  open hardware?Como publicar um projeto  open hardware?
Como publicar um projeto open hardware?
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 

Mais de Rodrigo Freese Gonzatto

Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Rodrigo Freese Gonzatto
 
Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?
Rodrigo Freese Gonzatto
 
Fluxogramas
FluxogramasFluxogramas
Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?
Rodrigo Freese Gonzatto
 
Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)
Rodrigo Freese Gonzatto
 
Brainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em gruposBrainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em grupos
Rodrigo Freese Gonzatto
 
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Rodrigo Freese Gonzatto
 
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Rodrigo Freese Gonzatto
 
Diagrama de afinidades
Diagrama de afinidadesDiagrama de afinidades
Diagrama de afinidades
Rodrigo Freese Gonzatto
 
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Rodrigo Freese Gonzatto
 
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Rodrigo Freese Gonzatto
 
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Rodrigo Freese Gonzatto
 
Design de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoDesign de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projeto
Rodrigo Freese Gonzatto
 
Interação, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoInteração, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pinto
Rodrigo Freese Gonzatto
 
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Rodrigo Freese Gonzatto
 
Projetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroProjetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiro
Rodrigo Freese Gonzatto
 
Projetando interações com vídeo
Projetando interações com vídeoProjetando interações com vídeo
Projetando interações com vídeo
Rodrigo Freese Gonzatto
 
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Rodrigo Freese Gonzatto
 
Música e Tecnologia
Música e TecnologiaMúsica e Tecnologia
Música e Tecnologia
Rodrigo Freese Gonzatto
 
Comida e Tecnologia
Comida e TecnologiaComida e Tecnologia
Comida e Tecnologia
Rodrigo Freese Gonzatto
 

Mais de Rodrigo Freese Gonzatto (20)

Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
Consciência ingênua e crítica em Vieira Pinto e Paulo Freire [atualizado]
 
Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?Porque "usuários" prospectam futuros?
Porque "usuários" prospectam futuros?
 
Fluxogramas
FluxogramasFluxogramas
Fluxogramas
 
Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?Usuários e designers: quem é quem no codesign?
Usuários e designers: quem é quem no codesign?
 
Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)Ler imagens (Gestalt e composição para Design de Interfaces)
Ler imagens (Gestalt e composição para Design de Interfaces)
 
Brainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em gruposBrainstorming: técnicas e abordagens em grupos
Brainstorming: técnicas e abordagens em grupos
 
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
 
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
Paulo Freire em diálogo com Álvaro Vieira Pinto: a conscientização frente à q...
 
Diagrama de afinidades
Diagrama de afinidadesDiagrama de afinidades
Diagrama de afinidades
 
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
Produzir nossa própria existência: Reflexões para a produção em/sobre Álvaro ...
 
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
Desenvolvimento de coleção de REA sobre o conceito de amanualidade em Design ...
 
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
Usuários e Produção da Existência: contribuições de Álvaro Vieira Pinto e Pau...
 
Design de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projetoDesign de Moda e Design Digital: o corpo como fulcro do projeto
Design de Moda e Design Digital: o corpo como fulcro do projeto
 
Interação, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pintoInteração, tecnologia e produção da existência em álvaro vieira pinto
Interação, tecnologia e produção da existência em álvaro vieira pinto
 
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
Sobre o conceito de amanualidade em Simone de Beauvoir e Vieira Pinto a parti...
 
Projetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiroProjetando interações opressivas e libertárias com o corpo inteiro
Projetando interações opressivas e libertárias com o corpo inteiro
 
Projetando interações com vídeo
Projetando interações com vídeoProjetando interações com vídeo
Projetando interações com vídeo
 
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
Conceito de Técnica e Tecnologia [em Álvaro Vieira Pinto]
 
Música e Tecnologia
Música e TecnologiaMúsica e Tecnologia
Música e Tecnologia
 
Comida e Tecnologia
Comida e TecnologiaComida e Tecnologia
Comida e Tecnologia
 

Arquitetura da Informação sem Wireframe

  • 1. Arquitetura de Informação sem Wireframe @cruzk @gonzatto
  • 2. @cruzk @gonzatto Arquitetura de Informação sem Wireframe
  • 3. Wireframe: a atividade mais executada pelo AI brasileiro
  • 4. o que faz AI?
  • 5.
  • 7. Wireframing Information Architecture a centralidade do wireframe
  • 8. Information Architecture Research . Etnografia
  • 9. dissecando o wireframe
  • 10. dissecando o wireframe
  • 11. page schematic (esquema de página) versão tosca do site arquitetura de informação protótipo blueprint wireframe também conhecido como:
  • 12. wireframe designa: Lorem Ipsum! uma pessoa? um documento um setor
  • 13. 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...
  • 14. 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
  • 15. 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 ar wireframe é usado...
  • 16. 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
  • 17. 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ê?
  • 18. Como ir além do Wireframe “tradicional”?
  • 19. wireframe com narrativa guiada conheça mais no corais.org
  • 23. UX designer o grande AI o pequeno AI wireframe thinker
  • 24. AI sem wireframe é possível?
  • 25. prototipação comunicação documentação tirando o wireframe para melhorar
  • 26. alternativa para... documentação Imagem de Globalista1
  • 27. diagrama de descrição de página conheça mais no corais.org
  • 28. 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.
  • 30. troca . diálogo . contação de histórias gogosketch . AI ágil . improviso
  • 32. processo divergente . experimentação . baixa fidelidade . articulação 09/ 0/2 1 011 wire rvor sa e rabiscoframe . sketch . desapego
  • 33. e agora? greve de wireframe?
  • 35. agradecimentos @lucianolobato @usabilidoido @belkiss
  • 36. Obrigado! @cruzk @gonzatto

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. 1. perguntar: quem já fez projeto sem wireframe?\n2. quem já fez projeto sem wireframe e se considerou fazendo AI?\n\nIsso é bom ou ruim?\nNós perguntamos “porque”?\n\n- quem nunca fez mas sabe o que é etnografia.\n- onde a etapa mais negligenciada é a de implementação/avaliação\nou seja. projetamos e não sabemos se ou como funciona\n\na entrega de documentos como o wireframe marca a finalização da participação de um arquiteto em um projeto?\n\npessoal, o que queremos discutir com vocês é o seguinte: \n- será que o wireframe não está atrapalhando a Arquitetura da Informacao?\n- impedindo que o arquiteto desenvolva outras habilidades?- tanto na própria opção de processo quanto na expetativa do outro\n- pq? pq a galera só ve o trabalho do arquiteto no wireframe\n- não TOCAm, nao VEEM o processo . e por isso não dão valor\n
  6. esta é umaproblemática no nível do profissional\n\neste é um assunto discutido no próprio EBAI\n\n"maestro de uma orquestra, concebendo e movendo a equipe para frente" MORVILLE\nou \no operador de axure?\n\nao mesmo tempo que o wireframe é a atividade mais executada temos... (póximo slide)\n\n\n“a natureza holística do trabalho de arquitetura de \ninformação, certas pessoas claramente não se darão por satisfeitas até \nque tenham controle direto sobre todos os aspectos do trabalho que \npossam afetar a arquitetura. Esse modo de pensar é um sinal do pior \ntipo de arrogância e solapa todo esforço de convencer as empresas do \nvalor da disciplina” GARRET\n
  7. este desejo de dominar todo o processo\n\nisso impacta onde?\n\nno ponto máximo onde o arquiteto de informação pode tocar\nno cheirinho de interface do usuário\n\nonde temos o reflexo?\nas consequencias aparecem no desejo, na fome... (próximo slide)\n
  8. ... na ansiedade do wireframe\n\nTemos “ansiedade de wireframe”: de que a resolução dos problemas de arquitetura estão num documento e podem ser manipuladas, tocadas...\n
  9. \n
  10. \n
  11. \n
  12. \n
  13. um documento\numa especificação: acordo entre profissionais sinalizando o caminho decidido para aquilo que deverá ser produzido\n- um setor de agências de publicidade ("manda pro wireframe")planta baixa de uma agência com "área dos post-its"\n- e as vezes até uma pessoa ("chama ai o… wireframe")pessoa com cara de wireframe\n\nestaria o destino do arquiteto ser tipo um “flasheiro” ou “htmler”?\n
  14. \n
  15. \n
  16. SLIDE 3 FUNÇÕES DO WIREFRAME COMO DOCUMENTO:\n- comunicar ( espaço entre pessoas par amanifestar possibilidades mais definidas)\n- colaborar (especificar... e por isso, espaço de disputa) \n- documentar ( registrar E MATERIALIZAR)\n\n“O wireframe é uma maneira de manifestar\ndecisões realizadas em torno de um projeto,\ne pode ser utilizado com diferentes propósitos.”\n
  17. o ponto mais importante da sua utilização é como colaboração.\n\nSegundo James Garrett, quando arquitetos \nde informação e designers são separados, a única maneira de se produzir wireframes de \nsucesso é por meio da colaboração.\n\ne quando isso fica na mão de um profissional, outros aspectos são deixados de lado... \n\nfalando de desenvolver conceitos, de acordar, de decidir, o arquiteto com o wireframe tem nas mãos este controle e passa a fazer parte da disputa \n\né nesta dinâmica que\n
  18. e quando a colaboração não acontece nós percebemos o conflito, \n\no conflito é algo positivo, quando amenizada as relações de poder, quando existe diálogo e troca, e o wireframe não tem um “pai”, um dono\n\nO projeto de interfaces é um processo político (AGNER, 2006, p.140-144) onde se \nmanifestam conflitos de perspectivas e prioridades, em um jogo que envolve múltiplos \ninteresses de clientes, usuários, arquitetos, designers, desenvolvedores, entre outros. \n\no wireframe está no limiar entre a arquitetura de \ninformação e o design de interface. O modo mais comum de se fazer wireframes reforça uma \ndicotomia conteúdo e forma, onde o arquiteto trabalha em prol deste último e, desta maneira, \ninevitavelmente interferindo no trabalho de Design Visual.\n
  19. \n
  20. http://darmano.typepad.com/logic_emotion/2006/05/the_guided_wire.html\nhttp://boxesandarrows.com/view/the_guided_wire\n
  21. \n
  22. pensando no quanto interfere na arquitetura de infromação, na relação dos profissionais, o quanto não é positivo te-lo centralizado.\n\nenquanto o arquiteto se coloca como ”fazedor de wireframes”, ele também é percebido...\n
  23. a pergunta é: quais são as implicações disso?\ncomo isso retorna ao profissional ou a disciplina?\n\né desta maneira...\n\nserá que era isso que o arquiteto de informação, ao adotar o wireframe, adotar de fato como sua obra, esperava?\n\n\n
  24. aqui ele já projetou arquitetura de informação, achou que projetava experiências, e chegou ao wireframe thinking.\n
  25. afinal, dá para fazer AI sem wireframe? \nlevantamos algumas 3 maneiras que \najudam a pensar no objetivo do \nwireframe: documentar, colaborar e \ncomunicar -- e modos de fazer sem ele\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. falar do problema de começar a \nespecificar sem antes testar \npossibilidades com sketch, \ngogosketch, etc\n\nfalar que o fred criou o termo\n
  32. Já o wireframe detalhado, assim como qualquer trabalho que exija tempo e \ndedicação, pode gerar um apego entre seu produtor e o resultado do trabalho e, assim, \nrestringir possibilidades de desenvolvimento em um estágio inicial\n
  33. \n
  34. o que fazer se o wireframe nem \nsempre é a melhor pedida?\n
  35. explorarem nos seus \ntrabalhos as alternativas: dar uma \nchance para olhar a Arquitetura \nsem wireframe pode dar inights \nde novos métodos e práticas \n
  36. \n
  37. \n