{"id":3942,"date":"2021-01-02T18:32:55","date_gmt":"2021-01-02T18:32:55","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=3942"},"modified":"2025-10-14T17:43:37","modified_gmt":"2025-10-14T17:43:37","slug":"vad-ar-ui-design-steg-for-steg-designprocess","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/sv\/vad-ar-ui-design-steg-for-steg-designprocess\/","title":{"rendered":"Vad \u00e4r UI Design? | Steg-f\u00f6r-steg designprocess"},"content":{"rendered":"\n

Vad \u00e4r UI Design? Vad \u00e4r designprocessen n\u00e4r man skapar UX & UI Design och vilka program anv\u00e4nds? H\u00e4r hittar du svaren.<\/p>\n\n\n\n

L\u00e4stips: UX Design \u2013 Vad \u00e4r det och vad g\u00f6r en UX Designer?<\/a><\/p>\n\n\n\n

Vad \u00e4r UI design?<\/h2>\n\n\n\n

UI st\u00e5r f\u00f6r \u201dUser Interface\u201d, vilket p\u00e5 svenska betyder anv\u00e4ndargr\u00e4nssnitt<\/strong>. <\/p>\n\n\n\n

Ett gr\u00e4nssnitt \u00e4r det du ser n\u00e4r du anv\u00e4nder en hemsida, datorprogram, mobilapp, eller annat digitalt system. Gr\u00e4nssnittet \u00e4r designat av en UX och\/eller UI designer. <\/p>\n\n\n\n

Designen skapas grafiskt, genom att man g\u00f6r mockups, vilket du ser p\u00e5 videon nedan.<\/p>\n\n\n\n

Designen skapas sedan med hj\u00e4lp av programmeringskod. Den utvecklingsprocessen kallas front-end utveckling. Koden ser du dock inte som anv\u00e4ndare utan programmet, utan det finns under ytan. Gr\u00e4nssnittet \u00e4r det enda du ser och interagerar med.<\/p>\n\n\n\n

Vad g\u00f6r en UX & UI Designer?<\/h2>\n\n\n\n

UI design skapas som en del av en design- och utvecklingsprocess. Mer om den processen nedan.<\/p>\n\n\n\n

Process f\u00f6r UI design<\/h3>\n\n\n\n

Innan man g\u00f6r designen av gr\u00e4nssnitt b\u00f6r man f\u00f6rst g\u00e5 igenom flera andra steg f\u00f6r att se till att den slutliga produkten (hemsida, app eller system) blir s\u00e5 bra som m\u00f6jligt. Innan UI design kommer oftast UX design, produktdesign och service design.<\/p>\n\n\n\n

Det g\u00e5r inte att g\u00f6ra bra UI design utan att ta h\u00e4nsyn till UX (=anv\u00e4ndarupplevelse)<\/a>. Designen ska inte bara se bra ut, utan den m\u00e5ste ocks\u00e5 vara anv\u00e4ndbar f\u00f6r anv\u00e4ndaren. Anv\u00e4ndaren skall kunna g\u00f6ra det hen vill kunna g\u00f6ra utan att fastna i n\u00e5got steg eller att det uppst\u00e5r n\u00e5gra negativa k\u00e4nslor eller frustrationer. Upplevelsen av att anv\u00e4nda en produkt blir ju s\u00e5klart ocks\u00e5 b\u00e4ttre av att designen \u00e4r fin att se p\u00e5.<\/p>\n\n\n\n

Steg-f\u00f6r-steg | UX\/UI designprocess<\/h4>\n\n\n\n
    \n
  1. F\u00f6retagsm\u00e5l & anv\u00e4ndarbehov<\/strong>
    Tydligg\u00f6r syftet med produkten. Vad har f\u00f6retaget f\u00f6r m\u00e5l med projektet? Och vad vill anv\u00e4ndarna kunna g\u00f6ra med produkten?<\/li>\n\n\n\n
  2. Inneh\u00e5ll- och funktionskrav <\/strong>
    G\u00f6r en lista p\u00e5 vad f\u00f6r inneh\u00e5ll, funktioner och element som ska finnas med i produkten. Vad ska anv\u00e4ndaren kunna g\u00f6ra med produkten och hur ska dem kunna g\u00f6ra det?<\/li>\n\n\n\n
  3. Informationsarkitektur & navigation<\/strong>
    T\u00e4nk p\u00e5 hur navigation ska se ut. Hur ska menyn vara utformad? Vad ska det vara f\u00f6r informationsarkitektur p\u00e5 systemet? Vilka sidor, sk\u00e4rmar eller \u201dstates\u201d ska leda till varandra?<\/li>\n\n\n\n
  4. Skissa p\u00e5 design<\/strong>
    Utforska olika m\u00f6jliga designf\u00f6rslag genom att skissa fram olika l\u00f6sningar p\u00e5 hur produkten (hemsidan, appen, systemet) kan se ut. Vart ska allt inneh\u00e5ll och funktioner ligga och se ut)<\/li>\n\n\n\n
  5. Utv\u00e4rdera och v\u00e4lj design<\/strong>
    Analysera f\u00f6rslagen med f\u00f6r- och nackdelar med olika f\u00f6rslag. V\u00e4lj ut de f\u00f6rslag som \u00e4r b\u00e4st.<\/li>\n\n\n\n
  6. Skapa detaljerade mockups<\/strong>
    G\u00f6r mockups av skisserna. Detta g\u00f6rs med hj\u00e4lp av datorprogram s\u00e5som     Sketch<\/a>, Figma<\/a>, Adobe XD (liknande som Photoshop fast f\u00f6r UX\/UI design). H\u00e4r g\u00f6r du \u00e4ven den detaljerade visuella designen s\u00e5som val av font\/typsnitt, f\u00e4rgschema, bilder, UI illustrationer, animationer, och copy (textinneh\u00e5ll).<\/li>\n<\/ol>\n\n\n\n

    L\u00e4s \u00e4ven: 6 Best UX\/UI Design Softwares for 2021<\/a><\/p>\n\n\n\n

    Efter den f\u00e4rdiga designen s\u00e5 implementeras det med front-end kod. Detta best\u00e5r av HTML, CSS och Javascript (och olika ramverk f\u00f6r Javascript s\u00e5som React och Vue).<\/p>\n\n\n\n

    L\u00e4r dig UI Design<\/h2>\n\n\n\n

    Om du vill l\u00e4ra dig UX & UI design tipsar jag som dessa artiklar<\/p>\n\n\n\n