SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
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.

Contenu connexe

Tendances

Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoWorkshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoCarla De Bona
 
Apresentação sobre TOGAF
Apresentação sobre TOGAFApresentação sobre TOGAF
Apresentação sobre TOGAFRodrigo Ferreira
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sitesCelina Uemura
 
Aula 07 teorias do jornalismo jornalismo de dados
Aula 07   teorias do jornalismo jornalismo de dadosAula 07   teorias do jornalismo jornalismo de dados
Aula 07 teorias do jornalismo jornalismo de dadosElizeu Nascimento Silva
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalMarconi Pacheco
 
Teste de usabilidade think aloud
Teste de usabilidade think aloudTeste de usabilidade think aloud
Teste de usabilidade think aloudLucas Sabadini
 
História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00Valdir Soares
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoInstituto Faber-Ludens
 
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fábio Gonçalves
 
Engenharia De Software
Engenharia De SoftwareEngenharia De Software
Engenharia De SoftwareFelipe Goulart
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioErico Fileno
 
Aula 02 logística de atacado e varejo
Aula 02 logística de atacado e varejoAula 02 logística de atacado e varejo
Aula 02 logística de atacado e varejoCláudio Luís Faria
 
Projeto Gráfico Editorial - aula introdução
Projeto Gráfico Editorial - aula introduçãoProjeto Gráfico Editorial - aula introdução
Projeto Gráfico Editorial - aula introduçãoprofclaubordin
 
Relatório de desenvolvimento de website
Relatório de desenvolvimento de websiteRelatório de desenvolvimento de website
Relatório de desenvolvimento de websitenenhuma
 
MODELOS de Briefing - by André Félix
MODELOS de Briefing - by André FélixMODELOS de Briefing - by André Félix
MODELOS de Briefing - by André FélixNeca Boullosa
 

Tendances (20)

Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produtoWorkshop Prototipação em ux - Como validar uma ideia sem construir o produto
Workshop Prototipação em ux - Como validar uma ideia sem construir o produto
 
Design - O que é?
Design - O que é?Design - O que é?
Design - O que é?
 
Apresentação sobre TOGAF
Apresentação sobre TOGAFApresentação sobre TOGAF
Apresentação sobre TOGAF
 
Oquee design
Oquee designOquee design
Oquee design
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Aula 07 teorias do jornalismo jornalismo de dados
Aula 07   teorias do jornalismo jornalismo de dadosAula 07   teorias do jornalismo jornalismo de dados
Aula 07 teorias do jornalismo jornalismo de dados
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Teste de usabilidade think aloud
Teste de usabilidade think aloudTeste de usabilidade think aloud
Teste de usabilidade think aloud
 
Design
Design Design
Design
 
História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00História do Design - Apresentação - Hd00
História do Design - Apresentação - Hd00
 
Introdução à Arquitetura de Informação
Introdução à Arquitetura de InformaçãoIntrodução à Arquitetura de Informação
Introdução à Arquitetura de Informação
 
Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2Fundamentos Super Básicos do Design 2/2
Fundamentos Super Básicos do Design 2/2
 
Engenharia De Software
Engenharia De SoftwareEngenharia De Software
Engenharia De Software
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no Usuário
 
Projetos - Cronograma
Projetos - CronogramaProjetos - Cronograma
Projetos - Cronograma
 
Aula 02 logística de atacado e varejo
Aula 02 logística de atacado e varejoAula 02 logística de atacado e varejo
Aula 02 logística de atacado e varejo
 
Projeto Gráfico Editorial - aula introdução
Projeto Gráfico Editorial - aula introduçãoProjeto Gráfico Editorial - aula introdução
Projeto Gráfico Editorial - aula introdução
 
Relatório de desenvolvimento de website
Relatório de desenvolvimento de websiteRelatório de desenvolvimento de website
Relatório de desenvolvimento de website
 
MODELOS de Briefing - by André Félix
MODELOS de Briefing - by André FélixMODELOS de Briefing - by André Félix
MODELOS de Briefing - by André Félix
 

Similaire à 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
 
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
 
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
 

Similaire à 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
 
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
 
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!
 

Plus de 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
 

Plus de 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
 

Dernier

Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptxSlides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptxLuizHenriquedeAlmeid6
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.Mary Alvarenga
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfmaurocesarpaesalmeid
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médiorosenilrucks
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...HELENO FAVACHO
 
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdfPROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdfHELENO FAVACHO
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesFabianeMartins35
 
atividades_reforço_4°ano_231206_132728.pdf
atividades_reforço_4°ano_231206_132728.pdfatividades_reforço_4°ano_231206_132728.pdf
atividades_reforço_4°ano_231206_132728.pdfLuizaAbaAba
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Ilda Bicacro
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxLuizHenriquedeAlmeid6
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfHELENO FAVACHO
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaHELENO FAVACHO
 
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdfProjeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdfHELENO FAVACHO
 
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para criançasJogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para criançasSocorro Machado
 
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIAPROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIAHELENO FAVACHO
 
"É 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
 
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
 
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
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Ilda Bicacro
 

Dernier (20)

Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptxSlides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdfPROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
PROJETO DE EXTENÇÃO - GESTÃO DE RECURSOS HUMANOS.pdf
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividades
 
atividades_reforço_4°ano_231206_132728.pdf
atividades_reforço_4°ano_231206_132728.pdfatividades_reforço_4°ano_231206_132728.pdf
atividades_reforço_4°ano_231206_132728.pdf
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdfProjeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
 
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para criançasJogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
 
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIAPROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
PROJETO DE EXTENSÃO I - AGRONOMIA.pdf AGRONOMIAAGRONOMIA
 
"É 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...
 
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
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
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)
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!
 

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.