• Like
  • Save
disseny_entorn
Upcoming SlideShare
Loading in...5
×

disseny_entorn

  • 262 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
262
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Disseny interactiu IV Interficie d’un entorn online Mariona Grané. Laboratori de Mitjans Interactius. Universitat de Barcelona EMAF CAV UB
  • 2. Principis de disseny de tot l’entorn web Convencions en navegació Consistència Organització dels continguts Met àfores disseny interactiu
  • 3. Convencions en navegaci ó disseny interactiu
    • Cal assegurar la navegabilitat per l’entorn i la no pèrdua de l’usuari
    - 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
    • Mantenir la l ógica en l’organització dels continguts
    - 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
  • 4. Convencions en navegaci ó Podem utilitzar per navegar: Sistemes de men ús i submenús Sistemes icònics Sistemes de pestanyes Breadcrumbs disseny interactiu
  • 5. http://www.carstennicolai.de/
  • 6. http://www.paprika.com
  • 7. www.petitbcn.com
  • 8. http://www.billyharveymusic.com
  • 9. http://www.normann-copenhagen.com
  • 10. http://www.a107.com
  • 11. http://www.flag.cc/
  • 12. http://www.nobodyhere.com/
  • 13. http://www.leoburnett.ca/
  • 14. http://www.carldekeyzer.com/
  • 15. http://smarthistory.org/
  • 16. http://www.nexuslondon.com
  • 17. http://www.relevare.com
  • 18. http://www.idsigner.com/
  • 19. http://energie-passagen.de/webinstallation.html
  • 20. http://www.literaturlandkarte.de
  • 21. http://www.escriba.es/
  • 22. http://www.thibaud.be/
  • 23. http://www.contrapicado.com.ar/
  • 24. Consist è ncia
    • És la coherència en un disseny que ha de permetre a l’usuari situar-se a l’entorn
    • Es fa mitjançant el treball coherent de disseny visual per a :
        • Imatges
        • Estils
        • Espais
        • Disposicions
        • Estructura
        • Relacions
    disseny interactiu
  • 25. http://www.001.ch
  • 26. http://inicia.es/de/escuelaartesegovia
  • 27. http://www.pagedesign.dk
  • 28. http://www. sheepgame.co.uk
  • 29. http://www.globz.net
  • 30. http://www.periscope.net
  • 31. http://educalia.educared.net/edujsp/secundaria/secundaria.jsp
  • 32.  
  • 33.  
  • 34. http://www.nobodinoz.com/
  • 35. organizació de la informació
    • L’ estructura de l’entorn implica:
      • una organizació dels continguts i els mitjans
      • una secuenciació de pantalles
      • i unes relacions entre elles basada en l’esquema conceptual del projecte
    • La priorització per arribar a l’usuari es fa des del contingut (en el nostre cas) i s’estableix a partir del contingut l’organitzaci ó de la informació de l’entorn.
    disseny interactiu
  • 36. Nivells d’aprofundiment
    • A l’estructura o storyline no podem oblidar:
      • les relacions de navegaci ó
      • els nivells d’aprofundiment de les informacions
      • els accesos a aquests nivells
    disseny interactiu
  • 37. 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
  • 38.  
  • 39. 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
  • 40. http://welovecraftsmag.com.mialias.net/
  • 41. http://www.juanjosaez.com/
  • 42. http://www.grimmtv.com
  • 43. http://www.grimmtv.com
  • 44. http://www.insomniainteractiva.com
  • 45. http : //www . brachetti . com/
  • 46. http://www.xardesvives.com/plastica/
  • 47. http://www.wddg.com/
  • 48. http://www.analfabestia.com