Proiectarea siturilor Web

here://iCome

Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/

Comunicare în medii electronice

Dr. Sabin‐Corneliu Buraga

here://iCome


Proiectarea siturilor Webcontinuare

here://iCome


Design, v.:What you regret not doing later on.

/usr/games/fortune

here://iCome


Întrebare

Care sunt tehnicile de proiectare Web?

here://iCome


Design vizual

O parte importantă a procesului de designeste aceea de a “vinde” ideile

celor care le vor implementa şi/sau finanța

here://iCome


Design vizual

Fiecare utilizator are anumite modele vizuale

O interfață vizuală – precum ceaWeb –se bazează pe modele vizuale

here://iCome


Design vizual

Vizualizarereprezentarea grafică a datelor/conceptelor

Ce anume comunicăm utilizatorului?

here://iCome


Design vizual

Un design bun implică alegerea echilibratăa relațiilor între elementele de conținut

Utilizatorii sunt încântați de design,dar apreciază conținutul oferit

here://iCome


Design vizual

Elemente de bazăAranjamentul (layout)

Grila (grid) Fluxul (flow) vizual

TypographyCuloarea, forma (shape), textura

here://iCome


Întrebare

Cum vom proiecta paginile Web individuale?

here://iCome


Aranjamentul (layout)

here://iCome



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

conținutul propriu‐zis

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

here://iCome



Fixlățime prestabilită

Lichidlățime variabilă

here://iCome



Poate fi stabilit via grilă (grid)

des folosită în tipografie

here://iCome



here://iCome



ReguliSecțiunea de aurCele 3 coloaneSimplitateaBalansulUnitatea

here://iCome


here://iCome



Greşeli comunepoziții arbitrare ale elementelor componentedimensiuni arbitrare ale elementelormărimi & reprezentări arbitrare ale imaginilorprezentări inconsistentelimbaje vizuale inconsistente

here://iCome



Balansulasigurarea echilibrului vizual pe orizontală/verticală

simetrie orizontală, bilaterală sau radială

simetrie versus asimetrie

here://iCome



here://iCome



Unitateamodul în care elemente diferite interacționează

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

uzual, se realizează prin grupare

here://iCome



Criterii de grupareSpațialăCromaticăVia elemente (grafice) de separare

e.g., linii orizontale, aliniere diferită etc.

here://iCome



Gruparea se poate baza pe principiul Gelstalt:ochiul creează un întreg (gelstalt)

din fragmentele existente

here://iCome



here://iCome


here://iCome



Menținerea structurii aranjamentului se poaterealiza prin repetarea elementelor de designpe parcursul tuturor paginilor Web ale situluişabloane de proiectare (design patterns)

here://iCome



Şabloane de proiectareLeft‐column navigation

here://iCome



Şabloane de proiectareRight‐column navigation

here://iCome



Şabloane de proiectareThree‐column navigation

here://iCome



Şabloane de proiectareThree columns with content first

here://iCome



Şabloane de proiectareThree‐column content

here://iCome


Fluxul vizual (flow)

Poate fi realizat şi prin intermediul contrastuluiasigurarea focalizării atenției

here://iCome


Fluxul vizual (flow)

Tipuri de contrast pe baza variabilelor vizuale

here://iCome


here://iCome


Cromatica

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

redate utilizatorului

Facilitează identificarea componentelor,structurarea ideilor, afişarea surselor de date

sau a stării lor

here://iCome


Cromatica

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

Stabileşte ambientul

Folosirea inadecvată generează confuzie“Aceasta este o eroare”

“Traversați acum!”

here://iCome


Cromatica

ProblemeDeficiențe cromatice

Nedistingerea diferențelor între roşu şi verde– protonopia & deuteranopia: 8% bărbați, 0.4% femei

Insenzitivitate la albastru‐galben – tritanopia: rarăAberații cromaticelungimile de undă diferite sunt focalizate diferit

Roşu & albastru nu pot fi distinse simultanCu vârsta, albastrul nu poate fi perceput (de evitat folosirea lui pentru detalii)

here://iCome


Cromatica

ProblemeInterferența cu alte culori/conținuturi(juxtapunere)

Diferențele disciplinare/culturale

here://iCome


Cromatica

Semanticaacțiunile ce trebuie realizate vor fi indicate folosind culori calde (roşu, oranj, galben)

informații de stare ori pentru fundal vor fi redatepe baza culorilor reci (verde, albastru, violet)

here://iCome


Cromatica

Culorile alese trebuie să se conformezeactivității desfăşurate de utilizator sau,

mai general, cu societatea sa (grupul de interes)

Nu vom utiliza >4 culori afişate simultan

here://iCome


Cromatica

Roşu (#FF0000)

Mental:fierbinte, foc, căldura, sânge

Asociații directe:pericol, Crăciun, Mărțişor, steag

here://iCome


Cromatica

Roşu (#FF0000)

Impresii obiective:pasional, incitant, activ

Impresii subiective:intensitate, furie, capacitate, ferocitate

Stimulează în cel mai mare grad emoțiile

here://iCome


Cromatica

Galben (#FFFF00)

Mental:atenție, test, încetinire

Strălucire, cheerful

here://iCome


Cromatica

Galben (#FFFF00)

“Toomuch yellow can supposedly causean increase in overall frustration.”

Poate conduce de confuzii

here://iCome


Cromatica

Verde (#00FF00)

Semnificații:mergi, OK, liber, vegetație, siguranță

Supra‐folosirea conduce la plictiseală

here://iCome


Cromatica

Verde (#00FF00)

Efect psihologic:“One company repainted its red tool boxes green

after employees complained of the boxesbeing too heavy. The employees were pleased

with their new lighter tool boxes.”

here://iCome


Cromatica

Albastru (#0000FF)

Semnificații:rece, apă, calm, cer, neutralitate

here://iCome


Cromatica

Albastru (#0000FF)

“The best colour for break areas, because it decreases blood pressure, pulse and respiration.”

Poate ajuta la tratarea migrenelor,hipertensiunii sau insomniei

here://iCome


Cromatica

Violet (#CC00FF)

Cea mai odihnitoare (restful) culoare

Scade presiunea sângelui, pulsul & respirația

Pentru suprafețe mari, devine foarte enervantă

here://iCome


Cromatica

Oranj (#FF6600)

Asociată uneori cu “ieftin” (cheap)

Se foloseşte uzual în conjuncție cu roşu/galben

here://iCome


Cromatica: Proprietăți

Temperaturaculori calde

here://iCome



Temperaturaculori reci

here://iCome


Cromatica

Culori calde – acțiune (“click here!”)necesitatea unui răspuns, proximitate

Culori reci – afişarea stăriiinformații de fundal, depărtare

here://iCome



Valoarea (value)măsoară gradul de luminozitate

Nuanță deschisă(tint)

Culoare pură

Umbrire(shade)

here://iCome



Intensitatea/saturația (saturation)exprimă gradul de “vivacitate”

valoare

saturație

here://iCome


Cromatica

Roata culorilor pentru Web

here://iCome


Cromatica: strategii

Armonii analoage

here://iCome



Armonii complementare

here://iCome



Armonii complementare divizate

here://iCome



Armonii cu 4 culori

here://iCome


Cromatica

RemarciContextul în care apare o culoare

este foarte importantAnumite culori au conotații multiple

(e.g., roşu = pasiune, dar roşu = furie)Atenție la utilizarea internațională!

here://iCome


Cromatica

China 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

here://iCome


SUA Cehia

Mexic Egipt

here://iCome


Cromatica: Teoria culorilor

Generarea unei culori foloseşte, uzual,un model tricromatic

Iluzia unei culori este dată de combinareaa trei culori primare

here://iCome



Modelul tricromatic aditiv – RGBo anumită culoare este redată ca procentaj de

roşu, verde şi albastru

here://iCome



here://iCome



Modelul tricromatic substractiv – CYMKo anumită culoare este redată scăzând din black

un procentaj de cyan, yellow şi magenta

here://iCome



here://iCome



Afişarea culorilor de către un dispozitiv de redare(i.e., display) se realizează conform unui profil cromatic (color profile)

Lista profilelor este standardizată de International Color Consortium –www.color.org/

here://iCome


Cromatica: Tendințe actuale

Fundalurile adoptă nuanțe neutre (gri), odihnitoare, bazate – eventual – pe dégradé‐uri

Informațiile de interes & pictogramele sunt redateutilizând culori “puternice” (strong)

here://iCome


Cromatica: Tendințe actuale

here://iCome


Exemple

here://iCome


here://iCome


here://iCome


Resurse

J. Beaird, The Principles of Beautiful Web Design,SitePoint, 2007

S. Buraga, Proiectarea siturilor Web (ediția a II‐a),Polirom, 2005

A. Cooper, About Face (3rd edition),Addison‐Wesley, 2007

here://iCome


Resurse

Web Design from Stratchwww.webdesignfromscratch.com/

Styleagalawww.stylegala.com/archive/

Design Interact: Site of the Weekwww.designinteract.com/sow/

here://iCome


Resurse

A List Apartwww.alistapart.com/

Martijn van Welie’s Design Patternswww.welie.com/

Web Patternswebpatterns.org/

Yahoo! Design Patternshttp://developer.yahoo.com/ypatterns/atoz.php

here://iCome


Rezumat

Proiectarea paginilor Web individuale

De la aranjament la cromatică

here://iCome


Întrebări?

here://iCome


Documents

Proiectarea siturilor Web