Noțiuni introductive cu UX Design în Sketch

Un primer pentru noii designeri și studenți de design UX

Am scris multe despre sfaturile Sketch la UX Power Tools în ultimii doi ani și am dorit să le organizăm într-un mod care să ajute designerii care abia încep să intre în UX.

Ar trebui să menționez, de asemenea, că nu voi dezbate ce instrument este cel mai bun - doar presupun că deja ai realizat că Sketch este cel mai bun (deocamdată) și doresc să știu cum să-l folosești ca designer UX

Am împărțit articolele noastre în 5 secțiuni care conțin modul în care cred că noii designeri progresează de la novici la măiestrie:

  • Obtinerea ideilor
  • Noțiuni de bază
  • A lua mai repede
  • Deveniți mai deștepți
  • Obținerea vizuală

Obtinerea de idei

Designul UX începe înainte de a ajunge la instrumente - începe în momentul în care îți vei scoate ideile din cap (... începe de fapt înainte de asta cu cercetarea, dar să păstrăm acest articol sub 20 de minute).

Desigur, sar direct în instrumentele digitale destul de devreme. Dar asta se datorează în mare măsură faptului că fac mai mult în cap și schițez în colaborare pe o tablă cu echipa mea de proiectare. Designerii UX care încep doar ar trebui să rămână cu adevărat în fidelitate scăzută în timp ce explorează spațiul cu probleme și greșesc.

După ce sunteți gata să obțineți ceva pe ecran, există două instrumente care cred că facilitează acest lucru foarte bine. Primul este un instrument InVision numit Freehand, pe care l-am revizuit:

Al doilea instrument care facilitează această fază de proiectare este un set de biblioteci premium pentru Sketch numit Flowkit de Matt D. Smith. Merită foarte bine prețul de 29 de dolari.

Nu numai că este excelent pentru filfocarea fiabilității, dar poate fi utilizat în etapele ulterioare ale proiectării dvs. atunci când trebuie să trageți fluxurile de lucru cheie cu înaltă fidelitate pentru a vă comunica designul.

Noțiuni de bază

Departe și departe, cea mai mare forță a Sketch pentru UX Design este accentul său pe a face lucrurile repetabile și rapide.

Este totuși destul de alarmant să vezi cât de mulți designeri Sketch nu folosesc lucruri la fel de simple și puternice precum Stilurile partajate sau avansuri mai recente precum Simbolurile cuibărită. Bănuiesc că se datorează faptului că designerii devin nerăbdători și vor doar să scoată lucrurile. O iau în totalitate.

Dar designul excelent este la fel de bun ca un designer este organizat. Ne place metafora gătitului:

Și, de asemenea, ne place să extindem conceptul de foi de stil de la cod la design (de când am scris acest lucru, sistemele de design au explodat cu adevărat pe scenă, dar majoritatea acestor tehnici sunt încă relevante în prezent):

Și în sfârșit pentru sfântul graal de articole despre cum să începi un proiect în Sketch, care îl acoperă pe toate (chiar până la structura folderului):

Cu un articol bonus despre modul de configurare a layout-urilor în Sketch în mod receptiv:

Deveniți mai repede

Ok, acum când aveți cunoștințe despre cum să începeți eficient un proiect Sketch, este timpul să începeți să obțineți mai rapid cu instrumentul. Personal mi se pare ofensator să văd un designer care nu folosește nicio scurtătură în timp ce proiectează - adică îmi doare cu adevărat sufletul. Nu fi acel tip / gal:

Aproximativ un milion și jumătate de instrumente și plugin-uri au apărut de când am scris acest articol, dar, cu adevărat, cei mai buni tovarăși pentru Sketch nu s-au schimbat cu adevărat după părerea mea (Nudg.it este acum suportat nativ în Sketch, Anima este încă utilă, chiar dacă o parte din acestea au fost coapte în funcționalitatea layout-ului Sketch):

Sfaturi și trucuri

Jon Moore și-a împărtășit înțelepciunea utilizatorului puterii în câteva articole care vă vor arunca mintea în simplitatea și puterea lor:

Deveniți mai deștepți

Știi cum să configurezi un proiect, ai învățat să obții mai rapid cu Sketch și acum este timpul să aplici toate acestea la designul UX.

După cum am spus mai devreme, Sketch este perfect pentru designul UX, deoarece face repetarea, consecvența și modularitatea ușoare. Iată câteva exemple despre cum să utilizați Sketch pentru a crea elemente UI în mod inteligent (și toate vin cu freebies ):

Manevrarea eficientă a pictogramelor și a graficelor

Vom acoperi partea vizuală de design a UX în următoarea secțiune, dar tratarea grafică este adesea în afara casei de rulare a unui designer UX. În loc să vă faceți griji cu privire la crearea de pictograme, obțineți mai inteligent modul în care le utilizați:

Simbolurile cuiburi pot de fapt automat automat:

În sfârșit, aș fi remis dacă nu am subliniat cel mai mare avans al lui Sketch în ultimele 12 luni - Biblioteci:

Obținerea vizuală

Ca și cum toate acestea nu ar fi fost suficiente, designerii UX au astăzi un standard mult mai ridicat de îndeplinit atunci când vine vorba de design vizual.

Când am început să încep designul UX, am considerat că este dificil să fac cunoștință cu „materialele” de care aveam nevoie pentru a proiecta: raporturi de aspect, dimensiuni de font, greutăți, contrast de culori etc.

Pentru a mă îmbunătăți, am început să copiez produsele existente, astfel încât să am o idee despre modul în care a fost compusă UI.

Am abordat anul acesta și am oferit link-uri către câteva produse comune re-create în Sketch (deși unele dintre ele au fost apoi reproiectate):

De acolo, puteți începe cu adevărat să folosiți câteva tehnici mici pentru a adăuga un pic de fler la design-urile dvs.:

Nu uitați însă că datele exacte ale eșantionului sunt la fel de critice pentru designul vizual ca și imaginile în sine:

* nu am scris niciodată partea a 2-a

Nu în ultimul rând, dar nu în ultimul rând, la un moment dat în carieră, va trebui să proiectați un tablou de bord și este adesea unul dintre cele mai mari coșmaruri pentru un designer UX. Personal, consider că tablourile de bord aduc valoare marginală în tabel, așa că aș prefera să nu petrec zile pentru ca graficele să arate bine:

Au trecut 18 luni de zile uimitoare în ajutorul comunității de proiectare prin UX Power Tools. Și, cu toate că Sketch nu este singurul instrument pe care un designer ar trebui să îl aibă în arsenalul lor, este cu siguranță cel mai puternic. Sper că această anexă îi va ajuta pe acești dintre voi care abia începeți într-o carieră UX sau care faceți trecerea la Sketch pentru fluxul dvs. de lucru de proiectare.

Dacă vă interesează un sistem de design vanilat, care să fie perfect pentru demararea de noi proiecte, ne-ar plăcea dacă le verificați pe cele pe care le-am construit. Vă vor economisi mii de ore de proiectare:

Când nu colectez articole Sketch pe Medium, lucrez la instrumente de proiectare Sketch la UX Power Tools pentru a vă face un designer mai bun și mai eficient.

Urmați UX Power Tools pe Twitter
Urmărește-mă pe Twitter