Ghid de web design

Introducere

In acest articol, voi scrie despre principiile de baza care stau sub conceptul de design pe care il vedem zi de zi pe diferite site-uri de pe Internet. Daca doriti sa ne consultati puteti apela la pagina Web Design. Puteti folosi acest ghid daca sunteti la inceput de drum si aspirati la o pozitie de web design, daca sunteti un developer sau doar un simplu client al unui asemenea serviciu si doriti sa intelegeti mai bine cum stau lucrurile si ce inseamna un design bun. Sunt tehnici fundamentale si principii pe care oricine le poate adopta pentru a crea design-uri mai bune.

Printre aceste tehnici enumeram: structura, tipografia, tot ce tine de imagini, stilizarea, branding-ul, indemnurile la actiune si asa mai departe. De asemenea, mai sunt mici secrete si trucuri pe care le poti folosi pentru site-ul tau sau a clientului tau pentru a crea un design impresionant.

Bazele structurii

Design-ul incepe cu continutul, dar pentru inceput trebuie sa structurezi acel continut intr-un mod logic prin care vizitatorii sa il vada rapid si sa le si placa. Acest lucru se face prin compozitie si structura. O structura buna este reprezentata de grila site-ului. Aceasta trebuie sa fie facuta intr-un cadru care sa ofere tot ceea ce are nevoie utilizatorul site-ului. Daca ai citit vreodata un ziar sau ai rasfoit o revista, atunci ai vazut grila in actiune. Grila este tot ceea ce defineste coloanele si spatiile libere din pagina.

De asemenea, si imaginile care se raspandesc pe mai multe coloane in timp ce textul se desfasoara in jurul lor. Oricare ar fi cazul, elementele paginii sunt constranse de sistemul grila impus. Intre fiecare doua coloane sunt spatii libere care separa coloanele si previne textul sa se suprapuna si frazele sa fie ilizibile. Acele spatii albe sunt cunoscute ca si margini. Fara ele, sa citesti continutul dintr-o coloana ar fi destul de dificil. Exista o regula generala in privinta lor: cu cat sunt mai late marginile cu atata textul este mai usor de citit, dar asta in nu inseamna ca trebuie sa ne batem joc de spatiile libere.

Sa creezi un design bazat pe o grila nu este atat de greu pe cat crezi. Sunt unelte gratuite care pot face asta cum ar fi Gridpack sau unele mai complicate cum e Gripsap. Cea mai buna idee este sa faci cat mai multe coloane, chiar mai multe decat crezi ca ai nevoie. Un program care te poate ajuta sa incepi este Adobe Dreamweaver. Iar daca vrei ceva gratuit, care nu trebuie instalat pe calculator, recomandam Elementor care se instaleaza pe WordPress, online si care este un constructor de pagini care foloseste grile. De obicei, site-urile sunt create din doua sau trei coloane care, uneori, la randul lor au alte sub coloane, desi poate nu ne dam seama mereu datorita modului cum este afisat continutul.

Cele trei coloane principale sunt: una in dreapta care contine anumite piese cum ar fi: Cele mai populare articole, Link-urile catre logarea la panoul de control, imagini; o coloana in centru care cuprinde textul paginii sau a articolului si ultima coloana in stanga care cuprinde alte piese cum ar fi cautarea. Un sistem complicat ar fi crearea a 12 coloane, folosit de multe ori pentru site-uri interactive, landing page-uri sau site-uri de prezentare cu mai multe sectiuni. Pare complicat, datorita numarului mare de coloane, dar de fapt cu unealta potrivita (Elementor), lucrurile stau mai bine decat crezi. Desi pare un sistem complex, merita sa fie implementat pentru ca ofera o structura si o ordine a elementelor de pe pagina care imbunatatesc experienta utilizatorului si te ajuta sa pui si elemente care indeamna la actiune sau care au legatura cu luarea unei decizii. Magazinele online sunt cunoscute ca folosind un sistem cu mai mult decat 3 grile.

Structura – design-ul responsiv

Din nefericire, crearea unei grile pentru un site nu este la fel de usoara ca pentru o revista sau un ziar unde stii exact dimensiunile fiecarei coloane. Pentru internet, nu este cazul. Paginile web pot fi vizitate de persoane care folosesc telefonul, tableta, calculatorul cu un monitor foarte mare sau doar un laptop. Aceeasi problema apare si cand navigatorul (browserul) de internet are marimi diferite ale ferestrei de pe care se vizioneaza site-ul. Prin urmare, nu stii niciodata cat de mare ar trebui sa fie grila ta incat sa fie vizibila si clara pentru orice tip de dispozitiv. Grila trebuie sa se adapteze pentru orice dimensiune si acest lucru introduce design-ul responsiv. Cu un numar tot mai mare de vizitatori de pe telefoanele mobile, este un lucru bun sa faci site-ul sa fie pregatit pentru accesarea sa de pe orice dispozitiv. Crearea unui site responsiv poate fi o provocare daca nu stii ce sa faci si cum sa faci. Pentru inceput, ar fi indicat sa folosesti % in loc de px, em sau alta unitate de masura atunci cand vine vorba de marimea unui element, marime pe care o definesti in CSS.

A doua idee, ar fi sa folosesti un constructor cum este Elementor, care te lasa sa modifici pentru trei rezolutii diferite modul cum se afiseaza site-ul. Iar a trebuia idee este sa testezi pe cat mai multe dispozitive, rezolutii si navigatoare de internet site-ul tau. Ca o grila sa fie responsive, trebuie sa fie corect facuta. Puteti apela la noi prin pagina Web Design. Grila trebuie sa fie flexibila cand vine vorba de diferite marimi de ecran si prin urmare coloanele sa fie mai putin largi atunci cand se face un zoom in sau cand se foloseste un dispozitiv cu ecran mic, dar si numarul de coloane trebuie sa fie schimbat, impreuna cu pozitia elementelor care nu mai sunt asezate unul langa altul, ci unul sub altul definind chiar o singura coloana in loc de doua, trei, patru sau mai multe.

In acelasi timp, acelasi site trebuie sa se largeasca daca navigarea pe el se face de pe un dispozitiv cu rezolutie mare. Acest lucru poate fi dificil, daca faci design-ul de la 0 folosind Ilustrator sau Photoshop, unde dimensiunile trebuie trecute clar si nu poti folosi % din marimea ecranului utilizatorului. De asemenea, vei fi nevoit sa faci aceeasi element grafic de mai multe ori, la diferite marimi si sa testezi pentru cel putin trei marimi de ecran cum arata ele. De aceea, foarte multa a inceput sa faca site-urile direct, folosind un constructor de pagini sau o platforma de management a continutului cum ar fi WordPress. Se castiga foarte mult timp. Altii insa folosesc o generatie noua de unelte cum ar fi Macaw.

Design-ul responsive este greu de invatat, mai ales atunci cand trebuie sa stii relatiile dintre grile. O regula buna este sa incepi design-ul pentru un ecran de dimensiuni reduse si apoi sa incepi design-ul pentru un ecran de dimensiuni medii, urcand mai departe la cel de dimensiuni mari. De obicei, daca incepi sa lucrezi la un design pentru laptop sau chiar pentru un dispozitiv cu un ecran si mai mare, te poti lovi de mai multe probleme cand incerci sa il faci sa arate corect si bine pentru un ecran mai mic. Trebuie sa intelegi cum functioneaza design-ul responsive si cum ar trebui sa arate astfel incat tu sa il adaptezi in timp ce il maresti la o scara mai mare.

Sunt diverse unelte online care te lasa sa verifici design-ul pentru mai multe sisteme de operare, navigatoare, dispozitive si rezolutii. Pentru versiunea dedicata tabletelor, structura trebuie sa se adapteze astfel incat elementele sa se repozitioneze si sa isi micsoreze dimensiunile, pe cand, pentru telefoane, trebuie sa se repozitioneze si mai mult si sa se micsoreze si mai mult.  Trebuie sa te gandesti care ar fi punctele  de spargere (break points) in care un design pentru tableta se modifica in design pentru telefoane mobile. Care ar fi exact dimensiune de unde se incepe tranzitia de la tableta la telefoane. Elementor are implicit aceste dimensiuni care sunt: 1025px punctul de spargere pentru design-ul dedicat tabletei si 768px pentru telefon.

Un sistem bun bazat pe grila te ajuta sa aduci structura potrivita site-ului tau, dar nu inseamna ca utilizatorii vor vedea elementele potrivite si vor fi indemnati la actiune asa cum trebuie. Pentru asta, ai nevoie de o ierarhie vizuala. Este esential sa arati vizitatoriilor care elemente sunt importante si care mai putin importante. Acest aspect este important in web design din cauza a trei motive:

• Utilizatorii sunt incredibil de nerabdatori. Ei pot gasi instant ceea ce vor si apoi sa plece, sau poate sa nu gaseasca nimic din ceea ce vor si tot pleaca instant. De aceea, este important ca elementele potrivite sa fie  evidentiate.
• Toata lumea sufera de ceea ce se numeste paralizia alegerii. De exemplu, daca esti intr-un supermarket si vezi ceva interesant ce ti-ar placea, s-ar putea sa te simti putin prea coplesit de alegerea pe care trebuie sa o faci si s-ar putea sa renunti sa mai cumperi, dar produsul se afla la o oferta speciala sau este pus intr-un raft diferit si nu alaturi de alte produse similare si atunci tu esti mai sigur pe tine ca vrei sa il cumperi. Acelasi lucru se intampla si cu site-ul tau. Daca oferi prea multe optiuni unui utilizator, acesta s-ar putea sa se simta coplesit si sa plece. Ai nevoie de o ierarhie pentru a stabili ce este important si ce este mai putin important.
• Trebuie sa iti ghidezi utilizatorii catre optiunile pe care tu vrei sa le aleaga. De exemplu, daca ai un site de donatii, vrei sa evidentiezi donatiile. Daca vinzi un program, vrei sa evidentiezi descarcarea acestuia. Daca oferi servicii, evidentiaza formularul de contact.

.

Teste

Site-urile facute de la 0, prin codare HTML, CSS, PHP si JS imbunatatesc functionalitatea si designul, dar trebuie verificate si testate pentru a fi corespunzatoare navigarii de pe orice dispozitiv, fie mobil sau nu.

Pentru a testa un site daca este responsive, poti folosi unealta lui Matt Kersley, disponibila la adresa https://mattkersley.com/responsive/ unde poti sa vezi exact cum arata site-ul tau pe dispozitive a caror latime este de 240, 320, 480, 768 si 1024 pixeli.

Codul

Pentru orice tip de dispozitiv mobil poti sa scrii cel putin o linie de cod CSS pentru a imbunatati designul. De obicei, aceasta linie de cod CSS, incepe cu specificarea rezolutiei minime sau maxime pentru care un element se modifica. Mai jos sunt cateva example, impreuna cu dispozitivele corespunzatoare. min-width semnifica latimea minima, pe cand max-width latimea maxima a dispozitivului respectiv pentru care un element isi modifica pozitia, marimea sau alte valori.

Tableta asezata vertical

@media (min-width: 481px) and (max-width: 768px)

Telefon asezata  orizontal

@media (min-width: 321px) and (max-width: 480px)

Telefon asezata  vertical

@media (max-width: 320px)

Acum, sub fiecare linie unde este mentionata rezolutia scrii codul CSS intre { }. Ar trebui sa micsorezi si sa repozitionezi elemente astfel incat sa nu se suprapuna si sa aibe sens. Atat continutul, cat si alte elemente trebuie sa fie lizibile. Uneori insa, poate vrei sa schimbi culorile sau alte insusiri care nu tin neaparat de responsive. Poti sa faci si asta, dupa cum urmeaza in exemplul de mai jos

#banner {margin-left:auto; margin-right:auto; width:1000px; }
.widget-text {padding:10px; background-color:#FCFCFC;  }

Structura – Framework (cadre, grile)

Daca vrei o solutie rapida pentru a avea un site responsive sau nu ai cunostintele necesare CSS pentru a crea unul asa cum trebuie, poti sa folosesti una dintre uneltele de tip framework gratuite:

1. 1. Twitter Bootstrap, momentan la versiunea 4.3, disponibil la adresa http://getbootstrap.com/getting-started/, a fost prima oara lansat in 2011 de catre doi dintre programatorii retelei de socializare Twitter, Mark Otto si Jacob Thornton. Pe GitHub, o platforma unde sunt puse scripturi web, are o popularitate in jur de 75000 stele. Aceasta grila are un comportament perfect chiar si pentru ultimele telefoane, calculatoare, tablete si laptopuri. De asemenea, design-ul este unul de bun gust. Poti descarca Twitter Bootstrap fie luand codul sursa, fie versiunea compilata care trebuie dezarhivata. Indiferent de optiunea aleasa, trebuie incarcata in directorul radacina prin clientul FTP. Boostrap vine cu fisiere al caror cod contine HTML, JS si CSS. Ca si elemente, el contine butoane, meniuri, liste, antente, alerte, bare de progres, pop-up-uri, carousel, slide, galerii si multe altele. Aditional, poti sa descarci versiunea portabila de la Less la Sass pentru a include framework-ul usor in proiecte facute in Rails on Ruby si Compass. Bootstrap este valabil in mai multe limbi si este suportat de navigatoare de internet cum ar fi Firefox, Chrome, Safari, Opera, Dolphin, Chromium, Edge, Internet Explorer si altele. In prezent, framework-ul este folosit si in teme WordPress, dar nu numai.
   2. Foundation 6 este disponibil la https://foundation.zurb.com/ si este un alt framework, super interesant. A fost creat in 2011 de ZURB, iar popularitatea sa creste pe zi ce trece, ajungand la peste 28.000 de stele pe GitHub. Dintre caracteristicile generale mentionam: flexibilitate, posibilitatea de personalizare, lizibilitatea si actualizarile constante care includ si teme HTML, resurse si diferite coduri. Poti folosi Foundation 6 pentru a crea site-uri in HTML, CSS si Javascript, sau pentru a crea e-mailuri in HTML si aplicatii cu Angular si Flexbox. Printre companiile mari care folosesc Foundation 6 se numara Adobe, eBay, HP, Cisco, Amazon, EA, Samsung, Ford, Mozilla, Pixar, Disney si asa mai departe. Echipa din spatele framework-ului ofera tutoriale, cursuri personalizate si certificari. Daca folosesti Yeti Launch pentru Mac, poti crea si proiecte Sass cu un click. Trebuie doar sa descarci si sa instalezi unealta. Yeti foloseste librarii JS cum ar fi UnCSS, UglifyJs, HandleBars si compresia imaginilor pentru a imbunatatii viteza de incarcare a site-ului. Pentru a folosi Foundation pentru e-mailuri, ai nevoie de Outlook, unde vei face testele si vei adauga stilul tau folosind Inky’s Inliner. Iar pentru a crea aplicatii, instaleaza versiunea Foundation pentru Apps CLI, creeaza un proiect nou si porneste procesul de creare a aplicatiei.
   3. Semantic UI este un alt framework responsiv, mai nou decat Bootstrap si Foudnation, creat in 2013 de Jack Lukic si are o popularitate mai mica pe GitHub. Cu aceasta unealta, poti realiza site-uri frumoase si prietenoase rapid datorita codului HTML concis, codul Javascript intuitiv, a sistemului simplificat de verificare a erorilor, a mai mult de 3000 de teme, 50 de componente, librarii JQuery si parteneri care lucreaza constant la proiect. Pentru a folosi Semantic UI, trebuie sa il descarci de la https://semantic-ui.com/, sa il incarci prin FTP sau sa il instalezi direct prin pachetul NPM. Manual, il poti instala incepand cu instalarea NodeJS, Gulp, Semantic UI si apoi includerea fisierului index.html. Diferitele componente aflate in acest framework, te pot ajuta sa creezi teme, sa creezi grile, sa migrezi de la Bootstrap, sa creezi pagini, meniuri sticky sau fixe, formulare de logare, butoane, antete, iconite, imagini, liste, tabele, comentarii si altele. Semantic UI foloseste module ca si Accordion, Checkbox, Dimmers, Dropdown, Embed, Modal, Nag, Pop, Progress, Rating, Search, Shape, Sidebar, Sticky, Tab si Transition.

Tipografia

Unul dintre cele mai importante elemente de web design este tipografia. Aceasta reprezinta unul dintre factorii cheie pe care trebuie sa ii iei in considerare atunci cand iti creezi site-ul. Pentru cineva nou in procesul de design, este foarte usor sa subestimeze importanta tipografiei. Cand spunem tipografie ne referim atat la marimea fontului, dar si la stilul si familia acestuia. Sunt sute de familii disponibile pe internet, iar in ceea ce priveste stilul fontului acesta poate fi subliniat, ingrosat si inclinat. Evident, sunt mai multe dimensiuni pentru ingrosare si, in functie de familia aleasa a fontului, textul poate arata foarte diferit. Este adevarat ca tipografia nu are acelasi impact ca si imaginile, structura sau culorile, dar ramane la fel de importanta. Design-ul exista pentru a putea comunica usor cu cei care ne viziteaza site-ul, iar tipografia ajuta acest proces, marcand textul intr-ul fel sau altul. Daca nu faci corect procesul de tipografie, textul va deveni ilizibil sau vei comunica mesajul gresit cititorului.

Cand vorbesti de tipografie, oamenii se gandesc doar la alegerea unei familii a unui font, dar tipografia este mai mult decat atat. Este important sa stii ordinea si locatia fontului pe care vrei sa il folosesti. Tine cont ca multe fonturi nu exista pe dispozitivele celor care iti viziteaza site-ul si ca atunci trebuie tu sa le gazduiesti pentru a se afisa corespunzator, altfel vor aparea caractere ciudate in loc de textul scris de tine. Datorita restrictiilor licentelor anumitor fonturi care nu sunt gratuite, nu poti sa le gazduiesti prea usor oriunde. Indicat ar fi sa folosesti fonturi care sunt gratuite si disponibile pe internet si poate chiar care sunt gazduire direct de cei care le-au creat. Pentru inceput, poti incepe cu ceva gratuit si apoi eventual avansezi la ceva platit. Este recomandat sa folosesti unul dintre fonturile Google, desi uneori fonturile prea mari nu se incarca prea usor sau instant pe site-ul tau sau poate chiar deloc. Prin cod CSS poti seta sa ai o familie de fonturi principala, iar in cazul in care aceasta nu este disponibila, poti sa incarci un alt font instant. Al doilea font este indicat sa fie ceva ce cu siguranta se afla pe orice dispozitiv cum ar fi un font Arial sau Georgia. Ideal este sa iti alegi doar trei fonturi pentru tot site-ul si nu sa faci o amestecatura. Practic, ai avea un font preferat pentru text, unul pentru butoane/ formulare si inca unul de rezerva sau pentru anumite zone distincte cum ar fi titlurile. De cele mai multe ori nu vei avea probleme in folosirea vreunui font.

Cand vrei sa alegi un font, cel mai important este sa alegi stilul si marimea. Fonturile au stiluri diferite, unele sunt mai ingrosate, altele mai inclinate. Ca si exemple vedeti fontul Arial, fontul Calibri si asa mai departe. Acestea au si personalitate. Prin urmare, alegand un font cu personalitatea gresita, se poate schimba total modul in care percepe un vizitator site-ul. O zona unde poti sa vezi fonturi este si Template Monster. Poti sa vezi chiar si trendurile si cele mai populare fonturi pe care le-ai putea folosi si tu. Unele fonturi sunt create sa arate bine in general, pe cand altele sunt doar pentru elemente distincte, specifice. Trebuie sa ai grija si la marimea aleasa. Un font prea mic va face textul ilizibil, unul prea mare va ocupa prea mult spatiu pe monitor. Testeaza fontul, mai ales daca vrei sa cumperi unul. Datorita structurii responsive, de care am scris in articolele trecute, poti folosi fonturi diferite pentru dispozitive diferite, dar prea multe fonturi pot incarca site-ul prea mult si textul va distrage utilizatorul de la scopul adevarat si anume de a te contacta, de a cumpara sau de a completa un formular.

Daca vrei sa faci un sistem vizual ierarhic, este ok sa diferentiezi fonturile pe elementele site-ului, folosind marimi si grosime diferite in locul folosirii unei familii diferite totale. Sunt unelte online care te ajuta si iti arata care fonturi se potrivesc intre ele.

Un alt aspect important este inaltimea liniei (randului) textului care reprezinta spatiul total intre randurile de text. Cu cat este mai mica, cu atat sansa ca textele de pe doua randuri sa se suprapuna si utilizatorul sa nu inteleaga ce ai scris sau sa sara randurile cand citeste. Ideal este sa ai inaltimea randului mai mare decat marimea fontului. Design-ul va fi mai aerisit in acest caz.

Spatiul dintre litere, care de fapt este spatiul dintre doua caractere, trebuie bine stabilit. Un spatiu prea mare va da senzatia ca sunt mai multe cuvinte si nu doar unul, iar un spatiu prea mic va suprapune caracterele alaturate. De obicei, la marimi mici ale fonturilor, si spatiile dintre caractere ar trebui sa fie mai mici, pe cand la cele mari trebuie sa fie mai mari.

Lungimea unui rand este un alt aspect important dar, in zilele noastre, acesta este setat automat in functie de rezolutia dispozitivului de pe care un utilizator intra pe site. Lungimea unui rand este caracterizata de numarul de caractere pe un rand. Ca si in Word, aceasta se poate modifica, daca se aliniaza textul in stanga, dreapta, centru sau in alt mod. Cei mai multi web design-eri cred ca o lungime potrivita ar fi undeva intre 50 si 70 de caractere pe un rand. Pentru dispozitivele cu rezolutie mica, acest numar trebuie sa fie mai mic. Ai grija sa nu il faci prea mare, pentru ca nu va putea fi vazut in totalitate, iar daca e prea mic, apare un spatiu gol.

Culorile

Culorile genereaza un raspuns puternic bazat pe emotii din partea celor ce viziteaza site-ul. Tocmai de aceea poate parea un teren minat de foarte multe ori. Culorile nu sunt la fel de subiective cum ai crede. In spatele selectiei pentru culori se afla foarte multa cercetare, astfel ca diferite culori alese pentru site indeamna la diferite actiuni sau evidentiaza anumite elemente. Sunt trei elemente care influenteaza culoarea pe care o preferam:

• Psihologia culorii –  Avem un raspuns emotional puternic in ceea ce priveste o culoare, de obicei atunci cand ne aduce aminte de ceva si avem o conexiune cu aceea culoare. De exemplu, ai putea asocia albastrul cu apa si, prin urmare, un site din domeniul pescuitului ar trebui sa foloseasca albastru. Asocierea intre culori si domeniul site-ul conteaza si trebuie sa fie corecta. Uneori aceasta asociere este mult mai puternica. Un site al unei cafenele ar trebui sa foloseasca maroul, astfel incat sa iti dea senzatia (gust si miros) unei cafele fierbinti. Un alt exemplu interesant este cel din domeniul fast food unde se folosesc galbenul si rosul pentru ca mintea percepe combinatia acestora ca si cum ar reprezenta rapiditatea si dau ideea ca reprezinta doua dintre cele mai comune ingrediente din fast food – mustar si ketchup.
• Cultura –  Nu toate asocierile de culori sunt universale. In functie de cultura fiecaruia, perceptia poate diferi. De exemplu, majoritatea celor din Vest considera ca rosul este un semnal pentru pericol, pe cand in China este considerata o culoare norocoasa. Prin urmare, mare grija cand folosesti rosul.
• Teoria culorii – Culorile pot arata bine impreuna, dar unele arata pur si simplu teribil. Teoria culorii reprezinta un subiect de discutie mare, dar bazele sunt chiar simple. Trebuie sa folosesti roata culorilor pentru ca te va ajuta sa vezi ce culori functioneaza bine impreuna. De exemplu, deseneaza un triunghi echilateral peste roata culorilor si vei vedea culorile spre care triunghiul arata si merg impreuna. Din fericire, sunt multe unelte de acest gen cum ar fi Adobe Color, o unealta online care te ajuta sa alegi culorile potrivite si combinatia acestora. Tu doar iti alegi o culoare favorita si Adobe Color va selecta alte culori pentru tine. Daca nu ai nicio idee cu ce culoare sa incepi, atunci ai putea sa folosesti o imagine pentru a incepe. Incarca imaginea din Adobe Color si iti va da culorile pe care imaginea se bazeaza. Poti sa vezi si alte culori alese de alte persoane.

Cand vine vorba de paleta de culori, sunt cateva lucruri pe care trebuie sa le stii.

Pentru inceput, foloseste doar un numar mic de culori, de fapt este recomandat sa ai doua culori pe care sa le folosesti la site, una principala si una secundara. Culoarea principala ar trebui sa apara in majoritatea elementelor de pe site, pe cand cea secundara ar trebui sa evidentieze elementele cele mai importante, cum ar fi butoane, titluri si alte obiecte care pot influenta rapid si direct vizitatorul sa faca o anumita actiune.

Poti sa folosesti si umbre, fie mai luminoase, sau mai inchise pentru a face lucrurile si mai interesante, dar nu aglomera utilizatorul cu zeci de umbre.

Ar trebui sa stii si ca oamenii vad culorile diferit si in functie de cum sunt ei. Unii nici nu pot vedea toate culorile corect, prin urmare s-ar putea sa ai nevoie de mai mult decat o simpla culoare sa faci site-ul asa cum trebuie. In acest caz, te poti folosi de contrast, stilul fontului si culoare. Combinatia, categoric, isi va face treaba. Nu doar defectele biologice influenteaza modul cum vedem culorile, dar si dispozitivele pe care le folosim sa accesam un site. De exemplu, un laptop poate fi setat sa aiba lumina albastra, pe cand un monitor simplu va reda fidel culorile. Monitoarele vechi tind sa intunece ceea ce vedem. Un text impresionant pe un fundal alb este greu de citit pe dispozitivele mobile. Iar cei mai in varsta pot avea probleme in a vedea culorile corecte.

Imaginile

Daca in primele parti am scris despre tipografie, culori, structuri, grile si mai ales despre design-ul responsiv, ar trebui sa stii cateva lucruri si despre imagini, cum sa editezi o imagine, cum sa alegi imaginea potrivita si asa mai departe.

Una dintre cele mai mari greseli pe care cineva le face este sa creada ca imaginile sunt prea putin importante. Totusi, ar trebui sa stii ca o imagine are peste 1000 de cuvinte incorporate in ea. Imaginile ar trebui sa raspunda instant la eventualele intrebari pe care un vizitator le-ar putea avea. De asemenea, imaginile trebuie folosite astfel incat sa completeze continutul deja existent, fie el text, video sau altceva. Imaginile ar trebui sa comunice un mesaj important si sa ajute la explicarea rapida si usoara a unui concept. De exemplu, un restaurant ar trebui sa ofere mancare buna si, prin urmare, un site cu imagini de calitate care sa reprezinte mancarea respectiva. Aceste imagini ar raspunde la intrebari de genul: Ce tip de mancare ofera restaurantul? Care este calitatea mancarii? Cum arata restaurantul? si asa mai departe. Toate aceste raspunsuri sunt date fara a citi nici macar un rand de text sau un cuvant.

Imaginile care sunt de calitate in forma fizica, in print, nu sunt neaparat perfecte sau decente in online, pe site-uri. Cand te uiti la o fotografie, aceasta are intre 300 si 600 de puncte pe inch si imaginea este de foarte mare calitate. Din pacate, majoritatea ecranelor au in jur de 72 de puncte pe inch si asta poate fi o problema mare cand vine vorba de imagini de inalta calitate – aceasta pot sa se pixeleze, iar daca adaugi asta la compresia imaginilor pentru o descarcare mai rapida atunci imaginile complexe vor deveni mai problematice.

In esenta, trebuie sa pastrezi imaginile de dimensiuni mici (cantitatea, nu dimensiunile) astfel incat sa poata fi usor descarcat de navigatorul de internet folosit de vizitatorul site-ului tau. Nu strica sa redimensionezi imaginile la dimensiunile potrivite, pentru ca nu vei avea nevoie pe site de imagini mari. Poti folosi unelte online cum ar fi compressor.io pentru aceste operatiuni.

Daca vrei imagini pentru site-ul tau, nu poti doar sa cauti pe Google Images imaginea pe care o vrei. Majoritatea sunt protejate de copyright si poti sa ai probleme. Poti sa creezi propriile tale imagini fie cu Adobe Photoshop, sau daca vrei ceva mai usor de folosit si online, poti incerca Adobe Spark care este si gratuit. Daca ai un buget mare, poti folosi site-urile de stock cu plata, altfel poti folosi Pixaby si Unsplash, care sunt gratuite. Din fericire, sunt multe persoane care ofera gratuit fotografii sau imagini realizate intr-un program de editare.

Daca vrei sa mergi la nivelul urmator cu un site superb, ai putea sa creezi site-ul conform imaginilor pe care deja le-ai ales. O idee ar fi sa folosesti culorile elementelor si a fontului in functie de culorile logo-ului. O alta idee ar fi sa folosesti suprapuneri de culori peste imagini. Un fel de umbra neagra este la moda si ajuta sa se evidentieze textul scris peste imagine, dar lasand si imaginea undeva in fundal. Aceasta umbra neagra este de fapt un fundal negru semi-transparent. Se pot folosi si alte culori la umbre sau se pot folosi si filtre. Asigura-te insa ca nu mergi prea departe cu efectele de acest gen pentru ca poti strica atat site-ul cat si o imagine buna, reprezentativa si sugestiva.

Utilitatea si uzabilitatea

Atunci cand lucrezi la un design, de fapt, lucrezi la o interactiune, la cum si ce sa faca ea, la cum sa atraga mai multi oameni si asa mai departe. Aici intervin utilitatea si uzabilitatea. Cat de util este un element pentru un vizitator? Cat de util l-ai realizat? Utilitatea este procesul care determina cat de util este un text, o imagine, un buton, un titlu. Uzabilitatea este procesul in care vizitatorii site-ului interactioneaza cu adevarat cu site-ul tau. Cat de des iti „uzeaza” ei site-ul? Cat timp petrec pe site? Ce fac si unde se „plimba”? Sunt doar cateva din intrebarile care ar trebui sa te intereseze. 

Aceste doua procese ar trebui sa fie simple si, de obicei, utilizatorii pot interactiona cu noi online, prin link-uri, butoane si formulare. Problema este ca designerii tind sa creeze design-uri cu adevarat frumoase, dar nu si folositoare sau utilizabile. O imagine frumoasa, care nu transmite ce trebuie sau nu este legata printr-un link de urmatorul pas pe care ar trebui vizitatorul site-ului sa il faca, este o imagine care doar ocupa loc. Site-urile nu ar trebui privite ca si galerii de arta, dar chiar si atunci, multe dintre tablouri se vand, insa cine ar cumpara serviciul sau produsul tau doar uitandu-se la o imagine simpla, fara mesaj? Site-ul ar trebui sa indemne si sa ajute vizitatorul sa faca exact actiunile de care are nevoie anteprenorul din spatele site-ului si anume sa vanda servicii si produse.

Site-ul trebuie sa ofere utilitate, uzabilitate si accesibilitate. Link-urile, butoane si formularele sunt exemplele cele mai comune pentru a vedea ce nu merge bine pe partea de uzabilitate/utilitate a site-ului tau. Ai prea putine din aceste elemente sau deloc? Atunci ai dat gres. Stilul implicit pentru link-uri este reprezentat de textul subliniat si culoarea albastra iar odata accesat, un link devine mov sau albastru inchis. Acest stil este destul de comun si, desi lumea il cunoaste si stie ce este, poate fi imbunatatit pentru a atrage privirile mai mult. Evidentierea este cuvantul cheie in uzabilitate. Cu cat un element este mai corect evidentiat, cu atat este el mai utilizat, mai „uzat”. Multi designeri aleg sa ascunda sublinerea link-urilor iar unii schimba si culoarea si adauga chiar efecte de animatie. Altii folosesc link-urile impreuna cu butoane, coloane, texte, imagini, clipuri video si alte elemente ce pot capta extraordinar de bine atentia utilizatorilor. Poti sa schimbi si stilurile link-urilor deja vizitate, a celor active sau a celor pe care se afla cursorul mouse-ului.

Aceleasi efecte de design se pot aplica textelor, imaginilor, butoanelor, formularelor si tuturor elementelor. Atat cand sunt active, dar si cand sunt hover. Este indicat sa nu schimbi prea mult design-ul unui formular pentru ca nu va mai arata a formular si vizitatorii nu vor sti ce anume sa faca sau cum sa il foloseasca. Design-ul implicit al formularelor este unul dragut, desi nu foarte spectaculos iar daca totusi faci schimbari, asigura-te ca pastrezi elementele clasice – de exemplu, butoanele radio sa ramana butoane radio si asa mai departe. Trebuie sa pastrezi uzabilitatea formularelor chiar daca schimbi design-ul.

Uzabilitatea nu este doar pentru cele trei elemente enumerate anterior. Aceasta mai reprezinta si cat de curat si aerisit este design-ul. Daca nu sunt spatii goale intre elemente, site-ul va parea prea stufos, prea aglomerat, chiar sufocant. Daca pare un site incarcat, fara elemente care sa fie in evidenta, atunci vizitatorul, pur si simplu, va pleca pe alt site. Design-ul trebuie sa  poata oferi informatii care sa fie citite usor si rapid. Trebuie sa fie curat, simplu si intuitiv, chiar prietenos. Prin urmare, fiecare element trebuie sa fie justificat. Sa nu fie lasat aiurea. Sa aiba un scop bine determinat. Ajuta un anumit element un utilizator? Daca da, atunci esti acolo unde trebuie. Daca nu, reconsidera acel element. Poate este chiar mai bine sa il stergi. Sunt mai multe intrebari pe care trebuie sa le iei in considerare. De prea multe ori adaugam continut, dar uitam de miciile detalii care ajuta utilizatorul si care nu sunt neaparat reprezentate de continut. Nu uita ca oamenilor le plac sarcinile si ar trebui sa le dai mici sarcini pe care sa le urmeze, mici mini-proiecte, lucruri de facut. 

Nu uita, inca o data, de spatiile albe care sunt unelte incredibil de folositoare si puternice. Ele ofera scabilitate si reduc confuziile. Spatiile albe atrag atentia in jurul elementului care poate fi cel mai important de pe site-ul tau. Lasa elementele sa respire. Lasa vizitatorii site-ului sa intre in povestea ta!

Branding

Uneori, cand clientul are deja un brand offline, el doreste sa creeze si unul pe internet, o versiune online. Alteori, clientul nu are deloc un brand si are nevoie sa faca unul de la 0. O persoana creativa ar putea fi constransa de ideile clientului, de multe ori acesta nestiind exact ce isi doreste sau necunoscand aspectele brandingului. Asta inseamna ca poate deveni jobul firmei de web design sa isi dea seama ce vrea clientul si cum vrea sa fie brandul sau.

Brandul este mai mult decat doar logo-ul site-ului sau al companiei. Brandul are legatura directa cu personalitatea si caracterul organizatiei pe care o reprezinta. Este aceasta una profesionista, serioasa, dar cu simt al umorului? Aceste caracteristici ar trebui sa afecteze fiecare element al site-ului, fiecare viziune si percepere a site-ului. In functie de raspunsul la intrebarea anterioara, poti alege paleta de culori, dar si tipografia, spatiile albe si alte elemente deja mentionate sunt influentate.

Daca ai in minte un vizitator anume, un tip de persoana care ar putea fi clientul ideal, atunci design-ul este mult mai usor de creat. De exemplu, daca faci un site de fotografie cu siguranta ai vrea sa alegi anumite culori pe cand la un site al unui restaurant alta paleta de culori. Intotdeauna, este bine sa ceri feedback de la prietenii clientilor si de la clienti si bineinteles sa iei notite.

Este indicat sa nu lasi clientul sa inceapa sa faca designul la site, pentru ca acesta nu are cunostintele tale asa cum nici tu nu ai cunostintele sale in domeniul sau, dar asta nu inseamna ca nu poti sa afli preferintele lor si sa incerci sa le asezi in site. O discutie de tip brainstorming este varianta cea mai buna pentru a afla tot ceea ce trebuie de la clientul tau si el de la tine.

Daca un client are deja un ghid de reguli, optiuni, setari, preferinte cum ar fi logo ales, tipografia favorita atunci tu trebuie sa le interpretezi corect astfel incat site-ul sa fie asa cum trebuie. Multi clienti vor sa controleze atat dimensiunile site-ului, dar si alte aspecte care nu isi au rostul si care te fac sa pierzi timp.

Concluzia

Toate elementele enumerate atat in articolul acesta, cat si in cele anterioare au un impact mare in design si in modul cum design-ul unui site este perceput fie de ochii unui vizitator simplu sau al unui competitor. Sunt nenumarate moduri prin care poti personaliza si stiliza designul, dar la fel ca si moda, in timp se schimba pretentiile si trendul. 

Textul, de exemplu, poate fi folosit pentru a adauga caracter si poate fi folosit in diverse zone. Subtilitatea este cheia. Unele parti din text vor functiona pur si simplu prin subconstient, determinand vizitatorul sa actioneze corespunzator.

Sageti, despartitoare, cutiute si alte elemente grafice sunt unelte cu valoarea foarte mare pe care trebuie sa le ai in arsenal si care te vor ajuta sa creezi grupuri de elemente oferind un sens al structurii paginii. Toate elementele tin impreuna site-ul. Daca cutiile pot atrage atentia asupra unui text oferind indicatii vizuale, alte elemente pot oferi o viziune ierarhica.

Iconitele sunt folosite pe foarte multe site-uri, tocmai  pentru a oferi un raspuns vizual puternic si rapid. Ajuta utilizatorul sa scaneze rapid site-ul si sa gaseasca mai rapid ceea ce ii intereseaza, asta in cazul in care se folosesc iconite sugestive cu textul sau elementul alaturat.  Trebuie sa te asiguri ca iconitele au acelasi stil, altfel pot deruta vizitatorul site-ului. Pachete de iconite gratuite poti gasi pe Google.