Design (Web) responsiv

Dr.Sabin-CorneliuBuraga–www.purl.org/net/busaco
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România
www.purl.org/net/busaco
invitație la un festin

aperitiv

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

ingrediente umane
proiectanți
(designers)
dezvoltatori
(technologists)
strategiști
(management)
Alan Cooper et al., About Face (4th Edition), 2014

evoluția proceselor de dezvoltare
a produselor digitale (software)
Alan Cooper et al., 2014

Care este interacțiunea cu produse digitale?

interacțiunea dintre utilizator(i) și software
este facilitată de o interfață cu utilizatorul
(user interface)

așteptările utilizatorilor în ceea ce privește interfața
Peter Morville

utilizabilitate
se referă la maniera „adecvată” de exploatare
de către utilizatori a funcționalității unui sistem interactiv

learnability
cât de ușor se învață utilizarea sistemului?
efficiency
care-i modul optim de utilizare a interfeței?
memorability
cât de ușor e să ne reamintim interacțiunea cu aplicația?
errors
cum pot fi prevenite/corectate erorile utilizatorului?
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?

http://noisydecentgraphics.typepad.com/design/images/2008/03/11/yourproduct.jpg

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ă

http://garrettdimon.com/pages/improving_interface_design

felul întâi

Proiectarea interacțiunii cu utilizatorul
(interaction design)

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

“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

Tradițional, interacțiunea cu utilizatorul
recurge la elemente de interfață
suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare (input fields), legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.

Cum percepe utilizatorul interfața?
design vizual

Elemente importante ale designului vizual
(Dan Safer, 2006)
layout
grid
visual flow
typography
color, shape, texture

layout
unde și cum sunt plasate conținutul
și mijloacele de interacțiune
http://alistapart.com/topic/layout-grids

layout pentru desktop vs. layout pentru dispozitiv mobil
(Ronan Cremin & Luca Passani, 2012)

layout fix
lățime prestabilită
versus
layout „lichid ”
lățime variabilă

layout
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/

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

la nivel de server
Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…),
Smarty (PHP), Velocity (Java) etc.

la nivel de client
disponibile pentru JavaScript:
Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…

grid
oferă o structură coerentă a informațiilor prezentate
www.thegridsystem.org

aranjamentul spațial poate fi stabilit via grid – uzual, în tipografie
aici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout

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)

visual flow
asigurarea echilibrului orizontal/vertical
simetrie versus asimetrie

visual flow
gruparea diverselor elemente de interfațăunitate

visual flow
poate fi realizat și prin intermediul contrastului,
recurgând la diverse variabile vizuale
asigurarea focalizării atenției

chromatique
culoarea considerată cod vizual,
indicând categoria (tipul) de informații redate utilizatorului

„roata” culorilor pentru Web
culori caldeculori reci
armonie cromatică
redarea plăcută a elementelor de interesestetică vizuală

instrumente pentru „prepararea” de palete cromatice
Color Scheme Designer – colorschemedesigner.com
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com

typography
prezentarea conținutului textual via corpuri de literă
(fonturi) conform unor anumite reguli de prezentare

typography
NU înseamnă alegerea unui font „gustos”

în contextul Web-ului, a se studia http://webtypography.net/

navigabilitate
găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
minimizarea distanțeiergonomia interfeței

navigabilitate
„ingrediente” principale:
meniuri, legături conexe, divizarea conținutului,
harta sitului (site map), căutare internă (site search)

navigabilitate
navigare multicriterială (faceted navigation/search)
navigare socială
navigare bazată pe termeni de conținut – tag-uri
navigare cartografică
…

navigabilitate
semantici diferite ale legăturilor hipermedia:
navigare
download
procesare
asociere de meta-date – exemplu: tagging

felul al doilea

multitudinea dimensiunilor „meselor” cu care
interacționăm pentru a savura diverse „festinuri” Web

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/

media queries
flexible image (+media, +font)
flexible/fluid grid
Jacob Surber, “The Page Is Dead”, SXSWi 2012
www.slideshare.net/jacobsurber/page-death

rezoluții de ecran diverserecurgerea 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/

iPhone 5
(320 px)
iPhone 6
(667 px)
Android
(240 px)
iPad 2
(1024 px)
„degustarea” designului Web cu instrumentul Responsinator
http://www.responsinator.com/

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/

diverse studii de caz sunt servite de http://mediaqueri.es/

multimedia responsive
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

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/

layout-urile flexibile utilizează lățimi relative
pentru coloane în vederea organizării conținutului

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

alte strategii:
linearizarea conținutului
în contextul redării pe dispozitive mobile
layout shifter column drop
http://www.lukew.com/ff/entry.asp?1514

alte strategii:
stabilirea zonei de redare (viewport)
la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1" />

desert

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/

http://bradfrost.github.com/this-is-responsive/patterns.html
șabloane de proiectare pentru aranjament
spațial, navigare, conținut grafic, formulare,…

situație:
conținut tabelar responsiv (responsive table)
posibile soluții:
http://exisweb.net/responsive-table-plugins-and-patterns

situație:
conținut responsiv trimis prin poșta electronică (responsive e-mail)
șabloane de proiectare:
http://responsiveemailpatterns.com/

…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/

conținut grafic bazat pe scene din serialul „Hannibal” – www.nbc.com/hannibal/
poftă bună la experimente!

Design (Web) responsiv

More Related Content

What's hot

Viewers also liked

Similar to Design (Web) responsiv

More from Sabin Buraga

Design (Web) responsiv