CLIW 2014—2015 (4/12): 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

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

“Attractive things work better.” (Donald Norman)
CSS Zen Garden – www.csszengarden.com

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, controale specifice etc.

Aranjament spațial (layout)
Asigurarea fluxului (rhythm, focus & color)
Organizarea informației (information architecture)
Asigurarea navigabilității
Modularitatea & flexibilitatea
Consistența
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 vs. recall

Design vizual
reprezentările vizuale
trebuie să fie ușor percepute și recunoscute
recognition vs. recall
metafore &
idiomuri

pictograme & simbolurimetafore vizuale

“Metaphors create insight. But they also distort.
They have strengths. But they also have limitations.”
Gareth Morgan

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

concurs: metafore și/sau idiomuri
⋆ ⋆ ⋆
premii!?

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

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ă

Instrumente Web specifice – exemplificări:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Frameless – framelessgrid.com
Skeleton – www.getskeleton.com
The Semantic Grid System – semantic.gs
Web Starter Kit – developers.google.com/web/starter-kit/

Layout-ul e facilitat de template-uri (șabloane vizuale)
specificarea aranjamentului & stilului vizual
via HTML + CSS + conținuturi grafice
exemplificare: WordPress templates
http://wordpress.org/themes/

Recurgerea la sisteme de aplicare a șabloanelor
de prezentare – Web template systems/engines
oferite implicit de unele servere de aplicații ori
framework-uri Web sau disponibile ca extensii

Layout-ul poate fi stabilit via grid
des folosit în tipografie
www.thegridsystem.org

Reguli privind layout-ul
secțiunea de aur
cele 3 coloane
simplitatea
balansul
unitatea

a se studia și articolele oferite de A List Apart
www.alistapart.com/topics/design/layout/

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

Balansul
asigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie

Unitatea
modul în care elemente diferite interacționează
în cadrul aceluiași document (aceleași pagini Web)
uzual, se realizează prin grupare

Criterii de 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

Fluxul (flow) vizual
poate fi realizat și prin intermediul contrastului
asigurarea focalizării atenției

Tipuri de contrast pe baza variabilelor vizuale

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

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

Cromatica
utilizarea a maxim 4 culori afişate simultan

Cromatica
utilizarea a maxim 4 culori afișate simultan
evitarea supraîncărcării cognitive

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

Cromatica
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

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

Typography
componentă vitală a procesului de comunicare
nu înseamnă “picking a cool font”
typos (impresie) + grapheia (scriere)

î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 (decembrie 2012)
www.w3.org/TR/WOFF/

Adobe Edge Web Fonts
https://creative.adobe.com/products/webfonts

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

Cum organizăm informațiile?

Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:
liste de obiecte
mesaje primite în inbox (e-mail-uri)
recomandări de produse similare
…
desemnate de substantive

(secvențe de) acțiuni
e.g., browse, buy, register, sell, subscribe,…
desemnate de verbe

liste de categorii (subiecte) de interes
exemple: ș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 & 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
…

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

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

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

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

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

Aspect de interes
minimizarea distanțeiergonomia interfeței

deși numărul optim de pași (click-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
meniuri
orizontale – informații, apoi acțiuni
verticale: plate, expandabile, bi-nivel
combinate

Navigabilitatea
alte soluții
legături conexe – e.g., navigare contextuală
divizarea (paginarea) conținutului
cele mai recente pagini vizitate

navigabilitate via harta sitului (site map)

căutare internă (site search engine)

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)

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

www.360cities.net
navigare cartografică + 3D

Navigabilitatea
semantici diferite ale legăturilor:
navigare
download
procesare
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?

Responsive Web design
(Ethan Marcotte, 2010)
utilizarea unei suite de tehnologii Web ce permite
adaptarea designului la contextul de redare
(e.g., orientare, rezoluție, densitate de pixeli,…)
www.alistapart.com/articles/responsive-web-design/

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/

imagini flexibile + alte resurse grafice – e.g., video
adaptarea mărimii și/sau folosirea fonturilor &
graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http://mediaqueri.es/

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

responsive Web fonts
fonturile externe nu trebuie încărcate în contextul
dispozitivelor având rezoluții reduse ale ecranului
încărcarea asincronă (Web font loading) a fonturilor
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

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

ca studii de caz, de studiat:
prezentările lui Tom Maslen
https://speakerdeck.com/tmaslen
testarea designului Web la nivel de dispozitiv mobil
http://mobiletestingfordummies.tumblr.com/

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 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv

Recommended

Recommended

More Related Content

Similar to CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv

Similar to CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv