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

www.purl.org/net/busa

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

“Attractive things work better.” (Donald Norman)

CSS Zen Garden – www.csszengarden.com

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.

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

layout fixlățime prestabilită

versus

layout lichidlăț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 vizualvia HTML + CSS + conținuturi grafice

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

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

Layout-ul poate fi stabilit via grid

des folosit în tipografie

www.thegridsystem.org

Reguli privind layout-ulsecțiunea de aurcele 3 coloanesimplitateabalansulunitatea

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

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

Balansulasigurarea echilibrului vizual pe orizontală/verticală

simetrie orizontală, bilaterală sau radială

simetrie versus asimetrie

Unitateamodul î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 separaree.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 contrastuluiasigurarea 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)

coChina fericirenaș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

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

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 (decembrie 2012)

www.w3.org/TR/WOFF/

Adobe Edge Web Fontshttps://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 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

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

(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:alfabeticspațial

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

conform profilului utilizatorului

Prezentare bazată pe context

spațialtemporal

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 Websigle

metode de redare a selecției…

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

wayfinding

good signageenvironmental clues

Aspect de interes

minimizarea distanțeiergonomia 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țiuniverticale: 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:navigaredownloadprocesare

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?

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

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

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

Responsive Web design

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

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

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/

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

Technology

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

Suport curs Web design nivel 1

Ghid web design pentru administraţia publică - eBooksuploads.worldlibrary.net/uploads/pdf/... · Ghid web design pentru administraţia publică Cuprins Ghid web design pentru administraţia

Web design si programare web

Web design history radu rahleanski

32 Lectie Demo Web Design

Propuneri design

Magazine design

Design Tehnoredactare

gov.rogov.ro/fisiere/stiri_fisiere/Memo_Incadrarea_masurii...specialitate — din urmätoarele domenii: formare si training, facilitare comunitarä, marketing, dezvoltare web si web-design,

CLIW 2014—2015 (6/12): Căutarea resurselor Web

CLIW 2015-2016 (7/13) Limbajul de programare JavaScript

CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

CLIW 2014—2015 (7/12): Programare în limbajul JavaScript

Prezentare Servicii Design Grafic & Web

F17 Design, F117 -Design - del.ro · F17 – Design, F117 -Design!-Atlantic – cu termostat incorporat electromecanic (F17) sau electronic (F117) : Grila evacuare aer cald Panou

Plan de Afacere Pentru a Unei Firme de Web Design

Cursuri la distanta Adobe Photoshop, Illustrator, Autocad, Corel Web Design,Joomla

CLIW 2015-2016 (12/13) Performanța aplicaţiilor Web la nivel de client

DESIGN 2proiectare

Plan de afacere Web Design