Distribució visual

787 views
907 views

Published on

Published in: Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
787
On SlideShare
0
From Embeds
0
Number of Embeds
613
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Distribució visual

  1. 1. Distribució visualMariona Grané. Laboratori de Mitjans Interactius. @CAVUB
  2. 2. principis de disseny interactiu Grané, 2009
  3. 3. principis de disseny interactiu No existeix cap procediment fàcil per a desenvolupar l’alfabetització visual, però aquesta és tan important per a l’ensenyament dels mitjans moderns com ho varen ser la lectura i l’escriptura per a la impremta. De fet pot ser el component crucial de tots els canals de comunicació, ara i en el futur. (Dondis, 1976)
  4. 4. distribució visual La part més visual del disseny dentorns interactius a la xarxa ha de tenir en compte els principis de disseny gràfic per optimitzar laccés a la informació. No podem parlar si no sabem les paraules, es fa necessari conèixer el llenguatge que ens permet acostar-nos a una obra visual. Els elements del llenguatge visual donen lloc a la comunicació i són: · el punt o senyal · la línia o el traç · la forma o contorn · la superfície · el color · la textura · el volum
  5. 5. principis de disseny interactiu Distribució visual Composició Diagrama de Gutenberg Alineació Bona continuació Similitud Connexió d’allò uniforme Tancament Proximitat Panorama-refugi
  6. 6. distribució visual Composició: Disposició i organització dels elements per crear un tot visualment i estructuralment satisfactori. El procés de composició és «el pas més important en la resolució del problema visual. (Dondis, 1976) Per a Dondis la Composició és: Equilibri Tensió Anivellament i agudesa
  7. 7. distribució visual
  8. 8. distribució visual Per a Dondis la Composició és: Equilibri Tensió Anivellament i agudesa
  9. 9. distribució visual
  10. 10. distribució visual
  11. 11. distribució visual Per a Dondis la Composició és: Equilibri Tensió Anivellament i agudesa Harmonia Estabilitat Lambigüitat, és un estat visual que no funciona en la percepció.
  12. 12. distribució visual
  13. 13. distribució visual
  14. 14. distribució visual En una pantalla cada element té un pes per la seva mida, pes, color, textura, contrast... en relació amb el fons i els altres objectes. La composició és la balança que ens permet equilibrar, destensionar, anivellar, ... la imatge. edu365: composició
  15. 15. distribució visual Els elements poden ser textos, imatges, contenidors, audiovisuals, botons, menús, etc., i s’han de disposar en pantalla d’una manera estructurada, rígida, coherent, atenent els criteris simètrics de pes dels objectes i d’enquadrament en la interfície gràfica.
  16. 16. distribució visual Diagrama de Gutenberg: Patró general seguit per la vista quan observem una informació en pantalla o paper. Dondis, l’ull afavoreix l’angle inferir esquerre Per potenciar la recerca de l’equilibri en la imatge
  17. 17. distribució visual El diagrama de Gutenberg, (Edmun Arnold, 1950)
  18. 18. distribució visual
  19. 19. distribució visual Regla dels terços (de l’art pictòric i la fotografia), té encara més relació amb la composició visual d’una pantalla.
  20. 20. distribució visual Eyetracking
  21. 21. distribució visual Alineació: Col·locació delements alineats a les seves vores, centradament, a dues bandes, ... etc. El fet dalinear objectes, en disseny gràfic transmet unitat o cohesió visual. El disseny en graelles (grid) permet adaptar i modular un disseny i fer-lo créixer i evolucionar.
  22. 22. distribució visual Sistema de graelles, layout Titular de la Curabitur auctor tellus nec leo. In hac habitasse sección platea dictumst. Duis sagittis lacus eu metus. Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. consectetuer adipiscing elit. consectetuer adipiscing elit. Sed ultricies. Curabitur auctor Sed ultricies. Curabitur auctor Sed ultricies. Curabitur auctor tellus nec leo. In hac habitasse tellus nec leo. In hac habitasse tellus nec leo. In hac habitasse platea dictumst. Duis sagittis platea dictumst. Duis sagittis platea dictumst. Duis sagittis lacus eu metus. Fusce eget elit lacus eu metus. Fusce eget elit lacus eu metus. Fusce eget elit nec libero blandit consequat. nec libero blandit consequat. nec libero blandit consequat. Suspendisse ut nulla non nunc Suspendisse ut nulla non nunc Suspendisse ut nulla non nunc vestibulum luctus. In vitae vestibulum luctus. In vitae vestibulum luctus. In vitae ipsum. ipsum. ipsum. Aliquam erat volutpat. Integer sapien lorem, gravida at, convallis nec, tristique in, quam. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ut dolor eget ante vestibulum molestie. Vivamus ut est ac ipsum feugiat accumsan. Aliquam consectetuer enim eu urna. In hac habitasse platea dictumst. Cras lectus tellus, vehicula et, volutpat vel, hendrerit vestibulum, dui. Curabitur Aliquam erat volutpat. Integer semper semper turpis. In sapien lorem, gravida at, In dictum vestibulum arcu. dictum vestibulum arcu. Donec convallis nec, tristique in, Donec eget sapien a tellus eget sapien a tellus tempor quam. tempor viverra. Proin ultricies viverra. Proin ultricies iaculis iaculis quam. quam.
  23. 23. distribució visual
  24. 24. distribució visual
  25. 25. distribució visual Sistema de graelles, layout. Complexe.
  26. 26. distribució visual Sistema de graelles, layout. Complexe.
  27. 27. distribució visual
  28. 28. distribució visual Kosslyn (1993), lalineació facilita la llegibilitat i optimitza la velocitat de comprensió
  29. 29. distribució visual Papeleta papallona de les eleccions nord-americanes del 2000.
  30. 30. distribució visual Bona continuació: Els elements distribuïts com una recta o una línia suau es perceben com un grup més compacte. Kosslyn, les imatges mentals són un procés cognitiu un disseny pot determinar la comprensió
  31. 31. distribució visual Bona continuació: Disposar elements en pantalla que es distr ibueixen de f or ma agr upada (Gestalt - Wertheimer, 1923) Planteja com el fet de percebre millor una disposició ordenada i alineada dobjectes o elements ens permet una més ràpida comprensió.
  32. 32. distribució visual La percepció de l’alineació depèn també de les relacions entre elements
  33. 33. distribució visual
  34. 34. distribució visual
  35. 35. distribució visual Similitud: Els elements similars es perceben com més relacionats entre si que els que són diferents. de nou ... la percepció
  36. 36. distribució visual Tendim a agrupar els similars, Dondis (1976) el punt aïllat centrem més agrupats es percep en conjunt l’atenció en el quadre amb el quadre els punts desapareix
  37. 37. distribució visual Visualment agrupem elements segons les qualitats
  38. 38. distribució visual Podem utilitzar aquesta percepció a l’hora de compondre una pantalla web, de manera que creem estils similars per a continguts que tinguin la mateixa categoria
  39. 39. distribució visual
  40. 40. distribució visual
  41. 41. distribució visual
  42. 42. distribució visual Connexió d’allò uniforme: Els elements que comparteixen propietats visuals uniformes, com el color, es perceben més relacionats entre si que els que no tenen connexions. Totalment lligat al principi de similitud ... però implica lligar elements per crear connexions
  43. 43. distribució visual Els iguals s’atrauen i els contraris es repelen
  44. 44. distribució visual Podem crear connexions per provocar percepcions en un disseny línies de connexió zones comunes
  45. 45. distribució visual El principi de connexió d’allò que és uniforme domina sobre els altres principis de disseny que provenen de les teories de la percepció de la Gestalt
  46. 46. distribució visual
  47. 47. distribució visual Tancament: Tendència a percebre elements diferents entre si com un patró únic i no com a objectes independents. La percepció tendeix a acabar i tancar un disseny pel patró que suggereix lagrupació, proximitat o alineació de diferents elements independents.
  48. 48. distribució visual Poder utilitzar el principi de percepció de tancament en un disseny visual web ens permet simplificar els elements visuals de manera que el conjunt resulti més clar i eficient. L’objectiu és crear un disseny global de pantalla que malgrat estar construit a partir de molts elements pugui ser percebut per l’usuari com un tot global o inclús com sol objecte.
  49. 49. distribució visual
  50. 50. distribució visual Proximitat: Els elements propers entre si es perceben com més relacionats que els separats entre si.
  51. 51. distribució visual L’objectiu mes evident és la simplificació de sites complexes que tenen molts elements o menús.
  52. 52. distribució visual
  53. 53. distribució visual
  54. 54. distribució visual Panorama-refugi: Tendència a preferir els entorns amb espais oberts i les àrees dintimitat i recolliment. Suggereix que els entorns preferits per les persones són aquells que assoleixen un equilibri entre un espai obert amb vistes des de diferents perspectives o posicions (panorames), i espais de resguard (refugis) ... instint primari
  55. 55. distribució visual Laplicació daquesta idea en entorns web té a veure amb mantenir: · la claredat i lespai a organitzar, deixar aire a tot el site, · i alhora a connectar els continguts, els recursos de navegació i els dispositius del sistema.
  56. 56. distribució visual ... resum Composició: Disposició i organització dels elements per crear un tot visualment i estructuralment satisfactori. Diagrama de Gutenberg: Patró general seguit per la vista quan observem una informació en pantalla o paper. Alineació: Col·locació delements alineats a les seves vores, centradament, a dues bandes, ... etc. Bona continuació: Els elements distribuïts com una recta o una línia suau es perceben com un grup més compacte. Similitud: Els elements similars es perceben com més relacionats entre si que els que són diferents. Connexió d’allò uniforme: Els elements que comparteixen propietats visuals uniformes, com el color, es perceben més relacionats entre si que els que no tenen connexions. Tancament: Tendència a percebre elements diferents entre si com un patró únic i no com a objectes independents. Proximitat: Els elements propers entre si es perceben com més relacionats que els separats entre si. Panorama-refugi: Tendència a preferir els entorns amb espais oberts i les àrees dintimitat i recolliment.
  57. 57. principis de disseny interactiu LEER NO MATA Dondis, D.A. (1976). La sintaxis de la imagen. Barcelona: Gustavo Gili. Arnheim, R. (1979). Arte y percepción visual. Madrid: Alianza Editorial. Butler, J; Holden, K & Lidwell, W. (2005). Principios universales de diseño. Barcelona: Blume.
  58. 58. Mariona Grané.Laboratori de Mitjans Interactius www.lmi.ub.edu

×