Proiectarea siturilor Web
Transcript of Proiectarea siturilor Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Comunicare în medii electronice
Dr. Sabin‐Corneliu Buraga
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Proiectarea siturilor Webcontinuare
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Design, v.:What you regret not doing later on.
/usr/games/fortune
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebare
Care sunt tehnicile de proiectare Web?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Design vizual
Fiecare utilizator are anumite modele vizuale
O interfață vizuală – precum ceaWeb –se bazează pe modele vizuale
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Design vizual
Vizualizarereprezentarea grafică a datelor/conceptelor
Ce anume comunicăm utilizatorului?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Design vizual
Elemente de bazăAranjamentul (layout)
Grila (grid) Fluxul (flow) vizual
TypographyCuloarea, forma (shape), textura
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Întrebare
Cum vom proiecta paginile Web individuale?
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Fiecare pagină Web include un container(container block) care va cuprinde
conținutul propriu‐zis
<div class="content">…</div>
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Fixlățime prestabilită
Lichidlățime variabilă
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Poate fi stabilit via grilă (grid)
des folosită în tipografie
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
ReguliSecțiunea de aurCele 3 coloaneSimplitateaBalansulUnitatea
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Greşeli comunepoziții arbitrare ale elementelor componentedimensiuni arbitrare ale elementelormărimi & reprezentări arbitrare ale imaginilorprezentări inconsistentelimbaje vizuale inconsistente
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Balansulasigurarea echilibrului vizual pe orizontală/verticală
simetrie orizontală, bilaterală sau radială
simetrie versus asimetrie
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Unitateamodul în care elemente diferite interacționează
în cadrul aceluiaşi document (aceleaşi pagini Web)
uzual, se realizează prin grupare
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Criterii de grupareSpațialăCromaticăVia elemente (grafice) de separare
e.g., linii orizontale, aliniere diferită etc.
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Gruparea se poate baza pe principiul Gelstalt:ochiul creează un întreg (gelstalt)
din fragmentele existente
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Menținerea structurii aranjamentului se poaterealiza prin repetarea elementelor de designpe parcursul tuturor paginilor Web ale situluişabloane de proiectare (design patterns)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Şabloane de proiectareLeft‐column navigation
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Şabloane de proiectareRight‐column navigation
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Şabloane de proiectareThree‐column navigation
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Şabloane de proiectareThree columns with content first
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Aranjamentul (layout)
Şabloane de proiectareThree‐column content
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Fluxul vizual (flow)
Poate fi realizat şi prin intermediul contrastuluiasigurarea focalizării atenției
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Fluxul vizual (flow)
Tipuri de contrast pe baza variabilelor vizuale
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
ProblemeInterferența cu alte culori/conținuturi(juxtapunere)
Diferențele disciplinare/culturale
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Roşu (#FF0000)
Mental:fierbinte, foc, căldura, sânge
Asociații directe:pericol, Crăciun, Mărțişor, steag
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Galben (#FFFF00)
Mental:atenție, test, încetinire
Strălucire, cheerful
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Galben (#FFFF00)
“Toomuch yellow can supposedly causean increase in overall frustration.”
Poate conduce de confuzii
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Verde (#00FF00)
Semnificații:mergi, OK, liber, vegetație, siguranță
Supra‐folosirea conduce la plictiseală
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Albastru (#0000FF)
Semnificații:rece, apă, calm, cer, neutralitate
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Violet (#CC00FF)
Cea mai odihnitoare (restful) culoare
Scade presiunea sângelui, pulsul & respirația
Pentru suprafețe mari, devine foarte enervantă
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Oranj (#FF6600)
Asociată uneori cu “ieftin” (cheap)
Se foloseşte uzual în conjuncție cu roşu/galben
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Proprietăți
Temperaturaculori calde
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Proprietăți
Temperaturaculori reci
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Proprietăți
Valoarea (value)măsoară gradul de luminozitate
Nuanță deschisă(tint)
Culoare pură
Umbrire(shade)
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Proprietăți
Intensitatea/saturația (saturation)exprimă gradul de “vivacitate”
valoare
saturație
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica
Roata culorilor pentru Web
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: strategii
Armonii analoage
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: strategii
Armonii complementare
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: strategii
Armonii complementare divizate
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: strategii
Armonii cu 4 culori
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Teoria culorilor
Generarea unei culori foloseşte, uzual,un model tricromatic
Iluzia unei culori este dată de combinareaa trei culori primare
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Teoria culorilor
Modelul tricromatic aditiv – RGBo anumită culoare este redată ca procentaj de
roşu, verde şi albastru
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Teoria culorilor
Modelul tricromatic substractiv – CYMKo anumită culoare este redată scăzând din black
un procentaj de cyan, yellow şi magenta
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Cromatica: Teoria culorilor
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Resurse
Web Design from Stratchwww.webdesignfromscratch.com/
Styleagalawww.stylegala.com/archive/
Design Interact: Site of the Weekwww.designinteract.com/sow/
here://iCome
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
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
Dr. Sabin-Corneliu Buraga – www.infoiasi.ro/~busaco/
Rezumat
Proiectarea paginilor Web individuale
De la aranjament la cromatică