CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
〄
de la design vizual
la design Web responsiv

“Computers are to design
as microwaves are to cooking.”
Milton Glaser

Există o „rețetă” de proiectare judicioasă
a interfețelor Web?

Aspecte importante:
funcția – designul (proiectarea) bun(ă) oferă suport
pentru 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

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

Cum percepe utilizatorul interfața?
pe baza
simțurilor
(human senses)
A.-H.Pool(2015):https://commons.wikimedia.org/wiki/File:Five_senses.jpg

Design vizual
layout
grid
visual flow
typography
color, shape, texture
conform Dan Saffer (2006)

Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?

Design vizual
reprezentările vizuale
trebuie să fie ușor percepute și recunoscute
recognition (recunoaștere)
versus
recall (reamintire)

pictograme & simbolurimetafore vizuale

Metaforele sunt utilizate
pentru a reda și/sau a crea asociații mentale

discuție
metafore și/sau idiomuri?

Design vizual
un design bun implică alegerea echilibrată
a relațiilor dintre elementele care creează conținutul

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

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

layout-ul generic al unei pagini Web

Fiecare pagină Web include un container
(container block) care va cuprinde
conținutul propriu-zis
<div class="content">…</div>

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

Layout-ul e facilitat de template-uri
(machete de prezentare)
specificarea aranjamentului și stilului vizual
via HTML + CSS + conținuturi grafice
exemplificare: WordPress templates
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

oferite implicit de unele servere de aplicații ori
framework-uri Web sau disponibile ca extensii

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

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

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

Strategii vizând caroiajul
(grid-ul)
secțiunea de aur
3 coloane
simplitatea
balansul
unitatea

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

Design vizual
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)

discuție

Design vizual
visual flow
un aspect important este cel referitor
la asigurarea echilibrului vizual

Design vizual
visual flow
un aspect important este cel referitor
la asigurarea echilibrului vizual
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie

Aspect de interes:
alinierea conținutului în cadrul unui formular/tabel

Design vizual
visual flow
unitatea
modul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)

Design vizual
visual flow
unitatea
uzual, se realizează prin grupare:
spațială, cromatică, via elemente (grafice) de separare
(e.g., linii orizontale, aliniere diferită etc.)

Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)
din fragmentele existente

www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
diverse exemple: http://tinyurl.com/y6ao7k

Design vizual
visual flow
poate fi realizat și prin intermediul contrastului
asigurarea focalizării atenției

Percepția elementelor de interfață
pe baza variabilelor vizuale

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

Design vizual
cromatica
un set de culori poate avea semantici diferite,
în funcție de situațiile survenite și de audiență
poate stabili ambientul

Design vizual
cromatica
utilizarea a maxim 4 culori afişate simultan

„Roata” culorilor pentru Web
culori
calde
culori
reci

Armonie cromatică
redarea plăcută a elementelor de interes
(în acest context: culorile)
estetică vizuală
www.interaction-design.org/encyclopedia/visual_aesthetics.html

armonie complementară

armonie bazată pe 3 culori (triadă)

armonie analogă accentuată

Observație:
contextul în care apare o culoare este foarte important
anumite culori au conotații multiple
verde ≡ victorie (Grecia antică)
verde ≡ fertilitate (Evul mediu)

China fericire
naștere
putere
paradis
nori
paradis
nori
moarte
puritate
Franța
aristo-
crație
tempo-
rar
crimi-
nalitate
liber
pace
neutra-
litate
India
viață
creati-
vitate
succes
prospe-
ritate
fertil
moarte
puritate
Japonia
furie
pericol
grație
nobil
viitor
tinerețe
răutate moarte
USA
pericol,
stop
lașitate
atenție
sigu-
ranță
mascu-
linitate
puritate
atenție la utilizarea internațională
webdesignerwall.com/general/cultural-considerations-for-global-websites

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

http://colorhunt.co/

Greșeli frecvente:
poziții arbitrare ale elementelor componente
dimensiuni arbitrare ale elementelor
mărimi și reprezentări arbitrare ale imaginilor
prezentări inconsistente
limbaje vizuale inconsistente

Care sunt aspectele de interes
privind redarea conținutului textual?

Typography
prezentarea conținutului textual via corpuri de literă
(fonturi) conform unor anumite reguli de prezentare
typos (impresie) + grapheia (scriere)

Typography
componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
resurse de interes: http://ilovetypography.com/

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

Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere

Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere
Font: Caracter  Semn

Corpul de literă
dimensiune
mă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

Corpul de literă
proporția
indică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)

Corpul de literă
familia de font
clasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: font-family

Corpul de literă
familia de font
include fontul de bază + variants (italic, bold, bold italic)

serif
sans-serif
cursive
fantasy
monospace

Corpul de literă
fonturi „sigure” pentru Web
disponibile pe orice sistem

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/

Corpul de literă
WOFF (Web Open Font Format)
include formatele TrueType, OpenType, Open Font Format
recomandare W3C (2012)
www.w3.org/TR/WOFF/

Adobe Edge Web Fonts – https://edgewebfonts.adobe.com/

Google Web fonts – www.google.com/fonts/

„Culoarea” tipografică
indică densitatea texturii conținutului unei pagini
“It refers only to the darkness or blackness
of the letterform in mass.”
Robert Bringhurst, The Elements of Typographic Style
a se vizita și http://typographica.org/

Măsura
definește lungimea unei linii de text
element-cheie al ușurinței parcurgerii conținutului

Măsura
valori recomandate: 45—75 caractere (30—50 em)
poate fi dificil de stabilit pentru layout-uri lichide

Leading (sau line-spacing)
spațiul vertical dintre 2 linii de text
uzual, titlurile (headings) nu necesită leading

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

de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php

Dr.SabinBuragawww.purl.org/net/busacohttp://www.bonkersworld.net/best-social-network-ever/
(în loc de) pauză

Cum organizăm informațiile?

Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
liste de obiecte
secvențe de acțiuni
liste de categorii (subiecte) de interes
liste de instrumente/componente software

liste de obiecte
mesaje primite, fotografii partajate,
recomandări de produse similare, obiective de interes,…
desemnate de substantive

(secvențe de) acțiuni
exemple tipice:
browse, buy, register, sell, subscribe etc.
desemnate de verbe

liste de categorii (subiecte) de interes
exemplificări:
știință, tehnologie, divertisment etc.

liste de instrumente/componente
e.g., calendar, editor de texte, manager de resurse,…

Necesitatea organizării informațiilor prezentate
în funcție de:
natura și domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintă
contextul interacțiunii

Prezentare liniară
uzual, se recurge la diverse criterii de sortare:
alfabetic
spațial
temporal
conform semnificației
…

http://www.html5rocks.com/webappfieldguide/

Prezentare bidimensională
se consideră 2 criterii/dimensiuni de interes
exemplu:
locație geografică + dată calendaristică

Prezentare bidimensională
uzual, se adoptă o vizualizare bazată pe grilă (grid)

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

Prezentare bazată pe context
spațial
temporal
conform profilului utilizatorului
exemplificări:
hărți, chart-uri, timelines, informații recomandate,…

Maria Popova, A Visual Timeline of the Future Based
on Famous Fiction (2012)
https://www.brainpickings.org/2012/11/21/giorgia-lupi-future-timeline/

Prezentări mixte (complexe)
pot utiliza combinații ale precedentelor

Care sunt mijloacele de explorare?

Localizarea obiectelor din „proximitate”
signposts
titlul documentului Web
sigle
metode de redare a selecției
…

Găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
wayfinding
good signage
environmental clues
maps

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

deși numărul optim de pași (click-uri/tap-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

Navigabilitatea
soluții tradiționale:
meniuri
legături conexe
divizarea conținutului
harta sitului
căutare internă

Navigabilitatea
meniuri
orizontale – informații, apoi acțiuni
verticale: plate, expandabile, bi-nivel
combinate

navigabilitate via harta sitului (site map)

left column navigation

right column navigation

three column navigation

three columns with content first

three column content

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

navigabilitatea în contextul tabletelor
(Ronan Cremin & Luca Passani, 2012)

navigare multicriterială (faceted navigation/search)

navigare socială +
navigare bazată pe termeni de conținut (tag-uri)
http://www.hashtags.org/  http://tagdef.com/

navigare cartografică + 3D

Navigabilitatea
semantici diferite ale legăturilor:
navigare
preluare de date (download)
procesare – e.g., recalcularea coșului de cumpărături
asociere de meta-date – exemplu: tagging

Regulă de bună practică:
existența unor elemente navigaționale
– plasate consistent –
pentru conducerea utilizatorului
spre secțiunile importante ale sitului/aplicației Web

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

breadcrumbs
indicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii)

Ce înseamnă responsive Web design?

realitate: multitudinea dimensiunilor + caracteristicilor
ecranelor dispozitivelor oferind acces la Web

Responsive Web design
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare, rezoluție, densitate de pixeli,…)
Ethan Marcotte, 2010
www.alistapart.com/articles/responsive-web-design/
detalii la 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 W3C, 2012)
http://www.w3.org/TR/css3-mediaqueries/

a se studia codul-sursă al foii de stiluri
profs.info.uaic.ro/~busaco/teach/courses/cliw/web.css

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

responsive multimedia
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 pinguin"
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/

exemplificări concrete:
http://mediaqueri.es/

soluții la nivel de client
recurgerea la biblioteci JavaScript:
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

responsive fonts
fonturile externe nu ar trebui încărcate în contextul
dispozitivelor având rezoluții reduse ale ecranului
detalii la http://webtypography.net/talks/rdo13/

responsive fonts
fonturile externe nu ar trebui î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)

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)
https://developer.mozilla.org/Web/CSS/length

a se experimenta instrumentul CSS Ruler
http://katydecorah.com/css-ruler/

alte strategii:
linearizarea conținutului
în contextul redării pe dispozitive mobile

layout shifter
column drop
Luke Wroblewski, Multi-Device Layout Patterns (2012)
http://www.lukew.com/ff/entry.asp?1514

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; }
}

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

graceful
degradation
progressive
enhancement
responsive
Web design
mobile first
responsive Web design în contextul designului Web
Aaron Gustafson – http://www.slideshare.net/AaronGustafson

http://bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns: șabloane de proiectare
pentru layout, 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/

Instrumente Web specifice – exemplificări:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Semantic UI – semantic-ui.com
Skeleton – www.getskeleton.com
UI Kit – getuikit.com
Web Starter Kit – developers.google.com/web/starter-kit/

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ă)

episodul viitor: vizualizarea datelor

CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (18)

Similar a CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv

Similar a CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv (20)

Más de Sabin Buraga

Más de Sabin Buraga (20)

CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web responsiv