Aan de slag met UX Design in Sketch

Een inleiding voor nieuwe UX-ontwerpers en ontwerpstudenten

We hebben de afgelopen twee jaar veel geschreven over Sketch-tips bij UX Power Tools en ik wilde ze zo organiseren dat ontwerpers die net beginnen in UX te helpen, worden geholpen.

Ik moet ook vermelden dat ik niet ga discussiëren over welke tool het beste is - ik ga er gewoon van uit dat je je al realiseert dat Sketch (voorlopig) de beste is en wil weten hoe je het kunt gebruiken als UX Designer

Ik heb onze artikelen opgedeeld in 5 secties die in kaart brengen hoe ik denk dat nieuwe ontwerpers vooruitgang boeken van beginner tot meesterschap:

  • Ideeën naar buiten brengen
  • Ermee beginnen
  • Sneller worden
  • Slimmer worden
  • Visueel worden

Ideeën naar buiten brengen

UX-ontwerp begint voordat je bij de tools komt - het begint op het punt om ideeën uit je hoofd te krijgen (... het begint eigenlijk al veel eerder met onderzoek, maar laten we dit artikel minder dan 20 minuten lang houden).

Toegegeven, ik spring al vroeg in digitale tools. Maar dat komt vooral omdat ik meer in mijn hoofd doe en samen met mijn ontwerpteam samen op een whiteboard schets. UX-ontwerpers die net zijn begonnen, moeten echt laagdrempelig blijven terwijl ze de probleemruimte verkennen en fouten maken.

Als je klaar bent om iets op het scherm te krijgen, zijn er twee tools die ik denk dat dit echt goed kan faciliteren. De eerste is een InVision-tool genaamd Freehand, die we hebben beoordeeld:

De tweede tool die deze ontwerpfase vergemakkelijkt, is een set premiumbibliotheken voor Sketch, Flowkit van Matt D. Smith. Het is het prijskaartje van $ 29 zeker waard.

Het is niet alleen geweldig voor loyaliteit wireframing, maar kan in latere stadia van uw ontwerp worden gebruikt wanneer u belangrijke workflows in hoge betrouwbaarheid in kaart moet brengen om uw ontwerp te communiceren.

Ermee beginnen

Verreweg de grootste kracht van Sketch for UX Design is de nadruk op het herhaalbaar en snel maken van dingen.

Het is nog steeds behoorlijk alarmerend om te zien hoeveel schetsontwerpers dingen niet zo eenvoudig en krachtig gebruiken als gedeelde stijlen, of meer recente ontwikkelingen zoals geneste symbolen. Ik vermoed dat het komt omdat ontwerpers ongeduldig worden en gewoon dingen eruit willen halen. Ik snap het helemaal.

Maar geweldig ontwerp is slechts zo goed als een ontwerper is georganiseerd. We houden van de metafoor van koken:

En we houden ook van het uitbreiden van het concept van stylesheets van code naar ontwerp (sinds we dit hebben geschreven, zijn ontwerpsystemen echt in de scene geëxplodeerd, maar de meeste van deze technieken zijn vandaag nog steeds relevant):

En tot slot voor de heilige graal van artikelen over hoe een project in Sketch te starten, dat alles dekt (tot aan de mappenstructuur):

Met een bonusartikel over het responsief instellen van lay-outs in Sketch:

Sneller worden

Ok, nu je begrijpt hoe je een Sketch-project effectief kunt starten, is het tijd om sneller te worden met de tool. Persoonlijk vind ik het aanstootgevend om te zien dat een ontwerper geen snelkoppelingen gebruikt bij het ontwerpen - ik bedoel, het doet echt pijn aan mijn ziel. Wees niet die vent / gal:

Sinds we dit artikel schreven, zijn er ongeveer anderhalf miljoen nieuwe tools en plug-ins uitgekomen, maar naar mijn mening zijn de beste metgezellen voor Sketch naar mijn mening niet echt veranderd (Nudg.it wordt nu native ondersteund in Sketch, Anima is nog steeds ook nuttig, hoewel een deel ervan is ingebed in de lay-outfunctionaliteit van Sketch):

Tips en trucs

Jon Moore heeft zijn wijsheid als power-user in enkele artikelen gegeven die je versteld zullen doen staan ​​in hun eenvoud en kracht:

Slimmer worden

Je weet hoe je een project moet opzetten, je hebt geleerd hoe je sneller kunt worden met Sketch, en nu is het tijd om dat allemaal toe te passen op UX-ontwerp.

Zoals ik al eerder zei, is Sketch perfect voor UX-ontwerp omdat het herhaling, consistentie en modulariteit gemakkelijk maakt. Hier zijn een paar voorbeelden van hoe u Sketch kunt gebruiken om UI-elementen intelligent te maken (en ze komen allemaal met freebies ):

Pictogrammen en afbeeldingen efficiënt verwerken

We zullen de visuele ontwerpkant van UX in het volgende gedeelte bespreken, maar het omgaan met grafische afbeeldingen ligt vaak buiten de stuurhut van een UX-ontwerper. In plaats van je zorgen te maken over het maken van pictogrammen, kun je slimmer worden in hoe je ze gebruikt:

Geneste symbolen kunnen eigenlijk behoorlijk wat automatiseren:

Tot slot zou het me spijtig zijn als ik niet zou wijzen op de grootste vooruitgang van Sketch in de afgelopen 12 maanden - Bibliotheken:

Visueel worden

Alsof dat nog niet genoeg was, hebben UX-ontwerpers tegenwoordig een veel hogere standaard als het gaat om visueel ontwerp.

Toen ik aan de slag ging in UX-ontwerp, vond ik het een uitdaging om kennis te maken met de "materialen" waarmee ik moest ontwerpen: beeldverhoudingen, lettergroottes, gewichten, kleurcontrast, enz.

Om beter te worden, begon ik met het kopiëren van bestaande producten, zodat ik een idee kon krijgen van hoe de gebruikersinterface was samengesteld.

We hebben dit afgelopen jaar behandeld en bieden links naar een paar veel voorkomende producten die opnieuw in Sketch zijn gemaakt (hoewel sommige daarvan sindsdien opnieuw zijn ontworpen):

Vanaf daar kun je echt beginnen met het gebruik van enkele kleine technieken om een ​​beetje flair aan je ontwerpen toe te voegen:

Maar vergeet niet dat nauwkeurige voorbeeldgegevens net zo belangrijk zijn voor visueel ontwerp als de visuals zelf:

* we hebben nooit deel 2 geschreven

Last but not least, op een bepaald punt in je carrière zul je een dashboard moeten ontwerpen en het is vaak een van de grootste nachtmerries voor een UX-ontwerper. Persoonlijk vind ik dat dashboards marginale waarde aan de tafel toevoegen, dus ik zou liever geen dagen besteden om de grafieken er goed uit te laten zien:

Het is een verbazingwekkende 18 maanden geweest om de ontwerpgemeenschap te helpen via UX Power Tools. En hoewel Sketch zeker niet het enige hulpmiddel is dat een ontwerper in zijn arsenaal zou moeten hebben, is het zeker het krachtigste. Ik hoop dat deze bijlage diegenen van jullie helpt die net zijn begonnen in een UX-carrière of die de overstap maken naar Sketch voor je ontwerpworkflow.

Als je geïnteresseerd bent in een vanille-ontwerpsysteem dat perfect is voor het starten van nieuwe projecten, zouden we het leuk vinden als je degene bekijkt die we hebben gebouwd. Ze besparen u duizenden uren ontwerptijd:

Wanneer ik geen Sketch-artikelen op Medium verzamel, werk ik aan Sketch-ontwerptools bij UX Power Tools om u een betere, efficiëntere ontwerper te maken.

Volg UX Power Tools op Twitter
Volg me op Twitter