SlideShare uma empresa Scribd logo
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.

Mais conteúdo relacionado

Semelhante a Wireframes

Wireframes
WireframesWireframes
Wireframes
Jaqueline Franco
 
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ção
vincevader
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
Danilo Rosisca Pereira
 
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
Danilo 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 lowhany
Karen Costa
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
icajai
 
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 Prototipagem
Ros 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ção
Ltia 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).pdf
ssuser595b1e1
 
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 Garrett
Luiz Agner
 
Web Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitosWeb Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitos
SENAC SC
 
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
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 

Semelhante a Wireframes (20)

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
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
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 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
 
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
 
Web Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitosWeb Design e Front End - Definição e conceitos
Web Design e Front End - Definição e conceitos
 
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!
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designer
 

Mais de Claudio Diniz - Designer Gráfico

Selo BH Hip-Hop 40 anos
Selo BH Hip-Hop 40 anosSelo BH Hip-Hop 40 anos
Selo BH Hip-Hop 40 anos
Claudio Diniz - Designer Gráfico
 
TRUCK PARK BR.pdf
TRUCK PARK BR.pdfTRUCK PARK BR.pdf
Apresentação Descentra
Apresentação DescentraApresentação Descentra
Apresentação Descentra
Claudio Diniz - Designer Gráfico
 
Festivais Municipais
Festivais MunicipaisFestivais Municipais
Festivais Municipais
Claudio Diniz - Designer Gráfico
 
Identidade Visual para o Instagram
Identidade Visual para o InstagramIdentidade Visual para o Instagram
Identidade Visual para o Instagram
Claudio Diniz - Designer Gráfico
 
MARCA BELO HORIZONTE FILM COMMISSION
MARCA BELO HORIZONTE FILM COMMISSIONMARCA BELO HORIZONTE FILM COMMISSION
MARCA BELO HORIZONTE FILM COMMISSION
Claudio Diniz - Designer Gráfico
 
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
Claudio Diniz - Designer Gráfico
 
Sesc Business Intelligence - Defesa de Marca
Sesc Business Intelligence - Defesa de MarcaSesc Business Intelligence - Defesa de Marca
Sesc Business Intelligence - Defesa de Marca
Claudio Diniz - Designer Gráfico
 
Via Verde
Via VerdeVia Verde
Sesc 3 anos de gestao 2010-2013
Sesc 3 anos de gestao 2010-2013Sesc 3 anos de gestao 2010-2013
Sesc 3 anos de gestao 2010-2013
Claudio Diniz - Designer Gráfico
 
Card Sorting
Card SortingCard Sorting
Design Universal.
Design Universal.Design Universal.

Mais de Claudio Diniz - Designer Gráfico (20)

Selo BH Hip-Hop 40 anos
Selo BH Hip-Hop 40 anosSelo BH Hip-Hop 40 anos
Selo BH Hip-Hop 40 anos
 
TRUCK PARK BR.pdf
TRUCK PARK BR.pdfTRUCK PARK BR.pdf
TRUCK PARK BR.pdf
 
Apresentação Descentra
Apresentação DescentraApresentação Descentra
Apresentação Descentra
 
Festivais Municipais
Festivais MunicipaisFestivais Municipais
Festivais Municipais
 
Identidade Visual para o Instagram
Identidade Visual para o InstagramIdentidade Visual para o Instagram
Identidade Visual para o Instagram
 
MARCA BELO HORIZONTE FILM COMMISSION
MARCA BELO HORIZONTE FILM COMMISSIONMARCA BELO HORIZONTE FILM COMMISSION
MARCA BELO HORIZONTE FILM COMMISSION
 
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
Acoes emergenciais e estruturantes para a cultura em belo horizonte junho-202...
 
Sesc Business Intelligence - Defesa de Marca
Sesc Business Intelligence - Defesa de MarcaSesc Business Intelligence - Defesa de Marca
Sesc Business Intelligence - Defesa de Marca
 
Via Verde
Via VerdeVia Verde
Via Verde
 
Sesc 3 anos de gestao 2010-2013
Sesc 3 anos de gestao 2010-2013Sesc 3 anos de gestao 2010-2013
Sesc 3 anos de gestao 2010-2013
 
Conheça o Sesc
Conheça o SescConheça o Sesc
Conheça o Sesc
 
Ai ad aula 2_parte1
Ai ad aula 2_parte1Ai ad aula 2_parte1
Ai ad aula 2_parte1
 
Arquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e DesenvolvimentoArquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e Desenvolvimento
 
O Arquiteto da Informação
O Arquiteto da InformaçãoO Arquiteto da Informação
O Arquiteto da Informação
 
Arquitetura da Informação e Interdisciplinaridade
Arquitetura da Informação e InterdisciplinaridadeArquitetura da Informação e Interdisciplinaridade
Arquitetura da Informação e Interdisciplinaridade
 
Sistemas da Arquitetura da Informação
Sistemas da Arquitetura da InformaçãoSistemas da Arquitetura da Informação
Sistemas da Arquitetura da Informação
 
Card Sorting
Card SortingCard Sorting
Card Sorting
 
Deficiências e Tecnologias Assistivas
Deficiências e Tecnologias AssistivasDeficiências e Tecnologias Assistivas
Deficiências e Tecnologias Assistivas
 
Design Universal.
Design Universal.Design Universal.
Design Universal.
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 

Último

História Do Assaré - Prof. Francisco Leite
História Do Assaré - Prof. Francisco LeiteHistória Do Assaré - Prof. Francisco Leite
História Do Assaré - Prof. Francisco Leite
profesfrancleite
 
Memorial do convento slides- português 2023
Memorial do convento slides- português 2023Memorial do convento slides- português 2023
Memorial do convento slides- português 2023
MatildeBrites
 
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptxSlides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
LuizHenriquedeAlmeid6
 
o que está acontecendo no Rio grande do Sul
o que está acontecendo no Rio grande do Sulo que está acontecendo no Rio grande do Sul
o que está acontecendo no Rio grande do Sul
CarlaInsStaub
 
"Está o lascivo e doce passarinho " de Luís Vaz de Camões
"Está o lascivo e   doce passarinho " de Luís Vaz de Camões"Está o lascivo e   doce passarinho " de Luís Vaz de Camões
"Está o lascivo e doce passarinho " de Luís Vaz de Camões
goncalopecurto
 
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
Escola Municipal Jesus Cristo
 
A nossa mini semana 2706 2906 Juliana.pptx
A nossa mini semana 2706 2906 Juliana.pptxA nossa mini semana 2706 2906 Juliana.pptx
A nossa mini semana 2706 2906 Juliana.pptx
juserpa07
 
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
Luana Neres
 
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptxLIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
WelidaFreitas1
 
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividadeAproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Ligia Galvão
 
Sinais de pontuação
Sinais de pontuaçãoSinais de pontuação
Sinais de pontuação
Mary Alvarenga
 
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptxMÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
Martin M Flynn
 
Caça-palavras ortografia M antes de P e B.
Caça-palavras    ortografia M antes de P e B.Caça-palavras    ortografia M antes de P e B.
Caça-palavras ortografia M antes de P e B.
Mary Alvarenga
 
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdfEJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
Escola Municipal Jesus Cristo
 
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdfAPOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
RenanSilva991968
 
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdfArundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
Ana Da Silva Ponce
 
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptxSlides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
LuizHenriquedeAlmeid6
 
Sócrates e os sofistas - apresentação de slides
Sócrates e os sofistas - apresentação de slidesSócrates e os sofistas - apresentação de slides
Sócrates e os sofistas - apresentação de slides
jbellas2
 
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdfiNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
andressacastro36
 
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...
CrislaineSouzaSantos
 

Último (20)

História Do Assaré - Prof. Francisco Leite
História Do Assaré - Prof. Francisco LeiteHistória Do Assaré - Prof. Francisco Leite
História Do Assaré - Prof. Francisco Leite
 
Memorial do convento slides- português 2023
Memorial do convento slides- português 2023Memorial do convento slides- português 2023
Memorial do convento slides- português 2023
 
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptxSlides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptx
 
o que está acontecendo no Rio grande do Sul
o que está acontecendo no Rio grande do Sulo que está acontecendo no Rio grande do Sul
o que está acontecendo no Rio grande do Sul
 
"Está o lascivo e doce passarinho " de Luís Vaz de Camões
"Está o lascivo e   doce passarinho " de Luís Vaz de Camões"Está o lascivo e   doce passarinho " de Luís Vaz de Camões
"Está o lascivo e doce passarinho " de Luís Vaz de Camões
 
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...proposta curricular  ou plano de cursode lingua portuguesa eja anos finais ( ...
proposta curricular ou plano de cursode lingua portuguesa eja anos finais ( ...
 
A nossa mini semana 2706 2906 Juliana.pptx
A nossa mini semana 2706 2906 Juliana.pptxA nossa mini semana 2706 2906 Juliana.pptx
A nossa mini semana 2706 2906 Juliana.pptx
 
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
Aula 2 - 6º HIS - Formas de registro da história e da produção do conheciment...
 
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptxLIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
LIÇÃO 9 - ORDENANÇAS PARA UMA VIDA DE SANTIFICAÇÃO.pptx
 
Aproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividadeAproveitando as ferramentas do Tableau para criatividade e produtividade
Aproveitando as ferramentas do Tableau para criatividade e produtividade
 
Sinais de pontuação
Sinais de pontuaçãoSinais de pontuação
Sinais de pontuação
 
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptxMÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
MÁRTIRES DE UGANDA Convertem-se ao Cristianismo - 1885-1887.pptx
 
Caça-palavras ortografia M antes de P e B.
Caça-palavras    ortografia M antes de P e B.Caça-palavras    ortografia M antes de P e B.
Caça-palavras ortografia M antes de P e B.
 
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdfEJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
EJA -livro para professor -dos anos iniciais letramento e alfabetização.pdf
 
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdfAPOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
APOSTILA DE TEXTOS CURTOS E INTERPRETAÇÃO.pdf
 
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdfArundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
Arundhati Roy - O Deus das Pequenas Coisas - ÍNDIA.pdf
 
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptxSlides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
 
Sócrates e os sofistas - apresentação de slides
Sócrates e os sofistas - apresentação de slidesSócrates e os sofistas - apresentação de slides
Sócrates e os sofistas - apresentação de slides
 
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdfiNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
iNTRODUÇÃO À Plantas terrestres e Plantas aquáticas. (1).pdf
 
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃO-...
AULA-8-PARTE-2-MODELO-DE-SITE-EDITÁVEL-ENTREGA2-CURRICULARIZAÇÃO-DA-EXTENSÃ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.