Este grozav sa fii un designer in zilele acestea.CSS reuseste in final sa ajunga la nivelul viziunii noasre legate de un website.Au trecut zilele cand trebuia sa ne bazam pe hack-uri si imagini pentru a crea interfete extraordinare.Dar o problema majora este inca suportul browserelor.Exista inca o multime de versiuni care nu suporta noile functionalitati CSS.Asa ca trebuie sa incurajam userii sa treaca la noua experienta, cea moderna…trebuie sa regandim modul in care cream website-urile.

Ce o sa discutam astazi nu este ceva nou sau extraordinar ci mai degraba o extensie la cunostiintele tale actuale, sau mai degraba o descriere mai ampla al unui topic pe care deja il stii.Acest articol o sa fie un fel de contra-atac la ce ai invatat, unde Photoshop era piesa primordiala in crearea unui website si programatorul piesa secundara ca importanta.

Intalneste-ti noua unealta de design

The new canvas
Banalul browser este nouia ta unealta de design.De acum ar trebui sa iti incepi orice proiect nou cu o noua fereastra.

Regandirea modului de lucru in web design

Daca esti ca mine, cand incepi un nou website, iti iei o foaie si un creion si incepi sa iti pui ideile creand intr-un final o schita a produsului finit.Apoi deschizi Photoshop sau Fireworks si incepi sa creezi designul in sine.Codarea nu este un factor decat spre finalizarea proiectului.

Aceasta este o conceptie fundamental gresita si chiar din multe motive.Primul, un website nu este o imagine.Un website terminat este un lucru dinamic si flexibil, cu viata chiar, construit in HTML si CSS.Photoshop ne ofera(noua cat si clientilor) asteptari nerealiste pentru cum ar trebui sa fie si sa se comporte un website.Ar trebui sa te gandesti cum poti translata designul in cod si imagini pe tot parcursul procesului de design.

In al doilea rand, intregul concept de design „complet” este gresit.Sa construiesti o macheta in Photoshop si apoi sa spui „Gata…acuma la cod!” iti ofera o perceptie continua a designului, echivalentul la a dovedi ca ai o scrisoare inca neprimita.Unul din avantajele enorme ale Internetului este ca e in continua schimbare.Sa stantezi o macheta ca fiind terminata spune ca aceeia este ultima versiune a designului ce va exista vreodata.Ca designeri, ar trebui sa imbratisam natura in continua schimbare a mediului in care lucram si sa recunoastem ca un design nu este niciodata terminat.

Avantajul proiectarii in cod este ca vom fi fortati sa privim continutul si designul ca doua lucruri complet diferite.Continutul conduce designul, nu invers.

Uneltele necesare

Evident, vei avea nevoie de un browser.De fapt ar trebui sa ai cateva browsere pentru testare(Wine pentru a utiliza Ie si pe Mac).La baza ar trebui sa ai cel putin un browser -webkit ca Safari sau Chrome, dar si unul pe platforma Gecko ca Firefox.Daca ai mai facut web design in trecut cred ca acest capitol este deja rezolvat.

The tools

Piramida web designerului

Ar trebui sa ai un editor decent de texte de asemenea.Probabil ceva mai avansat ca Dreamveawer, Notepad++, WebMatrix pentru Windows sau Espresso, Coda pentru Mac.Am inteles ca foarte multi utilizatori utilizeaza si TextMate, dar acum fiecare are propriile preferinte, cele de mai sus fiind mentionate doar pentru noii veniti.

Schitarea

Schitarea este cu siguranta cea mai importanta parte din procesul de design.Nu ar trebui s fie schimbata nici daca ai crea un website in browser.

Ar trebui sa ai o idee solida legata de cum ar trebui sa iti arate designul, chiar inainte de a incepe pe computer.La finalul zilei, inca ramane un design asa ca nu ar trebui sa uiti de creion si hartie.Nu intru si mai in detaliu la acest capitol fiindca nu necesita si pe deasupra aceasta parte se invata in timp, aproape fara sa-ti dai seama.Doar trebui sa tii minte un lucru:nu deschizi Photoshop daca nu ai vreo idee legata de cum va arata site-ul, ar fi chiar ciudat si pe desupra anormal sa incepi un proiect neavand vreo idee de ce trebui sa faci.

De fapt, nu trebui sa fie realmente o schitare.Fa ce merge mai bine pentru tine pentru a crea conceptul.Oricare ar fi el, lucrul important ce trebuie luat in considerare este ca trebuie sa ai o idee solida in minte inainte de a incepe lucrul pe computer.

A designer's best friend

Sablonul unui website

Sablonul unui website este, fara nici un dubiu cel mai important pas din procesul de design.Ai putea avea cele mai frumoase fonturi, culorile perfecte, detalii micute extraordinare, dar fara un sablon solid, intregul design s-ar reduce la un mare nimic.Din fericire, construirea unui sablon solid, ce contine elementele fundamentale este cel mai usor lucru ce il poti face in CSS ca si web designer.Site-ul A List Part are un articol grozav pe subiectul acesta ce il recomand din toata inima pentru a afla detaliile tehnice legate de crearea unui sablon in CSS.

Daca exista un lucru ce trebuie sa-l stii inainte de a incepe codarea, acela este sablonul continutului tau.Daca ai un anumit sablon in minte, este chiar simplu sa il transpui in cod.Totusi, daca incepi un proiect fara un anumit sablon in minte, cred ca vei fi dezamagit de rezultate.Sablonul nu este un lucru cu care poti experimenta si schimba pe parcurs; este o problema ce necesita o atentie maxima.

Chiar daca nu stii unde se va afla fiecare element in pagina, ar trebui sa ai cel putin o idee generala legata de amplasamentul elementelor principale, cat si proportiile dintre elemente(10% sidebar, 50% continut, 10% header etc.).

Tipografia

Typography

Daca te-ai mai lovit de CSS, este imposibil sa nu fi auzit de @font-face, chiar daca nu l-ai folosit in niciun proiect.Pentru cei care nu au auzit, am sa incerc sa sintetizez ce poate face acest tag intr-un enunt:@font-face este o metoda prin care se poate insera si utiliza orice font pentru a-l utiliza intr-un website, chiar daca respectivul font nu este instalat pe computerele userilor.

Aceata idee simpla ne-a dus intr-o noua era a tipografiei in numai cativa ani.Companii intregi ca Typekit si Fontdeck s-au format numai ca sa ofere fonturi frumoase pentru website-uri.In trecut erai nevoit sa te limitezi la hack-uri ca Cufon sau pur si simplu la imagini pentru a afisa continutul asa cum vrei, dar toate astea se schimba.Webmasterii au imbratisat toate aceste noi tendinte pentru a putea hosta, apoi insera anumite fonturi pe un website.

Si acum te intrebi…ce legatura are astacu proiectarea in browser?

Este mult mai usor sa gestionezi fonturile prin regulile CSS, decat Photoshop…

Este destul de obositor dupa o vreme sa schimbi o bucatica de text in Photoshop, pe cand in CSS poti testa nu numai fontul ci si culoarea, stilul, greutatea, marimea doar prin schimbarea catorva linii de cod.Acest lucru e de folos la repetarea unui tipar, ajutandu-te sa adaptezi mai usor un design pentru un anumit client numai prin cateva clicuri si taste.

Invata cand sa utilizezi Photoshop

Eu de obicei am deschis Photoshop cand codez un website si daca ma gandesc mai bine…foarte putine website-uri pot fi create fara Photoshop.Pai numa sa ne gandim, chiar daca incerci sa creezi un website cu browserul in fata, vor exista cel putin doua sau trei imagini pe undeva, sa zicem, o imagine de fundal sau o iconita.Daca nu stii sa creezi imagini fara un editor ca Photoshop sau vreun software similar atunci vei utiliza cel putin niste imagini gata facute, caci sa recunoastem…este imposibil sa creezi un website atragator fara un editor ca Photoshop.

Photoshop nu e rau deloc.In acest articol am vrut sa subliniez ca nu ar trebui sa te bazezi pe Photoshop atat de mult cand vine vorba de designul unui website, dar cand vine vorba de designul unor icoane web de exemplu, Photoshop este o unealta groazava.In orice caz, la un anumit stagiu din proiectul tau, nu exista dubii ca nu vei genera vreun fundal sau vreo textura.

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Send this to a friend