Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv

Dr. Sabin Buragawww.purl.org/net/busaco

design Web

de la design vizual la design Web responsiv


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

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


Aspecte importante:


“Attractive things work better.” (Donald Norman)

CSS Zen Garden – www.csszengarden.com

suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare, legături, controale specifice etc.


Tradițional, interacțiunea cu utilizatorul
va recurge la elemente de interfață


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)

bazat pe modele vizuale
ce anume vom comunica utilizatorului?


Design vizual

reprezentările vizuale
trebuie să fie ușor percepute & recunoscute
recognition vs. recall


Design vizual

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


Design vizual


pictograme & simbolurimetafore vizuale

⋆⋆⋆
premii!?


concurs: metafore și/sau idiomuri

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-ul generic al unei pagini Web

<div class="content">…</div>


Fiecare pagină Web include un container
(container block) care va cuprinde
conținutul propriu-zis

lățime prestabilită

versus

layout lichid
lățime variabilă


layout fix

Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Frameless – framelessgrid.com
Skeleton – www.getskeleton.com
The Semantic Grid System – semantic.gs


Instrumente Web specifice (exemplificări):

specificarea aranjamentului & stilului vizual
via HTML + CSS + conținuturi grafice

exemplificare: WordPress templates
http://wordpress.org/themes/


Layout-ul e facilitat de template-uri (șabloane vizuale)

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


Recurgerea la sisteme de aplicare a șabloanelor
de prezentare – Web template systems/engines

des folosit în tipografie

www.thegridsystem.org


Layout-ul poate fi stabilit via grid

secțiunea de aur
cele 3 coloane
simplitatea
balansul
unitatea


Reguli privind layout-ul


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

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


Greșeli comune:

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

simetrie versus asimetrie


Balansul

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


Unitatea

spațială
cromatică
via elemente (grafice) de separare
e.g., linii orizontale, aliniere diferită etc.


Criterii de grupare

ochiul creează un întreg (gelstalt)
din fragmentele existente


Grupare – principiul Gelstalt


www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html

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


Fluxul (flow) vizual

h5ai – a beautified Apache index
based on HTML5
http://larsjung.de/h5ai/


Information Architecture


Tipuri de contrast pe baza variabilelor vizuale

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


Cromatica

culori
reci

culori
calde


“Roata” culorilor pentru Web

redarea plăcută a elementelor de interes
(în acest context: culorile)
estetică vizuală


Armonie cromatică

www.interaction-design.org/encyclopedia/visual_aesthetics.html

armonie complementară

armonie bazată pe 3 culori (triadă)

armonie analogă accentuată

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


Cromatica

paradis
nori

paradis
nori

moarte
puritate

fericire

Franța

aristocrație

temporar

criminalitate

liber
pace

neutralitate

India

viață
creativitate

succes

prosperitate
fertil

Japonia

furie
pericol

grație
nobil

viitor
tinerețe

răutate

moarte

USA

pericol,
stop

lașitate
atenție

siguranță

masculinitate

puritate

moarte
puritate


China

naștere
putere

atenție la utilizarea internațională
webdesignerwall.com/general/cultural-considerations-for-global-websites

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


Instrumente pentru generarea de palete cromatice
(exemplificări)


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

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


Typography


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

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


Typography

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)


Corpul de literă

sans-serif

cursive

fantasy

monospace

serif

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


Corpul de literă

CSS Fonts Module Level 3 (W3C Candidate
Recommendation, oct. 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
http://html.adobe.com/edge/webfonts/


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

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


“Culoarea” tipografică
indică densitatea texturii conținutului unei pagini

element-cheie al ușurinței parcurgerii conținutului


Măsura
definește lungimea unei linii de text

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


Măsura

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


Leading (sau line-spacing)
spațiul vertical dintre 2 linii de text

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?

liste de obiecte
desemnate de substantive
mesaje primite în inbox (e-mail-uri)
recomandări de produse similare
…


Aplicațiile – tradiționale/Web – sunt organizate
conform uneia sau mai multor abordări:

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



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



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



în funcție de:
natura & domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintă
contextul interacțiunii


Necesitatea organizării informațiilor prezentate

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


Prezentare liniară

se consideră 2 criterii/dimensiuni de interes

exemplu:
locație geografică + dată calendaristică


Prezentare bidimensională


Prezentare bidimensională

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

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

spațial
temporal
conform profilului utilizatorului


Prezentare bazata pe context

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


Prezentare bazata pe context

pot utiliza combinații ale precedentelor


Prezentari mixte (complexe)

alinierea conținutului în cadrul unui formular/tabel


Aspect de interes:

Care sunt mijloacele de explorare?

signposts
titlul documentului Web
sigle
metode de redare a selecției
…


Localizarea obiectelor din “proximitate”

wayfinding
good signage
environmental clues
maps


Găsirea “drumului” care conduce utilizatorul
către satisfacerea scopului

minimizarea distanțeiergonomia interfeței


Aspect de interes

T. Tullis, B. Albert, Measuring the User Experience
(2nd Edition), Morgan Kaufmann, 2013


deși numărul optim de pași (click-uri) este 3,
utilizatorul realizează 9 acțiuni, fiind „pierdut în spațiu”

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


Navigabilitatea


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)

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


Navigabilitatea

www.360cities.net


navigare cartografică + 3D

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


Navigabilitatea

existența unor elemente navigaționale
– plasate consistent –
pentru conducerea utilizatorului
spre secțiunile importante ale sitului/aplicației Web


Regulă de bună practică:

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?

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


Responsive Web design

flexible image (+media, +font)

flexible/fluid grid

Jacob Surber, The Page Is Dead, SXSWi 2012
www.slideshare.net/jacobsurber/page-death


media queries

Media Queries (recomandare W3C, 2012)
http://www.w3.org/TR/css3-mediaqueries/


rezoluții de ecran diverserecurgerea la valori diferite
pentru anumite proprietăți CSS via reguli @media

@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 */ }


<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />

pentru alte detalii, a se studia
http://developer.mozilla.org/docs/Web/Guide/CSS/Media_queries

adaptarea mărimii și/sau folosirea fonturilor &
graficii vectoriale (SVG – Scalable Vector Graphics)
studii de caz: http://mediaqueri.es/


imagini & alte resurse grafice – e.g., video

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 images

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/


responsive Web fonts


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
mobile first

responsive Web design în contextul designului Web
Aaron Gustafson – http://www.slideshare.net/AaronGustafson


responsive
Web design


responsive Web patterns: șabloane de proiectare
pentru layout, navigare, conținut grafic, formulare,…

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

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: surpriză ♚

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv (19)

More from Sabin Buraga

More from Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #4): Design Web. Proiectarea siturilor Web. Design Web responsiv