Bästa UX/UI Design program och applikationer 2020

Bästa UX/UI Design program och applikationer 2020

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 mot att designa digitala gränssnitt, även om dem har fått många användbara uppdateringar.

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 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 vektorgrafik, layering och prototyper för interaktioner. Många av dem har även inbyggda funktionaliteter för designer-developer handoffs och system för symbolbibliotek. Vissa av dem är även dedikerade mot micro-animation för interaktionsdesign.

Vad betyder alla dem här begreppen och vad innebär det för designflödet?

Designer-developer handoffs

Designer-developer handoffs är processen där en designer presenterar och ger vidare mockups och design av en digital produkt, så att utvecklaren kan implementera designen i kod. En utmaning i det här är att utvecklaren behöver kunna förstå designen för att kunna implementera den korrekt. Det gäller inte endast saker som att identifiera en färger på ett element (ex. en knapp), utan även saker som vilka skärmar som leder till vilka och hur micro-animationer ska fungera för att ge korrekt feedback.

Verktyg och funktionaliteter som hjälper till med den här transaktionen är till exempel auto-genererad front-end kod för grafiska element från mockup. Exempelvis verktyg som identifierar en färgs hex kod (color picker), eller verktyg som genererar färdig CSS kod för knappar och skuggor eller hela React komponenter. En annan viktig funktionalitet är möjligtheten att dela mockups och prototyper på cloud så att olika personer som är med i utvecklignsprocessen kan kommentera och inspektera olika element av designen i ett gränssnitt. Detta är användbart för när designers ska ge feeedback till varandra, för att klargöra frågor från utvecklare eller för att få feedback från beslutsfattare.

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. Ett exempel på ett sådant grafiskt element kan vara en knapp. Symbolen innehåller då formen av knappen (border-radius, padding, height & width) samt hex-kod på färgen och standard state och hover state mm. Men en komponent kan vara mycket större än så, till och med hela skärmar som innehåller många mindre komponenter.

Fördelen med en sånhär funktion är att man kan skapa hela bibliotek av grafiska komponenter som representerar produkten, eller till och med ett helt företags brand och design system.

Oavsett om ett företag bygger ett design system eller inte så är det nödvändigt att bygga komponenter för att effektivisera design- och utvecklingsprocessen så mycket som möjligt. 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 och skapa konsistenta produkter för kunder och användare.

Prototyper och animationer

Prototyper och animation är viktiga att ha med i sin design för att förfina användarupplevelse och interaktionsdesign. Dem behövs för att ge feedback till användaren, kommunicera information och leverera emotionell design och får digitala produkter att kännas mer levande.

Prototyper är ett måste för att utveckla välfungerande och komplexa systen (t.ex. när du klickar på den här knappen så skickas du vidare till det här nya state:t eller skärmen). Detta är extra viktigt om man arbetar med state-beroende utveckling där olika interaktioner endast påverkar vissa delar av hemsidan. Så att kunna göra prototyper med sina mockups skulle jag säga är idag ett krav.

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, vector och vector-manipulation, symboler, grupperingar av element osv så kommer du lätt kunna överföra dina kunskaper till andra applikationer.

Jag började själv med Sketch App 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 cloud-baserat. Dessutom är det ett väldigt populärt program och likt Sketch som används av fler och fler företag. Figma har alla funktionaliteter som du behöver för att lära dig skapa mockups och prototyper.

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å.

Tips på att lära sig UX/UI design

1. 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 webbteknik. 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

2. För mer avancerade

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

  • 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é.

Lycka till!

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

Wendy Zhou

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