Acest articol nu va trata partea de how to. Aici nu veti invata CSS sau HTML, asta o puteti face cu o simpla cautare pe Google.

Scriu acest post in urma unui e-mail primit de la unul din putinii vizitatori. Omul a facut un layout si mi-a cerut parerea. Din pacate nu mi-a dat voie sa fac un review public, asa ca acum voi vorbi la general si chestii.
Bun, in 2009 din ce in ce mai multi au aflat ca web-designul e pe val si avand in vedere ca resursele sunt destul de accesibile multi incearca sa profite, devenind designeri. Acest post se adreseaza acestor inca neinitiati. Neinitiati care vrand-nevrand comit greseli iar eu voi exemplifica cateva dintre cele legate de estetica si usability.

1. Exces de zel. Sau prea multa grafica. Sau kitsch. Cum vreti voi. E acea situatie in care omul vrea sa creeze ceva atat de frumos incat rezultatul final este pur si simplu odios. Greseala foarte frecventa la multi “first timers”. Nu este vorba de o lipsa de talent sau simt estetic, doar de prea multa dorinta si prea putina experienta. Viitorul designer parcurge 20 de tutoriale despre “cum sa faci un layout in Photoshop” si fiind nerabdator, vrea sa le aplice deodata. Sau doreste sa mascheze faptul ca e incepator incercand sa faca ceva complex. Cred ca ati vazut toti siteuri cu header si navigatie uber-mega-complicata, gradient si texturi peste tot, orice titlu e insotit de un box cu “de toate”. Aici enumar si imaginile-text fara un rost anume. Stiu ca e frumos sa ai un stroke si drop shadow la un text, dar nu mai bine pastrezi totul simplu si editabil? Luate separat, aceste elemente grafice de efect sunt benefice, frumoase, dar aplicate deodata aglomereaza siteul atat din punct de vedere estetic cat si a timpilor de incarcare, si SEO.
Puteti face chestii marunte care sa confere un aspect placut siteului. Faceti acele rounded corners mai elaborate, puneti un mic detaliu in colturi…alta viata. Da, detaliile conteaza, FOARTE MULT!
Si atunci cand desenati un layout, ganditi-va si cum il veti coda. Complicandu-va inutil designul va limitati solutiile de implementare.

2. Supradoza de miscare. De cele mai multe ori se manifesta prin flash. Se misca toate. Pun mouseul pe un buton si incepe sa topaie si sa se invarta si sa clipeasca insistent. Sau cand dau click se destrama pagina ca un puzzle si imi apare un preloader si din nou efectul puzzle. Bine, e frumos cand e vorba de o pagina de prezentare ce contine date de contact si putin altceva, dar daca folositi asa ceva la o pagina care are continut, m-ati pierdut.
Agreez o animatie subtila intr-un header, chiar si ceva simplu in meniu (in vremuri moderne se apeleaza la JavaScript pt. asta), e frumos sa ai senzatia de interactivitate, dar ce e mult e mult.
Tot aici voi include si filmuletele si muzica ce pornesc by default. Nu, nu e interzis sa pui un filmulet, sau o muzica de fundal pe site, dar sa nu porneasca automat. Daca vreau sa-l vizionez sau sa ascult dau eu click. Daca porneste singur, efectul cel mai probabil e ca inchid tabul, pur si simplu ma sperie zgomotul in plus.

3. Culori stridente. Multi au probleme cand trebuie sa aleaga schema de culori. Oare verde se potriveste cu rosu? Oare pare prea gri? Solutia e simpla. Puneti ideea in practica si priviti-o 20 de minute. Daca va deranjeaza catusi de putin, schimbati/modificati. Se spune ca cele mai bune combinatii sunt cele care se regasesc in natura. De aici vine si preferinta pentru albastru+verde (vezi tema XP). Ganditi-va la ochii cititorilor, daca obosesc, pleaca de pe site. Voi ati sta pe un site cu textura roz-galben-fosforescent, chiar daca are continut cat de cat interesant?
Tot aici vine si culoarea si fundalul textului. In acest sens sunt chiar conservator, solutia este simpla. Fundal de culoare deschisa (preferabil alb), text inchis…preferabil negru sau nuante de gri(aici poate fi gri-albastrui de exemplu). Alb si negru se integreaza de minune in orice schema.
Nu-mi plac de exemplu siteurile dark, cu fundal negru si scris alb. Daca ma gandesc bine, nu vizitez niciunul cu aceasta configuratie. Dar asta e o chestie personala. Poti face un site dark avand scris negru pe fundal alb.
Evident chestii gen scris galben pe fundal roz…”Close”.

4. Structura. Daca primul lucru pe care il vad pe un site e bannerul adsense si sub el un banner de afiliere, ce sanse crezi ca sunt sa dau scroll sa vad continutul?
Vreau sa vad din start meniul. Nu ascuns intr-un colt, nu camuflat de imagini. Pentru ca faza cu “vizitatorul trebuie sa gaseasca ce doreste in 10 secunde” nu e vrajeala.
Vreau sa vad continut pe prima pagina. Nu vreau panou de “Choose your language” cand din cele 3 steaguri doar unul e activ. Nu vreau sa trec prin 28 de linkuri cautand ceva pentru ca la final sa fiu intampinat de “Aceasta pagina este in constructie”.

Eu am comis toate aceste greseli la un moment dat. Au fost si situatii mai urate cand le-am comis deodata, si a iesit ceva demn de toata mila. Lucrand pentru clienti au fost situatii cand mi s-a cerut sa pun un filmulet “that starts playing when the visitor enters the page”, si nu am reusit sa explic ca e enervant. Dar macar cand e vorba de un proiect propriu, incerc sa-l fac cat mai usable.

Continuarea intr-un articol urmator.