SlideShare a Scribd company logo
1 of 48
Disseny interactiu IV Interficie d’un entorn online Mariona Grané.  Laboratori de Mitjans Interactius. Universitat de Barcelona EMAF  CAV UB
Principis de disseny de tot l’entorn web Convencions en navegació Consistència Organització dels continguts Met àfores disseny interactiu
Convencions en navegaci ó   disseny interactiu ,[object Object],- La idea de navegaci ó es transmet a cada pantalla - Mantenir una estructura clara i simple - Facilitar la cerca i l’acc és a continguts concrets ,[object Object],- Disposar la informaci ó de manera que l’usuari sàpiga on és - Evidenciar les opcions que t é l’usuari en navegació - Minimitzar els problesmes per evitar errors
Convencions en navegaci ó   Podem utilitzar per navegar: Sistemes de men ús i submenús Sistemes icònics Sistemes de pestanyes Breadcrumbs disseny interactiu
http://www.carstennicolai.de/
http://www.paprika.com
www.petitbcn.com
http://www.billyharveymusic.com
http://www.normann-copenhagen.com
http://www.a107.com
http://www.flag.cc/
http://www.nobodyhere.com/
http://www.leoburnett.ca/
http://www.carldekeyzer.com/
http://smarthistory.org/
http://www.nexuslondon.com
http://www.relevare.com
http://www.idsigner.com/
http://energie-passagen.de/webinstallation.html
http://www.literaturlandkarte.de
http://www.escriba.es/
http://www.thibaud.be/
http://www.contrapicado.com.ar/
Consist è ncia ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],disseny interactiu
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
 
 
http://www.nobodinoz.com/
organizació de la informació ,[object Object],[object Object],[object Object],[object Object],[object Object],disseny interactiu
Nivells d’aprofundiment ,[object Object],[object Object],[object Object],[object Object],disseny interactiu
A l’storyline ha de quedar clar que accedir a un o altre tema, o b é accedir a diferents apartats d’un mateix tema no és igual.   L’usuari ha de percebre els canvis, ha d’estar orientat, ha de saber on  és, d’on ve, en quin nivell informatiu es troba, … ha de saber si pot tornar enrera i d es d’on. En alguns materials ha de saber que ha vist i que li queda per veure, (per exemple en entorns lineals). El dissenyador/a pot plantejar diferents rutes i diferents formes d’ arribar a cada pantalla. Per ò sempre ha de facilitar l’accés de l’usuari i assegurar una navegació lógica i simple. Nivells d’aprofundiment disseny interactiu
 
metáfores de l’entorn 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. disseny interactiu
http://welovecraftsmag.com.mialias.net/
http://www.juanjosaez.com/
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/
http://www.analfabestia.com

More Related Content

Viewers also liked

Sarajevo (za pocetnike)
Sarajevo (za pocetnike)Sarajevo (za pocetnike)
Sarajevo (za pocetnike)Alen Zukanovic
 
textures
texturestextures
texturesiMona06
 
Matrimonio 07 Transmision De La Vida
Matrimonio 07  Transmision De La VidaMatrimonio 07  Transmision De La Vida
Matrimonio 07 Transmision De La Vidaclasesteologia
 
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...martinyomar
 
Preguntas de investigacion mateo
Preguntas de investigacion mateoPreguntas de investigacion mateo
Preguntas de investigacion mateoIE Simona Duque
 
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...martinyomar
 
O movemento natural da poboación en España e en Galicia
O movemento natural da poboación en España e en GaliciaO movemento natural da poboación en España e en Galicia
O movemento natural da poboación en España e en Galiciaprofesor historia
 
Disseny Formatiu
Disseny FormatiuDisseny Formatiu
Disseny FormatiuiMona06
 
JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI guest4d883f
 
Em que o mapa conceitual pode me ajudar?
Em que o mapa conceitual pode me ajudar?Em que o mapa conceitual pode me ajudar?
Em que o mapa conceitual pode me ajudar?Ana Paula
 
Encuentro de Culturas
Encuentro de CulturasEncuentro de Culturas
Encuentro de CulturasLorenaM
 
Vote For Change
Vote For ChangeVote For Change
Vote For Changereynolds
 
Afilierea prin PPC - intalnire 2Parale
Afilierea prin PPC - intalnire 2Parale Afilierea prin PPC - intalnire 2Parale
Afilierea prin PPC - intalnire 2Parale 2Performant
 
Elearning20
Elearning20Elearning20
Elearning20iMona06
 
305. Zakon Vitestva
305. Zakon Vitestva305. Zakon Vitestva
305. Zakon VitestvaDino dino
 
Biografía de José de San Martin
Biografía de José de San MartinBiografía de José de San Martin
Biografía de José de San MartinSilvia H
 

Viewers also liked (20)

Sarajevo (za pocetnike)
Sarajevo (za pocetnike)Sarajevo (za pocetnike)
Sarajevo (za pocetnike)
 
textures
texturestextures
textures
 
Matrimonio 07 Transmision De La Vida
Matrimonio 07  Transmision De La VidaMatrimonio 07  Transmision De La Vida
Matrimonio 07 Transmision De La Vida
 
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
 
Tema 1. Exercicios de masa, volume e densidade con lectura 2
Tema 1. Exercicios de masa, volume e densidade con lectura 2Tema 1. Exercicios de masa, volume e densidade con lectura 2
Tema 1. Exercicios de masa, volume e densidade con lectura 2
 
Preguntas de investigacion mateo
Preguntas de investigacion mateoPreguntas de investigacion mateo
Preguntas de investigacion mateo
 
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
C:\Documents And Settings\Admin\Mis Documentos\Power Points\2010\Sala Delfine...
 
O movemento natural da poboación en España e en Galicia
O movemento natural da poboación en España e en GaliciaO movemento natural da poboación en España e en Galicia
O movemento natural da poboación en España e en Galicia
 
Disseny Formatiu
Disseny FormatiuDisseny Formatiu
Disseny Formatiu
 
Trabajofinalredes
TrabajofinalredesTrabajofinalredes
Trabajofinalredes
 
JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI
 
Em que o mapa conceitual pode me ajudar?
Em que o mapa conceitual pode me ajudar?Em que o mapa conceitual pode me ajudar?
Em que o mapa conceitual pode me ajudar?
 
14 vida-resumen
14 vida-resumen14 vida-resumen
14 vida-resumen
 
Informática 1. práctica de windows
Informática 1. práctica de windowsInformática 1. práctica de windows
Informática 1. práctica de windows
 
Encuentro de Culturas
Encuentro de CulturasEncuentro de Culturas
Encuentro de Culturas
 
Vote For Change
Vote For ChangeVote For Change
Vote For Change
 
Afilierea prin PPC - intalnire 2Parale
Afilierea prin PPC - intalnire 2Parale Afilierea prin PPC - intalnire 2Parale
Afilierea prin PPC - intalnire 2Parale
 
Elearning20
Elearning20Elearning20
Elearning20
 
305. Zakon Vitestva
305. Zakon Vitestva305. Zakon Vitestva
305. Zakon Vitestva
 
Biografía de José de San Martin
Biografía de José de San MartinBiografía de José de San Martin
Biografía de José de San Martin
 

Similar to disseny_entorn

Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Paquita Ribas
 
Navegacio
NavegacioNavegacio
NavegacioiMona06
 
Interficie-resum
Interficie-resumInterficie-resum
Interficie-resumiMona06
 
Disseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieDisseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieiMona06
 
Accessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióAccessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióm4Social
 
Usabilitat
UsabilitatUsabilitat
UsabilitatiMona06
 
Modul 1
Modul 1Modul 1
Modul 1Jorge
 
PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaRosa Suñé Barniol
 
Org i visual
Org i visualOrg i visual
Org i visualiMona06
 
Arquitectura de la Información - Pràctica - Lidia Bria
Arquitectura de la Información - Pràctica -  Lidia BriaArquitectura de la Información - Pràctica -  Lidia Bria
Arquitectura de la Información - Pràctica - Lidia BriaLidia Bria
 
Disseny i Desenvolupament de Materials de Formació
Disseny i Desenvolupament de Materials de FormacióDisseny i Desenvolupament de Materials de Formació
Disseny i Desenvolupament de Materials de FormacióMarc Vilamajor Uriz
 
Presentació_usabilitat.pdf
Presentació_usabilitat.pdfPresentació_usabilitat.pdf
Presentació_usabilitat.pdfIvan498300
 
Arquitectura de la Información - Pac03 - Lidia Bria
Arquitectura de la Información - Pac03 -  Lidia BriaArquitectura de la Información - Pac03 -  Lidia Bria
Arquitectura de la Información - Pac03 - Lidia BriaLidia Bria
 
JClic, eina de treball a l'aula
JClic, eina de treball a l'aulaJClic, eina de treball a l'aula
JClic, eina de treball a l'aulaFrancesc Busquets
 
Requisitos técnicos para la creación de materiales educativos
Requisitos técnicos para la creación de materiales educativosRequisitos técnicos para la creación de materiales educativos
Requisitos técnicos para la creación de materiales educativosCREAM
 
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...inina
 

Similar to disseny_entorn (20)

Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7Guio multimedia resum_temes_6_7
Guio multimedia resum_temes_6_7
 
Navegacio
NavegacioNavegacio
Navegacio
 
Disseny web
Disseny webDisseny web
Disseny web
 
Disseny d'interficies d'usari
Disseny d'interficies d'usariDisseny d'interficies d'usari
Disseny d'interficies d'usari
 
Interficie-resum
Interficie-resumInterficie-resum
Interficie-resum
 
Disseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieDisseny Comunicatiu: Interficie
Disseny Comunicatiu: Interficie
 
40idees
40idees40idees
40idees
 
Accessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edicióAccessibilitat digital: Les TIC per a tothom - 2ª edició
Accessibilitat digital: Les TIC per a tothom - 2ª edició
 
Usabilitat
UsabilitatUsabilitat
Usabilitat
 
Modul 1
Modul 1Modul 1
Modul 1
 
PRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies MultimèdiaPRÀCTICA - Disseny d'Interfícies Multimèdia
PRÀCTICA - Disseny d'Interfícies Multimèdia
 
Org i visual
Org i visualOrg i visual
Org i visual
 
Arquitectura de la Información - Pràctica - Lidia Bria
Arquitectura de la Información - Pràctica -  Lidia BriaArquitectura de la Información - Pràctica -  Lidia Bria
Arquitectura de la Información - Pràctica - Lidia Bria
 
Disseny i Desenvolupament de Materials de Formació
Disseny i Desenvolupament de Materials de FormacióDisseny i Desenvolupament de Materials de Formació
Disseny i Desenvolupament de Materials de Formació
 
Presentació_usabilitat.pdf
Presentació_usabilitat.pdfPresentació_usabilitat.pdf
Presentació_usabilitat.pdf
 
Arquitectura de la Información - Pac03 - Lidia Bria
Arquitectura de la Información - Pac03 -  Lidia BriaArquitectura de la Información - Pac03 -  Lidia Bria
Arquitectura de la Información - Pac03 - Lidia Bria
 
Presentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprintPresentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprint
 
JClic, eina de treball a l'aula
JClic, eina de treball a l'aulaJClic, eina de treball a l'aula
JClic, eina de treball a l'aula
 
Requisitos técnicos para la creación de materiales educativos
Requisitos técnicos para la creación de materiales educativosRequisitos técnicos para la creación de materiales educativos
Requisitos técnicos para la creación de materiales educativos
 
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...
Experiència d'usuari, arquitectura de la informació i disseny d'interfícies p...
 

Recently uploaded

ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfErnest Lluch
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfsilvialopezle
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musicalalba444773
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATLasilviatecno
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxCRIS650557
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,Lasilviatecno
 

Recently uploaded (8)

ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
 
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdfHISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdf
 
Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musical
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
 
itcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldaduraitcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldadura
 

disseny_entorn