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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

⎚de la design vizual

la design Web responsiv

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Aspecte importante:

funcția – designul (proiectarea) bun(ă) oferă suportpentru 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

Dr.

Sab

in B

ura

ga


co

“Attractive things work better.” (Donald Norman)

CSS Zen Garden – www.csszengarden.com

Dr.

Sab

in B

ura

ga


co

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

suprafețe de redarepagini, zone interactive,…

elemente de interacțiunecâmpuri de intrare, legături, controale specifice etc.

Dr.

Sab

in B

ura

ga


co

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)

Dr.

Sab

in B

ura

ga


co

Design vizual

bazat pe modele vizuale

ce anume vom comunica utilizatorului?

Dr.

Sab

in B

ura

ga


co

Design vizual

reprezentările vizuale trebuie să fie ușor percepute și recunoscute

recognition vs. recall

Dr.

Sab

in B

ura

ga


co

Design vizual

reprezentările vizuale trebuie să fie ușor percepute și recunoscute

recognition vs. recall

metafore & idiomuri

Dr.

Sab

in B

ura

ga


co

pictograme & simbolurimetafore vizuale

Dr.

Sab

in B

ura

ga


co

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

Gareth Morgan

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

concurs: metafore și/sau idiomuri

⋆ ⋆ ⋆ premii!?

Dr.

Sab

in B

ura

ga


co

Design vizual

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

layout-ul generic al unei pagini Web

Dr.

Sab

in B

ura

ga


co

Fiecare pagină Web include un container (container block) care va cuprinde

conținutul propriu-zis

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

Dr.

Sab

in B

ura

ga


co

layout fixlățime prestabilită

versus

layout lichidlățime variabilă

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

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

specificarea aranjamentului & stilului vizualvia HTML + CSS + conținuturi grafice

exemplificare: WordPress templateshttp://wordpress.org/themes/

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co

Layout-ul poate fi stabilit via grid

des folosit în tipografie

www.thegridsystem.org

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Reguli privind layout-ulsecțiunea de aurcele 3 coloanesimplitateabalansulunitatea

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Greșeli comune:poziții arbitrare ale elementelor componente

dimensiuni arbitrare ale elementelormărimi și reprezentări arbitrare ale imaginilor

prezentări inconsistentelimbaje vizuale inconsistente

Dr.

Sab

in B

ura

ga


co

Balansulasigurarea echilibrului vizual pe orizontală/verticală

simetrie orizontală, bilaterală sau radială

simetrie versus asimetrie

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Unitateamodul în care elemente diferite interacționează

în cadrul aceluiași document (aceleași pagini Web)

uzual, se realizează prin grupare

Dr.

Sab

in B

ura

ga


co

Criterii de grupare

spațială

cromatică

via elemente (grafice) de separaree.g., linii orizontale, aliniere diferită etc.

Dr.

Sab

in B

ura

ga


co

Grupare – principiul Gelstalt

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

Dr.

Sab

in B

ura

ga


co

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

diverse exemple: http://tinyurl.com/y6ao7k

Dr.

Sab

in B

ura

ga


co

Fluxul (flow) vizual

poate fi realizat și prin intermediul contrastuluiasigurarea focalizării atenției

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Tipuri de contrast pe baza variabilelor vizuale

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Cromatica

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

redate utilizatorului

Dr.

Sab

in B

ura

ga


co

Cromatica

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

poate stabili ambientul

Dr.

Sab

in B

ura

ga


co

Cromatica

utilizarea a maxim 4 culori afişate simultan

Dr.

Sab

in B

ura

ga


co

Cromatica

utilizarea a maxim 4 culori afișate simultan

evitarea supraîncărcării cognitive

Dr.

Sab

in B

ura

ga


co

“Roata” culorilor pentru Web

culori calde

culori reci

Dr.

Sab

in B

ura

ga


co

Armonie cromatică

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

estetică vizuală

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

Dr.

Sab

in B

ura

ga


co

armonie complementară

Dr.

Sab

in B

ura

ga


co

armonie bazată pe 3 culori (triadă)

Dr.

Sab

in B

ura

ga


co

armonie analogă accentuată

Dr.

Sab

in B

ura

ga


co

Cromatica

contextul în care apare o culoare este foarte important

anumite culori au conotații multiple

verde = victorie (Grecia antică) verde = fertilitate (Evul mediu)

Dr.

Sab

in B

ura

ga


coChina fericirenaștereputere

paradis nori

paradis nori

moarte puritate

Franțaaristo-crație

tempo-rar

crimi-nalitate

liberpace

neutra-litate

Indiaviață

creati-vitate

succesprospe-

ritatefertil

moarte puritate

Japoniafurie

pericolgrațienobil

viitor tinerețe

răutate moarte

USApericol,

stoplașitate atenție

sigu-ranță

mascu-linitate

puritate

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Care sunt aspectele de interesprivind redarea conținutului textual?

Dr.

Sab

in B

ura

ga


co

Typography

componentă vitală a procesului de comunicare

nu înseamnă “picking a cool font”

typos (impresie) + grapheia (scriere)

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Typography

corpul de literă – typeface, font

mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere

Dr.

Sab

in B

ura

ga


co

Typography

corpul de literă – typeface, font

mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere

Font: Caracter Semn

Dr.

Sab

in B

ura

ga


co

Corpul de literă

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

Dr.

Sab

in B

ura

ga


co

Corpul de literă

proporțiaindică variația de lățime a setului de glyphs

proporționat vs. monospațiat (monospace)

Dr.

Sab

in B

ura

ga


co

Corpul de literă

familia de fontclasifică fonturile pe baza unor caracteristici

(e.g., modul de redare a glyph-urilor)

proprietate CSS: font-family

Dr.

Sab

in B

ura

ga


co

Corpul de literă

familia de fontinclude fontul de bază + variants (italic, bold, bold italic)

Dr.

Sab

in B

ura

ga


co

serif

sans-serif

cursive

fantasy

monospace

Dr.

Sab

in B

ura

ga


co

Corpul de literă

fonturi “sigure” pentru Webdisponibile pe orice sistem

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

Corpul de literă

WOFF (Web Open Font Format)include formatele TrueType, OpenType, Open Font Format

recomandare W3C (decembrie 2012)

www.w3.org/TR/WOFF/

Dr.

Sab

in B

ura

ga


co

Adobe Edge Web Fontshttps://creative.adobe.com/products/webfonts

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

“It refers only to the darkness or blacknessof the letterform in mass.”

Robert Bringhurst, The Elements of Typographic Style

a se vizita și http://typographica.org/

Dr.

Sab

in B

ura

ga


co

Măsuradefinește lungimea unei linii de text

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

Dr.

Sab

in B

ura

ga


co

Măsura

valori recomandate: 45—75 caractere (30—50 em)

poate fi dificil de stabilit pentru layout-uri lichide

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

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

uzual, titlurile (headings) nu necesită leading

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Cum organizăm informațiile?

Dr.

Sab

in B

ura

ga


co

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

liste de obiecte

mesaje primite în inbox (e-mail-uri)recomandări de produse similare

…

desemnate de substantive

Dr.

Sab

in B

ura

ga


co


(secvențe de) acțiuni

e.g., browse, buy, register, sell, subscribe,…

desemnate de verbe

Dr.

Sab

in B

ura

ga


co


liste de categorii (subiecte) de interes

exemple: știință, tehnologie, divertisment etc.

Dr.

Sab

in B

ura

ga


co


liste de instrumente/componente

e.g., calendar, editor de texte, manager de resurse,…

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Prezentare liniară

uzual, se recurge la diverse criterii de sortare:alfabeticspațial

temporalconform semnificației

…

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Prezentare bidimensională

se consideră 2 criterii/dimensiuni de interes

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

Dr.

Sab

in B

ura

ga


co

Prezentare bidimensională

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

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Prezentare bazată pe context

spațialtemporal

conform profilului utilizatorului

Dr.

Sab

in B

ura

ga


co

Prezentare bazată pe context

spațialtemporal

conform profilului utilizatorului

exemplificări:hărți, chart-uri, timelines, informații recomandate,…

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Prezentări mixte (complexe)

pot utiliza combinații ale precedentelor

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Aspect de interes:

alinierea conținutului în cadrul unui formular/tabel

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Care sunt mijloacele de explorare?

Dr.

Sab

in B

ura

ga


co

Localizarea obiectelor din „proximitate”

signposts

titlul documentului Websigle

metode de redare a selecției…

Dr.

Sab

in B

ura

ga


co

Găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului

wayfinding

good signageenvironmental clues

maps

Dr.

Sab

in B

ura

ga


co

Aspect de interes

minimizarea distanțeiergonomia interfeței

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Navigabilitatea

meniuri

orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel

combinate

Dr.

Sab

in B

ura

ga


co

Navigabilitatea

alte soluții

legături conexe – e.g., navigare contextualădivizarea (paginarea) conținutului

cele mai recente pagini vizitate

Dr.

Sab

in B

ura

ga


co

navigabilitate via harta sitului (site map)

Dr.

Sab

in B

ura

ga


co

căutare internă (site search engine)

Dr.

Sab

in B

ura

ga


co

left column navigation

Dr.

Sab

in B

ura

ga


co

right column navigation

Dr.

Sab

in B

ura

ga


co

three column navigation

Dr.

Sab

in B

ura

ga


co

three columns with content first

Dr.

Sab

in B

ura

ga


co

three column content

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Navigabilitatea

navigare socială+

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

http://www.hashtags.org/

http://tagdef.com/

Dr.

Sab

in B

ura

ga


co

www.360cities.net

navigare cartografică + 3D

Dr.

Sab

in B

ura

ga


co

Navigabilitatea

semantici diferite ale legăturilor:navigaredownloadprocesare

asociere de meta-date – exemplu: tagging

Dr.

Sab

in B

ura

ga


co

Regulă de bună practică:

existența unor elemente navigaționale– plasate consistent –

pentru conducerea utilizatoruluispre secțiunile importante ale sitului/aplicației Web

Dr.

Sab

in B

ura

ga


co


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

Dr.

Sab

in B

ura

ga


co


breadcrumbsindicarea drumului de la pagina principală

până la documentul curent

uzual, în cadrul unei ierarhii (taxonomii)

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

Ce înseamnă responsive Web design?

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

media queries

flexible image (+media, +font)

flexible/fluid grid

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

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

responsive images

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

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

layout-urile flexibile utilizează lățimi relative pentru coloane în vederea organizării conținutului

Dr.

Sab

in B

ura

ga


co

Responsive Web design

alte strategii:

adoptarea unităților de măsură relative pentru valorile unor proprietăți CSS (% em rem)

Dr.

Sab

in B

ura

ga


co


alte strategii:

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

Dr.

Sab

in B

ura

ga


co


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

}

Dr.

Sab

in B

ura

ga


co


alte strategii:

stabilirea zonei de redare (viewport) la dimensiunea reală a ecranului dispozitivului

<meta name="viewport" content="width=device-width, initial-scale=1" />

Dr.

Sab

in B

ura

ga


co

gracefuldegradation

progressiveenhancement

responsiveWeb design

mobile first

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

Dr.

Sab

in B

ura

ga


co

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

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

Dr.

Sab

in B

ura

ga


co


ca studii de caz, de studiat:

prezentările lui Tom Maslenhttps://speakerdeck.com/tmaslen

testarea designului Web la nivel de dispozitiv mobilhttp://mobiletestingfordummies.tumblr.com/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

episodul viitor: vizualizarea datelor

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

Technology

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