design (web) responsiv
TRANSCRIPT
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr. Sabin BuragaFacultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România
www.purl.org/net/busaco
invitație la un festin
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
aperitiv
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
am dori (să învățăm) să „preparăm” produse digitale
aplicații – desktop, Web, mobile, omniprezente,… –
oferind o funcționalitate specifică și/sau conținut de interes
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
ingrediente umane
proiectanți
(designers)
dezvoltatori
(technologists)
strategiști
(management)
Alan Cooper et al., About Face (4th Edition), 2014
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
evoluția proceselor de dezvoltare
a produselor digitale (software)Alan Cooper et al., 2014
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Care este interacțiunea cu produse digitale?
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
interacțiunea dintre utilizator(i) și software
este facilitată de o interfață cu utilizatorul
(user interface)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
așteptările utilizatorilor în ceea ce privește interfațaPeter Morville
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
utilizabilitate
se referă la maniera „adecvată” de exploatare
de către utilizatori a funcționalității unui sistem interactiv
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
learnabilitycât de ușor se învață utilizarea sistemului?
efficiencycare-i modul optim de utilizare a interfeței?
memorabilitycât de ușor e să ne reamintim interacțiunea cu aplicația?
errorscum pot fi prevenite/corectate erorile utilizatorului?
satisfactionutilizatorului îi place să folosească aplicația/serviciul?
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
experiența utilizatorului
(UX – User Experience)
definește percepția unui produs/serviciu (digital)
din punctul de vedere al persoanei/persoanelor
care-l utilizează și aparenta plăcere/satisfacție conferită
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
http://garrettdimon.com/pages/improving_interface_design
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
felul întâi
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Proiectarea interacțiunii cu utilizatorul
(interaction design)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
interacțiunea e deseori influențată de context: scopurile și atitudinea utilizatorului (e.g., starea emoțională),
timpul disponibil, localizarea, mediul (social/cultural),…
http://optimizely.slides.com/tobyurff/deliver-ux-that-converts-on-web-mobile-and-apps
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co“Design, v.: What you regret not doing later on.”/usr/games/fortune
“I’ve been amazed at how often those outside
the discipline of design assume that what designers
do is decoration. Good design is problem solving.”Jeff Veen
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Tradițional, interacțiunea cu utilizatorul
recurge la elemente de interfață
suprafețe de redarepagini, zone interactive,…
elemente de interacțiunecâmpuri de intrare (input fields), legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Cum percepe utilizatorul interfața?
design vizual
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Elemente importante ale designului vizual (Dan Safer, 2006)
layoutgrid
visual flowtypography
color, shape, texture
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
layout
unde și cum sunt plasate conținutul
și mijloacele de interacțiune
http://alistapart.com/topic/layout-grids
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
layout pentru desktop vs. layout pentru dispozitiv mobil
(Ronan Cremin & Luca Passani, 2012)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
layout fixlățime prestabilită
versus
layout „lichid ”lățime variabilă
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
colayout
e facilitat și de template-uri (machete de prezentare)
specificarea aranjamentului și stilului vizual
via HTML + CSS + conținuturi grafice
exemplificare: WordPress Themes – http://wordpress.org/themes/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
utilizând specificații de prezentare a conținutului (Web template),
datele persistente (e.g., preluate dintr-o bază de date)
sunt folosite de un procesor – template engine –
pentru a genera documente HTML ori alte formate
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
la nivel de server
Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…),
Smarty (PHP), Velocity (Java) etc.
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
la nivel de client
disponibile pentru JavaScript: Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
grid
oferă o structură coerentă a informațiilor prezentate
www.thegridsystem.org
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
aranjamentul spațial poate fi stabilit via grid – uzual, în tipografieaici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
visual flow
vizează metodele de înțelegere de către utilizator
a datelor prezentate și/sau de interacțiune cu acestea
context:
arhitectura informațiilor (Information Architecture)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
visual flowasigurarea echilibrului orizontal/vertical
simetrie versus asimetrie
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
visual flowgruparea diverselor elemente de interfațăunitate
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
visual flowpoate fi realizat și prin intermediul contrastului,
recurgând la diverse variabile vizuale
asigurarea focalizării atenției
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
chromatique
culoarea considerată cod vizual,
indicând categoria (tipul) de informații redate utilizatorului
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
„roata” culorilor pentru Web
culori caldeculori reci
armonie cromaticăredarea plăcută a elementelor de interesestetică vizuală
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
instrumente pentru „prepararea” de palete cromatice
Color Scheme Designer – colorschemedesigner.com
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
typography
prezentarea conținutului textual via corpuri de literă
(fonturi) conform unor anumite reguli de prezentare
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
typography
NU înseamnă alegerea unui font „gustos”
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
în contextul Web-ului, a se studia http://webtypography.net/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
navigabilitate
găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
minimizarea distanțeiergonomia interfeței
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
navigabilitate
„ingrediente” principale:
meniuri, legături conexe, divizarea conținutului,
harta sitului (site map), căutare internă (site search)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
navigabilitate
navigare multicriterială (faceted navigation/search)
navigare socială
navigare bazată pe termeni de conținut – tag-uri
navigare cartografică
…
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
navigabilitate
semantici diferite ale legăturilor hipermedia:
navigare
download
procesare
asociere de meta-date – exemplu: tagging
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
felul al doilea
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
multitudinea dimensiunilor „meselor” cu care
interacționăm pentru a savura diverse „festinuri” Web
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
responsive Web design
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare a ecranului, rezoluție, densitate de pixeli,…)
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
diverse „delicatese” oferite și de https://responsivedesign.is/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
comedia queries
flexible image (+media, +font)
flexible/fluid grid
Jacob Surber, “The Page Is Dead”, SXSWi 2012
www.slideshare.net/jacobsurber/page-death
Dr.
Sabin
-Cor
neliu
Bur
aga
–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 a Consorțiului Web, 2012)
www.w3.org/TR/css3-mediaqueries/
Dr.
Sabin
-Cor
neliu
Bur
aga
–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
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
iPhone 5
(320 px)
iPhone 6
(667 px)
Android
(240 px)
iPad 2
(1024 px)
„degustarea” designului Web cu instrumentul Responsinatorhttp://www.responsinator.com/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
multimedia responsive
imagini flexibile + alte resurse grafice – e.g., video
<picture>
<source media="(min-width: 40em)"
srcset="mare.jpg 1x, mare-hd.jpg 2x"/>
<source srcset="mic.jpg 1x, mic-hd.jpg 2x" />
<img src="implicit.jpg" alt="..." />
</picture>
<img src="mic.jpg" alt="Un cârnat apetisant"
srcset="mare.jpg 1024w, mediu.jpg 640w, mic.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw" />
informații de interes la https://responsiveimages.org/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
diverse studii de caz sunt servite de http://mediaqueri.es/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
multimedia responsive
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
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
fonturi Web responsive
fonturile externe nu trebuie încărcate în contextul dispozitivelor
având rezoluții reduse ale ecranului
soluții:
încărcarea asincronă a fonturilor (Web font loading)
considerarea graficii vectoriale – SVG (Scalable Vector Graphics)
detalii la http://webtypography.net/talks/rdo13/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
layout-urile flexibile utilizează lățimi relative
pentru coloane în vederea organizării conținutului
Dr.
Sabin
-Cor
neliu
Bur
aga
–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)
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
alte strategii:
linearizarea conținutului
în contextul redării pe dispozitive mobile
layout shifter column drop
http://www.lukew.com/ff/entry.asp?1514
Dr.
Sabin
-Cor
neliu
Bur
aga
–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" />
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
desert
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
responsive Web design patterns
șablon de proiectare = „rețetă” ce poate fi pusă în aplicare
într-un context pentru rezolvarea unei probleme date
o „carte de bucate” cu rețete vizând proiectarea interacțiunii:
http://profs.info.uaic.ro/~evalica/patterns/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
http://bradfrost.github.com/this-is-responsive/patterns.html
șabloane de proiectare pentru aranjament
spațial, navigare, conținut grafic, formulare,…
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
situație:
conținut tabelar responsiv (responsive table)
posibile soluții:
http://exisweb.net/responsive-table-plugins-and-patterns
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
situație:
conținut responsiv trimis prin poșta electronică (responsive e-mail)
șabloane de proiectare:
http://responsiveemailpatterns.com/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
…de „savurat” și niște instrumente Web specifice:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Semantic UI – semantic-ui.com
Skeleton – www.getskeleton.com
UIKit – getuikit.com
Web Starter Kit – developers.google.com/web/starter-kit/
Dr.
Sabin
-Cor
neliu
Bur
aga
–www
.purl.
org/
net/
busa
co
conținut grafic bazat pe scene din serialul „Hannibal” – www.nbc.com/hannibal/
poftă bună la experimente!