Roll:
UX/UI-designer (solo)
Tidsperiod:
Jun 2023 – Aug 2023
Verktyg:
Sketch, Jira, Confluence
Dark Mode design för ITS
Bakgrund
ITS stödjer högre utbildning och forskning i Sverige genom att utveckla, drifta och förvalta IT-system för universitet och högskolor.
I det här projektet fick jag uppdraget att ta fram en dark mode version av Antagning.se.
Utmaning
Utmaningen var att översätta den befintliga ljusa designen till dark mode på ett sätt som:
Uppfyller WCAG:s tillgänglighetskrav
Bibehåller en tydlig och användbar upplevelse
Är konsekvent med varumärkets visuella identitet
Research
Jag började med att utforska best practices för dark mode design, med fokus på hur färg, kontrast och hierarki påverkar användbarhet och läsbarhet.
Viktiga insikter:
Färgval: Dark mode fungerar bäst med dämpade nyanser och subtila färgaccenter. I stället för att översätta färgerna direkt, justerade jag varumärkets blå ton till en mörkare variant som uppfyllde WCAG:s kontrastkrav.
Hierarki genom opacitet: För att minska ögontrötthet justeras textopacitet enligt nivå av betoning:
87 % för primär text
60 % för sekundär text
38 % för inaktiva element
Jag använde dessa värden som grund, men finjusterade dem beroende på bakgrund och kontext.
Resultat
Jag itererade genom flera versioner där jag experimenterade med olika nyanser av svart, grått och varumärkets blå accentfärg.
Den slutliga designen innehöll:
En lugn mörk färgpalett med subtila blå highlights
En tydlig visuell hierarki med hjälp av kontrast och opacitet
En design som minskade ögonbelastning men samtidigt kändes trogen Antagning.se visuella uttryck
Resultatet blev ett modernt och tillgängligt dark mode som gav användarna en mer behaglig upplevelse, särskilt vid längre sessioner, och samtidigt stärkte den visuella konsistensen i plattformen.
Lärdomar
Små färgjusteringar kan ha stor påverkan på tillgänglighet
Att designa i dark mode handlar inte bara om estetik, utan om läsbarhet och komfort
Balansen mellan kontrast, tonalitet och varumärkesidentitet är avgörande för en lyckad dark mode design