SlideShare a Scribd company logo
1 of 12
Download to read offline
Arquitetura da Informação
                  - Wireframes




            ©2012 Cláudio Diniz Alves e Janicy Rocha
ESQUELETO           BASE
OSSATURA            FUNDAÇÃO
ESTRUTURA           SUSTENTAÇÃO
ARMAÇÃO             TRAÇOS GERAIS
REUNIÃO DE PARTES   CARCAÇA
ORGANIZAÇÃO
O wireframe é um diagrama que
especifica uma página do website. Ele
representa uma página definindo seus
elementos, a hierarquia entre eles, seus
agrupamentos e suas importâncias
relativas. Seu objetivo é especificar a
implementação da página e comunicar
o conteúdo e as funções de cada página
para discussão com a equipe do projeto.
Um wireframe (ou esquema de página, como é chamado
às vezes) é um esboço básico de uma página individual,
desenhado para indicar os elementos da página, seus
relacionamentos e suas importâncias relativas. Ele
é muito parecido com a armação que um escultor faz
antes de adicionar barro: ele dá forma e provê suporte.
por que os wireframes
são úteis?
• Arquitetos de Informação: usam para
especificar cada página do website.
• Diretores de Arte e Designers Gráficos:
utilizam para definir a linha gráfica do
website e o layout de cada página.
• Redatores e Produtores de Conteúdo: usam
para especificar os conteúdos das páginas.
• Empresa contratante: usa para validar se o
conteúdo das páginas atende aos requisitos
do projeto.
O wireframe é o primeiro documento que começa a dar forma
ao layout gráfico das páginas, por isso ele pode ser um forte
motivo de discussão entre o arquiteto de informação e o
designer gráfico. Apesar de não ser seu foco, o wireframe
apresenta uma sugestão de organização espacial para o
layout da página, o que pode restringir a liberdade criativa
do designer gráfico. Sugere-se que o wireframe seja fruto de
um trabalho de equipe, criado em conjunto pelo arquiteto de
informação e pelo designer gráfico.
Quanto mais simples, melhor.
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.

More Related Content

What's hot

História da UX no Brasil - v1.1
História da UX no Brasil - v1.1História da UX no Brasil - v1.1
História da UX no Brasil - v1.1Erico Fileno
 
Gestão de conflitos gerenciamento de conflitos -gestão de pessoas
Gestão de conflitos gerenciamento de conflitos  -gestão de pessoasGestão de conflitos gerenciamento de conflitos  -gestão de pessoas
Gestão de conflitos gerenciamento de conflitos -gestão de pessoasAntonio Bezerra ON
 
Como empreender com propósito - Jornada Ikigai
Como empreender com propósito - Jornada IkigaiComo empreender com propósito - Jornada Ikigai
Como empreender com propósito - Jornada IkigaiMarcio Okabe
 
Livro Design Thinking, Inovação em Negócios
Livro Design Thinking, Inovação em NegóciosLivro Design Thinking, Inovação em Negócios
Livro Design Thinking, Inovação em NegóciosBeto Lima Branding
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosJulien Condamines
 
Dinâmica ansiedade estresse
Dinâmica ansiedade estresseDinâmica ansiedade estresse
Dinâmica ansiedade estresseMárcio Melânia
 
Relacionalmento interpessoal
Relacionalmento interpessoalRelacionalmento interpessoal
Relacionalmento interpessoalLeandro Lopes
 
Aula 7 gestão organizacional
Aula 7 gestão organizacionalAula 7 gestão organizacional
Aula 7 gestão organizacionalCarlos Alves
 
O Perfil do Profissional no Atual Mundo do Trabalho
O Perfil do Profissional no Atual Mundo do TrabalhoO Perfil do Profissional no Atual Mundo do Trabalho
O Perfil do Profissional no Atual Mundo do TrabalhoSilvia Fleming
 
Dinamica se colocar no lugar do outro
Dinamica se colocar no lugar do outroDinamica se colocar no lugar do outro
Dinamica se colocar no lugar do outroCristina Tina
 
Manual gestão de conflitos
Manual gestão de conflitosManual gestão de conflitos
Manual gestão de conflitosIsabel Rodrigues
 
Apostila dinâmica de espaço
Apostila   dinâmica de espaço Apostila   dinâmica de espaço
Apostila dinâmica de espaço Robert Álefe
 

What's hot (20)

História da UX no Brasil - v1.1
História da UX no Brasil - v1.1História da UX no Brasil - v1.1
História da UX no Brasil - v1.1
 
Aulas Produtos
Aulas ProdutosAulas Produtos
Aulas Produtos
 
Empoderamento da Mulher
Empoderamento da MulherEmpoderamento da Mulher
Empoderamento da Mulher
 
METODOLOGIA DE DESIGN
METODOLOGIA DE DESIGNMETODOLOGIA DE DESIGN
METODOLOGIA DE DESIGN
 
Canvas passo a passo
Canvas passo a passoCanvas passo a passo
Canvas passo a passo
 
Gestão de conflitos gerenciamento de conflitos -gestão de pessoas
Gestão de conflitos gerenciamento de conflitos  -gestão de pessoasGestão de conflitos gerenciamento de conflitos  -gestão de pessoas
Gestão de conflitos gerenciamento de conflitos -gestão de pessoas
 
Como empreender com propósito - Jornada Ikigai
Como empreender com propósito - Jornada IkigaiComo empreender com propósito - Jornada Ikigai
Como empreender com propósito - Jornada Ikigai
 
3 dinâmica de grupo
3 dinâmica de grupo3 dinâmica de grupo
3 dinâmica de grupo
 
Livro Design Thinking, Inovação em Negócios
Livro Design Thinking, Inovação em NegóciosLivro Design Thinking, Inovação em Negócios
Livro Design Thinking, Inovação em Negócios
 
Grid
GridGrid
Grid
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
 
Identidade Visual - Aula 01
Identidade Visual - Aula 01Identidade Visual - Aula 01
Identidade Visual - Aula 01
 
Dinâmica ansiedade estresse
Dinâmica ansiedade estresseDinâmica ansiedade estresse
Dinâmica ansiedade estresse
 
Relacionalmento interpessoal
Relacionalmento interpessoalRelacionalmento interpessoal
Relacionalmento interpessoal
 
Comunicação Não Violenta
Comunicação Não ViolentaComunicação Não Violenta
Comunicação Não Violenta
 
Aula 7 gestão organizacional
Aula 7 gestão organizacionalAula 7 gestão organizacional
Aula 7 gestão organizacional
 
O Perfil do Profissional no Atual Mundo do Trabalho
O Perfil do Profissional no Atual Mundo do TrabalhoO Perfil do Profissional no Atual Mundo do Trabalho
O Perfil do Profissional no Atual Mundo do Trabalho
 
Dinamica se colocar no lugar do outro
Dinamica se colocar no lugar do outroDinamica se colocar no lugar do outro
Dinamica se colocar no lugar do outro
 
Manual gestão de conflitos
Manual gestão de conflitosManual gestão de conflitos
Manual gestão de conflitos
 
Apostila dinâmica de espaço
Apostila   dinâmica de espaço Apostila   dinâmica de espaço
Apostila dinâmica de espaço
 

Similar to Arquitetura da Informação - Wireframes

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 DesignFelipe Fernandes
 
Arquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e FluxosArquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e Fluxosaiadufmg
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçãorenatamruiz
 
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
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhanyKaren Costa
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Criação de sites
Criação de sitesCriação de sites
Criação de sitesicajai
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_bmaurohs
 
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 - 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
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de InformaçãoLtia Unesp
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfssuser595b1e1
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Luiz Agner
 
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
 

Similar to Arquitetura da Informação - Wireframes (20)

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
 
Wire frame e mapa do site
Wire frame e mapa do siteWire frame e mapa do site
Wire frame e mapa do site
 
Sitegrama e fluxo
Sitegrama e fluxoSitegrama e fluxo
Sitegrama e fluxo
 
Arquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e FluxosArquitetura da Informação - Sitegramas e Fluxos
Arquitetura da Informação - Sitegramas e Fluxos
 
Wireframes
WireframesWireframes
Wireframes
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informaçã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
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhany
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
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 - 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
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
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
 

More from 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
 

More from 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
 

Recently uploaded

Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãIlda Bicacro
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2Maria Teresa Thomaz
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....LuizHenriquedeAlmeid6
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)ElliotFerreira
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...Rosalina Simão Nunes
 
Slides sobre as Funções da Linguagem.pptx
Slides sobre as Funções da Linguagem.pptxSlides sobre as Funções da Linguagem.pptx
Slides sobre as Funções da Linguagem.pptxMauricioOliveira258223
 
AULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobreAULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobremaryalouhannedelimao
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMHELENO FAVACHO
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdfLeloIurk1
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfTutor de matemática Ícaro
 
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfRecomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfFrancisco Márcio Bezerra Oliveira
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESEduardaReis50
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSOLeloIurk1
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfprofesfrancleite
 
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdfBlendaLima1
 

Recently uploaded (20)

Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! Sertã
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
 
Slides sobre as Funções da Linguagem.pptx
Slides sobre as Funções da Linguagem.pptxSlides sobre as Funções da Linguagem.pptx
Slides sobre as Funções da Linguagem.pptx
 
AULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobreAULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobre
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
 
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdfCurrículo - Ícaro Kleisson - Tutor acadêmico.pdf
Currículo - Ícaro Kleisson - Tutor acadêmico.pdf
 
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfRecomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
 
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
3-Livro-Festa-no-céu-Angela-Lago.pdf-·-versão-1.pdf
 

Arquitetura da Informação - Wireframes

  • 1. Arquitetura da Informação - Wireframes ©2012 Cláudio Diniz Alves e Janicy Rocha
  • 2. ESQUELETO BASE OSSATURA FUNDAÇÃO ESTRUTURA SUSTENTAÇÃO ARMAÇÃO TRAÇOS GERAIS REUNIÃO DE PARTES CARCAÇA ORGANIZAÇÃO
  • 3. O wireframe é um diagrama que especifica uma página do website. Ele representa uma página definindo seus elementos, a hierarquia entre eles, seus agrupamentos e suas importâncias relativas. Seu objetivo é especificar a implementação da página e comunicar o conteúdo e as funções de cada página para discussão com a equipe do projeto.
  • 4. Um wireframe (ou esquema de página, como é chamado às vezes) é um esboço básico de uma página individual, desenhado para indicar os elementos da página, seus relacionamentos e suas importâncias relativas. Ele é muito parecido com a armação que um escultor faz antes de adicionar barro: ele dá forma e provê suporte.
  • 5. por que os wireframes são úteis? • Arquitetos de Informação: usam para especificar cada página do website. • Diretores de Arte e Designers Gráficos: utilizam para definir a linha gráfica do website e o layout de cada página. • Redatores e Produtores de Conteúdo: usam para especificar os conteúdos das páginas. • Empresa contratante: usa para validar se o conteúdo das páginas atende aos requisitos do projeto.
  • 6. O wireframe é o primeiro documento que começa a dar forma ao layout gráfico das páginas, por isso ele pode ser um forte motivo de discussão entre o arquiteto de informação e o designer gráfico. Apesar de não ser seu foco, o wireframe apresenta uma sugestão de organização espacial para o layout da página, o que pode restringir a liberdade criativa do designer gráfico. Sugere-se que o wireframe seja fruto de um trabalho de equipe, criado em conjunto pelo arquiteto de informação e pelo designer gráfico.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. 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.