Cîteva noţiuni de design şi uzabilitate la mintea cocoşului

Încep prin a spune că nu mă pot intitula designer, nu am studii de specialitate şi nu creez chestii care să dea pe spate. Dar lucrez pe partea de design, de la “creaţie” – deşi e mult spus, mai degrabă aş zice că lucrez “corect” decît “creez” – şi pînă la codarea CSS-ului. Bun. Acum, că am lămurit asta, să trecem la ce ne doare.

Am dat peste o căruţă de site-uri cu ştaif şi, mai rău, lucrez de multe ori strict pe implementare. Adică primesc fişierul .PSD, eu îl fac ferfeniţă cu “crop” şi îi scriu CSS-ul si PHP-ul de rigoare. În ambele situaţii, designerii uită cîteva aspecte importante. De fapt, de ce să mă complic? Uită cel mai important aspect, acel etern “KISS“: “Keep it simple, stupid!“. Cu cît complici un design, cu atît mai mult complici conţinutul şi, implicit, complici munca celui care ţi-l implementează.

Dar să trec la alea cîteva noţiuni la mintea cocoşului, alea pe care le uită majoritatea.

• întotdeauna, cînd ai un site cu logo sau cu heading cît China, în capul site-ului, pune pe el link către prima pagină. Nu mă face pe mine, utilizatorul, să caut disperat link-ul către prima pagină
• întotdeauna, caseta de căutare în site trebuie să stea cît mai sus, cît mai vizibilă. Pe cît posibil, în colţul din dreapta sus, în header. Este primul loc în care eu, utilizatorul, caut search-ul. Cu cît îl duci mai jos, cu atît mai tare mă enervezi şi cu atît mai multe şanse ai să nu mă mai prinzi pe site

Astea două sînt cele de cultură generală. Acum însă urmează alea crunte, care mă chinuie pe mine acum. Şi aici încep prin a spune: foloseşte, dracului, un grid system!, că nu-ţi stă-n gît! De ce? Ca să nu mă chinui cu douăjdemii de dimensiuni diferite de la pagină la pagină. “About” are o lăţime de 815 pixeli, “Contact” are o lăţime de 620 pixeli, “News” are o lăţime de 420 pixeli. Frate, hotărăşte-te! Cu cît sînt mai multe dimensiuni, cu atît mai repede se uită chiorîş utilizatorul la site. Primul gînd e că nu eşti consecvent.

O altă chestie care mă disperă e cantitatea de culori folosite, la fel, de la pagină la pagină. Conţinutul articolului e un gri foarte închis (#333, să zicem), sidebar-ul e ceva mai deschis (#999, la o adică) în jumătatea superioară şi de-a dreptul gri în jumătatea interioară. Asta n-ar fi nimic, ar mai arăta cum ar mai arăta. Dar să vezi ce mişto e cînd ai titlul mare (H1) bleu, subtitlul 2 (H2) bleumarin, textul articolului bleumarin, byline-ul gri deschis, link-urile albastre şi footer-ul negru. Toate astea în contextul dimensiunilor de mai sus, da?

Plus: text centrat pe mijloc în articol, centrat stînga în sidebar, doar DIV central în trei pagini, centru şi sidebar în două pagini şi central plus sidebar-uri laterale în alte cîteva. Iar DIV-ul ăla central în contextul dimensiunilor de mai sus, da? Te apucă dracii.

Treacă-meargă, dar să vezi distracţie cînd trebuie să implementezi cinci-şase fonturi diferite (patru – handwriting, un Helvetica şi un Arial, acolo, să fie). În primul rînd, Photoshopul are marele dar de face un font să se vadă bine. NU ŞI BROWSERELE! Helvetica se vede bine în browser la o anumită dimensiune. De exemplu, un Helvetica pe care îl am eu se vede bine la 13 pixeli. Deci, degeaba îmi spui tu că în PSD e de 12 pixeli, la mine, în Firefox, o să se vadă ca naiba cu 12. Dă-mi tu Helvetica aia care se vede bine în toate browserele, la dimensiune de 12 pixeli. Şi nu, nu-mi da versiunea de Mac!, nici pe aia de 0 (zero) kb, că nu mă ajută.

Însă de departe, cea mai tare invenţie a designerilor e backgroundul pe care nu-l poţi exporta pentru repeat. Ah, ai nevoie să schimbi citatul acolo? Păi, ştii, n-ai cum! Că ăla e DIV cu dimensiuni fixe, în care am testat @font-face cu cinci fonturi diferite, în care pînă la urmă am băgat un JPG, că nu mi se vedeau fonturile tale pe 9 pixeli, iar dacă le dădeam zece, ieşeau din backgroundul ăla care nu se repetă şi, ghici ce?, se vedea ca naiba!

În fine, cam asta ar fi, pe scurt. Altfel, e drăguţ, simpatic şi îţi mănîncă tot timpul. Mai ales cînd vine vorba de făcut corecturile CSS-ului pentru IE6 în situaţii precum cele descrise mai sus.