Mörka till svarta bakgrunder ger designers en otrolig variation av kreativa möjligheter.
Vi spenderar alla mer och mer tid framför skärmen.
Konsekvenserna: ökad energiförbrukning när ögonen är överansträngda – ofta förknippad med fallande koncentration.
Eftersom det borde vara en mycket trevlig upplevelse att surfa på Internet och besöka din webbplats har det mörka läget, känt som dark mode, och webbplatser med mörk bakgrund ökat i popularitet i flera år.
Vill du veta om mörkt läge också är användbart för din webbplats eller webbapp? Vilka är för- och nackdelarna med mörka till svarta teman?
Då har du kommit rätt! Förutom information om mörkt läge hittar du även specifika tips för din webbplats här.
Mörkt läge (dark mode) – vad är det?
Precis som att det är typiskt att skriva med mörk teckenfärg på vitt papper är digitala användargränssnitt vanligtvis ljusa och visas i mörkt teckensnitt.
Mörkt läge används vanligtvis när användargränssnitt har mörka bakgrunder och ljusare teckensnitt. Oavsett om det är användargränssnittet på din iPhone, din webbapplikation eller webbplats.
Vad är skillnaden mellan mörkt läge och mörka teman och svarta webbplatser?
Till skillnad från mörka teman eller mörka till svarta webbplatser kan mörkt läge aktiveras på eller av.
Ämnet resursbevarande kan också spela en större roll i mörkt läge. Mot denna bakgrund används färger i allmänhet endast som accenter på mindre ytor. Totalt sett är den totala ljusstyrkan kraftigt reducerad på skärmar.
När det gäller designen av din webbplats kan insikterna från mörkt läge vara en berikning för designen av webbplatser med mörk bakgrund. På samma sätt flödar kreativa aspekter från att arbeta med svart som färg i webbdesign automatiskt in i överväganden om mörkt läge.
Trendsetter i mörkt läge
Apple introducerade Dark Mode 2018, Googles Android 2019, Googles sökmotor sedan 2021. Microsoft, Samsung, Facebook och Twitter erbjuder även sina användare ett mörkt tema … Användare har ett val, prova det mörka temat – och om man ska tro Android Authority-studien föredrar 81,9 % av deras läsare det mörka temat.
Resultaten av studien kan säkerligen inte direkt överföras till allmänheten. Ändå visar de en tydlig riktning och ger svar på varför mörka teman är att föredra eller inte.
Förutom teknikjättarna finns det en annan trendsättargrupp: utvecklarna och formgivarna. Mörka bakgrunder har länge varit en stapelvara i både utvecklarverktyg och temaprogram.Varför använder du det mörka temat? Av samma anledningar som studien räknar upp: Användningen av det mörka temat upplevs som trevlig för långt, fokuserat arbete på skärmen och förs vidare som en rekommendation.
Varför är mörkt läge och svart så populärt som designelement?
Effektivitet: Svart ser ofta coolt ut som bakgrund. Tillvägagångssättet kan ge din design ett mycket starkt uttryck. Det är inte ovanligt att mörka teman verkar mystiska och spännande.
Energi: Speciellt med livfulla, ljusa färger och vitt kan svarta mönster utstråla mycket energi, verka dynamiska och aktiva. Elegans: I kombination med pastelltoner, guld och silver , ditt mörka tema kan vara av mycket hög kvalitet, elegant och lyxigt.
Företagsdesign: I en värld av ljusa färger kan ett svart tema vara den perfekta avrundningen och framhäva kärnan i ditt varumärke ännu mer.
Fokus: Svarta bakgrunder kan dra dina besökares uppmärksamhet ännu mer till de viktigaste delarna av din webbplats. Detta gäller även korta och koncisa texter med motsvarande typografikoncept med starka rubriker
Det kan vara lätt för dina besökare att minska den totala ljusstyrkan i din design. Det gäller i synnerhet besökare med ögonproblem och ljuskänslighet. Men även för alla användare som tittar på din webbplats eller webbapp i en mörkare miljö (på natten / på språng…).
I detta sammanhang talar man om digital ögonansträngning eller datorseendesyndrom. Även om mörkt läge blir mer och mer populärt erbjuder majoriteten av företagssajter inte mörkt läge och är primärt vita som standard.
Beroende på bransch har du goda chanser att särskilja dig från dina konkurrenter.
Hållbarhet: Om ljusstyrkan reduceras kraftigt av det mörka temat och därmed mindre energi förbrukas, hjälper detta dig inte bara när du är mobil. Du kan också ge ett litet bidrag till hållbarhet: Det mörka läget i Google Maps gör det enkelt att hitta stigar även i mörker.
En inställning som även kan användas för individuellt integrerade Google Maps. I det normala mörka läget design såväl som i en mängd olika varianter beroende på din företagsdesign.När är svarta teman och mörkt läge särskilt lämpliga?
Valet för ett mörkt tema kan vara tematiskt såväl som estetik och aspekter av UX design. Så här är några punkter där en variant av mörkt läge eller ett mörkt tema är särskilt lämpliga.
Lämplig färgpalett
Helst är din färgpalett såklart speciellt skapad för ditt mörka tema. I de flesta fall är det dock inte fallet till en början. Om du redan har en färgplatta för din företagsdesign är det bäst att kontrollera om din färgpalett också passar för mörka teman. Eller om du är villig att skapa en mörk temaversion av dina färger.
Färgpaletten för dessa mönster förtjänar särskild uppmärksamhet. Ofta rekommenderas omättade färger snarare än primärfärger.
I Googles Material Design finns färgerna med ett värde mellan 50 och 400. Anledningen till detta är bland annat läsbarheten av texter, länkar och knappar enligt riktlinjerna för tillgängligt webbinnehåll WCAG.
Minimalistisk design
Tydlig, minimalistisk design är särskilt lämplig för ett mörkt tema eller webbplatser med mörk bakgrund. Varför är det så? Ett mörkt förhållningssätt kan ge ytterligare ”drama” och iscensättas på ett sätt som är mycket iögonfallande.
Om det är lite text kan den placeras i scenen och ha en starkare effekt än med ett ljust tema.
Användningssammanhang
Är din webbapp eller webbplats främst avsedd för underhållning? Används den främst efter jobbet på natten? Då är ett mörkt läge värt besväret för den användarvänliga hänsynen till dag-natt-rytmen.
Meddelande
Om du vill förmedla känslor snarare än information är svarta teman ett utmärkt val.
När ska man inte använda mörka bakgrunder?
I grund och botten, den största utmaningen med mörkt läge är kontrasten och färger. Även om alla färger fungerar på olika sätt mot vit eller ljus bakgrund, är detta spektrum starkt begränsat för svarta teman.
Något förenklat följer att tillvägagångssättet inte är lämpligt för alla situationer. Med hänsyn till läsbarhet, användbarhet och UX är designers till stor del överens om att i följande scenarier är ett mörkt läge inte särskilt effektivt eller att en fantastisk upplevelse bara kan uppnås med en stor ansträngning.
Så du bör hålla dig borta om du:
- Har mycket olika innehåll (bilder, videor, tabeller, navigering, etc. ). Av min erfarenhet är det särskilt svårt när bilderna inte går att justera. Till exempel ska autentiska fotografier från vardagen användas. Element från den platta designen (SVG, CSS-knappar etc.) kan hanteras bättre här
- Om mycket långa texter måste användas, till exempel, om du designar en blogg som är designad för sökmotoroptimering.
- Om du är bunden till en färgpalett med många färger i din design eller om de måste användas i sin ursprungliga färgton.
8 tips för att använda svart som designelement.
1. Färgval och mättnad
Du bör undvika alltför mättade färger. Ju mer mättad färgen är, desto svagare kommer den att se ut. Detta gäller i synnerhet teckensnittsfärger, länkar och knappar. Så om du normalt har en huvudfärg med mycket hög färgkvalitet är det värt att anpassa färgen till en ljusare färgvariant av din ursprungliga färgton.
2. Bildval och videor
Vi rekommenderar bilder och filmer med stora, tysta områden. Detaljerade bilder med mycket lyster och många färgförändringar förlorar sin effekt.
3. Undvik rent svart?
Google rekommenderar, liksom många designers, att undvika rent svart och föredrar det istället mörkgrå toner bör användas.
Skälet som ges här är lättare fokusering på grund av en mjukare kontrast och differentiering mellan olika element. Med lätta mönster kan till exempel element visas mer i förgrunden med hjälp av skuggning. Detta är inte möjligt med mörka mönster. Olika nyanser av grått hjälper till att visa element längre fram eller bakom.
Här måste jag säga att det beror på och jag motsätter mig lite mot den här avhandlingens allmängiltighet. Det finns fantastiska mönster som använder svart som bakgrund. Apple tar också ett annat tillvägagångssätt här och använder rent svart som basbakgrundsfärg för mörkt temadesign.
Enligt min mening beror det mycket på designen och du bör experimentera med din bakgrunder för att få ut det bästa av dem rösta. Jag har sammanställt ytterligare exempel på en enastående användning av svart som designelement nedan för dig.
4. Lägg märke till den känslomässiga effekten av färgerna
När det kommer till effekten av färger, du bör notera att färgerna kan se väldigt annorlunda ut mot en svart bakgrund än mot en vit. Med andra ord ger de olika effekt beroende på sammanhanget.
Frestelsen är stor att lämna ikonerna och varumärkesfärgerna i mörkt läge exakt samma som i ljust läge och bara ändra teckensnittsfärgen från svart till vit. Som ett resultat kan detta fungera, men ibland kan det också vara en stor besvikelse. Så ta dig tid att tänka på den känslomässiga effekten av båda lägena och matcha färgerna därefter.
5. Låt användaren välja
Teknologiskt har möjligheterna funnits länge med JavaScript. Så om det mörka temat inte är djupt kopplat till varumärkesbudskapet är det alltid bättre att låta användaren välja.
Med detta användarval förbättrar du användarupplevelsen och interaktionen genom att låta besökarna ta kontroll.
6. Rensa visuella hierarkier
Tydliga visuella hierarkier gör det lättare för dina besökare att fokusera. Som beskrivits ovan används ofta ramar eller skuggor för detta på ljusa bakgrunder. De senare utelämnas i mörkt läge.
Mörka teman erbjuder överlägg som lyser upp ytorna. Du bestämmer betoningen via ytans ljusstyrka. I fallet med en vit överlagring resulterar detta i de grå nyanser som beskrivits av Google för att avgränsa elementen.
Överlägg erbjuder en andra fördel här: Om du har en företagsfärg kan du använda denna istället för den vita överlägget. Din företagsfärg kommer alltid att lysa igenom och stödja ditt varumärke. Något som inte fungerar med vita, ljusa teman.
För alla överlägg är det viktigt att bevara kontrastens konst. Teckensnittet måste alltid vara läsbart mot din bakgrund.
7. Tillgänglighetsstandarder
När du använder mörka bakgrunder är tillgänglighet och tillhörande tillräcklig kontrast mycket viktigt . Speciellt om du inte använder ett valfritt mörkt läge, utan ett vanligt mörkt tema.
Slutsats mörkt läge (dark mode) och svarta bakgrunder
Svarta och mörka bakgrundsfärger erbjuder enastående möjligheter som ett designelement för stark design av hög kvalitet. När den används på rätt sätt och med de tips, tricks och fallgropar som visas i den här artikeln, kan svart göra stor skillnad i din nästa design. Speciellt om du inte blir avskräckt, matcha dina färgpaletter och media till det mörka temat och följ mästarnas exempel
