1. Distribució visual
Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB

2. principis de disseny interactiu
Grané, 2009

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. distribució visual
La part més visual del disseny d'entorns interactius a la xarxa ha de tenir en compte els
principis de disseny gràfic per optimitzar l'accé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. principis de disseny interactiu
Distribució visual
Composició
Diagrama de Gutenberg
Alineació
Bona continuació
Similitud
Connexió d’allò uniforme
Tancament
Proximitat
Panorama-refugi

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. distribució visual

8. distribució visual
Per a Dondis la Composició és:
Equilibri
Tensió
Anivellament i agudesa

9. distribució visual

10. distribució visual

11. distribució visual
Per a Dondis la Composició és:
Equilibri
Tensió
Anivellament i agudesa
Harmonia
Estabilitat
L'ambigüitat, és un estat visual que no funciona en la percepció.

12. distribució visual

13. distribució visual

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. 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.

20. 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

21. distribució visual
El diagrama de Gutenberg, (Edmun Arnold, 1950)

22. distribució visual

23. 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.

25. distribució visual
Eyetracking

26. distribució visual
Alineació: Col·locació d'elements alineats a les seves vores, centradament, a dues
bandes, ... etc.
El fet d'alinear 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.

27. 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.

28. distribució visual

29. distribució visual

30. distribució visual
Sistema de graelles, layout. Complexe.

31. distribució visual
Sistema de graelles, layout. Complexe.

32. distribució visual

33. distribució visual
Kosslyn (1993), l'alineació facilita la llegibilitat i optimitza la velocitat de comprensió

34. distribució visual
Papeleta papallona de les eleccions nord-americanes del 2000.

35. 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ó

36. 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
d'objectes o elements ens permet una
més ràpida comprensió.

37. distribució visual
La percepció de l’alineació depèn també de les relacions entre elements

38. distribució visual

39. distribució visual

40. distribució visual
Similitud: Els elements similars es perceben com més relacionats entre si que els que
són diferents.
de nou ... la percepció

41. 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

42. distribució visual
Visualment agrupem elements segons les qualitats

43. 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

44. distribució visual

45. distribució visual

47. distribució visual

48. 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

49. distribució visual
Els iguals s’atrauen
i els contraris es repelen

50. distribució visual
Podem crear connexions per provocar percepcions en un disseny
línies de connexió
zones comunes

51. 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

52. distribució visual

56. 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 l'agrupació,
proximitat o alineació de diferents elements independents.

57. 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.

59. distribució visual

60. distribució visual
Proximitat: Els elements propers entre si es perceben com més relacionats que els
separats entre si.

61. distribució visual
L’objectiu mes evident és la simplificació de sites complexes que tenen molts elements o
menús.

62. distribució visual

63. distribució visual

64. distribució visual
Panorama-refugi: Tendència a preferir els entorns amb espais oberts i les àrees
d'intimitat 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

65. distribució visual
L'aplicació d'aquesta idea en entorns web té a veure amb mantenir:
· la claredat i l'espai a organitzar, deixar aire a tot el site,
· i alhora a connectar els continguts, els recursos de navegació i els dispositius del
sistema.

70. 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ó d'elements 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
d'intimitat i recolliment.

71. 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.

72. Mariona Grané.
Laboratori de Mitjans Interactius www.lmi.ub.edu