SlideShare a Scribd company logo
1 of 39
Disseny interactiu IV Interficie d’un entorn online Mariona Grané.  Laboratori de Mitjans Interactius. Universitat de Barcelona EMAF  CAV UB
disseño comunicativo Principios de diseño del entorno general ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Consistencia ,[object Object],[object Object],[object Object],[object Object],[object Object],diseño comunicativo
http://www.001.ch
http://inicia.es/de/escuelaartesegovia
http://www.pagedesign.dk
http://www. sheepgame.co.uk
http://www.globz.net
http://www.periscope.net
http://educalia.educared.net/edujsp/secundaria/secundaria.jsp
 
 
metáforas del entorno global - mantener una metáfora a lo largo de todo un entorno -  Una  metáfora basada en la navegación , tiende a ser utilizada únicamente en una pantalla principal y se accede a ella para moverse entre las pantallas secundarias, sin, necesariamente, mantener al met áfora todo el entorno. -  Y una  metáfora funcional , donde cada elemento de la misma tiene un entorno propio y cada elemento realiza la función que representa realmente, es más difícil de tratar y mantener. diseño comunicativo
http://www.grimmtv.com
http://www.grimmtv.com
http://www.insomniainteractiva.com
http : //www . brachetti . com/
http://www.xardesvives.com/plastica/
http://www.wddg.com/
navegación  diseño comunicativo ,[object Object],- en cada pantalla (igual que en la estructura) la idea de la navegación está presente. - mantener una estructura sencilla y clara - facilitar la búsqueda de información o el acceso concreto - mantener la lógica en la organización de los contenidos - disponer elementos que permitan al usuario saber donde está - permitir que el usuario  sepa que opciones tiene y como llegar a ellas - minimizar los problemas de navegación para el usuario
http://www.billyharveymusic.com
http://www.bbdo.com/
http://www.a107.com
http://www.nobodyhere.com/
http://www.leoburnett.ca/
http://www.carldekeyzer.com/
http://www.aaronjasinski.com/
http://www.nexuslondon.com
http://www.idsigner.com/
http://www.flyworld.com/
http://energie-passagen.de/webinstallation.html
http://www.literaturlandkarte.de
http://www.escriba.es/
http://www.thibaud.be/
http://www.contrapicado.com.ar/
 
organización de la información ,[object Object],[object Object],[object Object],[object Object],[object Object],diseño comunicativo
niveles de profundidad ,[object Object],[object Object],[object Object],[object Object],[object Object],diseño comunicativo
· El acceso a estos niveles debe presentarse desde el storyline  · Acceder de uno a otro tema, o acceder a diferentes apartados dentro de un mismo tema no es lo mismo.  El usuario debe percibir los cambios, debe estar orientado, saber donde está y de donde viene, en que nivel informativo se encuentra, saber si podrá volver atrás . · Mantener al usuario informado de su situación es adecuado en los entornos lineales,  El diseñador puede plantear diferentes rutas para acceder a la información, diferentes caminos o formas de llegar a cada pantalla, pero siempre, el objetivo esencial debe ser facilitar y simplificar la navegación, ayudar al usuario como destinatario evidente de cada pantalla y de cada contenido. niveles de profundidad diseño comunicativo

More Related Content

Viewers also liked

Ii Liturgia De La Palabra
Ii Liturgia De La PalabraIi Liturgia De La Palabra
Ii Liturgia De La PalabraLorenaM
 
07 Introduccion sagrada escritura
07 Introduccion sagrada escritura07 Introduccion sagrada escritura
07 Introduccion sagrada escrituraclasesteologia
 
Enciclopedia Virtual De 2grado[1].
Enciclopedia Virtual De 2grado[1].Enciclopedia Virtual De 2grado[1].
Enciclopedia Virtual De 2grado[1].biblioteca03de14
 
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...メンズカジュアル・セレクトショップ【ナクール】
 
Ev disseny
Ev dissenyEv disseny
Ev dissenyiMona06
 
Auto tc derecho huelga ertzaintza 23 marzo 2009
Auto tc derecho huelga ertzaintza 23 marzo 2009Auto tc derecho huelga ertzaintza 23 marzo 2009
Auto tc derecho huelga ertzaintza 23 marzo 2009kirurzun
 
Ilusiones Optias
Ilusiones OptiasIlusiones Optias
Ilusiones Optiasgueste51550
 
Palestra Festup - Publicidade da Dell Computadores (2006)
Palestra Festup - Publicidade da Dell Computadores (2006)Palestra Festup - Publicidade da Dell Computadores (2006)
Palestra Festup - Publicidade da Dell Computadores (2006)Alexandre Mutran
 
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitórios
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitóriosCenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitórios
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitóriosElieteCorretora
 
Dissenys
DissenysDissenys
DissenysiMona06
 
Museu da Criatividade e Invenção da Cidade de Lisboa
Museu da Criatividade e Invenção da Cidade de LisboaMuseu da Criatividade e Invenção da Cidade de Lisboa
Museu da Criatividade e Invenção da Cidade de LisboaEngº. João Marcelino
 
A escultura na Roma clásica
A escultura na Roma clásicaA escultura na Roma clásica
A escultura na Roma clásicaprofesor historia
 
Dia de la Música
Dia de la MúsicaDia de la Música
Dia de la Músicamartinyomar
 

Viewers also liked (20)

Ii Liturgia De La Palabra
Ii Liturgia De La PalabraIi Liturgia De La Palabra
Ii Liturgia De La Palabra
 
Cumple
CumpleCumple
Cumple
 
file
filefile
file
 
07 Introduccion sagrada escritura
07 Introduccion sagrada escritura07 Introduccion sagrada escritura
07 Introduccion sagrada escritura
 
Enciclopedia Virtual De 2grado[1].
Enciclopedia Virtual De 2grado[1].Enciclopedia Virtual De 2grado[1].
Enciclopedia Virtual De 2grado[1].
 
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...
メランジ裏毛のビンテージ感溢れるパーカー « Attack the mind 7 « 武蔵小杉のセレクトショップ【ナクール】 nakool-attack ...
 
Politica20carmensanchez
Politica20carmensanchezPolitica20carmensanchez
Politica20carmensanchez
 
Ev disseny
Ev dissenyEv disseny
Ev disseny
 
Auto tc derecho huelga ertzaintza 23 marzo 2009
Auto tc derecho huelga ertzaintza 23 marzo 2009Auto tc derecho huelga ertzaintza 23 marzo 2009
Auto tc derecho huelga ertzaintza 23 marzo 2009
 
Ilusiones Optias
Ilusiones OptiasIlusiones Optias
Ilusiones Optias
 
Portugues 3° aula
Portugues 3° aulaPortugues 3° aula
Portugues 3° aula
 
Palestra Festup - Publicidade da Dell Computadores (2006)
Palestra Festup - Publicidade da Dell Computadores (2006)Palestra Festup - Publicidade da Dell Computadores (2006)
Palestra Festup - Publicidade da Dell Computadores (2006)
 
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitórios
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitóriosCenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitórios
Cenário da Vila Madalena - Ao lado do Metrô - 1 e 2 dormitórios
 
Tema 9. as funcións dos seres vivos. nutrición
Tema 9. as funcións dos seres vivos. nutriciónTema 9. as funcións dos seres vivos. nutrición
Tema 9. as funcións dos seres vivos. nutrición
 
Vincent Van Gogh
Vincent Van Gogh Vincent Van Gogh
Vincent Van Gogh
 
Dissenys
DissenysDissenys
Dissenys
 
Museu da Criatividade e Invenção da Cidade de Lisboa
Museu da Criatividade e Invenção da Cidade de LisboaMuseu da Criatividade e Invenção da Cidade de Lisboa
Museu da Criatividade e Invenção da Cidade de Lisboa
 
A escultura na Roma clásica
A escultura na Roma clásicaA escultura na Roma clásica
A escultura na Roma clásica
 
Dia de la Música
Dia de la MúsicaDia de la Música
Dia de la Música
 
Monte tabor pdf
Monte tabor pdfMonte tabor pdf
Monte tabor pdf
 

Similar to Disseny interactiu IV: Interficie d’un entorn online

Arquitectura de la Información
Arquitectura de la InformaciónArquitectura de la Información
Arquitectura de la InformaciónXimena Tabares
 
Multimedia & Interactividad
Multimedia & InteractividadMultimedia & Interactividad
Multimedia & InteractividadVladimir
 
Trabajo colaborativo 2 erica castillo 37_Unidad 2
Trabajo colaborativo 2 erica castillo 37_Unidad 2Trabajo colaborativo 2 erica castillo 37_Unidad 2
Trabajo colaborativo 2 erica castillo 37_Unidad 2mariaerica
 
Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Álvaro López Herrera
 
MULTIMEDIA.pptx
MULTIMEDIA.pptxMULTIMEDIA.pptx
MULTIMEDIA.pptxDieguess
 
AI estructura de trabajo
AI estructura de trabajoAI estructura de trabajo
AI estructura de trabajoXzta Zandi
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz graficajhordy2000
 
Interfaces digitales
Interfaces digitalesInterfaces digitales
Interfaces digitalesrick arias
 
Usabilidad y Arquitectura de la Información
Usabilidad y Arquitectura de la InformaciónUsabilidad y Arquitectura de la Información
Usabilidad y Arquitectura de la InformaciónFernando Leandro
 
3.1 plataformas multimedia
3.1 plataformas multimedia3.1 plataformas multimedia
3.1 plataformas multimediajosse_09
 
Las etapas de un proyecto multimedia
Las etapas de un proyecto multimediaLas etapas de un proyecto multimedia
Las etapas de un proyecto multimediamlauritha
 
Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1mbulas
 

Similar to Disseny interactiu IV: Interficie d’un entorn online (20)

Arquitectura de la Información
Arquitectura de la InformaciónArquitectura de la Información
Arquitectura de la Información
 
Multimedia & Interactividad
Multimedia & InteractividadMultimedia & Interactividad
Multimedia & Interactividad
 
Informatica
InformaticaInformatica
Informatica
 
Trabajo colaborativo 2 erica castillo 37_Unidad 2
Trabajo colaborativo 2 erica castillo 37_Unidad 2Trabajo colaborativo 2 erica castillo 37_Unidad 2
Trabajo colaborativo 2 erica castillo 37_Unidad 2
 
Sergio alexis guerrero portafolio
Sergio alexis guerrero portafolioSergio alexis guerrero portafolio
Sergio alexis guerrero portafolio
 
Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019Curso Usabilidad Web Noviembre - Diciembre 2019
Curso Usabilidad Web Noviembre - Diciembre 2019
 
MULTIMEDIA.pptx
MULTIMEDIA.pptxMULTIMEDIA.pptx
MULTIMEDIA.pptx
 
AI estructura de trabajo
AI estructura de trabajoAI estructura de trabajo
AI estructura de trabajo
 
Aa1 oa dis_webacc (1)_web_acces
Aa1 oa dis_webacc (1)_web_accesAa1 oa dis_webacc (1)_web_acces
Aa1 oa dis_webacc (1)_web_acces
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaces digitales
Interfaces digitalesInterfaces digitales
Interfaces digitales
 
Usabilidad y Arquitectura de la Información
Usabilidad y Arquitectura de la InformaciónUsabilidad y Arquitectura de la Información
Usabilidad y Arquitectura de la Información
 
ing.software
ing.softwareing.software
ing.software
 
3.1 plataformas multimedia
3.1 plataformas multimedia3.1 plataformas multimedia
3.1 plataformas multimedia
 
Las etapas de un proyecto multimedia
Las etapas de un proyecto multimediaLas etapas de un proyecto multimedia
Las etapas de un proyecto multimedia
 
Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1Usabilidad o ergonomía del diseño 1
Usabilidad o ergonomía del diseño 1
 
macosoft
macosoftmacosoft
macosoft
 
macosoft
macosoftmacosoft
macosoft
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
U4 interfaz de usuario
U4 interfaz de usuarioU4 interfaz de usuario
U4 interfaz de usuario
 

Recently uploaded

trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxRogerPrieto3
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 

Recently uploaded (15)

trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 

Disseny interactiu IV: Interficie d’un entorn online