Design (Web) responsiv

transcript

–www

.purl.

Dr. Sabin BuragaFacultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România

www.purl.org/net/busaco

invitație la un festin

–www

.purl.

aperitiv

–www

.purl.

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

–www

.purl.

ingrediente umane

proiectanți

(designers)

dezvoltatori

(technologists)

strategiști

(management)

Alan Cooper et al., About Face (4th Edition), 2014

–www

.purl.

evoluția proceselor de dezvoltare

a produselor digitale (software)Alan Cooper et al., 2014

–www

.purl.

Care este interacțiunea cu produse digitale?

–www

.purl.

–www

.purl.

interacțiunea dintre utilizator(i) și software

este facilitată de o interfață cu utilizatorul

(user interface)

–www

.purl.

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

–www

.purl.

utilizabilitate

se referă la maniera „adecvată” de exploatare

de către utilizatori a funcționalității unui sistem interactiv

–www

.purl.

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?

–www

.purl.

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

–www

.purl.

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ă

–www

.purl.

http://garrettdimon.com/pages/improving_interface_design

–www

.purl.

felul întâi

–www

.purl.

Proiectarea interacțiunii cu utilizatorul

(interaction design)

–www

.purl.

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

–www

.purl.

–www

.purl.

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

–www

.purl.

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.

–www

.purl.

Cum percepe utilizatorul interfața?

design vizual

–www

.purl.

Elemente importante ale designului vizual (Dan Safer, 2006)

layoutgrid

visual flowtypography

color, shape, texture

–www

.purl.

–www

.purl.

layout

unde și cum sunt plasate conținutul

și mijloacele de interacțiune

http://alistapart.com/topic/layout-grids

–www

.purl.

layout pentru desktop vs. layout pentru dispozitiv mobil

(Ronan Cremin & Luca Passani, 2012)

–www

.purl.

layout fixlățime prestabilită

versus

layout „lichid ”lățime variabilă

–www

.purl.

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/

–www

.purl.

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

–www

.purl.

la nivel de server

Haml (Ruby), Mustache (C++, JS, PHP, Python, Scala,…),

Smarty (PHP), Velocity (Java) etc.

–www

.purl.

la nivel de client

disponibile pentru JavaScript: Dust.js, Ejs, HandleBars, Mustache, Nunjucks,…

–www

.purl.

oferă o structură coerentă a informațiilor prezentate

www.thegridsystem.org

–www

.purl.

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

–www

.purl.

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)

–www

.purl.

–www

.purl.

visual flowasigurarea echilibrului orizontal/vertical

simetrie versus asimetrie

–www

.purl.

visual flowgruparea diverselor elemente de interfațăunitate

–www

.purl.

visual flowpoate fi realizat și prin intermediul contrastului,

recurgând la diverse variabile vizuale

asigurarea focalizării atenției

–www

.purl.

chromatique

culoarea considerată cod vizual,

indicând categoria (tipul) de informații redate utilizatorului

–www

.purl.

„roata” culorilor pentru Web

culori caldeculori reci

armonie cromaticăredarea plăcută a elementelor de interesestetică vizuală

–www

.purl.

instrumente pentru „prepararea” de palete cromatice

Color Scheme Designer – colorschemedesigner.com

colr – www.colr.org

Colrd – colrd.com

Color Explorer – colorexplorer.com

–www

.purl.

typography

prezentarea conținutului textual via corpuri de literă

(fonturi) conform unor anumite reguli de prezentare

–www

.purl.

typography

NU înseamnă alegerea unui font „gustos”

–www

.purl.

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

–www

.purl.

navigabilitate

găsirea „drumului” care conduce utilizatorul

către satisfacerea scopului

minimizarea distanțeiergonomia interfeței

–www

.purl.

navigabilitate

„ingrediente” principale:

meniuri, legături conexe, divizarea conținutului,

harta sitului (site map), căutare internă (site search)

–www

.purl.

navigabilitate

navigare multicriterială (faceted navigation/search)

navigare socială

navigare bazată pe termeni de conținut – tag-uri

navigare cartografică

–www

.purl.

–www

.purl.

navigabilitate

semantici diferite ale legăturilor hipermedia:

navigare

download

procesare

asociere de meta-date – exemplu: tagging

–www

.purl.

felul al doilea

–www

.purl.

multitudinea dimensiunilor „meselor” cu care

interacționăm pentru a savura diverse „festinuri” Web

–www

.purl.

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/

–www

.purl.

comedia queries

flexible image (+media, +font)

flexible/fluid grid

Jacob Surber, “The Page Is Dead”, SXSWi 2012

www.slideshare.net/jacobsurber/page-death

–www

.purl.

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/

–www

.purl.

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

–www

.purl.

–www

.purl.

iPhone 5

(320 px)

iPhone 6

(667 px)

Android

(240 px)

iPad 2

(1024 px)

„degustarea” designului Web cu instrumentul Responsinatorhttp://www.responsinator.com/

–www

.purl.

multimedia responsive

imagini flexibile + alte resurse grafice – e.g., video

<source media="(min-width: 40em)"

srcset="mare.jpg 1x, mare-hd.jpg 2x"/>

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

–www

.purl.

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

–www

.purl.

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

–www

.purl.

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/

–www

.purl.

layout-urile flexibile utilizează lățimi relative

pentru coloane în vederea organizării conținutului

–www

.purl.

alte strategii:

adoptarea unităților de măsură relative

pentru valorile unor proprietăți CSS (% em rem)

–www

.purl.

alte strategii:

linearizarea conținutului

în contextul redării pe dispozitive mobile

layout shifter column drop

http://www.lukew.com/ff/entry.asp?1514

–www

.purl.

alte strategii:

stabilirea zonei de redare (viewport)

la dimensiunea reală a ecranului dispozitivului

–www

.purl.

desert

–www

.purl.

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/

–www

.purl.

http://bradfrost.github.com/this-is-responsive/patterns.html

șabloane de proiectare pentru aranjament

spațial, navigare, conținut grafic, formulare,…

–www

.purl.

situație:

conținut tabelar responsiv (responsive table)

posibile soluții:

http://exisweb.net/responsive-table-plugins-and-patterns

–www

.purl.

situație:

conținut responsiv trimis prin poșta electronică (responsive e-mail)

șabloane de proiectare:

http://responsiveemailpatterns.com/

–www

.purl.

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

–www

.purl.

conținut grafic bazat pe scene din serialul „Hannibal” – www.nbc.com/hannibal/

poftă bună la experimente!