4. funcția – designul (proiectarea) bun(ă) oferă suport
pentru desfășurarea activităților utilizatorului
forma (înfățișarea) – designul (proiectarea) bun(ă)
trebuie să impulsioneze utilizatorul să folosească
obiectul/aplicația/serviciul cu plăcere
Dr. Sabin Buragawww.purl.org/net/busaco
Aspecte importante:
5. funcția – designul (proiectarea) bun(ă) oferă suport
pentru desfășurarea activităților utilizatorului
forma (înfățișarea) – designul (proiectarea) bun(ă)
trebuie să impulsioneze utilizatorul să folosească
obiectul/aplicația/serviciul cu plăcere
Dr. Sabin Buragawww.purl.org/net/busaco
Aspecte importante:
7. suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare, legături, controale specifice etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Tradițional, interacțiunea cu utilizatorul
va recurge la elemente de interfață
8. Dr. Sabin Buragawww.purl.org/net/busaco
Aranjament spațial (layout)
Asigurarea fluxului (rhythm, focus & color)
Organizarea informației (information architecture)
Asigurarea navigabilității
Modularitatea & flexibilitatea
Consistența
conform Dan Saffer (2006)
9. bazat pe modele vizuale
ce anume vom comunica utilizatorului?
Dr. Sabin Buragawww.purl.org/net/busaco
Design vizual
10. reprezentările vizuale
trebuie să fie ușor percepute & recunoscute
recognition vs. recall
Dr. Sabin Buragawww.purl.org/net/busaco
Design vizual
11. reprezentările vizuale
trebuie să fie ușor percepute & recunoscute
recognition vs. recall
metafore &
idiomuri
Dr. Sabin Buragawww.purl.org/net/busaco
Design vizual
16. un design bun implică alegerea echilibrată
a relațiilor dintre elementele care creează conținutul
Dr. Sabin Buragawww.purl.org/net/busaco
Design vizual
17. un design bun implică alegerea echilibrată
a relațiilor dintre elementele care creează conținutul
ierarhie vizuală cât mai clară
S. Krug, Don’t Make Me Think! (2nd Edition), New Riders, 2006
Dr. Sabin Buragawww.purl.org/net/busaco
Design vizual
19. <div class="content">…</div>
Dr. Sabin Buragawww.purl.org/net/busaco
Fiecare pagină Web include un container
(container block) care va cuprinde
conținutul propriu-zis
21. Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Frameless – framelessgrid.com
Skeleton – www.getskeleton.com
The Semantic Grid System – semantic.gs
Dr. Sabin Buragawww.purl.org/net/busaco
Instrumente Web specifice (exemplificări):
22. specificarea aranjamentului & stilului vizual
via HTML + CSS + conținuturi grafice
exemplificare: WordPress templates
http://wordpress.org/themes/
Dr. Sabin Buragawww.purl.org/net/busaco
Layout-ul e facilitat de template-uri (șabloane vizuale)
23. oferite implicit de unele servere de aplicații ori
framework-uri Web sau disponibile ca extensii
Dr. Sabin Buragawww.purl.org/net/busaco
Recurgerea la sisteme de aplicare a șabloanelor
de prezentare – Web template systems/engines
24. des folosit în tipografie
www.thegridsystem.org
Dr. Sabin Buragawww.purl.org/net/busaco
Layout-ul poate fi stabilit via grid
28. poziții arbitrare ale elementelor componente
dimensiuni arbitrare ale elementelor
mărimi și reprezentări arbitrare ale imaginilor
prezentări inconsistente
limbaje vizuale inconsistente
Dr. Sabin Buragawww.purl.org/net/busaco
Greșeli comune:
29. asigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie
Dr. Sabin Buragawww.purl.org/net/busaco
Balansul
31. modul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)
uzual, se realizează prin grupare
Dr. Sabin Buragawww.purl.org/net/busaco
Unitatea
39. culoarea considerată cod vizual,
indicând categoria (tipul) de informații
redate utilizatorului
Dr. Sabin Buragawww.purl.org/net/busaco
Cromatica
40. un set de culori poate avea semantici diferite,
în funcție de situațiile survenite și de audiență
poate stabili ambientul
Dr. Sabin Buragawww.purl.org/net/busaco
Cromatica
41. utilizarea a maxim 4 culori afişate simultan
Dr. Sabin Buragawww.purl.org/net/busaco
Cromatica
42. utilizarea a maxim 4 culori afișate simultan
evitarea supraîncărcării cognitive
Dr. Sabin Buragawww.purl.org/net/busaco
Cromatica
44. redarea plăcută a elementelor de interes
(în acest context: culorile)
estetică vizuală
Dr. Sabin Buragawww.purl.org/net/busaco
Armonie cromatică
www.interaction-design.org/encyclopedia/visual_aesthetics.html
48. contextul în care apare o culoare este foarte important
anumite culori au conotații multiple
verde = victorie (Grecia antică)
verde = fertilitate (Evul mediu)
Dr. Sabin Buragawww.purl.org/net/busaco
Cromatica
50. Color Scheme Designer – colorschemedesigner.com
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com
alte detalii în S. Buraga, Any Colour You Like (2013)
http://www.slideshare.net/busaco/any-colour-you-like
Dr. Sabin Buragawww.purl.org/net/busaco
Instrumente pentru generarea de palete cromatice
(exemplificări)
52. componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
typos (impresie) + grapheia (scriere)
Dr. Sabin Buragawww.purl.org/net/busaco
Typography
54. corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere
Dr. Sabin Buragawww.purl.org/net/busaco
Typography
55. corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere
Font: Caracter Semn
Dr. Sabin Buragawww.purl.org/net/busaco
Typography
56. dimensiune
măsurată în puncte tipografice ori picas
scala: 6 8 9 10 11 12 14 16 18 21 24 36 48 60 72
proprietate CSS: font-size
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
57. proporția
indică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
58. familia de font
clasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: font-family
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
59. familia de font
include fontul de bază + variants (italic, bold, bold italic)
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
61. fonturi “sigure” pentru Web
disponibile pe orice sistem
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
62. utilizarea/încărcarea de la distanță
a unor (colecții de) fonturi
proprietatea @font-face definită de CSS – nivelul 3
Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
CSS Fonts Module Level 3 (W3C Candidate
Recommendation, oct. 2013) – www.w3.org/TR/css3-fonts/
63. Dr. Sabin Buragawww.purl.org/net/busaco
Corpul de literă
WOFF (Web Open Font Format)
include formatele TrueType, OpenType, Open Font Format
recomandare W3C (decembrie 2012)
www.w3.org/TR/WOFF/
66. “It refers only to the darkness or blackness
of the letterform in mass.”
Robert Bringhurst, The Elements of Typographic Style
a se vizita și http://typographica.org/
Dr. Sabin Buragawww.purl.org/net/busaco
“Culoarea” tipografică
indică densitatea texturii conținutului unei pagini
67. element-cheie al ușurinței parcurgerii conținutului
Dr. Sabin Buragawww.purl.org/net/busaco
Măsura
definește lungimea unei linii de text
68. valori recomandate: 45—75 caractere (30—50 em)
poate fi dificil de stabilit pentru layout-uri lichide
Dr. Sabin Buragawww.purl.org/net/busaco
Măsura
70. uzual, titlurile (headings) nu necesită leading
Dr. Sabin Buragawww.purl.org/net/busaco
Leading (sau line-spacing)
spațiul vertical dintre 2 linii de text
71. fonturile masive vor avea nevoie de leading mai mare
fonturile sans-serif necesită
mai mult leading decât cele serif
Dr. Sabin Buragawww.purl.org/net/busaco
Leading (sau line-spacing)
spațiul vertical dintre 2 linii de text
lățimea mai mare a liniei conduce la creșterea leading-ului
74. liste de obiecte
desemnate de substantive
mesaje primite în inbox (e-mail-uri)
recomandări de produse similare
…
Dr. Sabin Buragawww.purl.org/net/busaco
Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
75. (secvențe de) acțiuni
desemnate de verbe
e.g., browse, buy, register, sell, subscribe,…
Dr. Sabin Buragawww.purl.org/net/busaco
Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
76. liste de categorii (subiecte) de interes
exemple: știință, tehnologie, divertisment etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
77. liste de instrumente/componente
e.g., calendar, editor de texte, manager de resurse,…
Dr. Sabin Buragawww.purl.org/net/busaco
Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
78. în funcție de:
natura & domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintă
contextul interacțiunii
Dr. Sabin Buragawww.purl.org/net/busaco
Necesitatea organizării informațiilor prezentate
79. uzual, se recurge la diverse criterii de sortare:
alfabetic
spațial
temporal
conform semnificației
…
Dr. Sabin Buragawww.purl.org/net/busaco
Prezentare liniară
80. se consideră 2 criterii/dimensiuni de interes
exemplu:
locație geografică + dată calendaristică
Dr. Sabin Buragawww.purl.org/net/busaco
Prezentare bidimensională
82. structuri arborescente cu 1 sau mai multe niveluri
folosită pentru a ilustra anumite relații între obiecte:
copil-părinte, grupare, sub-sumare,…
exemplu tipic: meniuri
Dr. Sabin Buragawww.purl.org/net/busaco
Prezentare ierarhică
96. T. Tullis, B. Albert, Measuring the User Experience
(2nd Edition), Morgan Kaufmann, 2013
Dr. Sabin Buragawww.purl.org/net/busaco
deși numărul optim de pași (click-uri) este 3,
utilizatorul realizează 9 acțiuni, fiind „pierdut în spațiu”
97. meniuri
orizontale – informații, apoi acțiuni
verticale: plate, expandabile, bi-nivel
combinate
Dr. Sabin Buragawww.purl.org/net/busaco
Navigabilitatea
98. alte soluții
legături conexe – e.g., navigare contextuală
divizarea (paginarea) conținutului
cele mai recente pagini vizitate
Dr. Sabin Buragawww.purl.org/net/busaco
Navigabilitatea
110. semantici diferite ale legăturilor:
navigare
download
procesare
asociere de meta-date – exemplu: tagging
Dr. Sabin Buragawww.purl.org/net/busaco
Navigabilitatea
111. existența unor elemente navigaționale
– plasate consistent –
pentru conducerea utilizatorului
spre secțiunile importante ale sitului/aplicației Web
Dr. Sabin Buragawww.purl.org/net/busaco
Regulă de bună practică:
112. secțiunile unei aplicații pot fi divizate în
mini-aplicații/mini-situri independente,
accesabile din fereastra/pagina principală
context: aplicații destinate dispozitivelor mobile
Dr. Sabin Buragawww.purl.org/net/busaco
Regulă de bună practică:
113. breadcrumbs
indicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii)
Dr. Sabin Buragawww.purl.org/net/busaco
Regulă de bună practică:
116. (Ethan Marcotte, 2010)
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare, rezoluție, densitate de pixeli,…)
www.alistapart.com/articles/responsive-web-design/
Dr. Sabin Buragawww.purl.org/net/busaco
Responsive Web design
117. flexible image (+media, +font)
flexible/fluid grid
Jacob Surber, The Page Is Dead, SXSWi 2012
www.slideshare.net/jacobsurber/page-death
Dr. Sabin Buragawww.purl.org/net/busaco
media queries
118. Media Queries (recomandare W3C, 2012)
http://www.w3.org/TR/css3-mediaqueries/
Dr. Sabin Buragawww.purl.org/net/busaco
rezoluții de ecran diverserecurgerea la valori diferite
pentru anumite proprietăți CSS via reguli @media
119. @media screen and (max-width: 768px) and (orientation: portrait) {
/* stiluri pentru tablete*/
}
/* redarea pe 2 coloane pentru rezoluții mari */
@media (min-width:1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; font-size: 1.5em; }
}
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10) { /* ecran lat */ }
Dr. Sabin Buragawww.purl.org/net/busaco
<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />
pentru alte detalii, a se studia
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
120. adaptarea mărimii și/sau folosirea fonturilor &
graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http://mediaqueri.es/
Dr. Sabin Buragawww.purl.org/net/busaco
imagini & alte resurse grafice – e.g., video
121. client – recurgerea la biblioteci JavaScript precum
HiSRC – https://github.com/teleject/hisrc
Foresight.js – www.cdnconnect.com/docs/foresightjs
soluții de optimizare la nivel de server – exemple:
http://adaptive-images.com/
http://www.resrc.it/
https://developers.google.com/speed/pagespeed/module
Dr. Sabin Buragawww.purl.org/net/busaco
responsive images
122. fonturile externe nu trebuie încărcate în contextul
dispozitivelor având rezoluții reduse ale ecranului
încărcarea asincronă (Web font loading) a fonturilor
http://webtypography.net/talks/rdo13/
Dr. Sabin Buragawww.purl.org/net/busaco
responsive Web fonts
124. alte strategii:
adoptarea unităților de măsură relative
pentru valorile unor proprietăți CSS (% em rem)
Dr. Sabin Buragawww.purl.org/net/busaco
Responsive Web design
126. alte strategii:
ascunderea (eliminarea) datelor care nu sunt esențiale
@media all and (min-width: 321px) and
(max-width: 480px) and (monochrome) {
.continut-neesential { display: none; }
}
Dr. Sabin Buragawww.purl.org/net/busaco
Responsive Web design
127. alte strategii:
stabilirea zonei de redare (viewport)
la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1" />
Dr. Sabin Buragawww.purl.org/net/busaco
Responsive Web design
129. Dr. Sabin Buragawww.purl.org/net/busaco
responsive Web patterns: șabloane de proiectare
pentru layout, navigare, conținut grafic, formulare,…
http://bradfrost.github.com/this-is-responsive/patterns.html
130. Navigatorul Web oferă suport dezvoltatorilor
în ceea ce privește designul responsiv?
Dacă da, în ce mod?
Cum am putea realiza un design responsiv
în contextul interacțiunilor naturale
(e.g., prin voce, bazate pe gesturi, tactile,…)?
Dr. Sabin Buragawww.purl.org/net/busaco
întrebări (pentru acasă)