Dr. Sabin Buragawww.purl.org/net/busaco

design Web

de la design vizual la design Web responsiv
Dr. Sabin Buragawww.purl.org/net/busaco

Există o “rețetă” de proiectare judicioasă
a interfețelor Web?
Dr. Sabin Buragawww.purl.org/net/busaco
funcția – designul (proiectarea) bun(ă) oferă suport
pentru desfășurarea activităților utilizatorului
forma (înfățișarea) ...
funcția – designul (proiectarea) bun(ă) oferă suport
pentru desfășurarea activităților utilizatorului
forma (înfățișarea) ...
Dr. Sabin Buragawww.purl.org/net/busaco

“Attractive things work better.” (Donald Norman)

CSS Zen Garden – www.csszengar...
suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare, legături, controale specifice ...
Dr. Sabin Buragawww.purl.org/net/busaco

Aranjament spațial (layout)
Asigurarea fluxului (rhythm, focus & color)
Organiza...
bazat pe modele vizuale
ce anume vom comunica utilizatorului?

Dr. Sabin Buragawww.purl.org/net/busaco

Design vizual
reprezentările vizuale
trebuie să fie ușor percepute & recunoscute
recognition vs. recall

Dr. Sabin Buragawww.purl.org/n...
reprezentările vizuale
trebuie să fie ușor percepute & recunoscute
recognition vs. recall
metafore &
idiomuri

Dr. Sabin B...
Dr. Sabin Buragawww.purl.org/net/busaco

pictograme & simbolurimetafore vizuale
Dr. Sabin Buragawww.purl.org/net/busaco

pictograme & simbolurimetafore vizuale
Dr. Sabin Buragawww.purl.org/net/busaco

pictograme & simbolurimetafore vizuale
⋆⋆⋆
premii!?

Dr. Sabin Buragawww.purl.org/net/busaco

concurs: metafore și/sau idiomuri
un design bun implică alegerea echilibrată
a relațiilor dintre elementele care creează conținutul

Dr. Sabin Buragawww.pu...
un design bun implică alegerea echilibrată
a relațiilor dintre elementele care creează conținutul
ierarhie vizuală cât ma...
layout-ul generic al unei pagini Web
Dr. Sabin Buragawww.purl.org/net/busaco
<div class="content">…</div>

Dr. Sabin Buragawww.purl.org/net/busaco

Fiecare pagină Web include un container
(container...
lățime prestabilită

versus

layout lichid
lățime variabilă

Dr. Sabin Buragawww.purl.org/net/busaco

layout fix
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Frameless – framelessgrid.com
S...
specificarea aranjamentului & stilului vizual
via HTML + CSS + conținuturi grafice

exemplificare: WordPress templates
htt...
oferite implicit de unele servere de aplicații ori
framework-uri Web sau disponibile ca extensii

Dr. Sabin Buragawww.pur...
des folosit în tipografie

www.thegridsystem.org

Dr. Sabin Buragawww.purl.org/net/busaco

Layout-ul poate fi stabilit vi...
Dr. Sabin Buragawww.purl.org/net/busaco
secțiunea de aur
cele 3 coloane
simplitatea
balansul
unitatea

Dr. Sabin Buragawww.purl.org/net/busaco

Reguli privind la...
Dr. Sabin Buragawww.purl.org/net/busaco

a se studia și articolele oferite de A List Apart
www.alistapart.com/topics/desi...
poziții arbitrare ale elementelor componente
dimensiuni arbitrare ale elementelor
mărimi și reprezentări arbitrare ale ima...
asigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială

simetrie versus asimet...
Dr. Sabin Buragawww.purl.org/net/busaco
modul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)
uzual, se realizează pr...
spațială
cromatică
via elemente (grafice) de separare
e.g., linii orizontale, aliniere diferită etc.

Dr. Sabin Buragawww...
ochiul creează un întreg (gelstalt)
din fragmentele existente

Dr. Sabin Buragawww.purl.org/net/busaco

Grupare – princip...
Dr. Sabin Buragawww.purl.org/net/busaco

www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.ht...
poate fi realizat și prin intermediul contrastului
asigurarea focalizării atenției

Dr. Sabin Buragawww.purl.org/net/bus...
h5ai – a beautified Apache index
based on HTML5
http://larsjung.de/h5ai/

Dr. Sabin Buragawww.purl.org/net/busaco

Inform...
Dr. Sabin Buragawww.purl.org/net/busaco

Tipuri de contrast pe baza variabilelor vizuale
Dr. Sabin Buragawww.purl.org/net/busaco
culoarea considerată cod vizual,
indicând categoria (tipul) de informații
redate utilizatorului

Dr. Sabin Buragawww.purl...
un set de culori poate avea semantici diferite,
în funcție de situațiile survenite și de audiență
poate stabili ambientul
...
utilizarea a maxim 4 culori afişate simultan

Dr. Sabin Buragawww.purl.org/net/busaco

Cromatica
utilizarea a maxim 4 culori afișate simultan

evitarea supraîncărcării cognitive

Dr. Sabin Buragawww.purl.org/net/busaco...
culori
reci

culori
calde

Dr. Sabin Buragawww.purl.org/net/busaco

“Roata” culorilor pentru Web
redarea plăcută a elementelor de interes
(în acest context: culorile)
estetică vizuală

Dr. Sabin Buragawww.purl.org/net...
armonie complementară
Dr. Sabin Buragawww.purl.org/net/busaco
armonie bazată pe 3 culori (triadă)
Dr. Sabin Buragawww.purl.org/net/busaco
armonie analogă accentuată
Dr. Sabin Buragawww.purl.org/net/busaco
contextul în care apare o culoare este foarte important
anumite culori au conotații multiple
verde = victorie (Grecia anti...
paradis
nori

paradis
nori

moarte
puritate

fericire

Franța

aristocrație

temporar

criminalitate

liber
pace

neutrali...
Color Scheme Designer – colorschemedesigner.com
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com
a...
Dr. Sabin Buragawww.purl.org/net/busaco

Care sunt aspectele de interes
privind redarea conținutului textual?
componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
typos (impresie) + grapheia (scriere)

Dr. ...
Dr. Sabin Buragawww.purl.org/net/busaco

în contextul Web-ului, a se studia http://webtypography.net/
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere

Dr....
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere
Font...
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...
proporția
indică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)

Dr. Sabin Buragawww.pur...
familia de font
clasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: fo...
familia de font
include fontul de bază + variants (italic, bold, bold italic)

Dr. Sabin Buragawww.purl.org/net/busaco

C...
sans-serif

cursive

fantasy

monospace
Dr. Sabin Buragawww.purl.org/net/busaco

serif
fonturi “sigure” pentru Web
disponibile pe orice sistem

Dr. Sabin Buragawww.purl.org/net/busaco

Corpul de literă
utilizarea/încărcarea de la distanță
a unor (colecții de) fonturi
proprietatea @font-face definită de CSS – nivelul 3

Dr....
Dr. Sabin Buragawww.purl.org/net/busaco

Corpul de literă

WOFF (Web Open Font Format)
include formatele TrueType, OpenTy...
Dr. Sabin Buragawww.purl.org/net/busaco

Adobe Edge Web Fonts
http://html.adobe.com/edge/webfonts/
Dr. Sabin Buragawww.purl.org/net/busaco

Google Web fonts – www.google.com/fonts/
“It refers only to the darkness or blackness
of the letterform in mass.”
Robert Bringhurst, The Elements of Typographic St...
element-cheie al ușurinței parcurgerii conținutului

Dr. Sabin Buragawww.purl.org/net/busaco

Măsura
definește lungimea u...
valori recomandate: 45—75 caractere (30—50 em)
poate fi dificil de stabilit pentru layout-uri lichide

Dr. Sabin Buragaww...
Dr. Sabin Buragawww.purl.org/net/busaco
uzual, titlurile (headings) nu necesită leading

Dr. Sabin Buragawww.purl.org/net/busaco

Leading (sau line-spacing)
spaț...
fonturile masive vor avea nevoie de leading mai mare
fonturile sans-serif necesită
mai mult leading decât cele serif

Dr. ...
Dr. Sabin Buragawww.purl.org/net/busaco

de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
Dr. Sabin Buragawww.purl.org/net/busaco

Cum organizăm informațiile?
liste de obiecte
desemnate de substantive
mesaje primite în inbox (e-mail-uri)
recomandări de produse similare
…

Dr. Sabi...
(secvențe de) acțiuni
desemnate de verbe
e.g., browse, buy, register, sell, subscribe,…

Dr. Sabin Buragawww.purl.org/net...
liste de categorii (subiecte) de interes
exemple: știință, tehnologie, divertisment etc.

Dr. Sabin Buragawww.purl.org/ne...
liste de instrumente/componente
e.g., calendar, editor de texte, manager de resurse,…

Dr. Sabin Buragawww.purl.org/net/b...
în funcție de:
natura & domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintă
contextul interacțiunii

Dr. Sab...
uzual, se recurge la diverse criterii de sortare:
alfabetic
spațial
temporal
conform semnificației
…

Dr. Sabin Buragawww...
se consideră 2 criterii/dimensiuni de interes

exemplu:
locație geografică + dată calendaristică

Dr. Sabin Buragawww.pur...
Dr. Sabin Buragawww.purl.org/net/busaco

Prezentare bidimensională

uzual, se adoptă o vizualizare bazată pe grilă (grid)
structuri arborescente cu 1 sau mai multe niveluri

folosită pentru a ilustra anumite relații între obiecte:
copil-părinte...
spațial
temporal
conform profilului utilizatorului

Dr. Sabin Buragawww.purl.org/net/busaco

Prezentare bazata pe context
spațial
temporal
conform profilului utilizatorului
exemplificări:
hărți, chart-uri, timelines, informații recomandate,…

D...
pot utiliza combinații ale precedentelor

Dr. Sabin Buragawww.purl.org/net/busaco

Prezentari mixte (complexe)
Dr. Sabin Buragawww.purl.org/net/busaco
alinierea conținutului în cadrul unui formular/tabel

Dr. Sabin Buragawww.purl.org/net/busaco

Aspect de interes:
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco
Care sunt mijloacele de explorare?
Dr. Sabin Buragawww.purl.org/net/busaco
signposts
titlul documentului Web
sigle
metode de redare a selecției
…

Dr. Sabin Buragawww.purl.org/net/busaco

Localiza...
wayfinding
good signage
environmental clues
maps

Dr. Sabin Buragawww.purl.org/net/busaco

Găsirea “drumului” care conduc...
minimizarea distanțeiergonomia interfeței

Dr. Sabin Buragawww.purl.org/net/busaco

Aspect de interes
T. Tullis, B. Albert, Measuring the User Experience
(2nd Edition), Morgan Kaufmann, 2013

Dr. Sabin Buragawww.purl.org/ne...
meniuri
orizontale – informații, apoi acțiuni
verticale: plate, expandabile, bi-nivel
combinate

Dr. Sabin Buragawww.purl...
alte soluții
legături conexe – e.g., navigare contextuală
divizarea (paginarea) conținutului
cele mai recente pagini vizit...
Dr. Sabin Buragawww.purl.org/net/busaco

navigabilitate via harta sitului (site map)
căutare internă (site search engine)
Dr. Sabin Buragawww.purl.org/net/busaco
left column navigation
Dr. Sabin Buragawww.purl.org/net/busaco
right column navigation
Dr. Sabin Buragawww.purl.org/net/busaco
three column navigation
Dr. Sabin Buragawww.purl.org/net/busaco
three columns with content first
Dr. Sabin Buragawww.purl.org/net/busaco
three column content
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

layout pentru desktop vs. layout pentru dispozitiv mobil
(Ronan Cremin & Luca Pa...
Dr. Sabin Buragawww.purl.org/net/busaco

navigabilitatea în contextul tabletelor
(Ronan Cremin & Luca Passani, 2012)
navigare socială
+
navigare bazată pe termeni de conținut (tag-uri)
http://www.hashtags.org/
http://tagdef.com/

Dr. Sabin...
www.360cities.net

Dr. Sabin Buragawww.purl.org/net/busaco

navigare cartografică + 3D
semantici diferite ale legăturilor:
navigare
download
procesare
asociere de meta-date – exemplu: tagging

Dr. Sabin Buraga...
existența unor elemente navigaționale
– plasate consistent –
pentru conducerea utilizatorului
spre secțiunile importante a...
secțiunile unei aplicații pot fi divizate în
mini-aplicații/mini-situri independente,
accesabile din fereastra/pagina prin...
breadcrumbs
indicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii...
Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buragawww.purl.org/net/busaco

Ce înseamnă responsive Web design?
(Ethan Marcotte, 2010)
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g...
flexible image (+media, +font)

flexible/fluid grid

Jacob Surber, The Page Is Dead, SXSWi 2012
www.slideshare.net/jacobsu...
Media Queries (recomandare W3C, 2012)
http://www.w3.org/TR/css3-mediaqueries/

Dr. Sabin Buragawww.purl.org/net/busaco

r...
@media screen and (max-width: 768px) and (orientation: portrait) {
/* stiluri pentru tablete*/
}
/* redarea pe 2 coloane p...
adaptarea mărimii și/sau folosirea fonturilor &
graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http:/...
client – recurgerea la biblioteci JavaScript precum
HiSRC – https://github.com/teleject/hisrc
Foresight.js – www.cdnconnec...
fonturile externe nu trebuie încărcate în contextul
dispozitivelor având rezoluții reduse ale ecranului
încărcarea asincro...
Dr. Sabin Buragawww.purl.org/net/busaco

layout-urile flexibile utilizează lățimi relative
pentru coloane în vederea orga...
alte strategii:

adoptarea unităților de măsură relative
pentru valorile unor proprietăți CSS (% em rem)

Dr. Sabin Buraga...
alte strategii:

linearizarea conținutului
în contextul redării pe dispozitive mobile

Dr. Sabin Buragawww.purl.org/net/b...
alte strategii:

ascunderea (eliminarea) datelor care nu sunt esențiale
@media all and (min-width: 321px) and
(max-width: ...
alte strategii:

stabilirea zonei de redare (viewport)
la dimensiunea reală a ecranului dispozitivului
<meta name="viewpor...
graceful
degradation

progressive
enhancement
mobile first

responsive Web design în contextul designului Web
Aaron Gustaf...
Dr. Sabin Buragawww.purl.org/net/busaco

responsive Web patterns: șabloane de proiectare
pentru layout, navigare, conținu...
Navigatorul Web oferă suport dezvoltatorilor
în ceea ce privește designul responsiv?
Dacă da, în ce mod?
Cum am putea real...
episodul viitor: surpriză ♚
Dr. Sabin Buragawww.purl.org/net/busaco
Upcoming SlideShare
Loading in...5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv

232

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco design Web de la design vizual la design Web responsiv
  2. 2. Dr. Sabin Buragawww.purl.org/net/busaco Există o “rețetă” de proiectare judicioasă a interfețelor Web?
  3. 3. Dr. Sabin Buragawww.purl.org/net/busaco
  4. 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 Buragawww.purl.org/net/busaco Aspecte importante:
  5. 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 Buragawww.purl.org/net/busaco Aspecte importante:
  6. 6. Dr. Sabin Buragawww.purl.org/net/busaco “Attractive things work better.” (Donald Norman) CSS Zen Garden – www.csszengarden.com
  7. 7. suprafețe de redare pagini, zone interactive,… elemente de interacțiune câmpuri de intrare, legături, controale specifice etc. Dr. Sabin Buragawww.purl.org/net/busaco Tradițional, interacțiunea cu utilizatorul va recurge la elemente de interfață
  8. 8. Dr. Sabin Buragawww.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. 9. bazat pe modele vizuale ce anume vom comunica utilizatorului? Dr. Sabin Buragawww.purl.org/net/busaco Design vizual
  10. 10. reprezentările vizuale trebuie să fie ușor percepute & recunoscute recognition vs. recall Dr. Sabin Buragawww.purl.org/net/busaco Design vizual
  11. 11. reprezentările vizuale trebuie să fie ușor percepute & recunoscute recognition vs. recall metafore & idiomuri Dr. Sabin Buragawww.purl.org/net/busaco Design vizual
  12. 12. Dr. Sabin Buragawww.purl.org/net/busaco pictograme & simbolurimetafore vizuale
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco pictograme & simbolurimetafore vizuale
  14. 14. Dr. Sabin Buragawww.purl.org/net/busaco pictograme & simbolurimetafore vizuale
  15. 15. ⋆⋆⋆ premii!? Dr. Sabin Buragawww.purl.org/net/busaco concurs: metafore și/sau idiomuri
  16. 16. un design bun implică alegerea echilibrată a relațiilor dintre elementele care creează conținutul Dr. Sabin Buragawww.purl.org/net/busaco Design vizual
  17. 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 Buragawww.purl.org/net/busaco Design vizual
  18. 18. layout-ul generic al unei pagini Web Dr. Sabin Buragawww.purl.org/net/busaco
  19. 19. <div class="content">…</div> Dr. Sabin Buragawww.purl.org/net/busaco Fiecare pagină Web include un container (container block) care va cuprinde conținutul propriu-zis
  20. 20. lățime prestabilită versus layout lichid lățime variabilă Dr. Sabin Buragawww.purl.org/net/busaco layout fix
  21. 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 Buragawww.purl.org/net/busaco Instrumente Web specifice (exemplificări):
  22. 22. specificarea aranjamentului & stilului vizual via HTML + CSS + conținuturi grafice exemplificare: WordPress templates http://wordpress.org/themes/ Dr. Sabin Buragawww.purl.org/net/busaco Layout-ul e facilitat de template-uri (șabloane vizuale)
  23. 23. oferite implicit de unele servere de aplicații ori framework-uri Web sau disponibile ca extensii Dr. Sabin Buragawww.purl.org/net/busaco Recurgerea la sisteme de aplicare a șabloanelor de prezentare – Web template systems/engines
  24. 24. des folosit în tipografie www.thegridsystem.org Dr. Sabin Buragawww.purl.org/net/busaco Layout-ul poate fi stabilit via grid
  25. 25. Dr. Sabin Buragawww.purl.org/net/busaco
  26. 26. secțiunea de aur cele 3 coloane simplitatea balansul unitatea Dr. Sabin Buragawww.purl.org/net/busaco Reguli privind layout-ul
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco a se studia și articolele oferite de A List Apart www.alistapart.com/topics/design/layout/
  28. 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 Buragawww.purl.org/net/busaco Greșeli comune:
  29. 29. asigurarea echilibrului vizual pe orizontală/verticală simetrie orizontală, bilaterală sau radială simetrie versus asimetrie Dr. Sabin Buragawww.purl.org/net/busaco Balansul
  30. 30. Dr. Sabin Buragawww.purl.org/net/busaco
  31. 31. modul în care elemente diferite interacționează în cadrul aceluiași document (aceleași pagini Web) uzual, se realizează prin grupare Dr. Sabin Buragawww.purl.org/net/busaco Unitatea
  32. 32. spațială cromatică via elemente (grafice) de separare e.g., linii orizontale, aliniere diferită etc. Dr. Sabin Buragawww.purl.org/net/busaco Criterii de grupare
  33. 33. ochiul creează un întreg (gelstalt) din fragmentele existente Dr. Sabin Buragawww.purl.org/net/busaco Grupare – principiul Gelstalt
  34. 34. Dr. Sabin Buragawww.purl.org/net/busaco www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
  35. 35. poate fi realizat și prin intermediul contrastului asigurarea focalizării atenției Dr. Sabin Buragawww.purl.org/net/busaco Fluxul (flow) vizual
  36. 36. h5ai – a beautified Apache index based on HTML5 http://larsjung.de/h5ai/ Dr. Sabin Buragawww.purl.org/net/busaco Information Architecture
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco Tipuri de contrast pe baza variabilelor vizuale
  38. 38. Dr. Sabin Buragawww.purl.org/net/busaco
  39. 39. culoarea considerată cod vizual, indicând categoria (tipul) de informații redate utilizatorului Dr. Sabin Buragawww.purl.org/net/busaco Cromatica
  40. 40. un set de culori poate avea semantici diferite, în funcție de situațiile survenite și de audiență poate stabili ambientul Dr. Sabin Buragawww.purl.org/net/busaco Cromatica
  41. 41. utilizarea a maxim 4 culori afişate simultan Dr. Sabin Buragawww.purl.org/net/busaco Cromatica
  42. 42. utilizarea a maxim 4 culori afișate simultan evitarea supraîncărcării cognitive Dr. Sabin Buragawww.purl.org/net/busaco Cromatica
  43. 43. culori reci culori calde Dr. Sabin Buragawww.purl.org/net/busaco “Roata” culorilor pentru Web
  44. 44. redarea plăcută a elementelor de interes (în acest context: culorile) estetică vizuală Dr. Sabin Buragawww.purl.org/net/busaco Armonie cromatică www.interaction-design.org/encyclopedia/visual_aesthetics.html
  45. 45. armonie complementară Dr. Sabin Buragawww.purl.org/net/busaco
  46. 46. armonie bazată pe 3 culori (triadă) Dr. Sabin Buragawww.purl.org/net/busaco
  47. 47. armonie analogă accentuată Dr. Sabin Buragawww.purl.org/net/busaco
  48. 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 Buragawww.purl.org/net/busaco Cromatica
  49. 49. paradis nori paradis nori moarte puritate fericire Franța aristocrație temporar criminalitate liber pace neutralitate India viață creativitate succes prosperitate fertil Japonia furie pericol grație nobil viitor tinerețe răutate moarte USA pericol, stop lașitate atenție siguranță masculinitate puritate moarte puritate Dr. Sabin Buragawww.purl.org/net/busaco China naștere putere atenție la utilizarea internațională webdesignerwall.com/general/cultural-considerations-for-global-websites
  50. 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 Buragawww.purl.org/net/busaco Instrumente pentru generarea de palete cromatice (exemplificări)
  51. 51. Dr. Sabin Buragawww.purl.org/net/busaco Care sunt aspectele de interes privind redarea conținutului textual?
  52. 52. componentă vitală a procesului de comunicare nu înseamnă “picking a cool font” typos (impresie) + grapheia (scriere) Dr. Sabin Buragawww.purl.org/net/busaco Typography
  53. 53. Dr. Sabin Buragawww.purl.org/net/busaco în contextul Web-ului, a se studia http://webtypography.net/
  54. 54. corpul de literă – typeface, font mulțime unitară de glyphs (semne, simboluri grafice) asociate unui set de caractere Dr. Sabin Buragawww.purl.org/net/busaco Typography
  55. 55. corpul de literă – typeface, font mulțime unitară de glyphs (semne, simboluri grafice) asociate unui set de caractere Font: Caracter  Semn Dr. Sabin Buragawww.purl.org/net/busaco Typography
  56. 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 Buragawww.purl.org/net/busaco Corpul de literă
  57. 57. proporția indică variația de lățime a setului de glyphs proporționat vs. monospațiat (monospace) Dr. Sabin Buragawww.purl.org/net/busaco Corpul de literă
  58. 58. familia de font clasifică fonturile pe baza unor caracteristici (e.g., modul de redare a glyph-urilor) proprietate CSS: font-family Dr. Sabin Buragawww.purl.org/net/busaco Corpul de literă
  59. 59. familia de font include fontul de bază + variants (italic, bold, bold italic) Dr. Sabin Buragawww.purl.org/net/busaco Corpul de literă
  60. 60. sans-serif cursive fantasy monospace Dr. Sabin Buragawww.purl.org/net/busaco serif
  61. 61. fonturi “sigure” pentru Web disponibile pe orice sistem Dr. Sabin Buragawww.purl.org/net/busaco Corpul de literă
  62. 62. utilizarea/încărcarea de la distanță a unor (colecții de) fonturi proprietatea @font-face definită de CSS – nivelul 3 Dr. Sabin Buragawww.purl.org/net/busaco Corpul de literă CSS Fonts Module Level 3 (W3C Candidate Recommendation, oct. 2013) – www.w3.org/TR/css3-fonts/
  63. 63. Dr. Sabin Buragawww.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/
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco Adobe Edge Web Fonts http://html.adobe.com/edge/webfonts/
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco Google Web fonts – www.google.com/fonts/
  66. 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 Buragawww.purl.org/net/busaco “Culoarea” tipografică indică densitatea texturii conținutului unei pagini
  67. 67. element-cheie al ușurinței parcurgerii conținutului Dr. Sabin Buragawww.purl.org/net/busaco Măsura definește lungimea unei linii de text
  68. 68. valori recomandate: 45—75 caractere (30—50 em) poate fi dificil de stabilit pentru layout-uri lichide Dr. Sabin Buragawww.purl.org/net/busaco Măsura
  69. 69. Dr. Sabin Buragawww.purl.org/net/busaco
  70. 70. uzual, titlurile (headings) nu necesită leading Dr. Sabin Buragawww.purl.org/net/busaco Leading (sau line-spacing) spațiul vertical dintre 2 linii de text
  71. 71. fonturile masive vor avea nevoie de leading mai mare fonturile sans-serif necesită mai mult leading decât cele serif Dr. Sabin Buragawww.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
  72. 72. Dr. Sabin Buragawww.purl.org/net/busaco de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
  73. 73. Dr. Sabin Buragawww.purl.org/net/busaco Cum organizăm informațiile?
  74. 74. liste de obiecte desemnate de substantive mesaje primite în inbox (e-mail-uri) recomandări de produse similare … Dr. Sabin Buragawww.purl.org/net/busaco Aplicațiile – tradiționale/Web – sunt organizate conform uneia sau mai multor abordări:
  75. 75. (secvențe de) acțiuni desemnate de verbe e.g., browse, buy, register, sell, subscribe,… Dr. Sabin Buragawww.purl.org/net/busaco Aplicațiile – tradiționale/Web – sunt organizate conform uneia sau mai multor abordări:
  76. 76. liste de categorii (subiecte) de interes exemple: știință, tehnologie, divertisment etc. Dr. Sabin Buragawww.purl.org/net/busaco Aplicațiile – tradiționale/Web – sunt organizate conform uneia sau mai multor abordări:
  77. 77. liste de instrumente/componente e.g., calendar, editor de texte, manager de resurse,… Dr. Sabin Buragawww.purl.org/net/busaco Aplicațiile – tradiționale/Web – sunt organizate conform uneia sau mai multor abordări:
  78. 78. în funcție de: natura & domeniul aplicației cunoștințele de bază ale utilizatorilor-țintă contextul interacțiunii Dr. Sabin Buragawww.purl.org/net/busaco Necesitatea organizării informațiilor prezentate
  79. 79. uzual, se recurge la diverse criterii de sortare: alfabetic spațial temporal conform semnificației … Dr. Sabin Buragawww.purl.org/net/busaco Prezentare liniară
  80. 80. se consideră 2 criterii/dimensiuni de interes exemplu: locație geografică + dată calendaristică Dr. Sabin Buragawww.purl.org/net/busaco Prezentare bidimensională
  81. 81. Dr. Sabin Buragawww.purl.org/net/busaco Prezentare bidimensională uzual, se adoptă o vizualizare bazată pe grilă (grid)
  82. 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 Buragawww.purl.org/net/busaco Prezentare ierarhică
  83. 83. spațial temporal conform profilului utilizatorului Dr. Sabin Buragawww.purl.org/net/busaco Prezentare bazata pe context
  84. 84. spațial temporal conform profilului utilizatorului exemplificări: hărți, chart-uri, timelines, informații recomandate,… Dr. Sabin Buragawww.purl.org/net/busaco Prezentare bazata pe context
  85. 85. pot utiliza combinații ale precedentelor Dr. Sabin Buragawww.purl.org/net/busaco Prezentari mixte (complexe)
  86. 86. Dr. Sabin Buragawww.purl.org/net/busaco
  87. 87. alinierea conținutului în cadrul unui formular/tabel Dr. Sabin Buragawww.purl.org/net/busaco Aspect de interes:
  88. 88. Dr. Sabin Buragawww.purl.org/net/busaco
  89. 89. Dr. Sabin Buragawww.purl.org/net/busaco
  90. 90. Dr. Sabin Buragawww.purl.org/net/busaco
  91. 91. Dr. Sabin Buragawww.purl.org/net/busaco
  92. 92. Care sunt mijloacele de explorare? Dr. Sabin Buragawww.purl.org/net/busaco
  93. 93. signposts titlul documentului Web sigle metode de redare a selecției … Dr. Sabin Buragawww.purl.org/net/busaco Localizarea obiectelor din “proximitate”
  94. 94. wayfinding good signage environmental clues maps Dr. Sabin Buragawww.purl.org/net/busaco Găsirea “drumului” care conduce utilizatorul către satisfacerea scopului
  95. 95. minimizarea distanțeiergonomia interfeței Dr. Sabin Buragawww.purl.org/net/busaco Aspect de interes
  96. 96. T. Tullis, B. Albert, Measuring the User Experience (2nd Edition), Morgan Kaufmann, 2013 Dr. Sabin Buragawww.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. 97. meniuri orizontale – informații, apoi acțiuni verticale: plate, expandabile, bi-nivel combinate Dr. Sabin Buragawww.purl.org/net/busaco Navigabilitatea
  98. 98. alte soluții legături conexe – e.g., navigare contextuală divizarea (paginarea) conținutului cele mai recente pagini vizitate Dr. Sabin Buragawww.purl.org/net/busaco Navigabilitatea
  99. 99. Dr. Sabin Buragawww.purl.org/net/busaco navigabilitate via harta sitului (site map)
  100. 100. căutare internă (site search engine) Dr. Sabin Buragawww.purl.org/net/busaco
  101. 101. left column navigation Dr. Sabin Buragawww.purl.org/net/busaco
  102. 102. right column navigation Dr. Sabin Buragawww.purl.org/net/busaco
  103. 103. three column navigation Dr. Sabin Buragawww.purl.org/net/busaco
  104. 104. three columns with content first Dr. Sabin Buragawww.purl.org/net/busaco
  105. 105. three column content Dr. Sabin Buragawww.purl.org/net/busaco
  106. 106. Dr. Sabin Buragawww.purl.org/net/busaco layout pentru desktop vs. layout pentru dispozitiv mobil (Ronan Cremin & Luca Passani, 2012)
  107. 107. Dr. Sabin Buragawww.purl.org/net/busaco navigabilitatea în contextul tabletelor (Ronan Cremin & Luca Passani, 2012)
  108. 108. navigare socială + navigare bazată pe termeni de conținut (tag-uri) http://www.hashtags.org/ http://tagdef.com/ Dr. Sabin Buragawww.purl.org/net/busaco Navigabilitatea
  109. 109. www.360cities.net Dr. Sabin Buragawww.purl.org/net/busaco navigare cartografică + 3D
  110. 110. semantici diferite ale legăturilor: navigare download procesare asociere de meta-date – exemplu: tagging Dr. Sabin Buragawww.purl.org/net/busaco Navigabilitatea
  111. 111. existența unor elemente navigaționale – plasate consistent – pentru conducerea utilizatorului spre secțiunile importante ale sitului/aplicației Web Dr. Sabin Buragawww.purl.org/net/busaco Regulă de bună practică:
  112. 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 Buragawww.purl.org/net/busaco Regulă de bună practică:
  113. 113. breadcrumbs indicarea drumului de la pagina principală până la documentul curent uzual, în cadrul unei ierarhii (taxonomii) Dr. Sabin Buragawww.purl.org/net/busaco Regulă de bună practică:
  114. 114. Dr. Sabin Buragawww.purl.org/net/busaco
  115. 115. Dr. Sabin Buragawww.purl.org/net/busaco Ce înseamnă responsive Web design?
  116. 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 Buragawww.purl.org/net/busaco Responsive Web design
  117. 117. flexible image (+media, +font) flexible/fluid grid Jacob Surber, The Page Is Dead, SXSWi 2012 www.slideshare.net/jacobsurber/page-death Dr. Sabin Buragawww.purl.org/net/busaco media queries
  118. 118. Media Queries (recomandare W3C, 2012) http://www.w3.org/TR/css3-mediaqueries/ Dr. Sabin Buragawww.purl.org/net/busaco rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media
  119. 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 Buragawww.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. 120. adaptarea mărimii și/sau folosirea fonturilor & graficii vectoriale (SVG – Scalable Vector Graphics) studii de caz: http://mediaqueri.es/ Dr. Sabin Buragawww.purl.org/net/busaco imagini & alte resurse grafice – e.g., video
  121. 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 Buragawww.purl.org/net/busaco responsive images
  122. 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 Buragawww.purl.org/net/busaco responsive Web fonts
  123. 123. Dr. Sabin Buragawww.purl.org/net/busaco layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului
  124. 124. alte strategii: adoptarea unităților de măsură relative pentru valorile unor proprietăți CSS (% em rem) Dr. Sabin Buragawww.purl.org/net/busaco Responsive Web design
  125. 125. alte strategii: linearizarea conținutului în contextul redării pe dispozitive mobile Dr. Sabin Buragawww.purl.org/net/busaco Responsive Web design
  126. 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 Buragawww.purl.org/net/busaco Responsive Web design
  127. 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 Buragawww.purl.org/net/busaco Responsive Web design
  128. 128. graceful degradation progressive enhancement mobile first responsive Web design în contextul designului Web Aaron Gustafson – http://www.slideshare.net/AaronGustafson Dr. Sabin Buragawww.purl.org/net/busaco responsive Web design
  129. 129. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco întrebări (pentru acasă)
  131. 131. episodul viitor: surpriză ♚ Dr. Sabin Buragawww.purl.org/net/busaco
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×