CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv
-
Upload
sabin-buraga -
Category
Technology
-
view
304 -
download
6
Transcript of CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv
![Page 1: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
⎚de la design vizual
la design Web responsiv
![Page 2: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Există o „rețetă” de proiectare judicioasăa interfețelor Web?
![Page 3: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 4: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspecte importante:
funcția – designul (proiectarea) bun(ă) oferă suportpentru 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
![Page 5: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspecte importante:
funcția – designul (proiectarea) bun(ă) oferă suportpentru 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
![Page 6: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“Attractive things work better.” (Donald Norman)
CSS Zen Garden – www.csszengarden.com
![Page 7: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Tradițional, interacțiunea cu utilizatorulva recurge la elemente de interfață
suprafețe de redarepagini, zone interactive,…
elemente de interacțiunecâmpuri de intrare, legături, controale specifice etc.
![Page 8: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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)
![Page 9: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?
![Page 10: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Design vizual
reprezentările vizuale trebuie să fie ușor percepute și recunoscute
recognition vs. recall
![Page 11: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Design vizual
reprezentările vizuale trebuie să fie ușor percepute și recunoscute
recognition vs. recall
metafore & idiomuri
![Page 12: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
pictograme & simbolurimetafore vizuale
![Page 13: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
pictograme & simbolurimetafore vizuale
![Page 14: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
pictograme & simbolurimetafore vizuale
![Page 15: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“Metaphors create insight. But they also distort.They have strengths. But they also have limitations.”
Gareth Morgan
![Page 16: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Metaforele sunt utilizate pentru a reda și/sau a crea asociații mentale
![Page 17: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
concurs: metafore și/sau idiomuri
⋆ ⋆ ⋆ premii!?
![Page 18: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Design vizual
un design bun implică alegerea echilibratăa relațiilor dintre elementele care creează conținutul
![Page 19: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Design vizual
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
![Page 20: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
layout-ul generic al unei pagini Web
![Page 21: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Fiecare pagină Web include un container (container block) care va cuprinde
conținutul propriu-zis
<div class="content">…</div>
![Page 22: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
layout fixlățime prestabilită
versus
layout lichidlățime variabilă
![Page 23: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente Web specifice – exemplificări:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Frameless – framelessgrid.com
Skeleton – www.getskeleton.com
The Semantic Grid System – semantic.gs
Web Starter Kit – developers.google.com/web/starter-kit/
![Page 24: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Layout-ul e facilitat de template-uri (șabloane vizuale)
specificarea aranjamentului & stilului vizualvia HTML + CSS + conținuturi grafice
exemplificare: WordPress templateshttp://wordpress.org/themes/
![Page 25: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Recurgerea la sisteme de aplicare a șabloanelorde prezentare – Web template systems/engines
oferite implicit de unele servere de aplicații oriframework-uri Web sau disponibile ca extensii
![Page 26: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Layout-ul poate fi stabilit via grid
des folosit în tipografie
www.thegridsystem.org
![Page 27: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 28: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Reguli privind layout-ulsecțiunea de aurcele 3 coloanesimplitateabalansulunitatea
![Page 29: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
a se studia și articolele oferite de A List Apartwww.alistapart.com/topics/design/layout/
![Page 30: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Greșeli comune:poziții arbitrare ale elementelor componente
dimensiuni arbitrare ale elementelormărimi și reprezentări arbitrare ale imaginilor
prezentări inconsistentelimbaje vizuale inconsistente
![Page 31: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Balansulasigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie
![Page 32: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 33: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Unitateamodul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)
uzual, se realizează prin grupare
![Page 34: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Criterii de grupare
spațială
cromatică
via elemente (grafice) de separaree.g., linii orizontale, aliniere diferită etc.
![Page 35: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)din fragmentele existente
![Page 36: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
diverse exemple: http://tinyurl.com/y6ao7k
![Page 37: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Fluxul (flow) vizual
poate fi realizat și prin intermediul contrastuluiasigurarea focalizării atenției
![Page 38: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 39: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Tipuri de contrast pe baza variabilelor vizuale
![Page 40: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 41: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cromatica
culoarea considerată cod vizual,indicând categoria (tipul) de informații
redate utilizatorului
![Page 42: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cromatica
un set de culori poate avea semantici diferite,în funcție de situațiile survenite și de audiență
poate stabili ambientul
![Page 43: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cromatica
utilizarea a maxim 4 culori afişate simultan
![Page 44: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cromatica
utilizarea a maxim 4 culori afișate simultan
evitarea supraîncărcării cognitive
![Page 45: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“Roata” culorilor pentru Web
culori calde
culori reci
![Page 46: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Armonie cromatică
redarea plăcută a elementelor de interes(în acest context: culorile)
estetică vizuală
www.interaction-design.org/encyclopedia/visual_aesthetics.html
![Page 47: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
armonie complementară
![Page 48: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
armonie bazată pe 3 culori (triadă)
![Page 49: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
armonie analogă accentuată
![Page 50: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cromatica
contextul în care apare o culoare este foarte important
anumite culori au conotații multiple
verde = victorie (Grecia antică) verde = fertilitate (Evul mediu)
![Page 51: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
coChina fericirenaștereputere
paradis nori
paradis nori
moarte puritate
Franțaaristo-crație
tempo-rar
crimi-nalitate
liberpace
neutra-litate
Indiaviață
creati-vitate
succesprospe-
ritatefertil
moarte puritate
Japoniafurie
pericolgrațienobil
viitor tinerețe
răutate moarte
USApericol,
stoplașitate atenție
sigu-ranță
mascu-linitate
puritate
atenție la utilizarea internaționalăwebdesignerwall.com/general/cultural-considerations-for-global-websites
![Page 52: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente pentru generarea de palete cromatice(exemplificări)
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
![Page 53: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care sunt aspectele de interesprivind redarea conținutului textual?
![Page 54: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Typography
componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
typos (impresie) + grapheia (scriere)
![Page 55: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
în contextul Web-ului, a se studia http://webtypography.net/
![Page 56: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere
![Page 57: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere
Font: Caracter Semn
![Page 58: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
dimensiunemă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
![Page 59: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
proporțiaindică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)
![Page 60: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
familia de fontclasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: font-family
![Page 61: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
familia de fontinclude fontul de bază + variants (italic, bold, bold italic)
![Page 62: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
serif
sans-serif
cursive
fantasy
monospace
![Page 63: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
fonturi “sigure” pentru Webdisponibile pe orice sistem
![Page 64: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
utilizarea/încărcarea de la distanțăa unor (colecții de) fonturi
proprietatea @font-face definită de CSS – nivelul 3
CSS Fonts Module Level 3 (W3C Candidate Recommendation, 2013) – www.w3.org/TR/css3-fonts/
![Page 65: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Corpul de literă
WOFF (Web Open Font Format)include formatele TrueType, OpenType, Open Font Format
recomandare W3C (decembrie 2012)
www.w3.org/TR/WOFF/
![Page 66: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Adobe Edge Web Fontshttps://creative.adobe.com/products/webfonts
![Page 67: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Google Web fonts – www.google.com/fonts/
![Page 68: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
„Culoarea” tipograficăindică densitatea texturii conținutului unei pagini
“It refers only to the darkness or blacknessof the letterform in mass.”
Robert Bringhurst, The Elements of Typographic Style
a se vizita și http://typographica.org/
![Page 69: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Măsuradefinește lungimea unei linii de text
element-cheie al ușurinței parcurgerii conținutului
![Page 70: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Măsura
valori recomandate: 45—75 caractere (30—50 em)
poate fi dificil de stabilit pentru layout-uri lichide
![Page 71: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 72: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Leading (sau line-spacing)spațiul vertical dintre 2 linii de text
uzual, titlurile (headings) nu necesită leading
![Page 73: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Leading (sau line-spacing)spațiul vertical dintre 2 linii de text
fonturile masive vor avea nevoie de leading mai mare
fonturile sans-serif necesitămai mult leading decât cele serif
lățimea mai mare a liniei conduce la creșterea leading-ului
![Page 74: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
![Page 75: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cum organizăm informațiile?
![Page 76: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
liste de obiecte
mesaje primite în inbox (e-mail-uri)recomandări de produse similare
…
desemnate de substantive
![Page 77: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
(secvențe de) acțiuni
e.g., browse, buy, register, sell, subscribe,…
desemnate de verbe
![Page 78: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
liste de categorii (subiecte) de interes
exemple: știință, tehnologie, divertisment etc.
![Page 79: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aplicațiile – tradiționale/Web – sunt organizateconform uneia sau mai multor abordări:
liste de instrumente/componente
e.g., calendar, editor de texte, manager de resurse,…
![Page 80: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Necesitatea organizării informațiilor prezentate
în funcție de:natura & domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintăcontextul interacțiunii
![Page 81: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare liniară
uzual, se recurge la diverse criterii de sortare:alfabeticspațial
temporalconform semnificației
…
![Page 82: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 83: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare bidimensională
se consideră 2 criterii/dimensiuni de interes
exemplu:locație geografică + dată calendaristică
![Page 84: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare bidimensională
uzual, se adoptă o vizualizare bazată pe grilă (grid)
![Page 85: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 86: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare ierarhică
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
![Page 87: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 88: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare bazată pe context
spațialtemporal
conform profilului utilizatorului
![Page 89: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentare bazată pe context
spațialtemporal
conform profilului utilizatorului
exemplificări:hărți, chart-uri, timelines, informații recomandate,…
![Page 90: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 91: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Prezentări mixte (complexe)
pot utiliza combinații ale precedentelor
![Page 92: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 93: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspect de interes:
alinierea conținutului în cadrul unui formular/tabel
![Page 94: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 95: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 96: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 97: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 98: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care sunt mijloacele de explorare?
![Page 99: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Localizarea obiectelor din „proximitate”
signposts
titlul documentului Websigle
metode de redare a selecției…
![Page 100: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului
wayfinding
good signageenvironmental clues
maps
![Page 101: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspect de interes
minimizarea distanțeiergonomia interfeței
![Page 102: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
deși numărul optim de pași (click-uri) este 3, utilizatorul realizează 9 acțiuni, fiind „pierdut în spațiu”
T. Tullis, B. Albert, Measuring the User Experience(2nd Edition), Morgan Kaufmann, 2013
![Page 103: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Navigabilitatea
meniuri
orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel
combinate
![Page 104: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Navigabilitatea
alte soluții
legături conexe – e.g., navigare contextualădivizarea (paginarea) conținutului
cele mai recente pagini vizitate
![Page 105: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
navigabilitate via harta sitului (site map)
![Page 106: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
căutare internă (site search engine)
![Page 107: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
left column navigation
![Page 108: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
right column navigation
![Page 109: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
three column navigation
![Page 110: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
three columns with content first
![Page 111: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
three column content
![Page 112: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
layout pentru desktop vs. layout pentru dispozitiv mobil(Ronan Cremin & Luca Passani, 2012)
![Page 113: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
navigabilitatea în contextul tabletelor(Ronan Cremin & Luca Passani, 2012)
![Page 114: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Navigabilitatea
navigare socială+
navigare bazată pe termeni de conținut (tag-uri)
http://www.hashtags.org/
http://tagdef.com/
![Page 115: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
www.360cities.net
navigare cartografică + 3D
![Page 116: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/116.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Navigabilitatea
semantici diferite ale legăturilor:navigaredownloadprocesare
asociere de meta-date – exemplu: tagging
![Page 117: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/117.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regulă de bună practică:
existența unor elemente navigaționale– plasate consistent –
pentru conducerea utilizatoruluispre secțiunile importante ale sitului/aplicației Web
![Page 118: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/118.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regulă de bună practică:
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
![Page 119: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/119.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regulă de bună practică:
breadcrumbsindicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii)
![Page 120: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/120.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 121: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/121.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Ce înseamnă responsive Web design?
![Page 122: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/122.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design(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/
![Page 123: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/123.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
media queries
flexible image (+media, +font)
flexible/fluid grid
Jacob Surber, The Page Is Dead, SXSWi 2012www.slideshare.net/jacobsurber/page-death
![Page 124: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/124.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media
Media Queries (recomandare W3C, 2012)http://www.w3.org/TR/css3-mediaqueries/
![Page 125: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/125.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />
@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 */ }
pentru alte detalii, a se studia http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
![Page 126: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/126.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
imagini flexibile + alte resurse grafice – e.g., video
adaptarea mărimii și/sau folosirea fonturilor & graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http://mediaqueri.es/
![Page 127: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/127.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
responsive images
client – recurgerea la biblioteci JavaScript precumHiSRC – 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
![Page 128: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/128.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
responsive Web fonts
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/
![Page 129: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/129.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului
![Page 130: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/130.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design
alte strategii:
adoptarea unităților de măsură relative pentru valorile unor proprietăți CSS (% em rem)
![Page 131: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/131.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design
alte strategii:
linearizarea conținutuluiîn contextul redării pe dispozitive mobile
![Page 132: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/132.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design
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; }
}
![Page 133: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/133.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design
alte strategii:
stabilirea zonei de redare (viewport) la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1" />
![Page 134: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/134.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
gracefuldegradation
progressiveenhancement
responsiveWeb design
mobile first
responsive Web design în contextul designului WebAaron Gustafson – http://www.slideshare.net/AaronGustafson
![Page 135: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/135.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
http://bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns: șabloane de proiectare pentru layout, navigare, conținut grafic, formulare,…
![Page 136: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/136.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Responsive Web design
ca studii de caz, de studiat:
prezentările lui Tom Maslenhttps://speakerdeck.com/tmaslen
testarea designului Web la nivel de dispozitiv mobilhttp://mobiletestingfordummies.tumblr.com/
![Page 137: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/137.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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,…)?
întrebări (pentru acasă)
![Page 138: CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv](https://reader033.fdocumente.com/reader033/viewer/2022042518/55a4dd931a28ab37768b45e6/html5/thumbnails/138.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
episodul viitor: vizualizarea datelor