UI-designværktøjer: De, du faktisk har brug for (december 2018-udgave)

Denne artikel kom oprindeligt på Truth About Design, platformen for ærlige sandheder og vejledning for designindustrien.

Videoversion af denne artikel:
https://www.youtube.com/watch?v=vqGxYZKTTw0

Et af de øverste spørgsmål, jeg får, når jeg veileder studerende, er: ”Hvilke værktøjer skal jeg bruge til UI-design? Skitse? Photoshop? Hvad med Adobe XD? ”(De spørger altid om Adobe XD.)

TL; DR: Brug sketch til arbejde med lav og mellemstor trosret og princip for højtidelighedsarbejde. InVision bliver snart forældet. Vær meget opmærksom på Figma og Framer X. Fra december 2018 er det ikke andre UI-designværktøjer værd at bruge i et virkeligt arbejdsmiljø.

Til denne artikel fokuserer vi på værktøjer til wireframing, prototyping og animation. Der er selvfølgelig andre gode værktøjer til UX-forskning, samarbejde osv

Sandheden om UI-designværktøjer: De fleste af dem er de samme

Indtil 2011 var Photoshop det eneste værktøj, som UX-designere havde til rådighed. Photoshop er dog ikke et interfaceværktøj. Det er en billedredigerer, der har et par funktioner, der er nyttige til interface-design, og en hel masse funktioner, der ikke er. Men fordi Photoshop var så stor og så populær og fungerede godt nok, troede ingen (inklusive mig) der ville være behov for nogensinde at bruge noget andet.

I 2011 blev Sketch App lanceret. Det var det første dedikerede interface-designværktøj. Da der ikke var nogen anden, der lavede dedikerede UI-designværktøjer på det tidspunkt, og folk (inklusive mig) var meget skeptiske over for dette nye, uprøvede værktøj, var Sketch i stand til at slynge tonsvis af markedsandele i årevis, før nogen anden kunne svare. De spillede det også meget smart ved at omdanne Sketch til en platform, som andre kunne udvikle yderligere tilføjelser til og dermed hurtigt udvide deres rækkevidde og økosystem.

Sketch var i en meget speciel position på det tidspunkt, fordi de tilbød et værktøj, der virkelig var 10 gange bedre end konkurrencen, og gjorde det værd for virksomheder og teams at bruge penge og tid på at skifte til en ny arbejdsgang for deres organisationer.

Modet hos Sketch-udviklerne til at placere sig selv derude og skabe et nyt værktøj, og deres efterfølgende succes, førte til en oversvømmelse af trend-tilhængere, der bygger nye UI-designværktøjer. De fleste af dem tilbyder dog lidt eller ingen differentiering fra Sketch.

At spørge ”hvilket UI-designværktøj der er bedre, X eller Y” er som at spørge ”hvilket bor der er bedre, Bosch eller Dewalt.” De gør alle de samme ting på meget lignende måder. Den rigtige afgørende faktor for hvilket værktøj du vil bruge er ikke hvad det kan gøre, fordi alle værktøjer kan opbygge et UI med basale interaktioner.

De reelle spørgsmål, du skal stille er:

  • Hvad bruger mit team?
  • Hvad bruger min virksomhed?
  • Hvad er industristandarder?

Og i de fleste tilfælde vil det for det meste arbejde være Sketch. Virksomheder vil ikke skifte til et nyt værktøj igen, bare efter at have skiftet til Sketch for to eller tre år siden, bare fordi det nye værktøj på blokken gør en eller to ting lidt bedre end Sketch.

At spørge ”hvilket UI-designværktøj der er bedre, X eller Y” er som at spørge ”hvilket bor der er bedre, Bosch eller Dewalt.”

Sketch er i den position, som Photoshop plejede at være i, men de hviler ikke på deres laurbær, som Photoshop gjorde. Sketch gør InVision langsomt forældet ved at inkludere skybaserede prototyperværktøjer. Der er et antal add-ons fra tredjepartsanimationer til Sketch, der giver dig mulighed for at holde hele din arbejdsgang fra lav til høj troskap inde i Sketch. Jeg har dog ikke prøvet dem endnu, og de ser ikke meget trækkraft i branchen.

Brug til princippet til mikrointeraktioner, animationer og High Fidelity-prototyper

Sketch er industristandarden til at oprette statiske mockups og prototyper med grundlæggende interaktivitet. Imidlertid er det i øjeblikket ikke muligt at udføre mere kompleks prototyper og animationer i Sketch. Det værktøj, der ser den mest vedtagelse til at udføre den slags komplekse animationer, er princip. Princip giver dig mulighed for let at importere dine Sketch-filer og udføre komplekse animationer meget let. Der er en grund til, at det er blevet vedtaget af alle de store spillere i designrummet.

Værktøjer til at se: Framer X og Figma

De fleste UI-værktøjer derude er ikke forskellige nok fra Sketch til at give dig en reel grund til at skifte. Men to værktøjer tager en meget anden tilgang til Sketch for UI-design, og fordi de er bygget fra bunden omkring denne nye tilgang, er der en chance for, at dette vil betale sig på en måde, som Sketch ikke vil være i stand til at tilpasse sig.

Figma: Google Docs men til interface design

Ved du, hvordan i Google Dokumenter kan du og dine venner arbejde på det essay eller den præsentation sammen på samme tid, og det bliver altid automatisk gemt i skyen, og du kan få adgang til det fra enhver computer? Det er hvad Figma har gjort for interface-design. De tog hovedsageligt Sketch og lagde det i en browser.

Figma er den største konkurrent lige nu, fordi:

  • Det har masser af økonomisk støtte fra Silicon Valley
  • De frigiver opdateringer hver uge
  • Det er gratis for solo-designere
  • De er platform-agnostiske (fungerer på enhver computer), så de kan få markedsandele fra ikke-Mac-brugere og folk, der ikke har råd til Sketch
  • Det har et legitimt differentieringspunkt fra Sketch med sine realtids-samarbejdsfunktioner, som Sketch ikke let kan kopiere

Framer X: Bridging the Gap between Design and Code

Framer X er et andet interessant værktøj at se. Det, der adskiller det, er dens dybe integration med udviklingsværktøjer. Teoretisk set kan du designe i Framer og eksportere produktionsklar kode. Dette kan dramatisk fremskynde arbejdsgangen og samarbejde mellem designere og ingeniører. Men er forbedringen i arbejdsgang så meget bedre, at det er værd at skifte til et andet værktøj igen? Vil designere være villige til at fikle med kode? Det er svært at fortælle på dette tidspunkt.

Framer er heller ikke fri. Det er $ 15 / måned ($ 12, hvis du betaler årligt), hvilket er dyrere end en årlig licens af Sketch. Med deres prismodel og funktioner er jeg ikke sikker på, hvilket publikum de målretter mod.

Min hypotese er, at den tekniske side af tingene er for kompliceret og dybtgående til at blive taget videre af et designværktøj. Det minder mig meget om, hvad folk forsøgte at gøre for 15 år siden med redaktører som Dreamweaver. De arbejdede aldrig i ægte hardcore-produktionsmiljøer. Men det er et gennemtænkt værktøj med en masse ressourcer bag sig, så vi får se.

Hvad med andre værktøjer?

Til arbejdsindstillinger i det virkelige liv anbefaler jeg, at du ikke engang gider med andre værktøjer, men Sketch og Princip lige nu. Begyndere i enhver branche elsker at tænke over hvilket værktøj de skal bruge, fordi det er meget lettere at gøre det end at faktisk udføre kvalitetsarbejde. Hvis du bare er nysgerrig efter at eksperimentere lidt på egen hånd, er den bedste ressource til at finde relevante nye værktøjer til at prøve http://uxtools.co/design - det er en placering af alle de mest populære UI-designværktøjer derude lige nu.

Og hvis du er interesseret i at forfølge en karriere inden for UX-design, menterer jeg i øjeblikket på Springboard og kan garantere kvaliteten af ​​deres læseplan. Det tilbyder en-til-en-mentorskab af brancheeksperter som mig og lader dig arbejde på projekter i den virkelige verden for at udvikle en unik portefølje. De garanterer også, at du får et job inden for 6 måneder efter eksamen, eller de giver dig dine penge tilbage.

Jamal Nichols driver Truth About Design, platformen for ærlige sandheder og vejledning for designindustrien.