Cele mai bune zece reguli de design front-end pentru dezvoltatori

În calitate de dezvoltatori front-end, treaba noastră este, în esență, să transformăm proiectele în realitate prin intermediul codului. Înțelegerea și competența în design este o componentă importantă a acestuia. Din păcate, înțelegerea cu adevărat a designului front-end este mai ușor de spus decât de făcut. Codarea și designul estetic necesită niște seturi de abilități destul de diferite. Din această cauză, unii dezvoltatori front-end nu sunt la fel de competenți în aspectul designului pe cât ar trebui să fie și, în consecință, munca lor are de suferit.

Scopul meu este să vă ofer câteva reguli și concepte ușor de urmat, de la un dezvoltator front-end la altul, care vă vor ajuta să treceți de la început până la sfârșit al unui proiect, fără să dați peste cap ceea ce au lucrat atât de mult designerii dvs. (sau posibil. chiar permițându-vă să vă proiectați propriile proiecte cu rezultate decente).

Desigur, aceste reguli nu te vor duce de la rău la magnific în timpul necesar pentru a citi un articol, dar dacă le aplici în munca ta, ar trebui să facă o mare diferență.

Faceți lucruri într-un program de grafică

Este cu adevărat rar să finalizați un proiect și să mergeți de la început până la sfârșit, păstrând în același timp fiecare mutație estetică în fișierele de proiectare. Și, din păcate, designerii nu sunt întotdeauna prin preajmă la care să alerge pentru o remediere rapidă.

Prin urmare, întotdeauna vine un moment în orice job front-end în care ajungi să fii nevoit să faci niște ajustări legate de estetică. Fie că faceți bifa care se afișează când bifați caseta de selectare, fie că faceți un aspect de pagină pe care PSD l-a ratat, front-enderii ajung adesea să gestioneze aceste sarcini aparent minore. Desigur, într-o lume perfectă nu ar fi cazul, dar încă nu am găsit o lume perfectă, de aceea trebuie să fim flexibili.

Pentru aceste situații, ar trebui să utilizați întotdeauna un program de grafică pentru machete. Nu-mi pasă ce instrument alegi: Photoshop, Illustrator, Fireworks, GIMP, orice. Doar nu încercați să proiectați din codul dvs. Petreceți un minut lansând un program de grafică real și descoperiți cum ar trebui să arate, apoi accesați codul și faceți-l să se întâmple. Poate că nu sunteți un designer expert, dar veți ajunge totuși cu rezultate mai bune.

Potriviți designul, nu încercați să-l învingeți

Treaba ta nu este să impresionezi cu cât de unic este bifa ta; sarcina ta este să-l potriviți cu restul designului.

Cei fără multă experiență în design pot fi tentați cu ușurință să își lase amprenta asupra proiectului cu detalii aparent minore. Vă rugăm să lăsați asta pe seama designerilor.

În loc să întrebi „Bifa mea arată uimitor?” ar trebui să vă întrebați: „Cât de bine se potrivește bifa mea cu designul?”

Accentul tău ar trebui să fie întotdeauna pe lucrul cu designul, nu pe încercarea de a-l depăși.

Tipografia face toată diferența

Ai fi surprins să știi cât de mult din aspectul final al unui design este influențat de tipografie. Ați fi la fel de surprins să aflați cât timp petrec designerii pentru asta. Acesta nu este un efort „pick-it-and-go”, ci ceva timp și efort serios pentru el.

Dacă ajungeți într-o situație în care trebuie să alegeți tipografia, ar trebui să petreceți o perioadă decentă de timp făcând asta. Accesați online și căutați perechi bune de fonturi. Petreceți câteva ore încercând acele perechi și asigurându-vă că ajungeți cu cea mai bună tipografie pentru proiect.

Dacă lucrați cu un design, asigurați-vă că urmați alegerile de tipografie ale designerului. Acest lucru nu înseamnă doar alegerea fontului. Acordați atenție la spațierea dintre rânduri, spațierea literelor și așa mai departe. Nu trece cu vederea cât de important este să se potrivească cu tipografia designului.

De asemenea, asigurați-vă că utilizați fonturile potrivite în locul corect. Dacă designerul folosește Georgia numai pentru anteturi și Open Sans pentru body, atunci nu ar trebui să folosiți Georgia pentru body și Open Sans pentru anteturi. Tipografia poate face sau distruge estetica cu ușurință. Petreceți suficient timp asigurându-vă că vă potriviți cu tipografia designerului dvs. Va fi timp bine petrecut.

Designul front-end nu tolerează vederea în tunel

Probabil vei realiza mici părți ale designului general.

Un exemplu pe care l-am folosit este bifarea unui design care include casete de selectare personalizate, fără a le arăta bifate. Este important să rețineți că piesele pe care le faceți sunt părți mici ale unui design general. Asigurați-vă cecurile la fel de importante precum ar trebui să arate o bifă de pe o pagină, nici mai mult, nici mai puțin. Nu obține viziunea tunelului despre singura ta parte mică și fă-o ceva ce nu ar trebui să fie.

De fapt, o tehnică bună pentru a face acest lucru este să faceți o captură de ecran a programului de până acum, sau a fișierelor de design și a proiecta în cadrul acestuia, în contextul în care va fi utilizat. În acest fel, vedeți cu adevărat cum afectează celelalte elemente de design de pe pagină și dacă se potrivește corect cu rolul său.

Relații și ierarhie

Acordați o atenție deosebită modului în care designul funcționează cu ierarhia. Cât de apropiate sunt titlurile de corpul textului? Cât de departe sunt de textul de deasupra lor? Cum pare să indice designerul care elemente/titluri/corpuri de text sunt legate și care nu? În mod obișnuit, vor face aceste lucruri prin îmbinarea conținutului asociat, folosind diferite spații albe pentru a indica relații, folosind culori similare sau contrastante pentru a indica conținutul înrudit/nelegat și așa mai departe.

Este datoria ta să te asiguri că recunoști modurile în care designul realizează relațiile și ierarhia și să te asiguri că acele concepte sunt reflectate în produsul final (inclusiv pentru conținutul care nu a fost conceput special și/sau conținut dinamic). Acesta este un alt domeniu (cum ar fi tipografia) în care merită să luați timp suplimentar pentru a vă asigura că faceți o treabă bună.

Fiți pretențioși în privința spațiului alb și a alinierei

Acesta este un sfat grozav pentru a vă îmbunătăți designul și/sau pentru a implementa mai bine desenele altora: dacă designul pare să folosească distanțe de 20 de unități, 40 de unități etc., atunci asigurați-vă că fiecare spațiere este un multiplu de 20 de unități.

Aceasta este o modalitate foarte simplă pentru cineva fără ochi pentru estetică de a face o îmbunătățire semnificativă rapid. Asigurați-vă că elementele sunt aliniate în jos la pixel și că distanța în jurul fiecărei margini a fiecărui element este cât mai uniformă. Acolo unde nu puteți face acest lucru (cum ar fi locurile în care aveți nevoie de spațiu suplimentar pentru a indica ierarhia), faceți-le multipli multipli ai distanței pe care o utilizați în altă parte, de exemplu de două ori valoarea prestabilită pentru a crea o anumită separare, de trei ori pentru a crea mai multe , și așa mai departe.

Mulți dezvoltatori reușesc acest lucru pentru conținut specific din fișierele de proiectare, dar când vine vorba de adăugarea/editarea conținutului sau implementarea conținutului dinamic, distanța poate fi peste tot, deoarece nu au înțeles cu adevărat ce implementau.

Faceți tot posibilul pentru a înțelege modul în care designerul a folosit spațiile albe și urmați aceste concepte în construcția dvs. Și da, petreceți timp cu asta. Odată ce credeți că munca dvs. s-a încheiat, reveniți și măsurați distanța pentru a vă asigura că ați aliniat și ați distanțat uniform totul cât mai mult posibil, apoi încercați codul cu o mulțime de conținut variat pentru a vă asigura că este flexibil .

Dacă nu știi ce faci, fă mai puțin

Nu sunt unul dintre acei oameni care cred că fiecare proiect ar trebui să folosească design minimalist, dar dacă nu sunteți încrezător în design-ul dvs. și trebuie să adăugați ceva, atunci mai puțin înseamnă mai mult.

Designerul s-a ocupat de lucrurile principale; trebuie doar să faci umpluturi minore. Dacă nu ești foarte bun la design, atunci un pariu bun este să faci cât mai puțin posibil pentru ca acel element să funcționeze. În acest fel, injectați mai puțin din propriul design în munca designerului și îl afectați cât mai puțin posibil.

Lăsați munca designerului să fie în centrul atenției și lăsați munca dvs. să ocupe bancheta din spate.

Timpul ne face proști pe toți

Îți voi spune un secret despre designeri: 90 la sută (sau mai mult) din ceea ce au pus de fapt pe hârtie sau pe o pânză Photoshop, nu este atât de grozav.

Ei aruncă mult mai mult decât ați văzut vreodată. Este nevoie adesea de multe revizuiri și de a te juca cu un design pentru a ajunge la punctul în care chiar l-ar lăsa pe tipul din următoarea cabină să-și vadă munca, indiferent de clientul real. De obicei, nu treci de la o pânză goală la un design bun într-un singur pas; există o grămadă de iterații între ele. Oamenii fac foarte rar o treabă bună până când nu înțeleg asta și permit acest lucru în procesul lor.

Deci cum implementezi asta? O metodă importantă este să luați timp între versiuni. Lucrați până când arată ca ceva care vă place, apoi puneți-l deoparte. Dă-i câteva ore (este și mai bine să-l lași peste noapte), apoi deschide-l din nou și aruncă o privire. Vei fi uimit de cât de diferit arată cu ochii proaspeți. Veți alege rapid zonele de îmbunătățit. Vor fi atât de clare încât te vei întreba cum de le-ai ratat în primul rând.

De fapt, unul dintre cei mai buni designeri pe care i-am cunoscut duce această idee mult mai departe. El ar începe prin a face trei modele diferite. Apoi, aștepta cel puțin 24 de ore, se uita la ele din nou și le arunca pe toate și începea de la zero cu o a patra. În continuare, va lăsa o zi între fiecare iterație, pe măsură ce mergea din ce în ce mai bine. Numai când l-a deschis într-o dimineață și era complet fericit, sau cel puțin, cât de aproape un designer ajunge vreodată să fie total fericit, îl trimitea clientului. Acesta a fost procesul pe care l-a folosit pentru fiecare design pe care l-a realizat și i-a servit foarte bine.

Nu mă aștept să duci atât de departe, dar evidențiază cât de util poate fi timpul fără „ochi pe design”. Este o parte integrantă a procesului de proiectare și poate aduce îmbunătățiri vertiginoase.

Pixelii contează

Ar trebui să faceți tot ce vă stă în putere pentru a se potrivi cu designul original din programul final, până la ultimul pixel.

În unele zone nu poți fi perfect. De exemplu, controlul dvs. asupra spațierii dintre litere ar putea să nu fie la fel de precis ca cel al designerului, iar o umbră CSS ar putea să nu se potrivească exact cu una din Photoshop, dar ar trebui să încercați totuși să vă apropiați cât mai mult posibil. Pentru multe aspecte ale designului, puteți obține o precizie perfectă la pixeli. Procedând astfel, poate face o mare diferență în rezultatul final. Un pixel pe ici și colo nu pare mult, dar se adaugă și afectează estetica generală mult mai mult decât ai crede. Așa că fii cu ochii pe el.

Există o serie de [instrumente] care vă ajută să comparați modelele originale cu rezultatele finale sau puteți pur și simplu să faceți capturi de ecran și să le lipiți în fișierul de proiectare pentru a compara fiecare element cât mai aproape posibil. Doar așezați captura de ecran peste design și faceți-o semi-transparentă, astfel încât să puteți vedea diferențele. Atunci știi cât de multă ajustare trebuie să faci pentru a-l obține pe bune.

Obțineți feedback

Este greu să câștigi un „ochi pentru design”. Este și mai greu să o faci pe cont propriu. Ar trebui să căutați contribuția altora pentru a vedea cu adevărat cum puteți aduce îmbunătățiri.

Nu sugerez să-ți iei vecinul și să ceri sfaturi, adică ar trebui să consulți designeri reali și să-i lași să-ți critice munca și să-ți ofere sugestii.

Este nevoie de ceva curaj pentru a face acest lucru, dar în cele din urmă este unul dintre cele mai puternice lucruri pe care le puteți face pentru a îmbunătăți proiectul pe termen scurt și pentru a vă îmbunătăți nivelul de abilități pe termen lung.

Chiar dacă tot ce trebuie să reglați este o simplă bifă, există o mulțime de oameni dispuși să vă ajute. Indiferent dacă este un prieten designer sau un forum online, căutați oameni calificați și obțineți feedback-ul lor.

Poate suna consumator de timp și poate provoca frecări între tine și designerii tăi, dar în marea schemă a lucrurilor, merită. Dezvoltatorii front-end buni se bazează pe contribuțiile valoroase ale designerilor, chiar și atunci când nu este ceva ce le place să audă.

Prin urmare, este vital să construiți și să mențineți o relație constructivă cu designerii dvs. Sunteți cu toții în aceeași barcă, așa că pentru a obține cele mai bune rezultate posibile trebuie să colaborați și să comunicați la fiecare pas. Investiția în construirea de legături cu designerii dvs. merită din plin, deoarece va ajuta pe toată lumea să facă o treabă mai bună și să execute totul la timp.

Concluzie

Pentru a rezuma, iată o listă scurtă de sfaturi de design pentru dezvoltatorii front-end:

• Design într-un program de grafică. Nu proiectați din cod, nici măcar lucrurile mici.
• Potriviți designul. Fiți conștienți de designul original și nu încercați să-l îmbunătățiți, ci doar potriviți-l.
• Tipografia este uriașă. Timpul pe care îl petreceți pentru a vă asigura că este corect ar trebui să reflecte importanța acestuia.
• Evitați vederea în tunel. Asigurați-vă că adăugările dvs. ies în evidență atât cât ar trebui. Nu sunt mai importante doar pentru că le-ai proiectat.
• Relații și ierarhie: înțelegeți cum funcționează acestea în proiectare, astfel încât să le puteți implementa corect.
• Spațiile albe și alinierea sunt importante. Faceți-le exacte la pixeli și faceți-le uniform pe tot ceea ce adăugați.
• Dacă nu sunteți încrezător în abilitățile dvs., atunci faceți adăugirile cât mai minimal posibil.
• Luați timp între revizuiri. Reveniți mai târziu pentru a vedea lucrările dvs. de design cu ochi proaspeți.
• Implementarea pixel-perfect este importantă oriunde este posibil.
• Fii curajos. Căutați designeri experimentați pentru a vă critica munca.

Nu orice dezvoltator front-end va fi un designer fantastic, dar fiecare dezvoltator front-end ar trebui să fie cel puțin competent în ceea ce privește designul.

Trebuie să înțelegeți suficient despre conceptele de design pentru a identifica ce se întâmplă și pentru a aplica corect designul produsului final. Uneori, puteți scăpa de copierea oarbă dacă aveți un designer amănunțit (și dacă sunteți suficient de orientat spre detalii pentru a o copia cu adevărat pixel cu pixel).

Cu toate acestea, pentru a face proiecte mari să strălucească în multe variații de conținut, aveți nevoie de o anumită înțelegere a ceea ce trece prin capul designerului. Nu trebuie doar să vedeți cum arată designul, trebuie să știți de ce arată așa cum arată și astfel puteți fi atenți la limitările tehnice și estetice care vă vor afecta munca.

Deci, chiar și în calitate de dezvoltator front-end, o parte din auto-îmbunătățirea obișnuită ar trebui să includă întotdeauna învățarea mai mult despre design.