Komme i gang med UX Design in Sketch

En grunning for nye UX-designere og designstudenter

Vi har skrevet mye om skissetips på UX Power Tools de siste to årene, og jeg ønsket å organisere dem på en måte som ville hjelpe designere som akkurat begynner å komme i UX.

Jeg må også nevne at jeg ikke kommer til å diskutere hvilket verktøy som er best - jeg antar bare at du allerede har innsett at Sketch er den beste (foreløpig) og vil vite hvordan du bruker det som UX Designer

Jeg har delt ut artiklene våre i fem seksjoner som kartlegger hvordan jeg tror nye designere går fra nybegynner til mestring:

  • Å få ideer ut
  • Starter
  • Blir raskere
  • Blir smartere
  • Å bli visuell

Å få ideer ut

UX-design starter før du kommer til verktøyene - det begynner på tidspunktet for å få ideer ut av hodet (... det begynner faktisk før det med forskning, men la oss holde denne artikkelen under 20 minutter lang).

Riktignok hopper jeg rett inn i digitale verktøy ganske tidlig. Men det skyldes i stor grad at jeg gjør mer i hodet og tegner samarbeid på en tavle med designteamet mitt. UX-designere som nettopp startet, bør virkelig holde seg i lav tro mens de utforsker problemområdet og gjør feil.

Når du er klar til å få noe på skjermen, er det to verktøy som jeg synes forenkler dette veldig bra. Det første er et InVision-verktøy kalt Freehand, som vi vurderte:

Det andre verktøyet som letter denne fasen av design er et sett med premiumbiblioteker for Sketch kalt Flowkit av Matt D. Smith. Det er vel verdt $ 29-prislappen.

Det er ikke bare bra for wireframing av lojalitet, men kan brukes på senere stadier av designen din når du trenger å kartlegge viktige arbeidsflyter i høy tro for å kommunisere designet.

Starter

Langt unna er den største styrken til Sketch for UX Design sin vekt på å gjøre ting repeterbart og raskt.

Det er fremdeles ganske alarmerende å se hvor mange skissedesignere som ikke bruker ting så enkle og kraftige som delte stiler, eller nyere fremskritt som Nested Symbols. Jeg tipper det er fordi designere blir utålmodige og bare vil få ting ut. Jeg får det helt til.

Men flott design er bare så bra som en designer er organisert. Vi liker metaforen å lage mat:

Og vi liker også å utvide konseptet Stylesheets fra kode til design (siden vi skrev dette, har designsystemer virkelig eksplodert på scenen, men de fleste av disse teknikkene er fremdeles relevante i dag):

Og til slutt for den hellige gralen av artikler om hvordan du starter et prosjekt i Sketch, som dekker det hele (helt ned til mappestrukturen):

Med en bonusartikkel om hvordan du konfigurerer oppsett i Sketch responsivt:

Komme raskere

OK, nå som du har forståelse for hvordan du starter et Sketch-prosjekt effektivt, er det på tide å begynne å komme raskere med verktøyet. Personlig synes jeg det er støtende å se en designer ikke bruke noen snarveier mens hun designer - jeg mener, det skader virkelig sjelen min. Ikke vær den fyren:

Omtrent en og en og en halv nye verktøy og plugins har kommet ut siden vi skrev denne artikkelen, men sannelig har de beste følgesvennene til Sketch virkelig ikke forandret seg etter min mening (Nudg.it støttes nå innfødt i Sketch, Anima er fremdeles nyttig også selv om noe av det er blitt bakt inn i Sketchs layoutfunksjonalitet):

Tips og triks

Jon Moore har gitt sin kraftbruker-visdom i noen få artikler som vil blåse tankene dine i deres enkelhet og kraft:

Blir smartere

Du vet hvordan du setter opp et prosjekt, du har lært hvordan du kan komme raskere med Sketch, og nå er det på tide å bruke alt dette på UX-design.

Som jeg sa tidligere, Sketch er perfekt for UX-design fordi det gjør repetisjon, konsistens og modularitet enkelt. Her er noen eksempler på hvordan du bruker Sketch for å gjøre UI-elementer intelligent (og de kommer alle med freebies ):

Håndtering av ikoner og grafikk effektivt

Vi vil dekke den visuelle designsiden av UX i neste seksjon, men det å jobbe med grafikk er ofte utenfor styrehuset til en UX-designer. I stedet for å bekymre deg for å lage ikoner, må du bli smartere på hvordan du bruker dem:

Nøstede symboler kan faktisk automatisere ganske mye:

Til slutt ville jeg være underlagt hvis jeg ikke påpekte Sketches største fremskritt de siste 12 månedene - Biblioteker:

Å bli visuell

Som om alt det ikke var nok, har UX-designere i dag en mye høyere standard å oppfylle når det kommer til visuell design.

Da jeg kom i gang med UX-design, syntes jeg det var utfordrende å bli kjent med “materialene” jeg trengte å designe med: størrelsesforhold, skriftstørrelser, vekter, fargekontrast osv.

For å bli bedre, startet jeg med å kopiere eksisterende produkter, slik at jeg kunne få en følelse av hvordan UI var sammensatt.

Vi dekket dette siste året og gir koblinger til noen få vanlige produkter som er opprettet på nytt i Sketch (selv om noen av dem siden har blitt omgjort):

Derfra kan du virkelig begynne å bruke noen små teknikker for å legge litt teft til designene dine:

Men ikke glem at nøyaktige eksempeldata er like kritiske for visuell design som det visuelle selv:

* vi skrev aldri del 2

Sist, men ikke minst, på et tidspunkt i karrieren, må du designe et dashbord og det er ofte et av de største marerittene for en UX-designer. Personlig synes jeg at dashbordene gir marginal verdi til bordet, så jeg vil helst ikke bruke dager på å få hitlistene til å se bra ut:

Det har vært fantastiske 18 måneder å hjelpe designmiljøet gjennom UX Power Tools. Og mens Sketch absolutt ikke er det eneste verktøyet en designer bør ha i arsenal, er det absolutt det kraftigste. Jeg håper at dette vedlegget vil hjelpe deg som nettopp kommer i gang med en UX-karriere, eller som gjør overgangen til Sketch for din arbeidsflyt.

Hvis du er interessert i et vaniljesignsystem som er perfekt for å starte nye prosjekter, vil vi elske hvis du sjekker ut de vi har bygget. De sparer tusenvis av timer med designtid:

Når jeg ikke samler Sketch-artikler på Medium, jobber jeg med Sketch-designverktøy hos UX Power Tools for å gjøre deg til en bedre og mer effektiv designer.

Følg UX Power Tools på Twitter
Følg meg på Twitter