Vad är UI Design? | Steg-för-steg designprocess

Vad är UI Design? | Steg-för-steg designprocess

Vad är UI Design? Vad är designprocessen när man skapar UX & UI Design och vilka program används? Här hittar du svaren.

Lästips: UX Design – Vad är det och vad gör en UX Designer?

Vad är UI design?

UI står för ”User Interface”, vilket på svenska betyder användargränssnitt.

Ett gränssnitt är det du ser när du använder en hemsida, datorprogram, mobilapp, eller annat digitalt system. Gränssnittet är designat av en UX och/eller UI designer.

Designen skapas grafiskt, genom att man gör mockups, vilket du ser på videon nedan.

Vad är ui design

Designen skapas sedan med hjälp av programmeringskod. Den utvecklingsprocessen kallas front-end utveckling. Koden ser du dock inte som användare utan programmet, utan det finns under ytan. Gränssnittet är det enda du ser och interagerar med.

Vad gör en UX & UI Designer?

UI design skapas som en del av en design- och utvecklingsprocess. Mer om den processen nedan.

Process för UI design

Innan man gör designen av gränssnitt bör man först gå igenom flera andra steg för att se till att den slutliga produkten (hemsida, app eller system) blir så bra som möjligt. Innan UI design kommer oftast UX design, produktdesign och service design.

Det går inte att göra bra UI design utan att ta hänsyn till UX (=användarupplevelse). Designen ska inte bara se bra ut, utan den måste också vara användbar för användaren. Användaren skall kunna göra det hen vill kunna göra utan att fastna i något steg eller att det uppstår några negativa känslor eller frustrationer. Upplevelsen av att använda en produkt blir ju såklart också bättre av att designen är fin att se på.

Steg-för-steg | UX/UI designprocess

  1. Företagsmål & användarbehov
    Tydliggör syftet med produkten. Vad har företaget för mål med projektet? Och vad vill användarna kunna göra med produkten?
  2. Innehåll- och funktionskrav
    Gör en lista på vad för innehåll, funktioner och element som ska finnas med i produkten. Vad ska användaren kunna göra med produkten och hur ska dem kunna göra det?
  3. Informationsarkitektur & navigation
    Tänk på hur navigation ska se ut. Hur ska menyn vara utformad? Vad ska det vara för informationsarkitektur på systemet? Vilka sidor, skärmar eller ”states” ska leda till varandra?
  4. Skissa på design
    Utforska olika möjliga designförslag genom att skissa fram olika lösningar på hur produkten (hemsidan, appen, systemet) kan se ut. Vart ska allt innehåll och funktioner ligga och se ut)
  5. Utvärdera och välj design
    Analysera förslagen med för- och nackdelar med olika förslag. Välj ut de förslag som är bäst.
  6. Skapa detaljerade mockups
    Gör mockups av skisserna. Detta görs med hjälp av datorprogram såsom Sketch, Figma, Adobe XD (liknande som Photoshop fast för UX/UI design). Här gör du även den detaljerade visuella designen såsom val av font/typsnitt, färgschema, bilder, UI illustrationer, animationer, och copy (textinnehåll).

Läs även: 6 Best UX/UI Design Softwares for 2021

Efter den färdiga designen så implementeras det med front-end kod. Detta består av HTML, CSS och Javascript (och olika ramverk för Javascript såsom React och Vue).

Lär dig UI Design

Om du vill lära dig UX & UI design tipsar jag som dessa artiklar


Hoppas detta var hjälpsamt!

Wendy Zhou

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

Lämna ett svar