SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler 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.

Mais conteúdo relacionado

Semelhante a Wireframes - Esqueleto da Arquitetura da Informação

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
 
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
 
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
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
O que é ser web designer
O que é ser web designerO que é ser web designer
O que é ser web designerAnderson Garcia
 

Semelhante a Wireframes - Esqueleto da Arquitetura da Informação (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 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
 
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
 
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
 
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

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
 

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

William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfAdrianaCunha84
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasRosalina Simão Nunes
 
Slides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSlides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSilvana Silva
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdfJorge Andrade
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumAugusto Costa
 
Universidade Empreendedora como uma Plataforma para o Bem comum
Universidade Empreendedora como uma Plataforma para o Bem comumUniversidade Empreendedora como uma Plataforma para o Bem comum
Universidade Empreendedora como uma Plataforma para o Bem comumPatrícia de Sá Freire, PhD. Eng.
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxleandropereira983288
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividadeMary Alvarenga
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -Aline Santana
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaJúlio Sandes
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERDeiciane Chaves
 
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
activIDADES CUENTO  lobo esta  CUENTO CUARTO GRADOactivIDADES CUENTO  lobo esta  CUENTO CUARTO GRADO
activIDADES CUENTO lobo esta CUENTO CUARTO GRADOcarolinacespedes23
 
Programa de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasPrograma de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasCassio Meira Jr.
 
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBCRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBAline Santana
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasCassio Meira Jr.
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasCasa Ciências
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasillucasp132400
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfEditoraEnovus
 

Último (20)

William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdf
 
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicasCenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
Cenários de Aprendizagem - Estratégia para implementação de práticas pedagógicas
 
Slides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptxSlides 1 - O gênero textual entrevista.pptx
Slides 1 - O gênero textual entrevista.pptx
 
02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf02. Informática - Windows 10 apostila completa.pdf
02. Informática - Windows 10 apostila completa.pdf
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
 
Universidade Empreendedora como uma Plataforma para o Bem comum
Universidade Empreendedora como uma Plataforma para o Bem comumUniversidade Empreendedora como uma Plataforma para o Bem comum
Universidade Empreendedora como uma Plataforma para o Bem comum
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptx
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
Música Meu Abrigo - Texto e atividade
Música   Meu   Abrigo  -   Texto e atividadeMúsica   Meu   Abrigo  -   Texto e atividade
Música Meu Abrigo - Texto e atividade
 
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
DESAFIO LITERÁRIO - 2024 - EASB/ÁRVORE -
 
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptxSlides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
Slides Lição 5, CPAD, Os Inimigos do Cristão, 2Tr24, Pr Henrique.pptx
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
 
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VERELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
ELETIVA TEXTOS MULTIMODAIS LINGUAGEM VER
 
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
activIDADES CUENTO  lobo esta  CUENTO CUARTO GRADOactivIDADES CUENTO  lobo esta  CUENTO CUARTO GRADO
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
 
Programa de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasPrograma de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades Motoras
 
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASBCRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
CRÔNICAS DE UMA TURMA - TURMA DE 9ºANO - EASB
 
Habilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e EspecíficasHabilidades Motoras Básicas e Específicas
Habilidades Motoras Básicas e Específicas
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de Partículas
 
Governo Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 BrasilGoverno Provisório Era Vargas 1930-1934 Brasil
Governo Provisório Era Vargas 1930-1934 Brasil
 
Simulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdfSimulado 1 Etapa - 2024 Proximo Passo.pdf
Simulado 1 Etapa - 2024 Proximo Passo.pdf
 

Wireframes - Esqueleto da Arquitetura da Informação

  • 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.