Dacă m-ați fi întrebat acum patru ani, când am devenit absolvent de CS, ce fel de carieră m-am văzut urmând, probabil v-aș fi spus o dezvoltare Java back-end sau ceva similar. Nu am fost niciodată creativ, în vopsea întrunind într-un fel panza, așa că nu am luat în considerare cu adevărat o carieră care implică dezvoltarea front-end și design.

După cum știm cu toții, lucrurile se schimbă. De-a lungul carierei mele, am devenit din ce în ce mai interesat de dezvoltarea și proiectarea interfeței de utilizare. Am avut norocul în munca mea că am câștigat expunere la dezvoltarea front-end și mi s-a permis să investesc timp în îmbunătățirea abilităților necesare pentru a fi dezvoltator front-end.

În ultimele 12 luni, m-am străduit să îmi îmbunătățesc înțelegerea designului UI / UX, atât din cauza interesului personal, cât și pentru a-mi permite să fiu mai eficient atunci când lucrez cu designeri.

În această postare, aș dori să împărtășesc lecțiile pe care le-am învățat, resursele pe care le-am adunat și greșelile pe care le-am făcut în speranța că alți dezvoltatori vor putea învăța din călătoria mea.

Cuprins

  • Nu este doar talent
  • Uite, gândește, fură
  • Aflați teoria
  • Construiește ceva
  • Nu renunța
  • Resurse
  • Concluzie

Nu este doar talent

Acesta mi se pare evident acum, dar a existat un moment în care am crezut că designerii sunt vrăjitori care s-au născut cu capacitatea de a crea aplicații și site-uri web uimitoare.

Se pare că nu sunt. Tocmai au muncit din greu pentru a-și perfecționa ambarcațiunile. În același mod în care învățarea codării devine mai ușoară pentru unii oameni, există oameni care vor avea un talent natural pentru proiectare, dar talentul nu înseamnă mult fără muncă grea.

Designul este ceva ce poate fi învățat. Nu faceți greșeala pe care am făcut-o și scrieți-vă pentru că nu sunteți creativi în sensul tradițional. Rezolvarea problemelor de programare necesită creativitate; gândiți-vă la rezolvarea provocărilor de proiectare în același mod.

Uite, gândește, fură

În același mod în care citirea unui cod bun vă va ajuta să deveniți un dezvoltator mai bun, învățarea din ceea ce au creat alții vă va ajuta să deveniți un designer mai bun.

Data viitoare când vizitați un site web sau utilizați o aplicație, uite la asta și cu adevărat gândi despre motivul pentru care arată și se comportă așa cum o face. De ce sunt plasate elementele acolo unde sunt? De ce butonul respectiv are o anumită culoare? De ce trebuie să efectuați acțiuni într-o anumită ordine?

Luați de exemplu butonul de aplauze al lui Medium. De ce nu au folosit doar un buton „like” ca orice alt site de social media? În opinia mea, a fost o decizie inteligentă de proiectare să nu o facă. În schimb, ei sunt capabili să consolideze ideea de comunitate care conduce site-ul prin proiectarea atentă a unei interacțiuni. Oferirea unui articol sau unui răspuns de cincizeci de palme necesită timp pentru ca un utilizator să o facă, dar îi ajută să se conecteze cu adevărat la conținutul pe care îl vizionează și la persoana care l-a creat.

Site-uri precum Awwwards și Dribbble s-au dovedit de neprețuit pentru mine în ultimul an. Multe dintre desenele pe care le-am creat le-am luat liberal inspirație din creațiile altor mari designeri.

Aflați teoria

Când am început să realizez modele proprii, nu mi-am putut da seama de ce arătau și se comportau atât de prost. Fluxurile erau incomode, culorile nepotrivite, iar aspectele erau inconsistente.

Am crezut că aș putea să intru direct și să folosesc cunoștințele mele de dezvoltare împreună cu cunoștințele mele de bază despre modul în care site-urile ar trebui să funcționează, ca utilizator, și ar funcționa bine.

M-am înșelat foarte, foarte tare. Am ajuns să creez modele din punctul de vedere al dezvoltatorilor, în loc să folosesc teoria proiectării ca bază.

Dezvoltatorii știu cum funcționează un site lucrări, dar designerii știu cum este un site se comportă și simte. Există o lacună mare pe care o poți umple doar obținând o bază în cunoștințele de proiectare.

Pentru a obține o înțelegere de bază a teoriei proiectării, am folosit în principal Medium și Udemy. Puteți găsi link-uri către resursele pe care le-am folosit în secțiunea de mai jos.

Construiește ceva

Orice dezvoltator sau profesor CS vă va spune că cel mai bun mod de a deveni un programator mai bun este să scrieți cod. Același principiu se aplică și proiectării.

Nu contează ce proiectați, atâta timp cât învățați din ea. Tratați-l ca pe un proiect real: gândiți-vă la utilizatori. Creați fireframes, machete și prototipuri. Repetați designul original pentru a-l îmbunătăți. Puteți utiliza site-uri precum Reddit pentru a obține feedback cu privire la ceea ce creați.

Puteți chiar să o asociați cu îmbunătățirea abilităților de dezvoltare. Majoritatea proiectelor mele secundare recente au fost motivate de dorința comună de a-mi îmbunătăți atât abilitățile de dezvoltare web, cât și abilitățile de proiectare. După ce vă proiectați proiectul, îl puteți dezvolta și vedea ambele fețe ale monedei.

Iată câteva idei pentru a începe:

  • Proiectați un interacţiune. Folosiți butonul de aplauze al lui Medium pentru inspirație.
  • Proiectează o aplicație pentru caritatea ta preferată. Gândiți-vă la diferitele tipuri de utilizatori: clienți potențiali, rare și obișnuiți.
  • Proiectează-ți CV-ul. Gândește-te la culorile pe care le folosești și la ce înseamnă. Gândește-te la modul în care va fi CV-ul tău folosit. Va fi vizualizat doar pe un ecran sau va fi tipărit? Cum influențează acest lucru designul?
  • Reproiectați un site web existent. Ar putea fi furnizorul dvs. local de transport sau o marcă globală. Comparați-vă designul cu originalul și gândiți-vă la diferențele din perspectiva utilizatorului.
  • Proiectați ceva fizic, cum ar fi o nouă metodă de transport sau poate o alternativă la ceva simplu, cum ar fi o furculiță sau un scaun. M-am gândit la proiectarea lucrurilor de zi cu zi a fi un mod cu adevărat util de a intra în mentalitate pentru a proiecta ceva intuitiv.

Nu renunța

Când mă uit înapoi la ceea ce am creat în urmă cu un an, este greu să nu vă tresăriți. Dar toată lumea începe de undeva. Vedeți progresul în ceea ce creați va merita. Atâta timp cât înveți din ceea ce faci, atunci timpul tău este bine petrecut.

S-ar putea să vă țineți cont de ceea ce ați învățat la un interval regulat. În fiecare lună mă uit înapoi la unele lucruri la care am lucrat și încerc să iau cât de mult pot din experiență. Chiar dacă este doar pentru a recunoaște o mică informație pe care ați luat-o din citirea unui articol, este totuși un progres.

Cum sa va imbunatatiti abilitatile de proiectare UI UX
Unele modele pe care le-am creat de la cele mai vechi (stânga) la cele mai noi (dreapta)

Resurse

Mai jos este o mică colecție de instrumente, articole și cursuri preferate. Puteți găsi mulți mai multe pe care nu le-am enumerat aici, și aici.

Instrumente

Figma – Proiectare și prototipare cu colaborare.

FramerX – Similar cu Figma, dar cu React adăugat și componente descoperibile.

Răcitoare – Descoperiți și generați palete de culoare.

WebAIM Contrast Checker – Asigurați-vă că culorile dvs. sunt accesibile.

Arhetip – Editor și generator de sistem de tipografie.

Articole

7 sfaturi practice pentru a înșela la design

10 coduri de cheat pentru proiectarea interfețelor utilizator

10 mici greșeli de design pe care le facem încă

Proiectați forme mai bune

O listă completă de livrări UX

Principiile de psihologie pe care trebuie să le cunoască fiecare designer UI / UX

Cum se utilizează culorile în UI Design

16 Citate pe care trebuie să le citiți ca UX Designer

Principii de proiectare a produsului într-un singur card

Cursuri

Noțiuni fundamentale de proiectare a experienței utilizatorului – Udemy

Cursul complet de proiectare a aplicațiilor – UX, UI și Design Thinking – Udemy

UXTraining.com

Concluzie

Sper că ai reușit să iei ceva din călătoria mea. Dacă aveți sfaturi de proiectare sau resurse care v-au ajutat să învățați, mi-ar plăcea să le aud în răspunsuri.

Mulțumesc pentru lectură!