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

transcript

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla 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ă 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

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

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

controale specifice (e.g., bară de defilare, buton) etc.

Cum percepe utilizatorul interfața?

pe baza simțurilor

(human senses)

i/File

Design vizual

layout

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 & simbolurimetafore 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

layout fixlățime prestabilită

versus

layout lichidlățime variabilă

Layout-ul e facilitat de template-uri(machete de prezentare)

specificarea aranjamentului și stilului vizualvia HTML + CSS + conținuturi grafice

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

Recurgerea la sisteme de aplicare a machetelorde 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 oriframework-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

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

www.thegridsystem.org

Strategii vizând caroiajul(grid-ul)

secțiunea de aur3 coloanesimplitateabalansulunitatea

aranjamentul spațial poate fi stabilit via grid – uzual, în tipografieaici, 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

discuție

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

www.purl.org/net/busacoChina fericire

naștereputere

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

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 elementelormărimi și reprezentări arbitrare ale imaginilor

prezentări inconsistentelimbaje vizuale inconsistente

Care sunt aspectele de interesprivind 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ă

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

Corpul de literă

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

proporționat vs. monospațiat (monospace)

Corpul de literă

familia de fontclasifică fonturile pe baza unor caracteristici

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

proprietate CSS: font-family

Corpul de literă

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

sans-serif

cursive

fantasy

monospace

Corpul de literă

fonturi „sigure” pentru Webdisponibile 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 blacknessof the letterform in mass.”

Robert Bringhurst, The Elements of Typographic Style

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

Măsuradefineș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

discuție

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

(în loc de) pauză

Cum organizăm informațiile?

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

liste de obiectesecvențe de acțiuni

liste de categorii (subiecte) de interesliste 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:alfabeticspațial

temporalconform 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țialtemporal

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

discuție

Care sunt mijloacele de explorare?

Localizarea obiectelor din „proximitate”

signposts

titlul documentului Websigle

metode de redare a selecției…

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

wayfinding

good signageenvironmental clues

Navigabilitatea

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

minimizarea distanțeiergonomia 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 conexedivizarea conținutului

harta situluicăutare internă

Navigabilitatea

meniuri

orizontale – informații, apoi acțiuniverticale: 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 utilizatoruluispre 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

breadcrumbsindicarea 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, 2010www.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 2012www.slideshare.net/jacobsurber/page-death

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/

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

a se studia codul-sursă al foii de stiluriprofs.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 Responsinatorhttp://www.responsinator.com/

responsive multimedia

imagini flexibile + alte resurse grafice – e.g., video

<source media="(min-width: 40em)"

srcset="mare.jpg 1x, mare-hd.jpg 2x"/>

</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 contextuldispozitivelor având rezoluții reduse ale ecranului

detalii la http://webtypography.net/talks/rdo13/

responsive fonts

fonturile externe nu ar trebui încărcate în contextuldispozitivelor 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 Rulerhttp://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

gracefuldegradation

progressiveenhancement

responsiveWeb design

mobile first

responsive Web design în contextul designului WebAaron 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