Začíname s návrhom UX v aplikácii Skica

Základný náter pre nových dizajnérov UX a študentov dizajnu

Za posledné dva roky sme napísali veľa tipov pre aplikáciu Sketch v Power Tools spoločnosti UX a ja som ich chcel usporiadať tak, aby pomohol návrhárom, ktorí sa práve začínajú dostať do UX.

Mal by som tiež spomenúť, že nebudem diskutovať o tom, ktorý nástroj je najlepší - len predpokladám, že ste si už uvedomili, že Sketch je najlepší (zatiaľ) a chcete vedieť, ako ho použiť ako návrhára UX

Rozčlenil som naše články do 5 sekcií, ktoré mapujú, ako si myslím, že noví dizajnéri postupujú od nováčikov k majstrovstvu:

  • Získavanie nápadov
  • Začíname
  • Zrýchlenie
  • Chytrejší
  • Vizuálne

Získavanie nápadov

Dizajn UX sa začína skôr, ako sa dostanete k nástrojom - začína sa získavať nápady z vašej hlavy (... vlastne to začína výskumom, ale tento článok si ponechajte do 20 minút).

Priznávam, že do digitálnych nástrojov skočím dosť skoro. Ale je to hlavne preto, že robím viac v mojej hlave a spolupracujem na tabuli s mojím dizajnérskym tímom. Návrhári UX, ktorí začínajú, by mali skutočne zostať v nízkej vernosti a zároveň skúmať problémový priestor a robiť chyby.

Keď budete pripravení niečo uviesť na obrazovku, myslím, že existujú dva nástroje, ktoré to uľahčujú. Prvým z nich je nástroj InVision s názvom Freehand, ktorý sme preskúmali:

Druhým nástrojom, ktorý uľahčuje túto fázu návrhu, je sada prémiových knižníc pre aplikáciu Sketch s názvom Flowkit od Matta D. Smitha. Má cenu 29 dolárov.

Je to nielen skvelé pre bezdrôtové hranie s vernosťou, ale môže sa použiť aj v neskorších fázach návrhu, keď potrebujete na komunikáciu so svojím návrhom zmapovať kľúčové pracovné postupy vo vysokej vernosti.

Začíname

Najviac silnou stránkou aplikácie Sketch for UX Design je dôraz na to, aby sa veci opakovali a rýchlo.

Stále je dosť alarmujúce vidieť, koľko dizajnérov aplikácie Sketch nepoužíva veci také jednoduché a výkonné ako zdieľané štýly alebo novšie vylepšenia, ako sú vnorené symboly. Hádam, že je to preto, že návrhári sú netrpezliví a len chcú veci dostať von. Úplne to chápem.

Ale skvelý dizajn je taký dobrý, ako je organizovaný dizajnér. Páči sa nám metafora varenia:

A tiež radi rozširujeme koncepciu štýlových štýlov z kódu na dizajn (keďže sme to napísali, návrhové systémy sa skutočne rozšírili na scénu, ale väčšina z týchto techník je stále relevantná):

A nakoniec za svätý grál článkov o tom, ako začať projekt v aplikácii Sketch, ktorý to všetko pokrýva (až po štruktúru priečinkov):

S bonusovým článkom o tom, ako nastaviť rozloženie v aplikácii Sketch zodpovedne:

Zrýchlenie

Ok, teraz, keď už máte prehľad o tom, ako efektívne začať projekt Skica, je čas začať s nástrojom rýchlejšie. Osobne považujem za urážlivé vidieť návrhára, ktorý pri navrhovaní nepoužíva žiadne skratky - tým myslím, že to naozaj bolí moju dušu. Nebuď ten chlap / gal:

Odkedy sme tento článok napísali, vyšlo asi milión a pol nových nástrojov a doplnkov, ale pravda je, že najlepší spoločníci pre aplikáciu Sketch sa podľa môjho názoru v skutočnosti nezmenili (Nudg.it je v službe Sketch, Anima natívne podporovaná). je stále užitočný, aj keď niektoré z nich boli zapracované do funkčnosti rozloženia aplikácie Sketch):

Tipy a triky

Jon Moore odovzdal svoju múdrosť pre používateľov v niekoľkých článkoch, ktoré vám pomôžu v jednoduchosti a sile:

Chytrejší

Viete, ako nastaviť projekt, naučili ste sa, ako sa s náčrtom zrýchliť, a teraz je čas aplikovať všetko na návrh UX.

Ako som už povedal, Sketch je ideálny pre dizajn UX, pretože uľahčuje opakovanie, konzistentnosť a modularitu. Tu je niekoľko príkladov, ako používať aplikáciu Sketch na inteligentné vytvorenie prvkov používateľského rozhrania (a všetky prichádzajú so zadarmo b):

Efektívne zaobchádzanie s ikonami a grafikou

V ďalšej časti sa venujeme vizuálnej stránke dizajnu UX, ale zaoberať sa grafikou je často mimo kormidlovne dizajnéra UX. Namiesto toho, aby ste si robili starosti s vytváraním ikon, buďte inteligentnejší v tom, ako ich používate:

Vnorené symboly sa v skutočnosti môžu trochu automatizovať:

Nakoniec by som sa mýlil, keby som neukázal najväčší pokrok Sketch za posledných 12 mesiacov - Knižnice:

Vizuálne

Ako keby to všetko nestačilo, dizajnéri UX majú dnes oveľa vyššiu úroveň, aby sa splnili, pokiaľ ide o vizuálny dizajn.

Keď som začínal s návrhom UX, považoval som za náročné zoznámiť sa s „materiálmi“, ktoré som potreboval navrhnúť: pomermi strán, veľkosťami písma, hmotnosťou, farebným kontrastom atď.

Aby som sa zlepšil, začal som skopírovaním existujúcich produktov, aby som mohol získať pocit, ako sa zložilo používateľské rozhranie.

Tento rok sme sa zaoberali minulým rokom a poskytli sme odkazy na niekoľko bežných produktov, ktoré boli v aplikácii Sketch znova vytvorené (hoci niektoré z nich boli odvtedy prepracované):

Odtiaľ môžete skutočne začať používať niektoré malé techniky, aby ste svojim dizajnom dodali len trochu chuti:

Nezabudnite však, že presné vzorové údaje sú rovnako dôležité pre vizuálny dizajn ako samotné vizuálne prvky:

* Nikdy sme nenapísali 2. časť

V neposlednom rade musíte v určitom okamihu svojej kariéry navrhnúť palubnú dosku a pre dizajnéra UX je to často jedna z najväčších nočných morí. Osobne zistím, že dashboardy prinášajú do tabuľky minimálnu hodnotu, takže by som radšej nestrávil dni tým, že by grafy vyzerali dobre:

Bolo to úžasných 18 mesiacov pomáhať dizajnérskej komunite prostredníctvom nástrojov UX Power Tools. A hoci aplikácia Sketch určite nie je jediným nástrojom, ktorý by mal mať dizajnér vo svojom arzenáli, je to určite najsilnejší nástroj. Dúfam, že tento dodatok pomôže tým z vás, ktorí sa práve začínajú v kariére UX alebo ktorí prechádzajú k vývojovému postupu v aplikácii Sketch.

Ak máte záujem o vanilkový dizajnový systém, ktorý je ideálny na začatie nových projektov, radi by sme sa pozreli na tie, ktoré sme vytvorili. Ušetria vám tisíce hodín času navrhovania:

Keď nezbieram články o aplikácii Sketch na médiu, pracujem na návrhových nástrojoch Sketch v spoločnosti UX Power Tools, aby som sa stal lepším a efektívnejším dizajnérom.

Postupujte podľa UX Power Tools na Twitteri
Sleduj ma na Twitteri