SlideShare uma empresa Scribd logo
1 de 14
Design de Navegação
Módulo 4: Design Multimédia
Design, Comunicação
Design da interface
No processo de design deve atingir-se
os seguintes objectivos:
- Definir claramente,
a estrutura da aplicação,
o seu esquema de navegação;
Design e navegação
1º Passo 2º Passo ConclusãoDesign e navegação 1º Passo
2º Passo
Conclusão
- Definir cada ecrã da aplicação, os
conteúdos que serão apresentados
em cada unidade de informação;
- Definir a interface de utilizador, que
resulta da combinação dos conteúdos
com os elementos interactivos.
Design e navegação
1º Passo 2º Passo Conclusão
O design da estrutura de navegação tem dois grandes passos:
Criação de uma estrutura para a apresentação da informação ao longo
do tempo, ou seja, criar uma estrutura de navegação.
O design da navegação consiste, essencialmente, na concepção
dos percursos que podem ser usados pelo utilizador.
1º Passo
Design e navegação
1º Passo
2º Passo Conclusão
- Ilustra o que acontece quando o
utilizador interage com a aplicação.
- Fornece um índice gráfico do fluxo
lógico da interface interactiva;
Design e navegação
1º Passo
2º Passo Conclusão
Com o design obtemos um mapa de navegação que
cumpre os seguintes objectivos:
- Desenvolve as hiperligações entre as
unidades do conteúdo multimédia;
Segundo Vaughan
podemos considerar 4 estruturas fundamentais de navegação:
01 - Linear
O utilizador navega sequencialmente de
ecrã para ecrã.
02 - Hierárquica
O utilizador navega ao longo de ramos de
uma árvore, seguindo a orientação lógica
Do conteúdo.
Design e navegação
1º Passo
2º Passo Conclusão
03 - Não-Linear
O utilizador navega livremente por todo
O conteúdo.
04 - Composta
O utilizador navega livremente, mas
existem situações com restrições.
Design e navegação
1º Passo
2º Passo Conclusão
O objectivo principal do design de navegação é dar a impressão ao utilizador, que
pode escolher livremente o seu percurso pela aplicação em qualquer instante.
A interactividade de uma aplicação
aumenta na potencialidade associada à
possibilidade de efectuar ligações entre
conteúdos.
Design e navegação
1º Passo
2º Passo Conclusão
Criação de storyboards, esboços gráficos
associados a cada ecrã, que descrevem
com detalhe a combinação dos
conteúdos.
2º Passo
Design e navegação 1º Passo
2º Passo
Conclusão
- Especificar os conteúdos (texto,
áudio,vídeo, biptmaps, vectores,
animação)
bem como, a sua interligação;
Os storyboards devem:
- Utilizar descrições textuais
e esquemas detalhados;
Design e navegação 1º Passo
2º Passo
Conclusão
- Detalhar a localização precisa dos
elementos interactivos, que permitirão a
navegação;
- Especificar, com pormenor, os formatos e
atributos dos conteúdos (cores, fontes,
formato, etc).
Design e navegação 1º Passo
2º Passo
Conclusão
- Os storyboards, que resultam do
design do conteúdo, isto é, dos
ecrãs.
Conclusão
Os elementos que descrevem o design
de uma aplicação multimédia são:
- Os mapas de navegação, que resultam
do design da estrutura;
Design e navegação 1º Passo 2º Passo
Conclusão
- Os storyboards, que resultam do
design do conteúdo, isto é, dos
ecrãs.
Conclusão
Os elementos que descrevem o design
de uma aplicação multimédia são:
- Os mapas de navegação, que resultam
do design da estrutura;
Design de Navegacao

Mais conteúdo relacionado

Mais procurados

Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
Fábio Costa
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
Nécio de Lima Veras
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
arturramisio
 
Sistemas operacionais linux
Sistemas operacionais linuxSistemas operacionais linux
Sistemas operacionais linux
Leandro Lemes
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
Pmpc10
 
Planeamento projecto redes
Planeamento projecto redesPlaneamento projecto redes
Planeamento projecto redes
H.p. Lisboa
 

Mais procurados (20)

Aula 06 projetos multimídia
Aula 06   projetos multimídiaAula 06   projetos multimídia
Aula 06 projetos multimídia
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
Projeto e Desenvolvimento de Software
Projeto e Desenvolvimento de SoftwareProjeto e Desenvolvimento de Software
Projeto e Desenvolvimento de Software
 
Modelo de Componentes de IHC
Modelo de Componentes de IHCModelo de Componentes de IHC
Modelo de Componentes de IHC
 
02 - A evolução do Microsoft Windows - v1.0
02 - A evolução do Microsoft Windows - v1.002 - A evolução do Microsoft Windows - v1.0
02 - A evolução do Microsoft Windows - v1.0
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
 
Introdução aos Sistemas Operativos
Introdução aos Sistemas OperativosIntrodução aos Sistemas Operativos
Introdução aos Sistemas Operativos
 
Sistemas operacionais linux
Sistemas operacionais linuxSistemas operacionais linux
Sistemas operacionais linux
 
Apresentação Windows 8
Apresentação Windows 8Apresentação Windows 8
Apresentação Windows 8
 
Atividade 1 - ufcd 9958
Atividade 1 - ufcd 9958Atividade 1 - ufcd 9958
Atividade 1 - ufcd 9958
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
 
Escala de planos
Escala de planosEscala de planos
Escala de planos
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Sistemas Multimídia - Aula 05 - As Plataformas (Ambientes e Configurações)
Sistemas Multimídia - Aula 05 - As Plataformas (Ambientes e Configurações)Sistemas Multimídia - Aula 05 - As Plataformas (Ambientes e Configurações)
Sistemas Multimídia - Aula 05 - As Plataformas (Ambientes e Configurações)
 
Linux - Sistema Operacional
Linux - Sistema Operacional Linux - Sistema Operacional
Linux - Sistema Operacional
 
Serviços da internet
Serviços da internetServiços da internet
Serviços da internet
 
Planeamento projecto redes
Planeamento projecto redesPlaneamento projecto redes
Planeamento projecto redes
 
Modelos de processos de software
Modelos de processos de softwareModelos de processos de software
Modelos de processos de software
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e Exercícios
 

Semelhante a Design de Navegacao

Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
SENAC SC
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
renatamruiz
 
T@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador FlashT@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador Flash
Targettrust
 

Semelhante a Design de Navegacao (20)

Design
DesignDesign
Design
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Projecto MultiméDia
Projecto MultiméDiaProjecto MultiméDia
Projecto MultiméDia
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
 
Ambientes virtuais e_mídias_de_comunicação_02_a_pvou114_ravel_gimenes
Ambientes virtuais e_mídias_de_comunicação_02_a_pvou114_ravel_gimenes Ambientes virtuais e_mídias_de_comunicação_02_a_pvou114_ravel_gimenes
Ambientes virtuais e_mídias_de_comunicação_02_a_pvou114_ravel_gimenes
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
AVA para EaD em TV Digital
AVA para EaD em TV DigitalAVA para EaD em TV Digital
AVA para EaD em TV Digital
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
 
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
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Trabaho design de interação
Trabaho design de interaçãoTrabaho design de interação
Trabaho design de interação
 
Portfólio
PortfólioPortfólio
Portfólio
 
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
 
Interface grafica do usuario
Interface grafica do usuarioInterface grafica do usuario
Interface grafica do usuario
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisa
 
T@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador FlashT@rget Trust - Formação: Animador Flash
T@rget Trust - Formação: Animador Flash
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 

Mais de Escola Secundária Avelar Brotero

Mais de Escola Secundária Avelar Brotero (20)

Venerália - Organização e decoração de eventos
Venerália - Organização e decoração de eventosVenerália - Organização e decoração de eventos
Venerália - Organização e decoração de eventos
 
MSH - Movimento Ser Humano
MSH -  Movimento Ser HumanoMSH -  Movimento Ser Humano
MSH - Movimento Ser Humano
 
Marilob, Artists management & prodution
Marilob, Artists management & produtionMarilob, Artists management & prodution
Marilob, Artists management & prodution
 
NYXLY, Achitecture
NYXLY, AchitectureNYXLY, Achitecture
NYXLY, Achitecture
 
Madeira House, Design de Interiores
Madeira House, Design de InterioresMadeira House, Design de Interiores
Madeira House, Design de Interiores
 
Léon, Dress Sustainably
Léon, Dress SustainablyLéon, Dress Sustainably
Léon, Dress Sustainably
 
Idyllic Nature, Agro & Ecoturismo
Idyllic Nature, Agro & EcoturismoIdyllic Nature, Agro & Ecoturismo
Idyllic Nature, Agro & Ecoturismo
 
Horus, Graphic Design
Horus, Graphic DesignHorus, Graphic Design
Horus, Graphic Design
 
Green Solutions, Arquitecture
Green Solutions, ArquitectureGreen Solutions, Arquitecture
Green Solutions, Arquitecture
 
LYNX - Design de Interiores
LYNX - Design de InterioresLYNX - Design de Interiores
LYNX - Design de Interiores
 
Sphynx Designs
Sphynx DesignsSphynx Designs
Sphynx Designs
 
Bg - Arquitecture & Design
Bg - Arquitecture &  DesignBg - Arquitecture &  Design
Bg - Arquitecture & Design
 
Venerália - Organização e decoração de eventos
Venerália - Organização e decoração de eventosVenerália - Organização e decoração de eventos
Venerália - Organização e decoração de eventos
 
MSH - Movimento Ser Humano
MSH -  Movimento Ser HumanoMSH -  Movimento Ser Humano
MSH - Movimento Ser Humano
 
Marilob, Artists management & prodution
Marilob, Artists management & produtionMarilob, Artists management & prodution
Marilob, Artists management & prodution
 
Madeira House, Design de Interiores
Madeira House, Design de InterioresMadeira House, Design de Interiores
Madeira House, Design de Interiores
 
Léon
LéonLéon
Léon
 
Idyllic Nature, Agro & Ecoturismo
Idyllic Nature, Agro & EcoturismoIdyllic Nature, Agro & Ecoturismo
Idyllic Nature, Agro & Ecoturismo
 
Horus - Graphic Designs
Horus - Graphic DesignsHorus - Graphic Designs
Horus - Graphic Designs
 
Green Solutions
Green SolutionsGreen Solutions
Green Solutions
 

Último

1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
aulasgege
 
História concisa da literatura brasileira- Alfredo Bosi..pdf
História concisa da literatura brasileira- Alfredo Bosi..pdfHistória concisa da literatura brasileira- Alfredo Bosi..pdf
História concisa da literatura brasileira- Alfredo Bosi..pdf
GisellySobral
 
Regulamento do Festival de Teatro Negro - FESTIAFRO 2024 - 10ª edição - CEI...
Regulamento do Festival de Teatro Negro -  FESTIAFRO 2024 - 10ª edição -  CEI...Regulamento do Festival de Teatro Negro -  FESTIAFRO 2024 - 10ª edição -  CEI...
Regulamento do Festival de Teatro Negro - FESTIAFRO 2024 - 10ª edição - CEI...
Eró Cunha
 
Aspectos históricos da educação dos surdos.pptx
Aspectos históricos da educação dos surdos.pptxAspectos históricos da educação dos surdos.pptx
Aspectos históricos da educação dos surdos.pptx
profbrunogeo95
 

Último (20)

1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
1. Aula de sociologia - 1º Ano - Émile Durkheim.pdf
 
As teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.pptAs teorias de Lamarck e Darwin para alunos de 8ano.ppt
As teorias de Lamarck e Darwin para alunos de 8ano.ppt
 
Atividades adaptada de matemática (Adição pop )
Atividades adaptada de matemática (Adição pop )Atividades adaptada de matemática (Adição pop )
Atividades adaptada de matemática (Adição pop )
 
História concisa da literatura brasileira- Alfredo Bosi..pdf
História concisa da literatura brasileira- Alfredo Bosi..pdfHistória concisa da literatura brasileira- Alfredo Bosi..pdf
História concisa da literatura brasileira- Alfredo Bosi..pdf
 
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na ÁfricaPeriodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
Periodo da escravidAo O Brasil tem seu corpo na América e sua alma na África
 
Poema - Maio Laranja
Poema - Maio Laranja Poema - Maio Laranja
Poema - Maio Laranja
 
Regulamento do Festival de Teatro Negro - FESTIAFRO 2024 - 10ª edição - CEI...
Regulamento do Festival de Teatro Negro -  FESTIAFRO 2024 - 10ª edição -  CEI...Regulamento do Festival de Teatro Negro -  FESTIAFRO 2024 - 10ª edição -  CEI...
Regulamento do Festival de Teatro Negro - FESTIAFRO 2024 - 10ª edição - CEI...
 
Dados espaciais em R - 2023 - UFABC - Geoprocessamento
Dados espaciais em R - 2023 - UFABC - GeoprocessamentoDados espaciais em R - 2023 - UFABC - Geoprocessamento
Dados espaciais em R - 2023 - UFABC - Geoprocessamento
 
O que é literatura - Marisa Lajolo com.pdf
O que é literatura - Marisa Lajolo com.pdfO que é literatura - Marisa Lajolo com.pdf
O que é literatura - Marisa Lajolo com.pdf
 
UFCD_10659_Ficheiros de recursos educativos_índice .pdf
UFCD_10659_Ficheiros de recursos educativos_índice .pdfUFCD_10659_Ficheiros de recursos educativos_índice .pdf
UFCD_10659_Ficheiros de recursos educativos_índice .pdf
 
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptxEB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
EB1 Cumeada Co(n)Vida à Leitura - Livros à Solta_Serta.pptx
 
Slides Lição 7, CPAD, O Perigo Da Murmuração, 2Tr24.pptx
Slides Lição 7, CPAD, O Perigo Da Murmuração, 2Tr24.pptxSlides Lição 7, CPAD, O Perigo Da Murmuração, 2Tr24.pptx
Slides Lição 7, CPAD, O Perigo Da Murmuração, 2Tr24.pptx
 
Projeto envolvendo as borboletas - poema.doc
Projeto envolvendo as borboletas - poema.docProjeto envolvendo as borboletas - poema.doc
Projeto envolvendo as borboletas - poema.doc
 
Aspectos históricos da educação dos surdos.pptx
Aspectos históricos da educação dos surdos.pptxAspectos históricos da educação dos surdos.pptx
Aspectos históricos da educação dos surdos.pptx
 
Formação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSSFormação T.2 do Modulo I da Formação HTML & CSS
Formação T.2 do Modulo I da Formação HTML & CSS
 
Proposta de redação Soneto de texto do gênero poema para a,usos do 9 ano do e...
Proposta de redação Soneto de texto do gênero poema para a,usos do 9 ano do e...Proposta de redação Soneto de texto do gênero poema para a,usos do 9 ano do e...
Proposta de redação Soneto de texto do gênero poema para a,usos do 9 ano do e...
 
O que é, de facto, a Educação de Infância
O que é, de facto, a Educação de InfânciaO que é, de facto, a Educação de Infância
O que é, de facto, a Educação de Infância
 
FUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - materialFUNDAMENTOS DA PSICOPEDAGOGIA - material
FUNDAMENTOS DA PSICOPEDAGOGIA - material
 
Sequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptxSequência didática Carona 1º Encontro.pptx
Sequência didática Carona 1º Encontro.pptx
 
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º anoNós Propomos! Sertã 2024 - Geografia C - 12º ano
Nós Propomos! Sertã 2024 - Geografia C - 12º ano
 

Design de Navegacao

  • 1. Design de Navegação Módulo 4: Design Multimédia Design, Comunicação
  • 3. No processo de design deve atingir-se os seguintes objectivos: - Definir claramente, a estrutura da aplicação, o seu esquema de navegação; Design e navegação 1º Passo 2º Passo ConclusãoDesign e navegação 1º Passo 2º Passo Conclusão
  • 4. - Definir cada ecrã da aplicação, os conteúdos que serão apresentados em cada unidade de informação; - Definir a interface de utilizador, que resulta da combinação dos conteúdos com os elementos interactivos. Design e navegação 1º Passo 2º Passo Conclusão
  • 5. O design da estrutura de navegação tem dois grandes passos: Criação de uma estrutura para a apresentação da informação ao longo do tempo, ou seja, criar uma estrutura de navegação. O design da navegação consiste, essencialmente, na concepção dos percursos que podem ser usados pelo utilizador. 1º Passo Design e navegação 1º Passo 2º Passo Conclusão
  • 6. - Ilustra o que acontece quando o utilizador interage com a aplicação. - Fornece um índice gráfico do fluxo lógico da interface interactiva; Design e navegação 1º Passo 2º Passo Conclusão Com o design obtemos um mapa de navegação que cumpre os seguintes objectivos: - Desenvolve as hiperligações entre as unidades do conteúdo multimédia;
  • 7. Segundo Vaughan podemos considerar 4 estruturas fundamentais de navegação: 01 - Linear O utilizador navega sequencialmente de ecrã para ecrã. 02 - Hierárquica O utilizador navega ao longo de ramos de uma árvore, seguindo a orientação lógica Do conteúdo. Design e navegação 1º Passo 2º Passo Conclusão
  • 8. 03 - Não-Linear O utilizador navega livremente por todo O conteúdo. 04 - Composta O utilizador navega livremente, mas existem situações com restrições. Design e navegação 1º Passo 2º Passo Conclusão
  • 9. O objectivo principal do design de navegação é dar a impressão ao utilizador, que pode escolher livremente o seu percurso pela aplicação em qualquer instante. A interactividade de uma aplicação aumenta na potencialidade associada à possibilidade de efectuar ligações entre conteúdos. Design e navegação 1º Passo 2º Passo Conclusão
  • 10. Criação de storyboards, esboços gráficos associados a cada ecrã, que descrevem com detalhe a combinação dos conteúdos. 2º Passo Design e navegação 1º Passo 2º Passo Conclusão
  • 11. - Especificar os conteúdos (texto, áudio,vídeo, biptmaps, vectores, animação) bem como, a sua interligação; Os storyboards devem: - Utilizar descrições textuais e esquemas detalhados; Design e navegação 1º Passo 2º Passo Conclusão
  • 12. - Detalhar a localização precisa dos elementos interactivos, que permitirão a navegação; - Especificar, com pormenor, os formatos e atributos dos conteúdos (cores, fontes, formato, etc). Design e navegação 1º Passo 2º Passo Conclusão
  • 13. - Os storyboards, que resultam do design do conteúdo, isto é, dos ecrãs. Conclusão Os elementos que descrevem o design de uma aplicação multimédia são: - Os mapas de navegação, que resultam do design da estrutura; Design e navegação 1º Passo 2º Passo Conclusão - Os storyboards, que resultam do design do conteúdo, isto é, dos ecrãs. Conclusão Os elementos que descrevem o design de uma aplicação multimédia são: - Os mapas de navegação, que resultam do design da estrutura;