Vilka är dem bästa UX/UI design programmen?

Vilka är dem bästa UX/UI design programmen?

Vilket program ska man börja lära med för att lära sig UX & UI design? Här får du svaret med en lista på dem 6 bästa UX/UI design programmen.

Varför inte Photoshop och liknande?

Traditionella program som används för grafisk design såsom Photoshop och Gimp har sedan många år tillbaka upphört vara dem bäst optimerade programmen för just UX och UI design.

Sådana applikationer var inte skapta och designade specifikt för att specifikt designa digitala gränssnitt. Och även om dem har fått en massa användbara uppdateringar så är dem helt enkelt inte lika bra som program skapta för just UX/UI design.

Photoshop och Illustration har till exempel inga funktioner som tillåter en skapa klickbara prototyper och UI animationer. Dessutom har dem inga verktyg som är bra för front-end utvecklare (t.ex. att kunna plocka HEX-kod på färger och hitta margin och padding).

Lista på dem bästa UX/UI design programmen

Vilka är då dem vanligaste programmen som UX/UI designers använder sig av idag? Jo, det är program som är skapta specifikt för digital design mot webbsidor och appar.

Dem vanligaste och bästa UI design applikationerna idag är:

Alla program ovan är skapta för design av hemsidor och appar. Det innebär att dem är mycket bättre anpassade för att skapa:

  • vektor-grafik
  • grupperingar och lager
  • prototyper för interaktioner

Flera av programmen har även inbyggda funktioner som är bra för:

  • designer-developer handoffs
  • symboler och symbolbibliotek
  • prototyper och animationer

Några av dem är även dedikerade mot micro-animation (såsom Framer X).

Vad är designer-developer handoff, symboler och protoyper?

1. Designer-developer handoff

Designer-developer handoffs är processen där en designer presenterar och ger vidare mockups till en utvecklare. Utvecklaren behöver få designen på bästa sätt, så att hen kan implementera den i kod korrekt.

Se video nedan för visuell förklaring.

Det är alltså en superviktig funktion som jag kollat på när jag bedömt vilka som är dem bästa UX/UI design programmen.

Det gäller bland annat saker som att identifiera rätt färg på ett element (som en knapp). Här behöver man exempelvis en färgplockar. Det går sällan bra att gissa sig fram till rätt färg på känsla. Det gäller även andra saker såsom att veta vilka skärmar som ska leda till andra (prototyping).

Exempel på bra funktioner för designer-developer handoff

Verktyg och funktionaliteter som hjälper till med den här transaktionen är till exempel auto-genererad front-end kod för grafiska element.

Exempelvis:

  • ”Eye dropper” för att identifierar exakt rätt hex kod på färger
  • Verktyg som genererar färdig CSS kod för knappar och skuggor (eller hela komponenter)
  • Möjlighet att dela mockups och prototyper på cloud så att olika personer i teamet kan kommentera och inspektera

2. Symbolbibliotek (Symbol system / Component system)

Symbolbibliotek (Symbol system / Component system) är en funktionalitet där du kan skapa symboler och komponenter av de grafiska element som du designat.

Se video nedan om ”Symbols” i Sketch. I Figma heter samma sak ”Components”.

Ett exempel på en symbol/komponent kan vara en knapp. Symbolen innehåller då:

  • Formen av knappen (border-radius, padding, height & width)
  • Hex-kod på färgen
  • Default state och hover state mm.

Men en komponent kan vara mycket större än så. Det kan vara hela skärmar som innehåller många mindre komponenter.

Symboler och komponenter är återanvändningsbara

Det viktiga är att du kan återanvända symbolerna/komponenterna om och om igen. Ändrar du en av dem, så uppdateras symbolen på alla ställen du använt den.

Så jobbar du på ett design projekt med 20-30 sidor behöver du inte ändra en och samma knapp om och om igen på varje sida. Du behöver bara göra det en gång.

Verktyg för när man skapar Design System

Fördelen med en sådan här funktioner är att man kan skapa fullständiga bibliotek av grafiska komponenter. Det kan vara ett helt Design System, vilket är som en brand guide fast för det digitala språket.

Oavsett om ett företag bygger ett design system eller inte så är det nödvändigt att bygga komponenter.

Effektivisera design- och utvecklingsprocessen + Sparar pengar!

Detta för att komponenter effektiviserar design- och utvecklingsprocessen. Detta sparar både tid och pengar.

Det gör även att alla på teamet, oavsett designer eller utvecklare, kan följa samma design guidelines. Då kan man skapa konsistens i det digitala språket.

3. Prototyper och animationer

Prototyper och animation är viktiga att ha med i sin design för att få ihop helheten och för att förfina användarupplevelse och interaktionsdesign.

Vad är protyper och vad är dem bra för?

Prototyper är viktiga för att koppla samman flera sidor och visa utvecklaren vad som ska ske när användaren gör olika handlingar.

Vad är en prototyp?
Att skapa en prototyp innebär att du bestämmer hur olika skärmar (mockups) hänger ihop baserat på användarens handlingar.

Exempelvis om du trycker på en ”Köp”-knapp på startsidan, så skickas du vidare till betalsidan. Då har du kopplat ihop startsidan och betalsidan via en action (tryck på ”Köp”-knapppen). Nu har du en prototyp på ett enkelt flöde.

Detta är extra viktigt om man arbetar med att skapa komplexa hemsidor och system. Eller när man skapar applikationer som är modulära (t.ex. React applikationer). Då kan det vara så att en handling endast påverkar vissa delar av en skärm, men inte skickar användaren till en någon ny sida. Då måste varje ny state vara väldokumenterad.

Vad är animationer och vad är dem bra för?

Animationer behövs för att ge optimal feedback till användaren. Dem behövs också för att kommunicera information effektivare och för emotionell design. Animationer får digitala produkter att kännas mer levande.

Animationer och motion design blir mer och mer populärt inom UI design då företag har sett att micro-animationer under interaktioner kan ha stora effekter på användbarhet och användarupplevelsen.

Vilket program ska man börja med?

Är du en nybörjare på UX/UI design eller precis i startgroparna? Då kan det vara svårt att bestämma sig för vilket program som man ska lära sig först.

Men sanningen är att det inte spelar någon stor roll, då dem flesta fungerar baserade på samma principer och funktionaliteter.

När du väl har lärt dig hur man arbetar med artboards, vectorgrafik, symboler osv, så kommer du lätt kunna föra över dina kunskaper till andra applikationer.

Jag rekommenderar att du börjar med Figma (gratis) eller Sketch (kostar).

Jag började själv med Sketch när jag började lära mig, men då fanns inte Figma. Hade jag börjat idag hade jag valt Figma som ett första program då det framförallt är helt gratis och går att använda i en browser.

Figma Community med gratis resurser

Dessutom är Figma ett väldigt populärt program med alla funktionaliteter som du behöver för att lära dig skapa mockups och prototyper. Dem har till och med börjat med ett ”Figma community” där designers delar med sig av massa grymma paket!

För nybörjare rekommenderar jag generellt Sketch, Figma eller Adobe XD då dem är väldigt enkla att komma igång med.

Applikationer såsom Framer och Axure har en brantare inlärningskurva och mer fokuserade på micro-interaktioner och animationer, sådant du inte kommer vara bra på i början ändå.

Så lär du dig UX/UI design

Förutom att veta vilka dem bästa UX/UI design programmen är, så behöver man också utveckla teoretiska kunskaper och ett design-tänk.

Det bästa sättet att lära sig är att läsa en massa böcker, artiklar, kolla på videos och ÖVA! Du måste både lära dig alla grundläggande teoretiska saker (för UX), och öva på att skapa design och be om feedback. Lär dig från andra.

Här är en artikel om dem bästa böcker för att lära sig UX/UI design:

Best 4 Books to Learn UX/UI Design for Beginners

För nybörjare

När du lär dig design från början är det bäst att först fokusera på att förstå dem mest grundläggande principerna av grafisk design, människa-teknik interaktion samt front-end.

Några exempel nedan på saker att komma igång med:

  • Färgteori – Viktigt för UI design och skapandet av fina produkter
  • Layouts av gränssnitt – Exempelvis: hur brukar hemsidor och appar vara uppbygda, vilka element och layouts brukar förekomma? Lär dig märka vilka konventioner det finns inom gränssnittsdesign
  • Symmetri – Hur skapar du det och när ska du använda det
  • Användbarhets-principer – Viktigt för UX design, t.ex. Normans design principer
  • Grundläggande typografi – Olika typer av fonts och hur kan du manipulera dem för att uppnå önskad effekt
  • Informationsarkitektur – Hur ska komplexa hemsidor och system sättas upp?
  • Grundläggande prototyping – Vad det är och vad man ska tänka på när man skapar dem
  • Förståelse för HTML & CSS – Du behöver inte vara en expert, men att förstå vad och hur HTML & CSS är och fungerar kommer att höja din nivå som UX/UI designer och göra dig mer effektiv i samarbete med utvecklare

Mer avancerat

När man satsar på att utveckla och avancera sin kompetens är det en bra idé att börja utforska följande:

  • Användbarhetstester – Lär dig planera, utföra och analysera användbarhetstester. Detta är viktigt för att testa hur bra användbarhet din design har och vilket intryck din design har på användare.
  • Lär dig från feedback – Det är viktigt att lära sig uppskatta och förbättras genom feedback och kritik från andra. Ett sätt är att ha design critique session på jobbet eller att lägga ut sina projekt på sociala medier och be om feedback (Instagram, Dribbble, Reddit osv).
  • Animationer – UI motion graphics växer och kommer vara framtiden. Rörliga gränssnitt och illustrationer.
  • Design av micro-interaktioner – Fokus på feedback och emotionell design.
  • Front-end utveckling – Bra att lära sig för att få förståelse för möjligheter och restriktioner med utveckling, så att du designar saker som är utförbart och ekonomiskt värt. Gör också att du kan vara mer av en brygga mellan design och utveckling.
  • Design Systems – Hur man skapar dem och gör dem effektiva. Detta kan hjälpa ett helt företags produktivitet och spara tid samt underlätta en mer strategisk designprocess.
  • Utveckla komponent bibliotek – Utifrån design systems kan man utveckla och designa hela bibliotek i kod som är återanvändningsbart. Om du som designer även lär dig front-end utveckling kan du vara med och skapa design komponenter och se till att dem blir av hög kvalité.

Nu vet du vilka dem bästa UX/UI design programmen är! Jag hoppas att den här artikeln kunde svara på några av dina frågor.

Fler UX & UI design artiklar

Om du är intresserad av att läsa mer om UX & UI design så kan du kolla in mina andra relaterade artiklar:

Wendy Zhou

UX/UI designer. Skriver om sidoprojekt, design, teknik, privatekonomi och cyberpunk. Kontakt: wendyzhou.design@gmail.com

Lämna ett svar