SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
Arquitetura da Informação
        - Sitegrama e Fluxo




            ©2012 Cláudio Diniz Alves e Janicy Rocha
O sitegrama (também chamado de mapa do site) e o fluxo das
transações são os documentos com maior nível de abstração
entre os tipos de documentos de especificação da Arquitetura
de Informação.
Juntos eles têm a função de apresentar uma visão geral do
website mostrando o relacionamento entre as páginas.
O sitegrama é o mais clássico dos documentos da
Arquitetura de Informação. Trata-se de um diagrama que
representa a organização hierárquica do website e que
contém todas as páginas de conteúdo e a entrada de todas
as transações. Normalmente são elaborados através de
diagramas em árvore, especialmente para se representar
hierarquias.
O fluxo das transações é um diagrama
que representa o modelo de interação do usuário ao executar
as transações do website. Contém todas as páginas das
transações incluindo mensagens de erro e sucesso. Para essa
representação são utilizados fluxogramas que indicam como
ocorrem as transações entre as páginas.
quem usa sitegramas e fluxo de
transações?
• Arquitetos de Informação: usam para organizar as informações e
apresentar a hierarquia e a navegação entre as páginas do website.

• Diretores de Arte e Designers Gráficos: usam para definir o
número de tipos de telas e para desenhar graficamente os menus
do website.

• Redatores e Produtores de Conteúdo: usam para compreender os
requisitos de conteúdo do website.

• Programadores e Analistas: usam para definir os requisitos
técnicos e a modelagem do software e do banco de dados do
website.
REFERÊNCIAS

REIS, G. A. Centrando a Arquitetura de Informação no usuário. São Paulo: Universidade
de São Paulo – USP. Escola de Comunicação e Artes. SP, 2007. Disseração (Mestrado em
Ciência da Informação). 250p.

ROSENFELD, L.; MORVILLE, P. Information architecture for the World Wide Web.
Sebastopol. CA: O’Reilly, 2007. 508p.

Weitere ähnliche Inhalte

Was ist angesagt?

How to design a poster using Canva
How to design a poster using CanvaHow to design a poster using Canva
How to design a poster using CanvaJudeCosson
 
Jerarquias tipograficas
Jerarquias tipograficasJerarquias tipograficas
Jerarquias tipograficasOmar Duarte
 
Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Sam Georgi
 
MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeAlan Vasconcelos
 
02 Semiótica e Comunicação
02 Semiótica e Comunicação02 Semiótica e Comunicação
02 Semiótica e ComunicaçãoDeVry University
 
Direção de Arte
Direção de ArteDireção de Arte
Direção de ArteYu Amaral
 
DIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓNDIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓNDavid Nuñez
 
Terminologia y-conceptos-de-impresion
Terminologia y-conceptos-de-impresionTerminologia y-conceptos-de-impresion
Terminologia y-conceptos-de-impresionLuis Frias
 
Graphic Design Introduction Upload
Graphic Design Introduction   UploadGraphic Design Introduction   Upload
Graphic Design Introduction UploadNida Aslam
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Produccion grafica
Produccion  graficaProduccion  grafica
Produccion graficatls02cv
 
10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de WebsiteArthur Leon
 
Tema: tipometría
Tema: tipometríaTema: tipometría
Tema: tipometríaMontse Villa
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2Jennifer Janviere
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography FundamentalsSteve Hickey
 
Chapter 10 design thinking for service
Chapter 10 design thinking for serviceChapter 10 design thinking for service
Chapter 10 design thinking for serviceTeetut Tresirichod
 

Was ist angesagt? (20)

How to design a poster using Canva
How to design a poster using CanvaHow to design a poster using Canva
How to design a poster using Canva
 
Jerarquias tipograficas
Jerarquias tipograficasJerarquias tipograficas
Jerarquias tipograficas
 
Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)
 
MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - Usabilidade
 
Diseño de comunicación visual
Diseño de comunicación visualDiseño de comunicación visual
Diseño de comunicación visual
 
Diseño editorial
Diseño editorialDiseño editorial
Diseño editorial
 
02 Semiótica e Comunicação
02 Semiótica e Comunicação02 Semiótica e Comunicação
02 Semiótica e Comunicação
 
Direção de Arte
Direção de ArteDireção de Arte
Direção de Arte
 
DIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓNDIAGRAMACIÓN Y COMPOSICIÓN
DIAGRAMACIÓN Y COMPOSICIÓN
 
Terminologia y-conceptos-de-impresion
Terminologia y-conceptos-de-impresionTerminologia y-conceptos-de-impresion
Terminologia y-conceptos-de-impresion
 
Graphic Design Introduction Upload
Graphic Design Introduction   UploadGraphic Design Introduction   Upload
Graphic Design Introduction Upload
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Produccion grafica
Produccion  graficaProduccion  grafica
Produccion grafica
 
10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website10 Perguntas Antes de Iniciar seu Projeto de Website
10 Perguntas Antes de Iniciar seu Projeto de Website
 
Tema: tipometría
Tema: tipometríaTema: tipometría
Tema: tipometría
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
Chapter 10 design thinking for service
Chapter 10 design thinking for serviceChapter 10 design thinking for service
Chapter 10 design thinking for service
 
Aula Naming
Aula NamingAula Naming
Aula Naming
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 

Ähnlich wie Arquitetura da Informação - Sitegramas e Fluxos

Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframesaiadufmg
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegaçãopospipoca
 
Aulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de InformaçãoAulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de Informaçãovincevader
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca PereiraDanilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignDanilo Rosisca Pereira
 
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 GarrettLuiz Agner
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacaoeramos7senac
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 
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 PrototipagemRos Galabo, PhD
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de InformaçãoLtia Unesp
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacaoduradez
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeScriptutex
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãorenatamruiz
 

Ähnlich wie Arquitetura da Informação - Sitegramas e Fluxos (20)

Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
Wireframes
WireframesWireframes
Wireframes
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
Aulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de InformaçãoAulas 03 e 04 - Arquitetura de Informação
Aulas 03 e 04 - Arquitetura de Informação
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
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
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Vocabulário visual senac 2015
Vocabulário visual   senac 2015Vocabulário visual   senac 2015
Vocabulário visual senac 2015
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
 
Wireframes
WireframesWireframes
Wireframes
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
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
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 

Mehr von aiadufmg

Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2aiadufmg
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2aiadufmg
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2aiadufmg
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2aiadufmg
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2aiadufmg
 
LinkedIn - parte 2
LinkedIn - parte 2LinkedIn - parte 2
LinkedIn - parte 2aiadufmg
 
Last Fm - parte 2
Last Fm - parte 2Last Fm - parte 2
Last Fm - parte 2aiadufmg
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2aiadufmg
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2aiadufmg
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2aiadufmg
 
Avaliacao de Interfaces
Avaliacao de InterfacesAvaliacao de Interfaces
Avaliacao de Interfacesaiadufmg
 
Acessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisAcessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisaiadufmg
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveisaiadufmg
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidadeaiadufmg
 
Design Universal
Design UniversalDesign Universal
Design Universalaiadufmg
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivasaiadufmg
 
Ai ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingAi ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingaiadufmg
 

Mehr von aiadufmg (20)

Linked in parte 2
Linked in   parte 2Linked in   parte 2
Linked in parte 2
 
Last fm parte 2
Last fm   parte 2Last fm   parte 2
Last fm parte 2
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
LinkedIn - parte 2
LinkedIn - parte 2LinkedIn - parte 2
LinkedIn - parte 2
 
Last Fm - parte 2
Last Fm - parte 2Last Fm - parte 2
Last Fm - parte 2
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2
 
Avaliacao de Interfaces
Avaliacao de InterfacesAvaliacao de Interfaces
Avaliacao de Interfaces
 
Acessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitaisAcessibilidade em bibliotecas digitais
Acessibilidade em bibliotecas digitais
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design Universal
Design UniversalDesign Universal
Design Universal
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivas
 
Flickr
FlickrFlickr
Flickr
 
Ai ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsortingAi ad aula 6_atividadecardsorting
Ai ad aula 6_atividadecardsorting
 
Skoob
SkoobSkoob
Skoob
 
Livemocha
LivemochaLivemocha
Livemocha
 

Arquitetura da Informação - Sitegramas e Fluxos

  • 1. Arquitetura da Informação - Sitegrama e Fluxo ©2012 Cláudio Diniz Alves e Janicy Rocha
  • 2. O sitegrama (também chamado de mapa do site) e o fluxo das transações são os documentos com maior nível de abstração entre os tipos de documentos de especificação da Arquitetura de Informação. Juntos eles têm a função de apresentar uma visão geral do website mostrando o relacionamento entre as páginas.
  • 3. O sitegrama é o mais clássico dos documentos da Arquitetura de Informação. Trata-se de um diagrama que representa a organização hierárquica do website e que contém todas as páginas de conteúdo e a entrada de todas as transações. Normalmente são elaborados através de diagramas em árvore, especialmente para se representar hierarquias.
  • 4.
  • 5.
  • 6. O fluxo das transações é um diagrama que representa o modelo de interação do usuário ao executar as transações do website. Contém todas as páginas das transações incluindo mensagens de erro e sucesso. Para essa representação são utilizados fluxogramas que indicam como ocorrem as transações entre as páginas.
  • 7.
  • 8. quem usa sitegramas e fluxo de transações? • Arquitetos de Informação: usam para organizar as informações e apresentar a hierarquia e a navegação entre as páginas do website. • Diretores de Arte e Designers Gráficos: usam para definir o número de tipos de telas e para desenhar graficamente os menus do website. • Redatores e Produtores de Conteúdo: usam para compreender os requisitos de conteúdo do website. • Programadores e Analistas: usam para definir os requisitos técnicos e a modelagem do software e do banco de dados do website.
  • 9. REFERÊNCIAS REIS, G. A. Centrando a Arquitetura de Informação no usuário. São Paulo: Universidade de São Paulo – USP. Escola de Comunicação e Artes. SP, 2007. Disseração (Mestrado em Ciência da Informação). 250p. ROSENFELD, L.; MORVILLE, P. Information architecture for the World Wide Web. Sebastopol. CA: O’Reilly, 2007. 508p.