Den accepterade formeln för en webbdesign är en vit bakgrund, svart eller mörkgrå text och varumärkesfärgning ströts rikligt överallt. De allra flesta toppresultatwebbplatser använder denna formel med stor effekt. Men är det den enda formeln som kan lyckas? I den här artikeln ska vi gräva djupt i att skapa en design med mörk bakgrund - och varför ibland är det bättre att använda detta koncept, för ibland kan webbplatser med mörk bakgrund överträffa vit.
Starta ett WordPress-tema, SquareSpace, Webflow, Weebly eller ett av de många andra webbdesignverktygen och det laddas automatiskt en sida med vit bakgrund med svart text. Du kan naturligtvis ändra det, men denna kombination är den upplevda normen.
Det behöver inte vara.
När du gör det rätt kan en mörk bakgrund för en webbplats fungera bättre än du kanske tror.
Det första problemet med webbdesign är vad användaren vill ha? Vilka färger passar mediet, varumärket, den avsedda användningen, målgruppen och vad skulle fungera på de enheter som används för att komma åt webbplatsen?
De flesta kunder antar att det kommer att vara en vit bakgrund med svarta eller mörka sans serif-teckensnitt. Det antagandet kanske inte är så svartvitt (ordspel).
Varför vit?
Det finns två primära skäl till varför kombinationen svart på vitt anses vara normen.
Men detta är faktiskt rotat i historien: Utskrift och läsbarhet.
När vi gjorde allt på papper innebar den vitvita pappersfärgen att det var lättare att använda svart för bläck än att färga papperet. Du behövde less färg och det var ett mycket renare och lättare jobb. De första tryckta broschyrerna var svart bläck på ljust papper och tryckmedia förblev så.
Den andra anledningen är läsbarhet. För många användare, särskilt de på mobilen, läser vitt till mörkt inte alltid bra. De med synstörningar som astigmatism har svårt att urskilja vit text på en mörk bakgrund. Allt som gör att eleven expanderar som en mörk skärm betyder att försämringen förstärks, vilket gör en sida mycket svårläst.
Men bra design kan övervinna dessa brister och kan påverka, förmedla känslor och påverka besökaren på sätt som en vit bakgrund helt enkelt inte kan.
Vad du behöver veta om mörka bakgrunder
Jag säger mörkt mycket här och inte svart.
Svart är det självklara valet för en mörk bakgrund för en webbplats men det är inte ditt enda alternativ. Det finns tusentals varianter av mörk bakgrund och svart är bara en av dem. Mörkröd, mörkgrön, mörkblå och andra kan alla arbeta med rätt design i rätt situation.
Det finns många aspekter för färganvändning i design och jag kommer inte anstränga poängen med dem alla här. Jag ska bara koncentrera mig på de aspekter som hör till mörk bakgrund.
Visuell uppfattning av mörker
En mycket citerad omröstning som kördes av ProBlogger redan 2009 visade oss att webbanvändare inte är lika för vita bakgrunder som vi kanske tror.
Även om det nu är tio år gammalt fann undersökningen att bara 47% av de svarande föredrog alltid ljusa bakgrunder. Ytterligare 36% sa att det beror på bloggen, 10% sa att de föredrog att alltid vara mörka och 7% kunde inte bestämma. Majoriteten föredrar kanske en vit bakgrund, men 43% sa att de gillade mörkt eller att det borde bero på den övergripande webbdesignen.
Ytterligare en undersökning fyra år senare på CSS-Tricks fann att majoriteten av respondenterna faktiskt föredrog ljus text på en mörk bakgrund. För att vara tydlig var detta en enkät om att använda kodningsverktyg och frågade vilken konfiguration användarna föredrog sina kodredigerare, mörk på vitt eller vitt på mörkt. Av dem som svarade föredrog 63% av dem en mörk bakgrund.
Kontrastaspekten
Den snappily-titled 'Effekten av webbsidans text-bakgrundsfärgkombinationer på läsbarhet, retention, estetik och beteendeintentionär en intressant studie.
Det tittade på hur kontrasten mellan bakgrunds- och textfärger i en webbdesign var den avgörande faktorn i dess användbarhet och inte de färger som användes. Vi pratar inte om estetik här, rent användbarhet.
Studien visade att polarisering påverkade läsbarheten mer än den faktiska färgen på bakgrunden. Så vitt på svart är lika effektivt som svart på vitt så länge det fanns tillräckligt med kontrast mellan de två färgerna, läsbarhet, läsbarhet och användarvänlighet bibehålls.
Kontrast är oerhört viktigt i webbdesign.
Vissa moderna webbplatser försöker använda lågkontrastdesign med blandade resultat. Även Apple har provat det med några sidor på sin egen webbplats.
Sidor med låg kontrast är svårare att läsa, fungerar inte för synskadade och kräver mer ansträngning från läsaren för att förstå det. Inget av det ger bra siddesign.
Detta strider mot kontrastaspekten och det är läsaren som lider. Enligt min mening spelar det ingen roll om du använder mörk på ljus eller ljus i mörker så länge kontrastförhållandet är så brett som det kan gå för att underlätta läsbarheten.
Läsbarhetsaspekten
Mörka bakgrunder kan vara det perfekta designvalet i vissa situationer.
Texttunga webbplatser är inte en av dessa situationer. Även om kontrasten har större inflytande över hur läsbar en sida är, har färgvalet också inflytande. Enligt Jacob Nielsen tar negativ text, den för vit text på mörk bakgrund, lite mer ansträngning att läsa och läses långsammare än positiv text som är svart på vit bakgrund.
Bortsett från det påverkas inte läsbarheten så länge kontrasten mellan texten och bakgrunden är tillräcklig.
Jag skulle lägga lite till det. Genom att säga vit text på mörk bakgrund påverkar inte läsbarheten så länge du utformar den rätt.
För mig betyder det:
- Intelligent användning av tomt utrymme mellan block för att förhindra ljusläckage.
- Korrekt läsbarhetsregler följs när det gäller korta meningar, korta stycken, korta ord och lätt smältbar kopia.
- Noggrant val av teckensnitt för att maximera läsbarheten på olika skärmstorlekar.
- Bibehålla maximal kontrast när du arbetar med mörka bakgrunder.
- Undvik lutningar och skuggning med en mörk bakgrund.
Val av teckensnitt är viktigt i alla webbdesign men ännu mer när man handlar om mörka bakgrunder.
Vi väljer vanligtvis serif-teckensnitt eftersom de lägger till en touch av klass eller elegans i en design och använder sans serif för modernitet. När du behandlar ljus text på en mörk bakgrund, begränsas valet till sans serif.
Serif-teckensnitt kan fungera men kräver mer arbete från läsaren för att förstå. Det förvärras när man använder mindre skärmar eller mobiler.
Den emotionella uppfattningsaspekten
Vi vet alla att olika färger kan väcka olika känslor. Vi har känt till detta i flera år och senare studier har stött det med bevis. Det vet vi annorlunda färgkombinationer påverkar hjärnan på olika sätt och vissa marknadsförare tror att färganvändning ensam kan öka omvandlingen.
Färgpsykologi berättar att när vi ser färger signalerar hjärnan frisättningen av hormoner som kan få oss att känna känslor. Olika färger gör att olika hormoner frigörs vilket kan påverka hur vi känner för något av en viss färg. Detta kombinerar med vår uppfattning om vad en färg betyder som kan användas mot oss för marknadsföring och försäljning.
Vi har ingrodda idéer om vad en färg betyder.
Till exempel, svart associeras ofta som en kraftfull färg, erotisk, mystisk, formell och elegant. White känns ren, fräsch, modern, ung, tillgänglig och bekant. Red är djärv, kraftfull, självsäker och sensuell.
Varje färg påkallar olika känslor hos läsaren, vilket är anledningen till att vi som webbdesigners tillbringar så oerhört mycket tid på att försöka hitta den perfekta kombinationen och sedan ännu längre försöka övertyga klienten att de färger vi valde kommer att fungera.
Fördelar med mörka bakgrunder
Mörka bakgrunder är inte lämpliga för varje design eller projekt.
När de är lämpliga kan en mörk bakgrund lägga till karaktär, inverkan, betoning och lite känslomässig respons på en webbdesign. Jag har täckt allt detta redan så låt oss titta på några andra fördelar med att använda mörka bakgrunder i design.
1. Less ansträngda ögon
Tydligen är det lättare att läsa längre när en mörk bakgrund används. Även om vi läser långsammare, så länge kontrastförhållandet är tillräckligt stort och designen annars är sund, kan vi läsa utan ögonbelastning under längre perioder.
När det gäller ögonen, mörk bakgrund påverkar sömnen less alltför. Skärmen kommer att innehålla less blått/vitt ljus än en traditionell webbsida. Detta blåa ljus antas nu allmänt påverka vår dygnsrytm och påverka vår sömn, orsaka sjukdom och negativt påverka vårt dagliga liv.
2. Snygg
Det finns en anledning till att varje kvinna har en liten svart klänning eller varför limousiner är svarta. Det lägger till en känsla av stil och elegans som är svår att få någon annanstans. Så länge den övergripande designen är av hög kvalitet, medför mörk känsla den känslan direkt som kan påverka ett köpbeslut, skapa en känslomässig länk eller få läsaren att ta det de ser mer på allvar.
3. Bekanthet
Webbplatser med mörk bakgrund brukade vara mycket sällsynta. De som vi såg följde ofta inte användarreglerna alls och presterade inte bra. Med fler programgränssnitt som använder mörk bakgrund, spel som i allt högre grad använder mörka bakgrunder i menyer, navigering och klippbilder och nattläge i alla typer av enheter, är mörkret inte längre så nischat.
Vi ser det överallt. Från många Adobe-produkter, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop och Dreamweaver och många andra ledande program.
Nu är vi mer vana vid att se ljus text på mörka bakgrunder, det förvånar inte eller påverkar inte våra förväntningar negativt på det sätt som det en gång gjorde.
4. Står ut
Medan webbplatser med mörk bakgrund blir mer acceptabla är de fortfarande i minoritet. Detta ger ett inslag av påverkan omedelbart någon hamnar på sidan. Redan innan ett ord läses eller en bild skannas gör din sida redan intryck och får läsaren att se med fräscha ögon på designen.
Så länge den designen bygger på det första första intrycket med god läsbarhet, god användning av utrymme och lite effektfull bild, är du på en vinnare.
5. Bleknar i bakgrunden
Mörka användargränssnitt och bakgrunder ger den första inverkan men kan sedan blekna tyst in i bakgrunden för att låta innehållet lysa. Detta gäller mer i UI-design men har också relevans i webbdesign. Noggrant placerade bilder och innehåll med rätt kontrastnivå sticker ut mycket mer medan själva bakgrunden dras tillbaka.
Detta kan hjälpa till att läsa sidinnehåll i ljusa miljöer som utomhus eller under starkt ljus. I mörkare miljöer kan en vit eller ljus bakgrund anstränga ögonen och vara svårläst. I ljusare miljöer kan en mörk bakgrund vara motsatsen. Även om vi inte kan designa för specifika miljöer, är det aldrig detless en fördel med en mörkare bakgrund att den läser bra i solljus.
Nackdelarna med att använda mörka bakgrunder
Att använda en mörk bakgrund i design är inte allmänt positivt. Det finns några nackdelar med den här stilen och de bör inte underskattas.
1. Noggrant övervägande
Mörka bakgrunder fungerar inte för varje klient eller varje situation. Detta designtema kräver mycket mer tanke och planering än den traditionella ljusbakgrunden gör. Det kommer också att kräva mer användartestning för att säkerställa att balansen är rätt före lanseringen. Inte alla varumärkesscheman fungerar med mörk bakgrund. Inte alla produkter eller ämnen fungerar med det heller.
Vissa kunder upplever fortfarande mörka bakgrunder som vi brukade negativt. Även om du är övertygad om att en mörk bakgrund är vägen, kan du ha svårare att övertyga din klient än om du skulle gå den traditionella vägen.
2. Noggrann planering
Alla designalternativ kräver noggrann planering, färg, teckensnitt och bildval. Att använda mörka bakgrunder lägger till ännu mer tanke på det. Vitt / mörkt utrymme blir ännu viktigare för att stoppa ljusblödning i mörkret och för att säkerställa att texten är läsbar. Bilder och designelement behöver verklig separation för att hålla dem läsbara och för att sluta läcka ljus eller färg till andra områden.
Utvecklingsprocessen kan ta längre tid med en mörk bakgrund på grund av detta. Mer användartestning kan krävas och fler förbättringar av mobilupplevelsen kan också behöva tas med i beräkningen.
3. Noggrann balans
Att använda mörka element i en design lägger vikt på en sida. För mycket vikt och sidan kan kännas besvärlig och tung. Det är ännu mer sant när man har att göra med mörka bakgrunder. Varje sida måste balanseras mycket noggrant för att förhindra att det känns tungt och för att få fram dess inneboende elegans snarare än illvillighet.
Det är en tuff fråga och kommer att kräva mycket förfining och mycket vitt / svart utrymme på sidan för att hålla den balanserad.
4. Tillgänglighet
En aspekt av mörka mönster som inte får mycket uppmärksamhet är tillgänglighet. Varje webbdesign bör ha tillgänglighet i åtanke i de allra tidigaste stadierna av planeringen. Lyckligtvis, så länge du följer de allmänna reglerna för hög kontrast mellan text och bakgrund, kommer de flesta användare att kunna läsa och förstå din sida.
Smakämnen Riktlinjer för tillgänglighet för webbinnehåll (WCAG) kräver en 4.5.1 färgkontrast mellan text och bakgrund för normal text och 3: 1 för stor text. Det föreslår vit text för svarta bakgrunder men det finns något utrymme där för andra färger så länge kontrastförhållandet förblir så brett som möjligt.
Jag nämnde astigmatism tidigare eftersom detta är en försämring som påverkas negativt av att använda mörka bakgrunder. Astigmatism är en ofullkomlighet i hornhinnan som orsakar suddig eller förvrängd syn. På en mörk bakgrund måste eleven utvidgas för att läsa, vilket förstärker suddigheten.
Även om detta bara är en försämring i en värld av många, cirka 33% av amerikanerna har någon form av astigmatism. Om du utvidgar det till en global publik kan nästan en tredjedel av din potentiella publik ha astigmatism i en eller annan grad. Det är något varje design behöver ta hänsyn till.
När du ska använda en mörk bakgrund
Det finns en rad situationer när mörka bakgrunder lämpar sig väl för webbdesign. De inkluderar:
- När du vill göra den första visuella effekten.
- När mörker passar kundens varumärkesidentitet.
- När du visar upp lyx eller högstatusprodukter eller tjänster.
- När designen är modern eller minimalistisk.
- När du behöver skapa drama eller mysterium i en design.
När du inte ska använda en mörk bakgrund
På samma sätt finns det tider med mörk bakgrund som inte är det bästa alternativet och bör undvikas till varje pris. Även om klienten insisterar på att använda en.
- När sidan är tung.
- När märkesröst inte stöder det.
- När det är känt att målgruppen inte svarar bra på det.
- När det händer mycket med sidan och vitt / svart utrymme är till en premie.
- När avsikten är B2B eller officiell, till exempel statlig.
10 Exempel på teman med mörk bakgrund
För att visa dig vad jag menar om mörka bakgrunder som ser fantastiska ut när de görs rätt, har jag samlat tio utmärkta teman som använder dem. Var och en är lite annorlunda när det gäller design men alla har en sak gemensamt, de använder mörka bakgrunder för maximal effekt.
1. Divi med webb-frilansare layoutpaket
Divi WordPress-temat måste vara ett av de mest flexibla runt. Medan många av dess mallar är ljusa kan du vända den på några sekunder. Lägg till Web Freelancers Layout Pack till Divi så kan du ha en fantastisk webbplats med en mörk bakgrund för all användning.
Allt du behöver göra är att installera de två teman, aktivera temat, öppna en sida och byta bakgrund till mörk. Använd sedan alternativet "Förläng bakgrundsfärg" på sidavsnitten för att få allt i linje.
Få Divi till 10 % rabatt fram till november 2023
2. Astra med Photograph Starter Site
Med hjälp av Astra-ramverket med Photographs demo-webbplatsinstallation kan du få en utmärkt webbplats med svart bakgrund. Bra utrymme, kontrasterande teckensnitt och minimalistisk design gör att detta tema sticker ut.
3. Genesis med Parallax Pro
Parallax Pro är ett tema för Genesis framework som använder en alternerande svartvit design till stor effekt. Det är en annan enkel design som låter sidinnehållet lysa och ger ett utmärkt exempel på hur mörka bakgrunder kan fungera så bra.
4. Objektiv från PixelGrade
Lins från PixelGrade använder en rutnätdesign för att ge oss en portfölj eller bildvisning med ett mörkt tema. Den mörka bakgrunden syns bara riktigt i sidomenyn och temat använder kontrasterande färger på ett mycket intressant sätt och lägger till andra färger än svart och vitt för att verkligen sticka ut.
NB: Vi har en 20% Rabatt direkt från PixelGrade, exklusivt för CollectiveRay besökare. Klicka bara på länken nedan, din rabatt tillämpas automatiskt när du checkar ut. Detta erbjudande gäller ENDAST till slutet av november 2023.
5. Divi med Electrician Dark Pack
Ett annat Divi-tema, den här gången Electrician Landing Page i mörker. Detta är ett mycket högkvalitativt tema med mörk bakgrund, skarp typografi, bra användning av bilder och några kompletterande färger för att öka intresset. Den här är en personlig favorit och jag tycker att den fungerar otroligt bra.
6. Aldo från ThemeRex
Aldo från ThemeRex är ett tema som gör elegant utseende enkelt. Det är en insatsless tema som skulle fungera för många ämnen och balanserar massor av sidinnehåll med en mörk bakgrund utan att överbelasta sidan. Det är en mycket utförd design som fungerar bra på alla skärmstorlekar.
7. Neve Pro med Dark Parallax Images
Neve Pro med Dark Parallax Images använder Neve-temat med all sin kraft, hastighet och funktioner. Kombinerat med en mörk bakgrund och kompletterande teman är detta WordPress-tema en av de bästa som finns där ute. Sidorna är välbalanserade, det laddas snabbt, innehållet leder läsaren smidigt ner på sidan och du lämnar allt för ingenting.
8. Berättar med spellayout
Telling with Gamer Layout är ett utmärkt exempel på hur man använder andra djärva färger för att berika en mörk bakgrund. Låt dig inte luras av spelaren, du kan använda detta tema för vad som helst och det skulle fortfarande se fantastiskt ut. En stark meny, utmärkt layout, enastående skärpa och kontrast och bra utrymme är bara några av de positiva.
9. Nästa ut
Nextout är ett mycket snyggt WordPress-tema som använder en ljusare mörk bakgrund med kontrasterande och kompletterande färger. Med en attraktiv toppreglage rullar du ner till en kaklad layout som passar perfekt för bildorienterade webbplatser. Med smidig navigering och väl genomtänkta layouter är det definitivt ett av de bättre webb-teman här.
10. Hestia Pro med Dark Parallax Images
Hestia Pro med Dark Parallax Images är ett annat mycket snyggt tema som balanserar mörka bakgrunder med ljusa element, kontrasterande färger och utmärkt typografi. Sidorna är rika men inte överfulla och balansen är precis rätt oavsett vilken skärm du använder. Det kan fungera på vilken enhet som helst, för alla ämnen och är definitivt en att prova.
Om du vill lära dig mer om Hestia - kolla in den här artikeln på Collectiveray.
Slutsats: Använda mörka bakgrunder i webbdesign
En av de bästa sakerna med det moderna internet är friheten att uttrycka sig och bryta mot reglerna. Även om vissa av dessa regler absolut inte bör brytas, kan vissa göra det. Såsom den traditionella svart-på-vita designen som har varit med sedan 17th århundrade.
Jag tror att mörka bakgrunder kan se fantastiska ut när de görs med ett noggrant öga. De får den första inverkan och bleknar sedan ut i bakgrunden. De fungerar bra i de flesta ljusförhållanden och en välbalanserad sida med smart användning av utrymme kan göra att bakgrunden betonar produkten eller avsikten med en sida bättre än vita bakgrunder.
Mörka mönster passar inte varje projekt eller varje avsikt och kräver mycket mer planering, förfining och testning än vita bakgrunder. Men gjort bra, jag tror att all den extra tid och ansträngning kan vara väl värt det!
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!
Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.
och många fler ...