+ All Categories
Home > Design > Design (Web) responsiv

Design (Web) responsiv

Date post: 16-Aug-2015
Category:
Upload: sabin-buraga
View: 644 times
Download: 3 times
Share this document with a friend
71
Dr. Sabin-Corneliu Buraga 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
Transcript
Page 1: Design (Web) responsiv

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

Page 2: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

aperitiv

Page 3: Design (Web) responsiv

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

Page 4: Design (Web) responsiv

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

Page 5: Design (Web) responsiv

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

Page 6: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Care este interacțiunea cu produse digitale?

Page 7: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 8: Design (Web) responsiv

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)

Page 9: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

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

Page 10: Design (Web) responsiv

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

Page 11: Design (Web) responsiv

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?

Page 12: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

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

Page 13: Design (Web) responsiv

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ă

Page 14: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

http://garrettdimon.com/pages/improving_interface_design

Page 15: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

felul întâi

Page 16: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Proiectarea interacțiunii cu utilizatorul

(interaction design)

Page 17: Design (Web) responsiv

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

Page 18: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 19: Design (Web) responsiv

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

Page 20: Design (Web) responsiv

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.

Page 21: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Cum percepe utilizatorul interfața?

design vizual

Page 22: Design (Web) responsiv

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

Page 23: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 24: Design (Web) responsiv

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

Page 25: Design (Web) responsiv

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)

Page 26: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

layout fixlățime prestabilită

versus

layout „lichid ”lățime variabilă

Page 27: Design (Web) responsiv

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/

Page 28: Design (Web) responsiv

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

Page 29: Design (Web) responsiv

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.

Page 30: Design (Web) responsiv

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

Page 31: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

grid

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

www.thegridsystem.org

Page 32: Design (Web) responsiv

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

Page 33: Design (Web) responsiv

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)

Page 34: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 35: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

visual flowasigurarea echilibrului orizontal/vertical

simetrie versus asimetrie

Page 36: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

visual flowgruparea diverselor elemente de interfațăunitate

Page 37: Design (Web) responsiv

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

Page 38: Design (Web) responsiv

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

Page 39: Design (Web) responsiv

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ă

Page 40: Design (Web) responsiv

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

Page 41: Design (Web) responsiv

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

Page 42: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

typography

NU înseamnă alegerea unui font „gustos”

Page 43: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

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

Page 44: Design (Web) responsiv

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

Page 45: Design (Web) responsiv

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)

Page 46: Design (Web) responsiv

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ă

Page 47: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 48: Design (Web) responsiv

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

Page 49: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

felul al doilea

Page 50: Design (Web) responsiv

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

Page 51: Design (Web) responsiv

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/

Page 52: Design (Web) responsiv

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

Page 53: Design (Web) responsiv

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/

Page 54: Design (Web) responsiv

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

Page 55: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

Page 56: Design (Web) responsiv

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/

Page 57: Design (Web) responsiv

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/

Page 58: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

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

Page 59: Design (Web) responsiv

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

Page 60: Design (Web) responsiv

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/

Page 61: Design (Web) responsiv

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

Page 62: Design (Web) responsiv

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)

Page 63: Design (Web) responsiv

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

Page 64: Design (Web) responsiv

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

Page 65: Design (Web) responsiv

Dr.

Sabin

-Cor

neliu

Bur

aga

–www

.purl.

org/

net/

busa

co

desert

Page 66: Design (Web) responsiv

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/

Page 67: Design (Web) responsiv

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

Page 68: Design (Web) responsiv

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

Page 69: Design (Web) responsiv

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/

Page 70: Design (Web) responsiv

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/

Page 71: Design (Web) responsiv

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!


Recommended