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

Matrimonio 07 Transmision De La Vida
Matrimonio 07  Transmision De La VidaMatrimonio 07  Transmision De La Vida
Matrimonio 07 Transmision De La Vida
clasesteologia
 
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 mateo
IE 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
 
JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI JOHANN HEINRICH PESTALOSSI
JOHANN HEINRICH PESTALOSSI
guest4d883f
 
Encuentro de Culturas
Encuentro de CulturasEncuentro de Culturas
Encuentro de Culturas
LorenaM
 
305. Zakon Vitestva
305. Zakon Vitestva305. Zakon Vitestva
305. Zakon Vitestva
Dino 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 Martin
Silvia 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

Navegacio
NavegacioNavegacio
Navegacio
iMona06
 
Interficie-resum
Interficie-resumInterficie-resum
Interficie-resum
iMona06
 
Disseny Comunicatiu: Interficie
Disseny Comunicatiu: InterficieDisseny Comunicatiu: Interficie
Disseny Comunicatiu: Interficie
iMona06
 
Usabilitat
UsabilitatUsabilitat
Usabilitat
iMona06
 
Org i visual
Org i visualOrg i visual
Org i visual
iMona06
 
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...
 

disseny_entorn