Principii de Web Design: Echilibrul compozitional

O compozitie echilibrata in web design este intotdeauna de dorit. Lasa senzatia de stabilitate si estetica placuta. Desi cateva elemente pot atrage atentia, nicio parte a compozitiei nu atrage atentia atat de mult incat celelalte sa ramana in umbra.

Echilibrarea compozitiei presupune aranjarea elementelor pozitive si a spatiului negativ in asa fel incat nicio parte nu se va suprapune cu alta. Toate elementele se imbina armonios creand un intreg. Un web design neechilibrat lasa unele elemente sa domine compozitia ceea ce poate fi de dorit pentru a comunica mai eficient un mesaj, insa, in general se recomanda compozitiile echilibrate.

Balanta vizuala implica greutatea si directia, asemenea unei balante fizice. Greutatea vizuala se traduce ca perceptia greutatii elementelor vizuale sau, cu alte cuvinte, este masura felului incare orice element al unui web design atrage ochiul privitorului. Directia vizuala, pe de alta parte, este directa perceputa a fortei vizuale adica directia in care credem ca un element ar trebui sa se miste in functie de forta care actioneaza asupra sa.
De ce este echilibrul vizual important?

Daca exista un oarecare echilibru intre elementele unui web design atunci fiecare dintre acestea prezinta interes. Interesul vizual este balansat, iar intregul design va fi placut. Fara un echilibru vizual, vizitatorii unei pagini web, de exemplu, nu vor observa toate partile designului si se vor axa doar pe informatiile usor de observat.

Un web design profesional mentine echilibru vizual al elementelor astfel incat acestea sa se afle intr-o armonie deplina si sa incante vizual utilizatorii. Exista patru tipuri de echilibru vizual ce se poate obtine in procesul de web design: simetric, asimetric, radial si mozaic.

– Echilibrul simetric – apare cand exista parti egale de o parte si de alta a unei axe centrale. Aceasta evoca senzatia de formalitate si eleganta. Problema unui echilibru simetric consta in faptul ca este static si cateodata poate parea plictisitor si predictabil.

– Echilibrul asimetric – rezulta dintr-o greutate vizuala inegala pe fiecare dintre cele doua parti ale compozitiei. Una dintre ele poate contine un element dominant. Un element vizual puternic pe o parte poate fi balanasat de alte elemente luminoase pe cealalta parte. Este un fel de echilibru mai dinamic si mai interesant evocand sentimentul de modernism, energie si vitalitate. Permite o varietate vizuala mai mare desi poate fi greu de obtinut din cauza complexitatii relatiilor dintre elementele diferite de web design.

– Echilibrul radial – apare cand elementele radiaza din centru. Mentinerea unui punct focal va fi usoara intrucat va fi mereu centrul – centrul layoutului, al paginii etc.

– Echilibrul mozaic – rezulta dintr-un haos echilibrat. Desi suna paradoxal, elementele dispuse par a fi haotice, insa totusi sunt dispuse uniform. Lipsa unei ierarhii a elementelor lasa o prima impresie de dezordine care este ameliorata ulerior.

Simtetria si asimetria in web design

Daca simetria este privita drept armonioasa si frumoasa, in acelasi timp poate fi statica si monotona. Asimetria, pe de alta parte, tinde sa fie mai interesanta si mai dinamica, in ciuda faptului ca nu este considerata neaparat frumoasa.

Simetria poate fi: oglinda, radiala sau cristalografica.

• Simetria de tip oglinda apare in momentul in care toate elementele se oglindesc in jurul unei axe centrale. Axa poate fi in orice directie. De exemplu, fata umana sau fluturii formeaza o simetrie pura, oglindita.

• Simetria radiala apare in momentul in care toatele elementele se rotesc in jurul centrului. Poate aparea in orice unghi atat timp cat exista un centru comun. Acest tip de simetrie se foloseste in web design pentru a indica miscarea, viteza sau dinamismul. De exemplu, rotile unei masini.

• Simetria cristalografica apare cand elementele se repeta din diferite locuri din spatiu. Poate aparea in orice directie sau la orice distanta, atat timp cat orientarea de baza e mereu aceeasi. De exemplu, un gard este format tinand cont de simetria cristalografica. Se poate obtine ritmul, miscarea si actiunea dinamica prin acest tip de simetrie.

• Asimetria creeaza relatii mai complexe intre elemente si din acest motiv poate atrage atentia mai usor. Spatiul din jurul formelor asimetrice este mai activ. Modelele nepredictabile create cu ajutorul asimetriei dau senzatia libertatii de expresie. Problema consta in faptul ca este mai usor de atins.

Simetria si asimetria pot fi imbinate in web design pentru a obtine un efect reusit. Se vor echilibra formele simetrice intr-un mod asimetric sau invers, formele asimetrice intr-un mod simetric starnind curiozitatea privitorului. Creand un contrast intre cele doua in intreaga compozitie a unui web design va face ca elementele sa atraga mai mult atentia.

O compozitie echilibrata in web design nu e usor de obtinut, dar nici foarte greu. In functie de scopul proiectului, si de elementele ce trebuie scoase in evidenta vom folosi unul sau mai multe dintre principiile de mai sus. Nu exista un mod corect de a comunica un mesaj prin design si nici nu exista o obligatie in a urma aceste principii de web design, ci doar nevoia de a le intelege pentru a avea motive sa le incalcam.

Folosirea culorii in web design pentru a imbunatati accesibilitatea

Teoria culorii este foarte des dezabatuta si nu ii putem neglija importanta mai ales in web design. Culorile sunt esentiale in web design si pot influenta comportamentul utilizatorilor in multe cazuri. Cu toate acestea, multi web designeri nu verifica daca culorile site-ului se potrivesc stilului sau daca acestea daca creeza o impresie buna utilizatorilor.

Axandu-ne pe o singura teorie a culorii putem neglija o buna parte de utilizatori care vad si percep culorile in mod diferit. De exemplu, cei care sufera de daltonism reprezinta un procentaj de aproximativ 7% dintre barbati si 1% dintre femei ceea ce inseamna un numar semnificativ de potentiali clienti.

Cum se poate imbunatati accesibilitatea unui site web prin teoria culorii?

Accesibilitatea in web design se refera la crearea unui site web sau a unei aplicatii care vor putea fi utilizate de catre toti utilizatorii indiferent de dizabilitatile acestora (de vedere, auditive, locomotorii sau cognitive). De ce se aplica teoria culorii pentru a imbunatati accesibilitatea unui site web sau, cu alte cuvinte, de ce trebuie sa fie un site acecsibil? Iata doar cateva motive:

• Permite obtinerea unui trafic crescut intrucat site-ul se va adresa unei palete mai largi de utilizatori, in consecinta, obtinerea unui avantaj in fata competitorilor.

• In web design, accesibilitatea site-urilor se traduce si prin pozitii mai bune pe motoarele de cautare. Google acorda prioritate site-urilor accesibile.

• Accesibilitatea unui site web joaca un rol major in crearea unei experiente placute utilizatorilor. Asadar, din punct de vedere etic este extrem de importanta.

• Multe site-uri web inaccesibile se confrunta cu probleme legale intrucat nu ofera sanse egale tuturor utilizatorilor (inclusiv a celor cu dizabilitati).

Crearea unui site web accesibil pentru persoanele care sufera de daltonism nu este chiar atat de dificila. E nevoie de planificare si de utilizarea corecta a culorilor si mai ales a contrastului astfel incat rezultatul final sa fie un site cu web design atractiv care sa isi indeplineasca obiectivul si creeze si o experienta placuta pentru utilizatori.

Cum se utilizeaza corect teoria culorii in web design?

Primul pas consta in alegerea culorilor potrivite pentru paleta sau schema de culori care se va crea. Aceste culori trebuie sa fie inteligibile si, lasand la o parte simbolistica si psihologia culorii, ne vom indrepta atentia catre combinatiile reusite de culori si pe contrast astfel incat sa realizam pagini web lizibile. Mai jos vom enumera cateva tehnici si abordari posibile pentru a evita potentialele capcane si pentru a obtine un site web accesibil:

• Evitarea combinatiilor nereusite de culori: maro-negru, verde-albastru, mov-albastru, gri-albastru, verde-gri, negru-albastru, galben-verde deschis sunt cele mai comune combinatii ce trebuie evitate impreuna cu rosu-negru si galben-albastru care prezinta dificultati de distingere pentru daltonisti.

• Folosirea contrastului: in stransa legatura cu combinatiile reusite de culori, contrastul se obtine utilizand culori care nu sunt apropiate ca nuanta. Combinatiile nereusite de culori deriva din lipsa contrastului. In consecinta, nu conteaza neaparat ce culori sunt atata timp cat sunt percepute ca doua culori distincte. Persoanele care sufera de daltonism pot percepe mai usor culorile deschise decat pot distinge diferentele dintre cele inchise.

• Alegerea unor contraste de tip cald-rece: in cele mai multe cazuri folosirea tonurilor calde impreuna cu cele reci poate duce la obtinerea unor efecte reusite in web design. Si in acest caz se aplica evitarea combinatiilor de mai sus (rosu-verde, galben-albastru).

• Folosirea culorilor complementare: acestea sunt situate pe roata culorii la poluri opuse. Pentru atingerea contrastului, culorile complementare sunt esentiale. Exceptie vor face combinatiile rosu-verde si galben-albastru care, desi sunt opuse, ridica dificultati de distingere in randul suferinzilor de daltonsim.

• Optarea pentru o paleta monocroma: este o solutie buna pentru crearea unui web design care sa nu ridice probleme de distingere a culorilor. Folosirea unei singure culori cu nuante aproapiate acesteia reprezinta o solutie buna in cazul in care exista dubii in ceea ce priveste alegerea culorilor potrivite. Paletele monocromatice sunt adesea folosite in scopul obtinereii unui web design minimalist si a unui site web usor de folosit de catre utilizatori.

• Folosirea texturilor si a liniilor groase pentru a accentua anumite elemente: textura adaugata unei culori o va evidentia si va ajuta la distingerea anumitor elemente. Si liniile groase impreuna cu textele accentuate (aldine) vor ajuta la fel de mult. De asemenea, in termeni de typography, se recomanda evitarea liniilor subtiri precum si a stilului italic pentru texte intrucat acestea nu ajuta la obtinerea lizbilitatii continutului.

Accesibilitatea in web design nu inseamna doar corectarea trasaturilor ce tin de distingerea culorilor insa este un aspect esential. Vor fi, desigur, si alte aspecte ce trebuie luate in considerare cand trebuie sa cream un site web accesibil. Se recomanda testarea acestuia atat in timpul crearii cat si ulterior acestei etape pentru a observa ce varianta este mai apreciata de catre utilizatori si care aduce mai mult trafic.