Hvorfor et websted + mørk baggrund er bedre end du tror

Den accepterede formel for et webstedsdesign er en hvid baggrund, sort eller mørkegrå tekst og mærkefarvning drysset liberalt overalt. Langt størstedelen af ​​de mest effektive websteder bruger denne formel med stor effekt. Men er det den eneste formel, der kan få succes? I denne artikel skal vi grave dybt i at skabe et design med en mørk baggrund - og hvorfor det undertiden er bedre at bruge dette koncept, for nogle gange kan websteder med mørk baggrund udkonkurrerer hvid.

Start et WordPress-tema, SquareSpace, Webflow, Weebly eller et af de mange andre webdesignværktøjer, og det indlæser automatisk en side med hvid baggrund med 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 er gjort rigtigt, kan en mørk baggrund for et websted fungere bedre, end du måske tror.

Den første bekymring for ethvert webdesign er, hvad brugeren ønsker? Hvilke farver passer til mediet, mærket, den tilsigtede anvendelse, målgruppen, og hvad fungerer på de enheder, der bruges til at få adgang til webstedet?

De fleste kunder antager, at der vil være en hvid baggrund med sorte eller mørke sans serif-skrifttyper. Denne antagelse er muligvis ikke så sort og hvid (ordspil beregnet).

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: Print og læsbarhed.

Dengang vi gjorde alt på papir, betød den råhvide farve, at det var lettere at bruge sort til blæk frem for at farve papiret. Du havde brug for less farvestof, og det var et meget renere og lettere job. De første trykte pjecer var sort blæk på lyst papir, og trykte medier blev ved med at være sådan.

Den anden grund er læsbarhed. For mange brugere, især dem på mobil, læser hvidt til mørkt ikke altid godt. Dem med synshandicap som astigmatisme har svært ved at skelne hvid tekst på en mørk baggrund. Alt, der får eleven til at udvide sig som en mørk skærm, betyder, at forringelsen forstærkes, hvilket gør en side meget vanskelig at læse.

Dog kan godt design overvinde disse mangler og kan påvirke, formidle følelser og påvirke den besøgende på måder, som en hvid baggrund simpelthen ikke kan.

Hvad du har brug for at vide om mørke baggrunde

Jeg siger mørkt meget her og ikke sort.

Sort er det oplagte valg for en mørk baggrund for et websted, men det er ikke din eneste mulighed. Der er tusindvis af varianter af mørk baggrund, og sort er kun en af ​​dem. Mørkerød, mørkegrøn, mørkeblå og andre kan alle arbejde med det rigtige design i den rigtige situation.

Der er mange aspekter til farvebrug i design, og jeg vil ikke arbejde på pointen med dem alle her. Jeg vil bare koncentrere mig om de aspekter, der vedrører mørk baggrund.

Visuel opfattelse af mørke

En meget citeret afstemning kørt af ProBlogger tilbage i 2009 viste os, at webbrugere ikke er så til fordel for hvide baggrunde, som vi oprindeligt kunne tro.

Skønt ti år gammel nu fandt afstemningen kun 47% af respondenterne foretrak altid lys baggrund. Yderligere 36% sagde, at det afhænger af bloggen, 10% sagde, at de foretrak altid mørke og 7% ikke kunne beslutte. Flertallet foretrækker måske en hvid baggrund, men 43% sagde, at de kunne lide mørke, eller at det skulle afhænge af det overordnede webstedsdesign.

En yderligere afstemning fire år senere på CSS-Tricks fandt ud af, at flertallet af respondenterne faktisk foretrak lys tekst på en mørk baggrund. For at være klar var dette en afstemning omkring brug af kodningsværktøjer og spurgte, hvilken konfiguration brugerne foretrak deres kodeditorer, mørke på hvide eller hvide på mørke. Af dem, der svarede, foretrak 63% af dem en mørk baggrund.

Kontrastaspektet

Den snappily-titled 'Virkningen af ​​websides tekst-baggrundsfarvekombinationer på læsbarhed, fastholdelse, æstetik og adfærdsmæssig hensigter en interessant undersøgelse.

Det så på, hvordan kontrasten mellem baggrunds- og tekstfarver i et webdesign var den afgørende faktor i dets anvendelighed og ikke de anvendte farver. Vi taler ikke om æstetik her, rent brugervenlighed.

Undersøgelsen viste, at polarisering påvirkede læsbarheden mere end den faktiske farve på baggrunden. Så hvid på sort er lige så effektiv som sort på hvid, så længe der var nok kontrast mellem de to farver, læsbarhed, læsbarhed og brugervenlighed opretholdes.

Kontrast er utrolig vigtig i webdesign.

Nogle moderne websteder forsøger at bruge design med lav kontrast med blandede resultater. Også selvom 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 give mening. Intet af det giver et godt sidedesign.

Dette strider mod kontrastaspektet, og det er læseren, der lider. Efter min mening betyder det ikke så meget, om du bruger mørkt på lys eller lys på mørkt, så længe kontrastforholdet er så bredt, som det kan gå for at hjælpe med at læse.

Læsbarhedsaspektet

Mørke baggrunde kan være det perfekte designvalg i nogle situationer.

Teksttunge websteder er ikke en af ​​disse situationer. Mens kontrast har større indflydelse på, hvor læselig en side er, har farvevalget også indflydelse. Ifølge Jacob Nielsen tager negativ tekst, den hvide tekst på mørk baggrund, sig lidt mere for at læse og læses langsommere end positiv tekst, der er sort på hvid baggrund.

Bortset fra det, så længe kontrasten mellem teksten og baggrunden er tilstrækkelig, påvirkes læsbarheden ikke.

Jeg vil tilføje lidt til det. Ved at sige hvid tekst på mørke baggrunde påvirker ikke læsbarheden, så længe du designer den rigtigt.

For mig betyder det:

• Intelligent brug af tomt rum mellem blokke for at forhindre lyslækage.
• Korrekte læsbarhedsregler følges med hensyn til korte sætninger, korte afsnit, korte ord og let fordøjelig kopi.
• Omhyggeligt skriftvalg for at maksimere læsbarheden på forskellige skærmstørrelser.
• Opretholdelse af maksimal kontrast, når du arbejder med mørke baggrunde.
• Undgå stigninger og skygge med en mørk baggrund.

Valg af skrifttype er vigtigt i ethvert webdesign, men endnu mere, når du beskæftiger dig med 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 til modernitet. Når det drejer sig om lys tekst på en mørk baggrund, indsnævres valget kun til sans serif.

Serif-skrifttyper kan fungere, men kræver mere arbejde fra læseren for at forstå. Det forværres, når du bruger mindre skærme eller mobil.

Det følelsesmæssige opfattelsesaspekt

Vi ved alle, at forskellige farver kan fremkalde forskellige følelser. Vi har kendt dette i årevis, og nyere undersøgelser har bakket op med beviser. Vi kender det anderledes farvekombinationer påvirker hjernen på forskellige måder og nogle marketingfolk mener, at farvebrug 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 får forskellige hormoner til at frigives som kan påvirke, hvordan vi føler om noget af en bestemt farve. Dette kombineres med vores opfattelse af, hvad en farve betyder, som kan bruges mod os til markedsføring og salg.

Vi har indgroede ideer om, hvad en farve betyder.

For eksempel, sort er ofte forbundet med en stærk farve, erotisk, mystisk, formel og elegant. Hvid føles ren, frisk, moderne, ung, tilgængelig og velkendt. Rød er fed, kraftfuld, selvsikker og sensuel.

Hver farve påkalder forskellige følelser hos læseren, hvorfor vi som webdesignere bruger så uforholdsmæssigt meget tid på at finde den perfekte kombination og derefter endnu længere forsøge at overbevise klienten om, at de farver, vi valgte, fungerer.

Fordele ved mørk baggrund

Mørke baggrunde passer ikke til ethvert design eller projekt.

Når de er egnede, kan en mørk baggrund tilføje karakter, indflydelse, vægt og noget følelsesmæssigt svar på 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. Less øjenstamme

Det er tilsyneladende lettere at læse længere, når der bruges en mørk baggrund. Selvom vi læser langsommere, så længe kontrastforholdet er bredt nok og designet ellers er sundt, kan vi læse uden øjenbelastning i længere perioder.

Med hensyn til øjnene mørk baggrund påvirker søvn less også. Skærmen vil indeholde less blå/hvidt lys end en traditionel webside. Dette blå lys menes nu bredt at påvirke vores døgnrytme og påvirke vores søvn, forårsage sygdom og påvirke vores daglige liv negativt.

2. Stilfuldt

Der er en grund til, at hver kvinde har en lille sort kjole, eller hvorfor limousiner er sorte. Det tilføjer en følelse af stil og elegance, der er svært at få andre steder. Så længe det overordnede design er af høj kvalitet, medfører mørk baggrund en følelse med det samme, som kan påvirke en købsbeslutning, skabe et følelsesmæssigt link eller få læseren til at tage det, de ser mere alvorligt.

3. Kendskab

Hjemmesider med mørk baggrund var tidligere meget sjældne. Dem, vi så ofte, fulgte overhovedet ikke anvendelighedsreglerne og presterede ikke godt. Med flere program-UI'er, der bruger mørk baggrund, spil, der i stigende grad bruger mørke baggrunde i menuer, navigation og cutscenes og nattilstand i alle slags enheder, er mørket ikke længere så niche.

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 er vi mere vant til at se lys tekst på mørke baggrunde, det overrasker ikke eller påvirker ikke vores forventninger negativt, som det engang gjorde.

4. Skiller sig ud

Mens websteder med mørk baggrund bliver mere acceptable, er de stadig i mindretal. Dette giver et element af påvirkning, straks nogen lander på siden. Selv før et ord læses eller billedet scannes, gør din side allerede indtryk og får læseren til at se med friske øjne på designet.

Så længe dette design bygger på det første første indtryk med god læsbarhed, god pladsudnyttelse og nogle virkningsfulde billeder, er du på en vinder.

5. Fader i baggrunden

Mørke brugergrænseflader og baggrunde giver den første indvirkning, men kan derefter falme stille ind i baggrunden for at lade indholdet skinne. Dette gælder mere i UI-design, men har også relevans i webdesign. Omhyggeligt placerede billeder og indhold med det rigtige kontrastniveau skiller sig så meget mere ud, mens selve baggrunden trækker sig tilbage fra synspunktet.

Dette kan hjælpe med at læse sideindhold i lyse miljøer, f.eks. Udendørs eller under stærkt lys. I mørkere miljøer kan en hvid eller lys baggrund belaste øjnene og være svær at læse. I lysere miljøer kan en mørk baggrund være det modsatte. Selvom vi ikke kan designe til bestemte miljøer, er det aldrig detless en fordel ved en mørkere baggrund, at den læser godt i sollys.

Ulemper ved at bruge mørke baggrunde

Brug af en mørk baggrund i design er ikke universelt positiv. Der er nogle ulemper ved denne stil, og de bør ikke undervurderes.

1. Omhyggelig overvejelse

Mørke baggrunde fungerer ikke for hver klient eller enhver situation. Dette designtema kræver meget mere eftertanke og planlægning end den traditionelle lyse baggrund gør. Det vil også kræve mere brugertest for at sikre, at saldoen er lige inden lanceringen. Ikke alle brand-ordninger fungerer med mørke baggrunde. Ikke alle produkter eller emner vil arbejde med det heller.

Nogle klienter opfatter stadig mørke baggrunde som vi plejede, negativt. Selvom du er overbevist om, at en mørk baggrund er vejen at gå, har du måske en sværere tid til at overbevise din klient, end du ville, hvis du skulle den traditionelle rute.

2. Omhyggelig planlægning

Alle designvalg kræver omhyggelig planlægning, farve, skrifttype og billedvalg. Brug af mørke baggrunde tilføjer endnu mere tanke til det. Hvidt / mørkt rum bliver endnu vigtigere for at stoppe lysblødning i mørket og for at sikre, at teksten er læsbar. Billeder og designelementer har brug for reel adskillelse for at holde dem læselige og for at stoppe med at sive lys eller farve ind i andre områder.

Udviklingsprocessen kan tage længere tid med en mørk baggrund på grund af dette. Mere brugertest kan være påkrævet, og flere forbedringer af mobiloplevelsen skal muligvis også indregnes.

3. Omhyggelig balance

Brug af mørke elementer i et design tilføjer en side vægt. For meget vægt, og siden kan føles besværlig og tung. Det er endnu mere sandt, når man beskæftiger sig med mørke baggrunde. Hver side skal afbalanceres meget omhyggeligt for at stoppe den med at føle sig tung og for at fremhæve dens iboende elegance snarere end ugudelighed.

Det er en hård spørg og vil kræve en masse raffinering 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 særlig opmærksomhed, er tilgængelighed. Hvert webdesign skal have tilgængelighed i tankerne i de allerførste stadier af planlægningen. Heldigvis, så længe du følger de generelle regler for høj kontrast mellem tekst og baggrund, vil størstedelen af ​​brugerne være i stand til at læse og forstå din side.

Retningslinjer for tilgængelighed af webindhold (WCAG) kræver en 4.5.1 farvekontrast mellem tekst og baggrund for normal tekst og 3: 1 for stor tekst. Det antyder hvid tekst til sort baggrund, men der er noget spillerum der for andre farver, så længe kontrastforholdet forbliver så bredt som muligt.

Jeg nævnte tidligere astigmatisme, da dette er en svækkelse, der påvirkes negativt af mørke baggrunde. Astigmatisme er en ufuldkommenhed i hornhinden, der forårsager sløret eller forvrænget syn. På en mørk baggrund skal eleven udvides for at læse, hvilket fremhæver sløret.

Selv om dette kun er en svækkelse i en verden af ​​mange, omkring 33% af amerikanerne har en eller anden form for astigmatisme. Hvis du udvider det til et globalt publikum, kan næsten en tredjedel af dit potentielle publikum have astigmatisme i en eller anden grad. Det er noget, hvert design skal tage i betragtning.

Når du skal bruge en mørk baggrund

Der er en række situationer, hvor mørke baggrunde egner sig godt til webdesign. De omfatter:

• Når du vil have den indledende visuelle effekt.
• Når det er mørkt, passer klientens brandidentitet.
• Ved fremvisning af luksus- eller højstatusprodukter eller -tjenester.
• Når designet er moderne eller minimalistisk.
• Når du har brug for at skabe drama eller mysterium i et design.

Når du ikke skal bruge en mørk baggrund

Der er ligeledes tidspunkter med en mørk baggrund, der ikke er den bedste mulighed og bør undgås for enhver pris. Selvom klienten insisterer på at bruge en.

• Når siden er tung.
• Når brandstemmen 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 hvidt / sort-pladsen er på en præmie.
• Når hensigten er B2B eller officiel, såsom statslige.

10 eksempler på temaer med mørk baggrund

For at vise dig, hvad jeg mener om mørke baggrunde, der ser fantastiske ud, når de gøres rigtigt, har jeg samlet ti fremragende temaer, der bruger dem. Hver er lidt anderledes med hensyn til design, men alle har en ting til fælles, de bruger mørk baggrund for at maksimere effekten.

1. Divi med Web Freelancers Layout Pack

Divi WordPress-temaet skal være et af de mest fleksible rundt. Mens mange af dens skabeloner er lys baggrund, kan du vende den om på få sekunder. Tilføj Web Freelancers Layout Pack til Divi, så kan du have et fantastisk websted 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 baggrund til mørk. Brug derefter indstillingen 'Udvid baggrundsfarve' på sidesektioner for at bringe alt på linje.

Få Divi med 10% rabat indtil september 2021

2. Astra med fotografens startside

Brug af Astra-rammen med Photograph-demo-webstedet installerer et fremragende websted med sort baggrund. God pladsudnyttelse, kontrasterende skrifttyper og minimalistisk design får dette tema til at skille sig ud.

Tjek Photography Starter Site

3. Genesis med Parallax Pro

Parallax Pro er et tema for Genesis framework der bruger et skiftevis monokromt design med stor effekt. Det er et andet simpelt design, der lader sideindholdet skinne og giver et glimrende eksempel på, hvordan mørke baggrunde kan fungere så godt.

Se Parallax Pro Live Demo

4. Linse fra PixelGrade

Linse fra PixelGrade bruger et gitterdesign til at give os en portefølje eller billedfremvisning ved hjælp af 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, eksklusiv til CollectiveRay besøgende. Bare klik på linket herunder, din rabat vil automatisk blive anvendt, når du tjekker ud. Dette tilbud er KUN gyldigt til slutningen af ​​september 2019.

Besøg linse nu

5. Divi med Electrician Dark Pack

Et andet Divi-tema, denne gang Electrician Landing Page i mørke. Dette er et tema af meget høj kvalitet med mørk baggrund, skarp typografi, god brug af billeder og nogle supplerende farver for at tilføje interesse. Denne er en personlig favorit, og jeg synes, den fungerer utrolig godt.

Få Divi til 10% FRA

6. Aldo fra ThemeRex

Aldo fra ThemeRex er et tema, der får elegant til at se let ud. Det er en indsatsless tema, der ville fungere for mange emner og balancerer masser af 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.

Besøg Aldo Live Preview

7. Neve Pro med Dark Parallax Images

Neve Pro med Dark Parallax Images bruger Neve-temaet med al sin kraft, hastighed og funktioner. Kombineret med en mørk baggrund og supplerende tema er dette WordPress-tema et af de bedste derude. Siderne er velafbalancerede, det indlæses hurtigt, indholdet styrer læseren glat ned ad siden, og du har lyst til ingenting.

Lær mere om Neve

8. Fortæller med spillerlayout

Fortællingen med spillerlayout er et glimrende eksempel på, hvordan man bruger andre dristige farver til at berige en mørk baggrund. Lad dig ikke narre af gamer moniker, du kan bruge dette tema til noget, og det ser stadig fantastisk ud. En stærk menu, fremragende layout, fremragende skarphed og kontrast og god pladsudnyttelse er blot nogle få af de positive.

Se Live Demo

9. Næste ud

Nextout er et meget stilfuldt WordPress-tema, der bruger en lysere mørk baggrund med kontrasterende og supplerende farver. Med en attraktiv topskyder, ruller du ned i et flisebelagt layout, der passer perfekt til billedorienterede websteder. Med glat navigation og velovervejede layout er det bestemt et af de bedre webtemaer her.

Se Nextout live

10. Hestia Pro med Dark Parallax Images

Hestia Pro med Dark Parallax Images er et andet meget glat tema, der afbalancerer mørke baggrunde med lyse elementer, kontrasterende farver og fremragende typografi. Siderne er rige, men ikke overfyldte, og balancen er helt rigtig, uanset hvilken type skærm du bruger. Det kunne fungere på en hvilken som helst enhed, for ethvert emne og er bestemt en at prøve.

Hvis du vil lære mere om Hestia - tjek denne artikel om Collectiveray.

Tjek Hestia

Konklusion: Brug af mørke baggrunde i webdesign

En af de bedste ting ved det moderne internet er friheden til at udtrykke sig og bryde reglerne. Mens nogle af disse regler absolut ikke bør brydes, kan nogle gøre det. Såsom det traditionelle sort-hvide design, der har været med os siden 17^th århundrede.

Jeg tror, ​​at mørke baggrunde kan se fantastiske ud, når de gøres med et forsigtigt øje. De får den første indvirkning og falmer derefter ind i baggrunden. De fungerer godt under de fleste lysforhold, og en velafbalanceret side med smart pladsudnyttelse kan gøre, at baggrunden fremhæver produktets eller hensigten med en side bedre end hvide baggrunde.

Mørke designs passer ikke til ethvert projekt eller enhver hensigt og kræver meget mere planlægning, forbedring og testning end hvide baggrunde. Dog gjort godt, jeg tror, ​​at al den ekstra tid og kræfter kan være det værd!

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/

David har arbejdet i eller omkring online / digital industri i de sidste 18 år. Han har stor erfaring inden for software- og webdesignindustrien ved hjælp af WordPress, Joomla og nicher, der omgiver dem. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencemæssig fordel ved hjælp af en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag.