TSM - De la Design la Development

Vlad Derdeicea - Lead Graphic Designer

În ultima perioadă pe măsură ce web-ul devine tot mai divers, din ce în ce mai mulţi designeri având cunoştinţe tehnologice limitate reuşesc să contruiască site-uri reuşite. Din start vrem să recunoaștem că designerii sunt total dependenţei de developer-i pentru a le aduce creaţiile la viaţă. Pe cont propriu mulţi dintre noi suntem buni la a crea un demo static sau o animaţie de bază dacă suntem norocoşi, dar aceasta nu înseamnă că este gata. Astfel avem nevoie de un developer care să ne traducă designul în cod pe care orice device să îl înţeleagă și să îl execute oriunde în lume.

Cum comunică de multe ori designerii cu developer-ii? Designerii trimit o adunătură de imagini, site-uri exemplu, psd-uri încurcate și documentaţii incomplete. Odată începută faza de development apar inevitabil modificări la grafică sau la structura de bază. Această adunătură este ţinută împreună de întălniri scurte și de notițe superficiale, iar la sfârșitul proiectului toată lumea speră să semene cu ce a trimis designerul în primă fază.

Cu toţii suntem de acord că există un decalaj între designeri și developer. Nu am o soluţie simplă în această privinţa însă am câteva sfaturi căpătate de-a lungul timpului.

Fă-ți un plan solid

Crearea unui plan este esenţială pentru a face website-uri de succes dar și pentru a înţelege developerul care sunt aşteptările tale și ale clientului. O bună soluţie de a evita neînţelegerile este de a îi arăta developerului din start care îți este wireframe-ul și dacă ceea ce vrei tu să creezi este realizabil. Este cea mai bună perioadă să pui întrebări de genul: "Putem realiza acest lucru în bugetul stabilit?" sau "Vezi [introdu grija] ca fiind o problemă pentru respectarea deadline-ului?"

Generează un mock-up bun al design-ului tău

Înainte de a deschide Photoshop-ul structurează site-ul cu un grid adecvat pentru diferite rezoluţii și device-uri. Utilizarea unei lățimi de content a maxim 1080 de px este o bună modalitate de a fi sigur că îi vei face viaţa mai uşoară developer-ului. Generarea unui grid este și o metodă mai uşoară pentru ca el să observe lucrurile aliniate. Folosirea unui layout pe bază de grid este cea mai ușoară și cea mai bună modalitate de a obține un design "Pixel Perfect".

Odată ce designul este gata, acesta poate fi modificat de client sau poate trece mai departe la faza de development unde este important să prevezi cum va arăta scalabil pe mobil, tabletă și desktop. Cum va fi afectat layout-ul tău dacă va mai fi adaugată o categorie, sau dacă clientul vrea să mai adauge încă 5 paragrafe de text. Toate aceste întrebări trebuie să aibă un răspuns înainte de a trimite proiectul la development.

Organizează PSD-ul în așa fel încât și alții să înțeleagă cu ce layer-e și grupuri să lucreze. O soluție bună este să îți grupezi layer-ele și să le dai numele pe care l-ar avea în web (Header, Footer, Content, Video, etc.) Fă tot posibilul ca fiecare element grafic să fie pe câte un layer separat, nu există nimic mai rău decât să încerci să separi două elemente de pe un singur layer. Toate aceste lucruri sună firesc dar micșorează substanțial durata de development dacă sunt organizate.

De asemenea este esenţial să ai și câteva imagini cu detalii (diferite stări ale butoanelor, meniurilor de hover, call to action-uri, etc.) O bună aplicaţie pentru a comunica feedback-uri pe imagine sau alte detalii este "Skitch".

Învaţă funcționalitatea UI-ului tău.

Atunci când creezi elemente diferite cu funcționalități și animații speciale cel mai bine este să găseşti exemple sau să scrii documentaţii precise. Developer-ii nu pot (încă) să îți citească gândurile dacă le dai o imagine statică fără nici o notița sau fără demo.

Dă un feedback productiv.

Odată ce developer-ul și-a terminat treaba vor apărea revizii din partea ta sau a clientului. Foarte rar se întâmplă ca el să nimerească din prima revizie varianta finală așa că va trebui să îi prezinți cât se poate de clar și de specific ce modificări vrei să fie făcute. Pentru a evita orice fel de confuzie e recomandat să țineți cont de modificări prin versiuni.

În concluzie, cu cât ești mai organizat cu atât iți va veni mai ușor să modifici și să îi faci pe alţii să îţi înţeleagă și aprecieze viziunea. Dacă ești nou în webdesign nu lăsa nici o oportunitate să treacă pe lângă tine. Întreabă-ți developer-ul cum poți să îi salvezi câteva ore și în același timp să faci lucruri cât mai inovatoare. Învată din greșelile tale pentru ca pe măsură ce avansezi, să te poți ține mai ușor de deadline-ul stabilit.