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.
Arquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
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 Arquitetura da Informação - Wireframes (20)

PPT
Wireframe workshop externo_001_b
maurohs
 
PPTX
Interface homem computador - Aula06 - logo design e arquitetura da informação
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
PPT
Arquitetura E Info2
Carlos d'Andréa
 
PPT
Arquitetura da Informação
mlupedrosa
 
PDF
Arquitetura de informação
renatamruiz
 
PPTX
Wire frame e mapa do site
Elisângela X. P. dos Santos
 
PDF
Web Design > Visão geral do Web Design
Felipe Fernandes
 
PPTX
Wireframes
Jaqueline Franco
 
PDF
Mapeamento e Wireframes - conceitos básicos, bem básicos
Claudia Bordin Rodrigues
 
PDF
Mapeamento e wireframes
Claudia Bordin Rodrigues
 
PDF
Arquitetura da Informacao na WEB
Fábio Flatschart
 
PPTX
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Ros Galabo, PhD
 
PDF
Arquitetura de Informação sem wireframe
Karla Cruz
 
PPT
Aulas 03 e 04 - Arquitetura de Informação
vincevader
 
PDF
Wireframes para sites e projetos de multimídia
Tersis Zonato
 
PDF
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
PDF
Mapeamento de conteúdo - aplicativo
profclaubordin
 
PDF
Responsive Web Design - Wireframe
Renato Bongiorno Bonfanti
 
PPS
Arquitetura da Informacao e Webdesign
Danilo Rosisca Pereira
 
PDF
Arquitetura de Informação sem wireframe
EBAI
 
Wireframe workshop externo_001_b
maurohs
 
Interface homem computador - Aula06 - logo design e arquitetura da informação
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
Arquitetura E Info2
Carlos d'Andréa
 
Arquitetura da Informação
mlupedrosa
 
Arquitetura de informação
renatamruiz
 
Wire frame e mapa do site
Elisângela X. P. dos Santos
 
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Wireframes
Jaqueline Franco
 
Mapeamento e Wireframes - conceitos básicos, bem básicos
Claudia Bordin Rodrigues
 
Mapeamento e wireframes
Claudia Bordin Rodrigues
 
Arquitetura da Informacao na WEB
Fábio Flatschart
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Ros Galabo, PhD
 
Arquitetura de Informação sem wireframe
Karla Cruz
 
Aulas 03 e 04 - Arquitetura de Informação
vincevader
 
Wireframes para sites e projetos de multimídia
Tersis Zonato
 
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Mapeamento de conteúdo - aplicativo
profclaubordin
 
Responsive Web Design - Wireframe
Renato Bongiorno Bonfanti
 
Arquitetura da Informacao e Webdesign
Danilo Rosisca Pereira
 
Arquitetura de Informação sem wireframe
EBAI
 

Mais de aiadufmg (20)

PDF
Linked in parte 2
aiadufmg
 
PDF
Last fm parte 2
aiadufmg
 
PDF
Delicious parte 2
aiadufmg
 
PDF
Skoob parte 2
aiadufmg
 
PDF
Livemocha parte 2
aiadufmg
 
PPTX
LinkedIn - parte 2
aiadufmg
 
PPT
Last Fm - parte 2
aiadufmg
 
PPTX
Delicious - parte 2
aiadufmg
 
PPT
Livemocha - parte 2
aiadufmg
 
PPT
Skoob - parte 2
aiadufmg
 
PDF
Avaliacao de Interfaces
aiadufmg
 
PDF
Acessibilidade em bibliotecas digitais
aiadufmg
 
PDF
Sites acessíveis
aiadufmg
 
PDF
Acessibilidade
aiadufmg
 
PDF
Design Universal
aiadufmg
 
PDF
Deficiências e Tecnologias Assistivas
aiadufmg
 
PDF
Flickr
aiadufmg
 
PDF
Ai ad aula 6_atividadecardsorting
aiadufmg
 
PPT
Skoob
aiadufmg
 
PPTX
Livemocha
aiadufmg
 
Linked in parte 2
aiadufmg
 
Last fm parte 2
aiadufmg
 
Delicious parte 2
aiadufmg
 
Skoob parte 2
aiadufmg
 
Livemocha parte 2
aiadufmg
 
LinkedIn - parte 2
aiadufmg
 
Last Fm - parte 2
aiadufmg
 
Delicious - parte 2
aiadufmg
 
Livemocha - parte 2
aiadufmg
 
Skoob - parte 2
aiadufmg
 
Avaliacao de Interfaces
aiadufmg
 
Acessibilidade em bibliotecas digitais
aiadufmg
 
Sites acessíveis
aiadufmg
 
Acessibilidade
aiadufmg
 
Design Universal
aiadufmg
 
Deficiências e Tecnologias Assistivas
aiadufmg
 
Flickr
aiadufmg
 
Ai ad aula 6_atividadecardsorting
aiadufmg
 
Skoob
aiadufmg
 
Livemocha
aiadufmg
 
Anúncio

Último (20)

PDF
Segurança no Trânsito - Educação para transformar
Jhonata49
 
PDF
'Emoções Caixinha dos Sentimentos' .pdf para leitura
IolandaFerreiraLima
 
PDF
Visita ao museu.pdf, museu marítimo de Ílhavo
biblioteca123
 
PPTX
Slides Lição 5, CPAD, Uma Igreja Cheia de Amor, 3Tr25.pptx
LuizHenriquedeAlmeid6
 
DOCX
LP - 5º ANO - 2º BIMESTRE - PLANEJAMENTO BIMESTRAL 2025.docx
VivianeAlmeida284960
 
PDF
🎭 Música-Abrunhosa.pdfespetácolos música
biblioteca123
 
PPTX
MUNCK TREINAMENTO DE MAQUINAS PESADAS...
consultoriagestaosst
 
PDF
Aula redação e leitura ................
VIVIANEMENDESSILVA
 
PDF
Matéria e Ambiente - BIOLOGIA - Terceiro Ano do Ens. Médio
islaineeli
 
PDF
🎉Uma Noite Inesquecível no São João do Porto.pdf
biblioteca123
 
PDF
Indicações na cidade.pdf com mapas e tudo
biblioteca123
 
PPTX
ESTUDO 25 - O PLANO DIVINO DOS SECULOS.pptx
Pr Davi Passos - Estudos Bíblicos
 
PDF
🎨 DiálogoGraça Morais.pdfartista plástica
biblioteca123
 
PDF
DiálogoRedes sociais.pdfinstagram, tik tok
biblioteca123
 
DOCX
Mapa Histórico da Oceania Impérios e Reinos .docx
Doug Caesar
 
PPTX
slide de historia sobre o descobrimento do brasil
speedgames391
 
PDF
A festa de anos da avó.pdfe também dos netos
biblioteca123
 
PDF
🧑Entrevista de trabalho.pdf para um lugar
biblioteca123
 
PDF
Regras do jogo: Rumo à Tectónica de Placas 1.0
Casa Ciências
 
DOCX
Mapa da Oceania - Países e Dependências.docx
Doug Caesar
 
Segurança no Trânsito - Educação para transformar
Jhonata49
 
'Emoções Caixinha dos Sentimentos' .pdf para leitura
IolandaFerreiraLima
 
Visita ao museu.pdf, museu marítimo de Ílhavo
biblioteca123
 
Slides Lição 5, CPAD, Uma Igreja Cheia de Amor, 3Tr25.pptx
LuizHenriquedeAlmeid6
 
LP - 5º ANO - 2º BIMESTRE - PLANEJAMENTO BIMESTRAL 2025.docx
VivianeAlmeida284960
 
🎭 Música-Abrunhosa.pdfespetácolos música
biblioteca123
 
MUNCK TREINAMENTO DE MAQUINAS PESADAS...
consultoriagestaosst
 
Aula redação e leitura ................
VIVIANEMENDESSILVA
 
Matéria e Ambiente - BIOLOGIA - Terceiro Ano do Ens. Médio
islaineeli
 
🎉Uma Noite Inesquecível no São João do Porto.pdf
biblioteca123
 
Indicações na cidade.pdf com mapas e tudo
biblioteca123
 
ESTUDO 25 - O PLANO DIVINO DOS SECULOS.pptx
Pr Davi Passos - Estudos Bíblicos
 
🎨 DiálogoGraça Morais.pdfartista plástica
biblioteca123
 
DiálogoRedes sociais.pdfinstagram, tik tok
biblioteca123
 
Mapa Histórico da Oceania Impérios e Reinos .docx
Doug Caesar
 
slide de historia sobre o descobrimento do brasil
speedgames391
 
A festa de anos da avó.pdfe também dos netos
biblioteca123
 
🧑Entrevista de trabalho.pdf para um lugar
biblioteca123
 
Regras do jogo: Rumo à Tectónica de Placas 1.0
Casa Ciências
 
Mapa da Oceania - Países e Dependências.docx
Doug Caesar
 
Anúncio

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