Cum să abordați designul pentru dezvoltatori

Chiar dacă pot lucra la aceleași proiecte și produse, dezvoltatorii și designerii lucrează adesea separat unul de celălalt în siloz. Designul este adesea considerat de către dezvoltatori ca un lucru secundar, lipsit de importanță în comparație cu funcționalitatea unui produs.

Acest tip de gândire poate fi în detrimentul relației dezvoltator-designer. Lipsa unei înțelegeri de bază a designului poate ține dezvoltatorii înapoi în cariera sau îi poate împiedica să urmărească proiecte doar pentru că nu au un designer la bord.

De ce dezvoltatorii ar trebui să învețe designul

În timp ce designul și dezvoltarea sunt adesea considerate ca discipline separate, există oameni care le-au stăpânit pe ambele. Chiar dacă cineva este interesat doar să fie designer sau dezvoltator – nu ambele – este valoros să înveți măcar elementele de bază ale celeilalte discipline.

Există câteva motive pentru care dezvoltatorii ar putea dori să învețe design sau cel puțin să dezvolte o bază de bază a cunoștințelor de design.

În primul rând, echipele mici s-ar putea să nu aibă un designer dedicat. În plus, există dezvoltatori care doresc să abordeze proiectele pe cont propriu, care nu își permit să angajeze un designer (sau doresc să cheltuiască banii în altă parte). Învățarea să-și proiecteze propriile produse, cel puțin suficient de bine pentru a se descurca până când un designer poate fi angajat este o resursă de neprețuit.

Celălalt motiv important pentru care dezvoltatorii învață designul este astfel încât să poată lucra mai eficient cu designerii. Este incredibil de frustrant pentru un designer să predea un fișier complet proiectat pentru un site web sau o aplicație despre care se așteaptă să fie perfect pixeli în produsul finit, doar pentru a descoperi că designul lor a fost schimbat semnificativ de către dezvoltatorul care îl codifică.

Dacă dezvoltatorii nu înțeleg elementele de bază ale designului, pot trece cu vederea mici detalii care fac ca o interfață de utilizator să fie deosebit de ușor de utilizat și să saboteze neintenționat experiența utilizatorului proiectului. Atunci când designerii trimit înapoi tone de corecții, aceasta poate încorda relația dezvoltator-designer, ca să nu mai vorbim de încetinirea finalizării unui proiect.

Pentru a îmbunătăți relațiile și munca în echipă între echipele interdisciplinare, dezvoltatorii și-ar face o favoare învățând să vadă design-urile prin „ochii designerului”, mai degrabă decât să le privească doar dintr-o perspectivă de dezvoltare - stăpânirea acestei abilități le va îmbunătăți foarte mult proiectele.

Crearea unei mentalități de design

De prea multe ori, dezvoltatorii care învață să proiecteze se concentrează prea mult pe estetica designurilor pe care le plac și pe care doresc să le imite, mai degrabă decât pe principiile de bază care susțin acele design. Ei văd lucruri precum culoarea și dimensiunea unui buton, un anumit font sau modul în care sunt folosite marginile fără a înțelege motivele din spatele acestor alegeri.

Ei încep să pulverizeze vopsea pe pereți și să decoreze spațiul fără să înțeleagă scopul spațiilor pe care le decorează (sau chiar să se asigure că lucruri precum instalațiile și lucrările electrice sunt terminate), ca să spunem așa.

Este important să înțelegeți și să respectați principiile din spatele motivului pentru care designerii iau deciziile pe care le fac. Oricine este nou în design are nevoie de o înțelegere fermă a principiilor și teoriilor care alcătuiesc un design bun - lucruri precum Principiile Gestalt și ierarhia vizuală de bază - înainte de a se scufunda și de a începe să pulverizeze vopsea peste tot.

Acestea fiind spuse, este, de asemenea, obișnuit ca noii designeri, indiferent dacă au sau nu experiență în dezvoltare, să se blocheze în teorie. Ei petrec atât de mult timp învățând și gândindu-se la lucruri încât nu ajung niciodată să aplice cu adevărat ceea ce învață.

Atât designerii, cât și dezvoltatorii tind să fie perfecționiști. Dar împingerea desenelor înainte ca acestea să fie perfecte (din moment ce probabil că nu vor fi niciodată) este importantă pentru proces. În special, noii designeri trebuie să treacă peste nesiguranțe, să-și pună munca acolo și să învețe din feedback-ul pe care îl primesc.

Una dintre cele mai bune modalități de a învăța cu adevărat designul este să încerci să recreați desenele altora. A deosebi ceea ce funcționează și ceea ce nu și a afla de ce un anumit design este atrăgător este una dintre cele mai valoroase abilități pe care un nou designer sau un dezvoltator le poate învăța. Acordarea unui aspect unic unui design existent este obișnuită în industrie (evidențiată de caracteristica „Rebound” a Dribbble).

Proiectare în browser

Mulți designeri rezistă să proiecteze direct în browser, deoarece, în general, înseamnă că trebuie să fie confortabil să scrie cel puțin cod HTML și CSS de bază. Acesta este motivul exact pentru care este deseori o potrivire excelentă pentru dezvoltatorii care se apucă de design – ei sunt deja confortabili să scrie cod.

Există instrumente care pot ajuta la proiectarea în browser și pot face viața mai ușoară atât a designerilor, cât și a dezvoltatorilor. Pluginuri simple de browser sunt disponibile pentru orice, de la selectarea paletelor de culori până la explorarea codului CSS și HTML al unui alt site.

Există, de asemenea, instrumente mai complexe, cum ar fi Figma, care acționează ca un instrument de design complet, chiar în browser. Figma permite designerilor să colaboreze, să trimită active părților interesate (și chiar să le lase să facă modificări la conținutul și copierea design-urilor) și le permite dezvoltatorilor să aibă acces la design-urile reale în timp real. Este o opțiune excelentă pentru dezvoltatorii-designeri care doresc să creeze design și sisteme de proiectare care se pot scala în timp.

Webflow este o altă opțiune de proiectare în browser pe care dezvoltatorii ar putea să o placă. În timp ce interfața de design este vizuală, codul exportat este CSS și HTML semantic curat, pe care dezvoltatorii le vor aprecia (nu toate instrumentele de design vizual exportă cod curat). Webflow include instrumente pentru proiectare și aspect, precum și instrumente CMS și eCommerce încorporate, precum și opțiuni de găzduire.

Utilizarea culorii, tipografiei și aspectului

Înainte de a aborda principiile vizuale ale culorii, tipografiei și aspectului, este important să vorbim despre utilizarea de bază. Cel mai plăcut design estetic din lume este inutil dacă nu este utilizabil.

Unul dintre cele mai importante principii de utilizare este ideea de consistență sau predictibilitate. Design-urile ar trebui să fie suficient de previzibile pentru ca utilizatorii să poată înțelege intuitiv cum să le folosească. De exemplu, text subliniat albastru pentru link-urile pe care se poate face clic, meniuri de navigare care sunt complete și bine etichetate etc. Distanța dintre elemente, tipografia și schema de culori ar trebui, de asemenea, să fie consecvente.

Alte principii de utilizare care ar trebui luate în considerare în fiecare proiect de proiectare includ lucruri precum prevenirea erorilor (și mesaje de eroare informative atunci când apar erori), limbaj familiar (folosește limbajul cu care oamenii sunt obișnuiți, mai degrabă decât alternative „drăguțe” sau creative care ar putea fi neclare ), flexibilitate și eficiență și ajutor ușor disponibil. Nielsen Norman Group are euristici suplimentare de utilizare care ar trebui de asemenea reținute.

Evaluările de utilizare ar trebui efectuate pe tot parcursul procesului de proiectare și dezvoltare pentru a vă asigura că produsul funcționează așa cum a intenționat echipa de proiectare și dezvoltare și că utilizatorii nu sunt confuzi. Evaluările euristice implică compararea unei liste de principii de proiectare predefinite pe care un produs ar trebui să le urmeze cu produsul real pentru a vedea unde apar abaterile (și apoi pentru a remedia acele abateri).

Odată ce capacitatea de utilizare a fost înțeleasă pe deplin în legătură cu produsul în cauză, designerii-dezvoltatorii pot trece la aspectele mai vizuale ale designului.

Teoria de bază a culorii

Teoria culorilor este unul dintre cele mai complexe aspecte ale designului vizual. Schimbarea ușoară a nuanțelor poate schimba complet impactul vizual și efectul emoțional al unei culori. Este unul dintre motivele pentru care mulți designeri care sunt în industrie de ani de zile încă se luptă cu culoarea.

Deși s-au scris multe cărți despre teoria culorilor, există câteva principii de bază pe care designerii-dezvoltatorii le pot învăța pentru a începe. Combinați-le cu oricare dintre multitudinea de instrumente de design de culori disponibile și o paletă de culori plăcută poate fi creată destul de ușor.

În primul rând, diferența dintre culorile calde, culorile reci și neutre. Culorile calde includ roșu, portocaliu și galben. Culorile calde vor fi în general vibrante și energizante. Culorile reci includ verde, albastru și violet. Aceste culori sunt de obicei mai calme și relaxante.

Neutrele includ alb, negru, gri, maro și bej. Adăugarea de alb, negru sau gri la culori calde sau reci le modifică semnificația și impactul. Albul va lumina culorile și, în general, va face efectul lor mai puțin intens sau mai pozitiv (de exemplu, violetul este considerat o culoare misterioasă, regală, în timp ce liliac este adesea asociat cu primăvara și fericirea). Griul va dezactiva culorile și le poate reduce impactul. Negrul întunecă culorile și le poate face să pară mai conservatoare (luați în considerare impactul diferit al unei culori precum albastrul strălucitor față de albastrul bleumarin).

Odată ce un designer are o înțelegere de bază a semnificațiilor culorilor, poate folosi instrumente precum Coolors, Design Seeds sau Colormind pentru a crea o paletă finală coordonată pentru designul său.

Folosind HSL Color

Când un designer se gândește la culorile web, adesea se gândește în termeni de valori hexadecimale. Deși acesta a devenit standardul industriei în ceea ce privește culorile web, dezvoltatorii pot descoperi că lucrul cu valorile de culoare HSL are mai mult sens.

Pentru majoritatea oamenilor (inclusiv designerii), valorile hexadecimale aparent nu au nicio corelație între ele. Două culori care arată foarte asemănătoare ar putea avea valori hexagonale complet diferite. De exemplu, #68B4D4 și #92C8E0 sunt nuanțe de albastru destul de asemănătoare (una este pur și simplu puțin mai strălucitoare și mai deschisă decât cealaltă) și totuși valorile lor hexagonale nu au o corelație aparentă.

Valorile HSL ale acestora arată însă cât de strâns legate sunt: ​​#68B4D4 devine HSL (198, 58%, 62%) și #92C8E0 devine HSL (198, 56%, 73%). Primul număr din secvență (198 în acest caz) indică nuanța particulară. Al doilea număr este procentul de saturație (cât de strălucitoare sau vibrantă este culoarea). Al treilea număr este procentul de luminozitate (sau alb adăugat) al culorii.

Deoarece corelațiile dintre valorile culorilor sunt atât de ușor de văzut cu HSL vs hex, dezvoltatorii constată adesea că manipularea culorilor prin cod cu HSL este semnificativ mai ușoară.

Principiile tipografiei

Tipografia este un alt domeniu care poate declanșa chiar și designerii experimentați. Dar, ca și teoria culorilor, există câteva instrumente grozave care vă pot ajuta.

Ierarhia tipografică este unul dintre primele lucruri pe care un designer-dezvoltator ar trebui să le învețe. Relația dintre diferitele elemente de tip dintr-un design este vitală pentru a face acel design mai utilizabil.

Cel puțin, un design ar trebui să aibă trei niveluri de ierarhie tipografică: titluri, subtitrări și fonturi de corp. Titlul ar trebui să fie cel mai proeminent din punct de vedere vizual, apoi subtitrările și apoi fontul corpului, care ar trebui să fie foarte ușor de citit.

Mulți designeri noi se concentrează prea mult pe dimensiunea fontului în crearea ierarhiei lor și nu suficient pe stilul fontului . Uneori, în loc de a face un titlu semnificativ mai mare decât un subtitlu, de exemplu, un titlu poate fi aldin sau scris cu majuscule, în timp ce subtitlul este lăsat în majuscule și greutate normală. Culoarea poate fi folosită și pentru a diferenția între subtitrări și titluri și între acele elemente și textul corpului.

Combinarea diferitelor fonturi poate deruta, de asemenea, mulți designeri și, totuși, este o modalitate obișnuită de a crea o ierarhie vizuală. Acestea includ alegerea fonturilor complementare (opusele atrag adesea, dar într-o anumită măsură, cât de bine se combină fonturile trebuie determinat pe baza sentimentului instinctiv care se perfecționează în timp), alegerea fonturilor adecvate (nu utilizați Comic Sans într-un document legal, pentru de exemplu, sau un font de afișare pentru tipul de corp care nu va fi lizibil la dimensiuni mai mici) și creând contrast între fonturi (nu folosiți două care sunt foarte asemănătoare).

Un alt mod simplu de a combina fonturi este să alegeți fonturi din familii mari de fonturi. Există chiar și familii care includ versiuni afișate, serif și sans serif care funcționează bine împreună (cum ar fi Mrs Eaves și Mr Eaves, Fedra sau Museo și Museo Sans). Acesta poate fi cel mai simplu mod de a începe cu adevărat să experimentați cu combinarea fonturilor, deoarece sunt proiectate să arate bine împreună.

Când lucrați cu ierarhii tipografice mai mari (cum ar fi adăugarea în H1, H2, H3, H4 etc.), este important să urmați un anumit motiv în scara tipografică. Secvența Fibonacci este o scară posibilă pentru început, deși există și alte scale tipografice stabilite.

O scară comună care este folosită atât în ​​tipografie (și, în general, în layout-uri de design) constă din 4, 8, 16, 24, 36, 48, 72, 108 etc. Aceste cifre pot fi combinate în diferite moduri pentru a crea un design cu o imagine plăcută. proporții (de exemplu, un font de 24 de pixeli combinat cu o înălțime a liniei de 36 de pixeli).

Principii de bază ale aspectului

De la începutul internetului, există anumite modele de aspect care au apărut ca „standarde”. Exemplele includ navigarea principală din partea de sus, bara laterală din stânga sau din dreapta cu informații suplimentare sau opțiuni de navigare și conținutul corpului care ocupă restul spațiului.

Deși există abateri clare de la acest aspect de bază (nu navigare de sus, fără bară laterală, două bare laterale etc.), acesta este adesea un pariu destul de sigur atunci când se creează un aspect nou. Abaterea de la acest model de bază ar trebui făcută doar cu un scop, în special de către designeri-dezvoltatori noi și fără experiență.

Crearea unui design care este previzibil - asta înseamnă de obicei consecvent - face foarte mult pentru utilizarea unui produs. Abaterea de la ceea ce se așteaptă să vadă un utilizator atunci când folosește un produs ar trebui făcută numai atunci când câștigurile de utilizare sunt mai mari decât pierderile.

Cel mai bine este să nu folosiți titluri albastre aldine de 72 de pixeli pe o pagină și apoi titluri roșii de 36 de pixeli pe alta pentru același tip de conținut, deoarece consistența aspectului este esențială. În mod similar, distanța dintre titlu și textul corpului, care este de 36 de pixeli într-o secțiune și apoi de 32 de pixeli în alta, va crea inconsecvență vizuală. În timp ce o persoană ar putea să nu înțeleagă imediat de ce diferența este tulburătoare, o va simți.

Similar cu scara tipografică menționată mai sus, elementele de spațiere pe o scară de 4, 8, 16, 24, 36, 48, 72 sau 108 pixeli vor crea un design plăcut din punct de vedere vizual. Este o idee bună să folosiți suficient spațiu între elemente, să le lăsați să respire; designerii mai noi evită adesea spațiul alb și pot ajunge la modele care arată aglomerate și copleșitoare.

Unii se pot întreba de ce scara este distanțată așa cum este. De ce există doar o diferență de 4 pixeli între primele două numere, dar un salt de 36 de pixeli între ultimele două? Motivul este simplu: la scară mică, o creștere de 4 pixeli este ușor de identificat (8 pixeli este de două ori mai mare decât 4, ceea ce poate fi ușor de deslușit). Dar cu numere mai mari, diferența dintre 72 de pixeli și 76 de pixeli nu este ușor de văzut. Diferențele mai mari sunt mai ușor de observat pe măsură ce dimensiunile cresc.

Spațierea constantă este unul dintre motivele pentru care abordările de proiectare bazate pe grilă au devenit atât de populare. Începând cu o grilă (în general 12, 16 sau 24 de coloane) oferă designerilor un cadru în care să lucreze care va menține totul consistent. Jgheaburile încorporate între coloane ajută, de asemenea, să se asigure că diferitele elemente de design și conținutul din ele au un spațiu de respirație.

Concluzie

Designerii și dezvoltatorii deopotrivă ar trebui să se concentreze pe extinderea setului de abilități pentru a-și continua cariera. Timpul pe care dezvoltatorii îl petrec învățând principiile de bază ale designului va economisi timp în viitor atunci când lucrează cu designeri sau își creează propriile produse.

Înțelegerea principiilor de bază ale designului — principii de utilizare, teoria culorilor, tipografie, aspect și UX — îi va face pe dezvoltatori mai buni la dezvoltare . Când pot vedea de ce designerii fac alegerile pe care le fac, dezvoltatorii pot lucra mai bine cu designerii pentru a crea produse cu adevărat remarcabile.

Citiri suplimentare pe Blogul Toptal Design:

• Principiile designului și importanța lor
• Cât de multă codare ar trebui să știe designerii?
• Un spectru de posibilități: Ghidul de culoare Go-To UI
• Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes
• Fundamente de proiectare – Un ghid pentru ierarhia vizuală (cu infografică)