Den accepterede formel for et websitedesign er en hvid baggrund, sort eller mørkegrå tekst og rigeligt med brandfarver spredt ud over det hele. Langt de fleste top-performende websites bruger denne formel med stor effekt. Men er det den eneste formel, der kan være succesfuld? I denne artikel vil vi dykke ned i at skabe et design med en mørk baggrund - og hvorfor det nogle gange er bedre at bruge dette koncept, fordi websites med mørke baggrunde nogle gange kan... udkonkurrerer hvid.
Start et WordPress-tema, SquareSpace, Webflow, Weebly eller et af de mange andre webdesignværktøjer, og det vil automatisk indlæse en side med hvid baggrund og sort tekst. Du kan selvfølgelig ændre det, men denne kombination er den opfattede norm.
Det behøver ikke være det.
Når det gøres rigtigt, kan en mørk baggrund til et websted fungere bedre, end du måske tror.
Den første bekymring ved ethvert webdesign er, hvad brugeren ønsker? Hvilke farver passer til mediet, brandet, den tilsigtede anvendelse, målgruppen, og hvad ville fungere på de enheder, der bruges til at tilgå webstedet?
De fleste klienter antager, at det vil være en hvid baggrund med sorte eller mørke sans serif-skrifttyper. Den antagelse er måske ikke så sort-hvid (ordspil tilsigtet).
Hvorfor hvid?
Der er to primære grunde til, at kombinationen af sort på hvidt betragtes som normen.
Men dette er faktisk rodfæstet i historien: Trykt sprog og læsbarhed.
Dengang vi lavede alt på papir, betød papirets råhvide farve, at det var nemmere at bruge sort blæk i stedet for at farve papiret. Man behøvede mindre farvestof, og det var et meget renere og nemmere arbejde. De første trykte pjecer var sort blæk på lyst papir, og det forblev trykte medier.
Den anden grund er læsbarhed. For mange brugere, især dem på mobil, er hvid på mørkt ikke altid læseligt. Personer med synshandicap som bygningsfejl har svært ved at skelne hvid tekst på en mørk baggrund. Alt, der får pupillen til at udvide sig, ligesom en mørk skærm gør, betyder, at handicap forstærkes, hvilket gør en side meget vanskelig at læse.
Godt design kan dog overvinde disse mangler og kan gøre en forskel, formidle følelser og påvirke den besøgende på måder, som en hvid baggrund simpelthen ikke kan.
Hvad du behøver at vide om mørke baggrunde
Jeg siger meget mørk her og ikke sort.
Sort er det oplagte valg til en mørk baggrund til en hjemmeside, men det er ikke den eneste mulighed. Der findes tusindvis af varianter af mørke baggrunde, og sort er kun én af dem. Mørkerød, mørkegrøn, mørkeblå og andre kan alle fungere med det rigtige design i den rigtige situation.
Der er mange aspekter ved farvebrug i design, og jeg vil ikke uddybe dem alle her. Jeg vil kun koncentrere mig om de aspekter, der vedrører mørke baggrunde.
Visuel opfattelse af mørke
En ofte citeret afstemning foretaget af ProBlogger tilbage i 2009 viste os, at webbrugere ikke er så tilhængere af hvid baggrund, som vi måske først skulle tro.
Selvom det nu er ti år gammelt, viste undersøgelsen, at kun 47 % af respondenterne foretrak altid lyse baggrunde. Yderligere 36 % sagde, at det afhænger af bloggen, 10 % sagde, at de foretrak altid mørke, og 7 % kunne ikke beslutte sig. Flertallet foretrækker måske en hvid baggrund, men 43 % sagde, at de foretrækker mørk, eller at det burde afhænge af det overordnede websitedesign.
En yderligere afstemning fire år senere på CSS-Tricks fandt ud af, at størstedelen af respondenterne faktisk foretrak lys tekst på en mørk baggrund. For at være helt klar, var dette en afstemning om brugen af kodeværktøjer, og den spurgte, hvilken konfiguration brugerne foretrak deres kodeeditorer, mørk på hvid eller hvid på mørk. Af dem, der svarede, foretrak 63% af dem en mørk baggrund.
Kontrast-aspektet
Den blændende titel 'Virkningen af websidetekst-baggrundsfarvekombinationer på læsbarhed, fastholdelse, æstetik og adfærdsintention'er en interessant undersøgelse.
Den så på, hvordan kontrasten mellem baggrunds- og tekstfarver i et webdesign var den afgørende faktor for dets brugervenlighed og ikke de anvendte farver. Vi taler ikke om æstetik her, udelukkende brugervenlighed.
Undersøgelsen viste, at polarisering påvirkede læsbarheden mere end baggrundens faktiske farve. Så hvid på sort er lige så effektiv som sort på hvid, så længe der var tilstrækkelig kontrast mellem de to farver, og læsbarhed, læsbarhed og brugervenlighed opretholdes.
Kontrast er utrolig vigtig i webdesign.
Nogle moderne hjemmesider forsøger at bruge design med lav kontrast med blandede resultater. Apple har prøvet det med nogle sider på deres egen hjemmeside.
Sider med lav kontrast er sværere at læse, fungerer ikke for synshandicappede og kræver mere indsats fra læseren for at forstå dem. Intet af dette er godt for sidedesign.
Dette går imod kontrastaspektet, og det er læseren, der lider. Efter min mening betyder det ikke så meget, om man bruger mørk på lys eller lys på mørk, så længe kontrastforholdet er så bredt som muligt for at forbedre læsbarheden.
Læsbarhedsaspektet
Mørke baggrunde kan være det perfekte designvalg i nogle situationer.
Teksttunge hjemmesider er ikke en af disse situationer. Mens kontrast har en større indflydelse på, hvor læsbar en side er, har farvevalget også en indflydelse. Ifølge Jacob Nielsen kræver negativ tekst, dvs. hvid tekst på mørk baggrund, en smule mere anstrengelse at læse og læses langsommere end positiv tekst, som er sort på hvid baggrund.
Bortset fra det, så længe kontrasten mellem tekst og baggrund er tilstrækkelig, påvirkes læsbarheden ikke.
Jeg vil gerne tilføje lidt til det. Ved at sige, at hvid tekst på mørk baggrund ikke påvirker læsbarheden, så længe du designer det rigtigt.
For mig betyder det:
- Intelligent udnyttelse af tomrum mellem blokke for at forhindre lyslækage.
- Der følges korrekte læsbarhedsregler med hensyn til korte sætninger, korte afsnit, korte ord og letfordøjelig tekst.
- Omhyggeligt skrifttypevalg for at maksimere læsbarheden på forskellige skærmstørrelser.
- Opretholdelse af maksimal kontrast, når man arbejder med mørke baggrunde.
- Undgå gradienter og skygger med en mørk baggrund.
Valg af skrifttype er vigtigt i ethvert webdesign, men endnu vigtigere, når det gælder mørke baggrunde.
Vi vælger normalt serif-skrifttyper, fordi de tilføjer et strejf af klasse eller elegance til et design, og bruger sans serif for at skabe et moderne præg. Når man har at gøre med lys tekst på en mørk baggrund, indsnævres valget til kun sans serif.
Serif-skrifttyper kan fungere, men kræver mere arbejde fra læseren for at forstå dem. Dette forværres, når man bruger mindre skærme eller mobilenheder.
Det følelsesmæssige perceptionsaspekt
Vi ved alle, at forskellige farver kan fremkalde forskellige følelser. Vi har vidst dette i årevis, og nyere undersøgelser har underbygget dette med beviser. Vi ved, at forskellige farvekombinationer påvirker hjernen på forskellige måder, og Nogle marketingfolk mener, at brugen af farver alene kan øge konverteringen.
Farvepsykologi fortæller os, at når vi ser farver, signalerer vores hjerne frigivelsen af hormoner, som kan få os til at føle følelser. Forskellige farver forårsager frigivelse af forskellige hormoner hvilket kan påvirke, hvordan vi har det med noget i en bestemt farve. Dette kombineres med vores opfattelse af, hvad en farve betyder, hvilket kan bruges imod os i markedsføring og salg.
Vi har indgroede ideer om, hvad en farve betyder.
For eksempel: sort forbindes ofte som en kraftfuld farve, erotisk, mystisk, formel og elegant. Hvid føles ren, frisk, moderne, ung, tilgængelig og velkendt. Rød er modig, kraftfuld, selvsikker og sensuel.
Hver farve fremkalder forskellige følelser hos læseren, og derfor bruger vi som webdesignere så uforholdsmæssigt meget tid på at finde den perfekte kombination og derefter endnu længere tid på at overbevise klienten om, at de farver, vi har valgt, vil fungere.
Fordele ved mørke baggrunde
Mørke baggrunde er ikke egnede til alle designs eller projekter.
Når de er passende, kan en mørk baggrund tilføje karakter, effekt, fremhævelse og en følelsesmæssig reaktion til et webdesign. Jeg har allerede dækket alt det, så lad os se på nogle andre fordele ved at bruge mørke baggrunde i design.
1. Mindre øjenbelastning
Tilsyneladende er det lettere at læse i længere tid, når der bruges en mørk baggrund. Selvom vi læser langsommere, kan vi læse uden at anstrenge øjnene i længere tid, så længe kontrastforholdet er bredt nok, og designet ellers er solidt.
Angående øjne, mørke baggrunde vil også påvirke søvnen mindreSkærmen vil indeholde mindre blåt/hvidt lys end en traditionel webside. Dette blå lys menes nu at påvirke vores døgnrytme og påvirke vores søvn, forårsage sygdom og have en negativ indflydelse på vores dagligdag.
2. Stilfuldt
Der er en grund til, at alle kvinder har en lille sort kjole, eller at limousiner er sorte. Det tilføjer en følelse af stil og elegance, som er svær at finde andre steder. Så længe det overordnede design er af høj kvalitet, giver brugen af mørke baggrunde den følelse med det samme, hvilket kan påvirke en købsbeslutning, skabe en følelsesmæssig forbindelse eller få læseren til at tage det, de ser, mere alvorligt.
3. Fortrolighed
Hjemmesider med mørke baggrunde var tidligere meget sjældne. Dem, vi så, fulgte ofte slet ikke brugervenlighedsreglerne og klarede sig ikke godt. Med flere programbrugergrænseflader, der bruger mørke baggrunde, spil, der i stigende grad bruger mørke baggrunde i menuer, navigation og mellemsekvenser, og nattilstand på alle slags enheder, er mørke ikke længere så nichepræget.
Vi ser det overalt. Fra mange Adobe-produkter, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop og Dreamweaver og mange andre førende programmer.
Nu hvor vi er mere vant til at se lys tekst på mørke baggrunde, overrasker det ikke eller påvirker vores forventninger negativt på samme måde, som det engang gjorde.
4. Skiller sig ud
Selvom hjemmesider med mørke baggrunde bliver mere acceptable, er de stadig i mindretal. Dette giver et element af effekt, så snart nogen lander på siden. Selv før et ord er læst eller et billede scannet, gør din side allerede indtryk og får læseren til at se designet med friske øjne.
Så længe designet bygger videre på det første indtryk med god læsbarhed, god udnyttelse af pladsen og nogle effektfulde billeder, har du fundet en vinder.
5. Falder ind i baggrunden
Mørke brugergrænseflader og baggrunde giver det første indtryk, men kan derefter forsvinde stille og roligt ind i baggrunden for at lade indholdet skinne. Dette gælder især i brugergrænsefladedesign, men er også relevant i webdesign. Omhyggeligt placerede billeder og indhold med det rette kontrastniveau vil derefter skille sig meget mere ud, mens selve baggrunden forsvinder.
Dette kan hjælpe med at læse sideindhold i lyse omgivelser, f.eks. udendørs eller i stærkt lys. I mørkere omgivelser kan en hvid eller lys baggrund anstrenge øjnene og være vanskelig at læse. I lysere omgivelser kan en mørk baggrund være det modsatte. Selvom vi ikke kan designe til specifikke omgivelser, er det ikke desto mindre en fordel ved en mørkere baggrund, at den læses godt i sollys.
Ulemper ved at bruge mørke baggrunde
Det er ikke universelt positivt at bruge en mørk baggrund i design. Der er nogle ulemper ved denne stil, og de bør ikke undervurderes.
1. Nøje overvejelse
Mørke baggrunde fungerer ikke for alle kunder eller i alle situationer. Dette designtema kræver meget mere omtanke og planlægning end den traditionelle lyse baggrund. Det vil også kræve mere brugertestning for at sikre, at balancen er den rette før lanceringen. Ikke alle brandtemaer fungerer med mørke baggrunde. Heller ikke alle produkter eller motiver fungerer med det.
Nogle klienter opfatter stadig mørke baggrunde negativt, ligesom vi gjorde før. Selv hvis du er overbevist om, at en mørk baggrund er vejen frem, kan det være sværere at overbevise din klient, end hvis du gik den traditionelle vej.
2. Omhyggelig planlægning
Alle designvalg kræver omhyggelig planlægning, farve, skrifttype og billedvalg. Brug af mørke baggrunde tilføjer endnu mere omtanke til dette. Hvidt/mørkt område bliver endnu vigtigere for at forhindre lys i at bløde ind i mørket og for at sikre, at tekst er læsbar. Billeder og designelementer har brug for reel adskillelse for at holde dem læselige og for at forhindre lækage af lys eller farve til andre områder.
Udviklingsprocessen kan tage længere tid med en mørk baggrund på grund af dette. Der kan være behov for mere brugertestning, og der skal muligvis tages højde for flere forbedringer af mobiloplevelsen.
3. Omhyggelig balance
Brug af mørke elementer i et design tilføjer vægt til en side. For meget vægt kan gøre siden klodset og tung. Dette gælder endnu mere, når man har med mørke baggrunde at gøre. Hver side skal afbalanceres meget omhyggeligt for at forhindre, at den føles tung, og for at fremhæve dens iboende elegance i stedet for klodsethed.
Det er en svær opgave, og den vil kræve en masse raffinement og en masse hvid/sort plads på siden for at holde den afbalanceret.
4. Tilgængelighed
Et aspekt af mørke designs, der ikke får meget opmærksomhed, er tilgængelighed. Ethvert webdesign bør have tilgængelighed i tankerne i de allertidligste stadier af planlægningen. Heldigvis, så længe du følger de generelle regler for høj kontrast mellem tekst og baggrund, vil de fleste brugere være i stand til at læse og forstå din side.
Retningslinjer for tilgængelighed af webindhold (WCAG) kræver en farvekontrast på 4.5.1:3:1 mellem tekst og baggrund for normal tekst og XNUMX:XNUMX for stor tekst. Det foreslås hvid tekst til sorte baggrunde, men der er en vis spillerum for andre farver, så længe kontrastforholdet forbliver så bredt som muligt.
Jeg nævnte astigmatisme tidligere, da dette er en funktionsnedsættelse, der påvirkes negativt af at bruge mørke baggrunde. Astigmatisme er en ufuldkommenhed i hornhinden, der forårsager sløret eller forvrænget syn. På en mørk baggrund skal pupillen udvide sig for at læse, hvilket forstærker sløringen.
Selvom dette blot er én funktionsnedsættelse i en verden af mange, Omkring 33% af amerikanerne har en eller anden form for bygningsfejlHvis du udvider det til et globalt publikum, kan næsten en tredjedel af dit potentielle publikum have bygningsfejl i en eller anden grad. Det er noget, som ethvert design skal tage højde for.
Hvornår du skal bruge en mørk baggrund
Der er en række situationer, hvor mørke baggrunde egner sig godt til webdesign. Disse omfatter:
- Når du vil skabe det første visuelle indtryk.
- Når mørket passer til kundens brandidentitet.
- Når man fremviser luksus- eller højstatusprodukter eller -tjenester.
- Når designet er moderne eller minimalistisk.
- Når du har brug for at skabe drama eller mystik i et design.
Når du ikke bør bruge en mørk baggrund
Ligeledes er der tidspunkter, hvor en mørk baggrund ikke er den bedste løsning og bør undgås for enhver pris. Selv hvis klienten insisterer på at bruge en.
- Når siden er meget indholdsrig.
- Når brandets stemme ikke understøtter det.
- Når det er kendt, at målgruppen ikke reagerer godt på det.
- Når der sker meget med siden, og hvid/sort plads er en mangelvare.
- Når hensigten er B2B eller officiel, såsom regering.
10 eksempler på mørke baggrundstemaer
For at vise dig, hvad jeg mener med, at mørke baggrunde ser fantastiske ud, når de er lavet rigtigt, har jeg samlet ti fremragende temaer, der bruger dem. Hvert tema er en smule anderledes med hensyn til design, men har alle én ting til fælles: De bruger mørke baggrunde for at opnå maksimal effekt.
1. Divi med Web Freelancers Layout Pack
Divi WordPress-temaet må være et af de mest fleksible på markedet. Selvom mange af skabelonerne har en lys baggrund, kan du vende den om på få sekunder. Tilføj Web Freelancers Layout Pack til Divi, og du kan få en fremragende hjemmeside med en mørk baggrund til enhver brug.
Alt du skal gøre er at installere de to temaer, aktivere temaet, åbne en side og skifte baggrunde til mørke. Brug derefter indstillingen 'Udvid baggrundsfarve' på sidesektioner for at få alt til at passe sammen.
Få Divi med 10% rabat indtil Juli 2025
2. Astra med fotografens startside
Brug af Astra-frameworket med Photographer-demoinstallationen giver et fremragende websted med en sort baggrund. God udnyttelse af plads, kontrasterende skrifttyper og minimalistisk design får dette tema til at skille sig ud.
Tjek hjemmesiden for begyndere inden for fotografering
3. Genesis med Parallax Pro
Parallax Pro er et tema til Genesis framework der bruger et alternerende monokromt design med stor effekt. Det er endnu et simpelt design, der lader sidens indhold skinne og giver et glimrende eksempel på, hvordan mørke baggrunde kan fungere så godt.
4. Objektiv fra PixelGrade
Lens fra PixelGrade bruger et gitterdesign til at give os en portefølje eller billedfremvisning med et mørkt tema. Den mørke baggrund er kun rigtig synlig i sidemenuen, og temaet bruger kontrasterende farver på en meget interessant måde og tilføjer andre farver end sort og hvid for virkelig at skille sig ud.
NB: Vi har en 20% rabat direkte fra PixelGrade, eksklusivt til CollectiveRay besøgende. Klik blot på linket nedenfor, din rabat vil automatisk blive fratrukket, når du betaler. Dette tilbud er KUN gyldigt indtil udgangen af Juli 2025.
5. Divi med elektriker mørk pakke
Endnu et Divi-tema, denne gang Elektrikerens landingsside i mørkt. Dette er et tema af meget høj kvalitet med mørk baggrund, skarp typografi, god brug af billeder og nogle komplementerende farver for at tilføje interesse. Dette er en personlig favorit, og jeg synes, det fungerer utroligt godt.
6. Aldo fra ThemeRex
Aldo fra ThemeRex er et tema, der får elegant til at se nemt ud. Det er et ubesværet tema, der fungerer til mange emner og balancerer meget sideindhold med en mørk baggrund uden at overbelaste siden. Det er et meget gennemført design, der fungerer godt på enhver skærmstørrelse.
7. Neve Pro med mørke parallaxbilleder
Neve Pro med Dark Parallax Images bruger Neve-temaet med al dets kraft, hastighed og funktioner. Kombineret med en mørk baggrund og et komplementerende tema er dette WordPress-tema et af de bedste derude. Siderne er velafbalancerede, det indlæses hurtigt, indholdet guider læseren problemfrit ned ad siden, og du mangler intet.
8. Fortælling med Gamer Layout
Telling with Gamer Layout er et glimrende eksempel på, hvordan man bruger andre dristige farver til at berige en mørk baggrund. Lad dig ikke narre af gamer-tilnavnet, du kan bruge dette tema til hvad som helst, og det vil stadig se fantastisk ud. En stærk menu, fremragende layout, enestående skarphed og kontrast samt god udnyttelse af pladsen er blot nogle få af de positive ting.
9. Næste ud
Nextout er et meget stilfuldt WordPress-tema, der bruger en lysere mørk baggrund med kontrasterende og komplementerende farver. Med en attraktiv topslider scroller du ned i et flisebelagt layout, der ville egne sig perfekt til billedorienterede hjemmesider. Med elegant navigation og velgennemtænkte layouts er det helt sikkert et af de bedre webtemaer her.
10. Hestia Pro med mørke parallaxbilleder
Hestia Pro med mørke parallaxbilleder er et andet meget elegant tema, der balancerer mørke baggrunde med lyse elementer, kontrasterende farver og fremragende typografi. Siderne er fyldige, men ikke overfyldte, og balancen er helt perfekt, uanset hvilken type skærm du bruger. Det kan fungere på enhver enhed, til ethvert emne, og det er bestemt et tema, der skal prøves.
Hvis du vil vide mere om Hestia - tjek denne artikel ud på Collectiveray.
Konklusion: Brug af mørke baggrunde i webdesign
En af de bedste ting ved det moderne internet er friheden til at udtrykke sig selv og bryde reglerne. Selvom nogle af disse regler absolut ikke bør brydes, kan andre. Såsom det traditionelle sort-hvide design, der har eksisteret siden det 17.th århundrede.
Jeg synes, at mørke baggrunde kan se fantastiske ud, når man ser på dem med omhu. De skaber det indledende indtryk og forsvinder derefter ind i baggrunden. De fungerer godt under de fleste lysforhold, og en velafbalanceret side med smart udnyttelse af plads kan få baggrunden til at fremhæve sidens produkt eller intention bedre end hvide baggrunde.
Mørke designs passer ikke til alle projekter eller intentioner og kræver meget mere planlægning, forfining og testning end hvide baggrunde. Men hvis det er gjort godt, tror jeg, at al den ekstra tid og indsats kan være det hele værd!