Uvod v UX Design v Sketch

Primer za nove UX oblikovalce in študente oblikovanja

V UX Power Tools smo v zadnjih dveh letih pisali veliko o nasvetih Sketch in želel sem jih organizirati tako, da bodo pomagali oblikovalcem, ki se šele začnejo ukvarjati z UX.

Moram omeniti tudi to, da ne bom razpravljal o tem, katero orodje je najboljše - samo predvidevam, da ste že ugotovili, da je Sketch najboljši (za zdaj) in želim vedeti, kako ga uporabiti kot UX Designer Desig

Naše članke sem razdelil na 5 razdelkov, ki prikazujejo, kako mislim, da novi oblikovalci napredujejo od novincev do mojstrstva:

  • Izvajanje idej
  • Uvod
  • Hitrejše
  • Vse pametnejši
  • Kako vizualno

Izvajanje idej

UX oblikovanje se začne, preden pridete do orodij - začne se na mestu, ko vam ideje uidejo iz glave (… dejansko se začne pred tem z raziskavami, vendar naj ta članek ostane pod 20 minutami).

Res je, da že zelo zgodaj skočim naravnost v digitalna orodja. Ampak to je v veliki meri zato, ker več delam v glavi in ​​s svojo oblikovalsko ekipo skupaj skiciram na belo desko. UX oblikovalci, ki šele začenjajo, bi morali resnično ostati v nizki vernosti, medtem ko raziskujejo problemski prostor in delajo napake.

Ko ste pripravljeni nekaj prikazati na zaslonu, menim, da sta to zelo dobra. Prvo je orodje InVision z imenom Freehand, ki smo ga pregledali:

Drugo orodje, ki olajša to fazo oblikovanja, je nabor premium knjižnic za Sketch, imenovan Flowkit, Matt D. Smith. To je dobro vredno ceno 29 $.

Ni samo odličen za žične okvirje z lojalnostjo, ampak ga je mogoče uporabiti tudi na poznejših stopnjah zasnove, ko boste morali za natančno preslikavo ključnih delovnih procesov sporočiti svoj dizajn.

Uvod

Daleč in največja moč programa Sketch za UX Design je njegov poudarek na tem, da so stvari ponovljive in hitre.

Še vedno je zelo zaskrbljujoče videti, koliko oblikovalcev Sketch-a ne uporablja tako preprostih in zmogljivih stvari kot skupni slogi ali najnovejših napredkov, kot so gnezdeni simboli. Ugibam, da so zato, ker so oblikovalci nestrpni in hočejo stvari spraviti ven. Popolnoma razumem.

A odličen dizajn je le dober, kot je organiziran oblikovalec. Všeč nam je metafora kuhanja:

Všeč nam je tudi širitev koncepta Stylesheets iz kode v oblikovanje (odkar smo to napisali, so oblikovalni sistemi resnično eksplodirali na prizorišče, vendar je večina teh tehnik še danes pomembna):

In končno za sveti gral člankov o tem, kako začeti projekt v Sketchu, ki zajema vse (vse do strukture mape):

Z bonus člankom o tem, kako lahko odzivno nastavite postavitve v programu Sketch:

Hitrejše

V redu, zdaj, ko imate razumevanje, kako učinkovito začeti projekt Sketch, je čas, da začnete hitreje začeti z orodjem. Osebno se mi zdi naravnost žaljivo videti, da oblikovalec med načrtovanjem ne uporablja bližnjic - mislim, resnično me boli duša. Ne bodite tisti fant / gal:

Odkar smo napisali ta članek, se je pojavilo približno milijon in pol novih orodij in vtičnikov, vendar se po mojem mnenju najboljši spremljevalci za Sketch po mojem mnenju v resnici niso spremenili (Nudg.it je v Sketch, Anima zdaj podprto je še vedno uporaben, čeprav je bil del vključen v Sketch funkcionalnost postavitve):

Namigi in triki

Jon Moore je svojo modrost uporabnika razširil v nekaj člankih, ki bodo razburili vaš um v njihovi preprostosti in moči:

Vse pametnejši

Veste, kako nastaviti projekt, naučili ste se hitrejšega s programom Sketch in zdaj je čas, da vse to uporabite za UX zasnovo.

Kot sem že rekel, je Sketch kot nalašč za oblikovanje UX, saj omogoča enostavno ponavljanje, doslednost in modularnost. Tu je nekaj primerov, kako uporabljati Sketch za pametno izdelavo elementov uporabniškega vmesnika (in vsi so na voljo z brezplačnimi izdelki ):

Učinkovito ravnanje z ikonami in grafiko

V naslednjem razdelku bomo obravnavali stran vizualnega oblikovanja UX-a, vendar se ukvarjanje z grafiko pogosto dogaja zunaj invalidske hiše UX-jevega oblikovalca. Namesto da bi skrbeli za ustvarjanje ikon, bodite pametnejši, kako jih uporabljate:

Gnezdljeni simboli lahko dejansko precej avtomatizirajo:

Nazadnje bi me oprostili, če ne bi izpostavil največjega napredka Sketcha v zadnjih 12 mesecih - Knjižnice:

Kako vizualno

Kot da vse to še ni bilo dovolj, imajo danes UX oblikovalci veliko višji standard, ki ga potrebujejo za vizualno oblikovanje.

Ko sem se začel ukvarjati z UX oblikovanjem, se mi je zdelo zahtevno seznaniti se z »materiali«, ki sem jih potreboval za oblikovanje: razmerja stranic, velikosti pisav, uteži, barvni kontrast itd.

Za boljše počutje sem začel s kopiranjem obstoječih izdelkov, da sem lahko občutil, kako je sestavljen uporabniški vmesnik.

To smo pokrivali lani in zagotovili povezave do nekaj skupnih izdelkov, ki so bili na novo ustvarjeni v Sketch-u (čeprav so bili nekateri od njih prenovljeni):

Od tod lahko resnično začnete uporabljati nekaj majhnih tehnik, da svojim dizajnom dodate le malo voha:

Ne pozabite pa, da so natančni vzorčni podatki prav tako kritični za vizualno oblikovanje kot sami vizualni modeli:

* nikoli nismo napisali drugega dela

Nenazadnje boste morali na neki točki kariere zasnovati armaturno ploščo, ki je pogosto ena največjih nočnih mor za UX oblikovalca. Osebno se mi zdi, da armaturne plošče prinašajo mejno vrednost na mizi, zato raje ne preživljam dni, da bi grafikoni izgledali dobro:

Ogromnih 18 mesecev je pomagalo oblikovalski skupnosti s pomočjo električnih orodij UX. In čeprav Sketch zagotovo ni edino orodje, ki ga mora oblikovalec imeti v svojem arzenalu, je zagotovo najmočnejše. Upam, da bo ta dodatek pomagal tistim, ki ste šele začeli v UX karieri ali ki se preusmerite v Sketch za svoj oblikovalski potek dela.

Če vas zanima sistem oblikovanja vanilije, ki je kot nalašč za začetek novih projektov, vas bomo veseli, če si oglejte tiste, ki smo jih zgradili. Prihranili vam bodo tisoče ur načrtovanja:

Ko ne zbiram člankov o Sketch-u za Medium, delam na orodjih za oblikovanje skic v podjetju UX Power Tools, da bi bil boljši in učinkovitejši oblikovalec.

Sledite UX Power Tools na Twitterju
Sledi mi na tviterju