disseny_entorn

356 views

Published on

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
356
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

disseny_entorn

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

×