Hoppa till innehåll
UI-design

Vad är skillnaden mellan grafisk design och UI-design?

Design är ett stort begrepp där till exempel visuell design betyder vad det låter som – det är design som vi ser. Digital design är helt enkelt design anpassad till digitala kanaler och miljöer. Det är inte ett helt specifikt sätt att beskriva det, men det kan vi ta upp vid ett annat tillfälle. Nu ska vi istället reda ut två begrepp som ibland förväxlas, men faktiskt är helt olika, nämligen grafisk design och UI-design.

Beskuren bild på en bärbar mac-dator som visar UI-design på skärmen.

Områden där skillnaden på grafisk design och UI-design är tydlig

Först och främst är den primära skillnaden att grafisk design oftast handlar om print, varumärkesidentiteter och tryckt media, medan UI-design är utformning av gränssnitt i olika storlekar, format och kanaler. Exempel på grafisk design är logotyper, ikoner, visitkort och broschyrer, alla skapade för en storlek som inte behöver anpassa sig dynamiskt till olika bredder och höjder. UI-design och användargränssnitt däremot är skapade för att interagera med exempelvis en app, eller en hemsida i olika typer av webbläsare. Det är design som skalas upp eller ner beroende på om den visas på desktop eller i mobil.  

Färger 

I grafisk design utgår färgpaletten för print i fyrfärg från CMYK-skalan där fokus ligger på val av material och hur det ska tryckas. Inom UI-design väljer man färg som fungerar digitalt, med tre färger i RGB, eller sex värden i en hex-kod. Färger som används digitalt behöver ta hänsyn till konvertering och tillgänglighet. 

Typsnitt 

Val av typsnitt i grafisk design handlar om att förmedla budskap och varumärke. Inom UI-design är förmedling av känsla och varumärke också viktigt, men designern väljer även typsnitt utifrån läsbarhet, tillgänglighet och skalbarhet. Det går faktiskt också att matematiskt räkna ut vilken typografi som fungerar bäst med Google för optimerade SEO-resultat. För att hamna högt upp i rankningen krävs även taggar som märker upp rubrikerna med H1, H2, osv. En sak till att tänka på är att vara uppmärksam på licenskrav när man ska välja sitt typsnitt för webben.  

Guidelines 

Både grafisk design och UI-design använder sig av riktlinjer med specifikationer för hur varumärkesidentiteten ska uppfattas. Inom grafisk design brukar dessa specifikationer sammanfattas i en statisk manual (ofta PDF), som regler för att skapa en enhetlig och korrekt varumärkesbild. Men inom UI-design använder designern oftast ett digitalt lagrat designsystem, som innehåller en samling designprinciper, interaktionsmönster och återanvändbara komponenter. 

Layout 

Grid är ett underliggande rutnät av linjer på bestämda avstånd, som används både inom grafisk design och UI-design. Skillnaden mellan de båda gränssnitten är att i grafisk design finns en fast bredd att förhålla sig till, t.ex en A4-sida eller ett visitkort. Men ett rutnät, eller grid, inom UI-design behöver kunna skalas upp och ner, bli bredare och smalare beroende av storleken på skärmen där designen visas. 

Tillgänglighet 

Idag finns inga krav på tillgänglighet för grafisk design, men för webb och offentlig sektor (vilket påverkar UI-designen) finns det krav. I juni 2025 kommer dessa krav bli lag även för privat sektor och då måste alla varor och tjänster, webbsidor och appar som riktar sig från företag till konsumenter vara tillgängliga.

Se vårt erbjudande

Vill du veta mer om hur vi kan hjälpa med UI-design? Välkommen att höra av dig!

Veronica Wallström

Veronica Wallström

Affärsansvarig UX & Design

Relaterat innehåll