Den aksepterte formelen for et nettstedsdesign er en hvit bakgrunn, svart eller mørk grå tekst og merkefarging strødd liberalt overalt. De aller fleste toppresterende nettsteder bruker denne formelen med stor effekt. Men er det den eneste formelen som kan lykkes? I denne artikkelen skal vi grave dypt i å lage et design med mørk bakgrunn - og hvorfor noen ganger er det bedre å bruke dette konseptet, for noen ganger kan nettsteder med mørk bakgrunn utkonkurrere hvit.
Avfyr et WordPress-tema, SquareSpace, Webflow, Weebly eller et av de mange andre webdesignverktøyene, og det lastes automatisk en side med hvit bakgrunn med svart tekst. Du kan selvfølgelig endre det, men denne kombinasjonen er den oppfattede normen.
Det trenger ikke være.
Når det er gjort riktig, kan en mørk bakgrunn for et nettsted fungere bedre enn du kanskje tror.
Den første bekymringen for webdesign er hva brukeren vil ha? Hvilke farger passer til mediet, merkevaren, den tiltenkte bruken, målgruppen og hva vil fungere på enhetene som brukes til å få tilgang til nettstedet?
De fleste klienter antar at det vil være en hvit bakgrunn med svarte eller mørke sans serif-skrifter. Den antagelsen er kanskje ikke så svart og hvit (ordspill ment).
Hvorfor hvit?
Det er to primære grunner til at kombinasjonen av svart på hvitt blir sett på som normen.
Men dette er faktisk forankret i historien: Utskrift og lesbarhet.
Tilbake da vi gjorde alt på papir, betydde den hvite fargen på papir at det var lettere å bruke svart for blekk i stedet for å farge papiret. Du trengte less fargestoff, og det var en mye renere og lettere jobb. De første trykte brosjyrene var svart blekk på lyst papir, og utskriftsmaterialet forble slik.
Den andre grunnen er lesbarhet. For mange brukere, spesielt de på mobil, leser ikke hvitt i mørket alltid godt. De med synshemming som astigmatisme har vanskeligheter med å skjelne hvit tekst på mørk bakgrunn. Alt som får eleven til å utvide seg som en mørk skjerm, betyr at svekkelsen forsterkes, noe som gjør en side veldig vanskelig å lese.
Imidlertid kan flott design overvinne disse manglene og kan påvirke, formidle følelser og påvirke den besøkende på måter en hvit bakgrunn rett og slett ikke kan.
Hva du trenger å vite om mørk bakgrunn
Jeg sier mørkt mye her og ikke svart.
Svart er det åpenbare valget for en mørk bakgrunn for et nettsted, men det er ikke ditt eneste alternativ. Det er tusenvis av varianter av mørk bakgrunn, og svart er bare en av dem. Mørkerød, mørkegrønn, mørkblå og andre kan alle jobbe med riktig design i riktig situasjon.
Det er mange aspekter for fargebruk i design, og jeg vil ikke anstrenge poenget med dem alle her. Jeg skal bare konsentrere meg om de aspektene som gjelder mørk bakgrunn.
Visuell oppfatning av mørke
En mye sitert avstemning drevet av ProBlogger tilbake i 2009 viste oss at nettbrukere ikke er like til fordel for hvit bakgrunn som vi først kunne tro.
Selv om ti år gammel nå, fant avstemningen at bare 47% av respondentene foretrakk alltid lys bakgrunn. Ytterligere 36% sa at det avhenger av bloggen, 10% sa at de foretrakk alltid å være mørke og 7% ikke kunne bestemme seg. Flertallet foretrekker kanskje en hvit bakgrunn, men 43% sa at de likte mørkt, eller at det skulle avhenge av det generelle nettstedsdesignet.
En ytterligere avstemning fire år senere på CSS-Tricks fant ut at flertallet av respondentene faktisk foretrakk lys tekst på mørk bakgrunn. For å være tydelig var dette en avstemning rundt bruk av kodeverktøy og spurte hvilken konfigurasjon brukerne foretrakk kodeditorene sine, mørke på hvite eller hvite på mørke. Av de som svarte, foretrakk 63% av dem en mørk bakgrunn.
Kontrastaspektet
Den snappily-tittelen 'Virkningen av nettsidens tekst-bakgrunnsfargekombinasjoner på lesbarhet, oppbevaring, estetikk og atferdsintensjoner en interessant studie.
Det så på hvordan kontrasten mellom bakgrunn og tekstfarger i et webdesign var den avgjørende faktoren i dets brukervennlighet og ikke fargene som ble brukt. Vi snakker ikke om estetikk her, rent brukervennlighet.
Studien fant at polarisering påvirket lesbarheten mer enn den faktiske fargen på bakgrunnen. Så hvitt på sort er like effektivt som svart på hvitt så lenge det var nok kontrast mellom de to fargene, lesbarhet, lesbarhet og brukervennlighet opprettholdes.
Kontrast er utrolig viktig i webdesign.
Noen moderne nettsteder prøver å bruke design med lav kontrast med blandede resultater. Til og med Apple har prøvd det med noen sider på sitt eget nettsted.
Sidene med lav kontrast er vanskeligere å lese, fungerer ikke for synshemmede og krever mer innsats fra leseren for å få mening om det. Ingenting av dette gir god sidedesign.
Dette strider mot kontrastaspektet, og det er leseren som lider. For mitt sinn betyr det ikke så mye om du bruker mørkt på lys eller lys på mørkt så lenge kontrastforholdet er så bredt som det kan gå for å hjelpe lesbarheten.
Lesbarhetsaspektet
Mørk bakgrunn kan være det perfekte designvalget i noen situasjoner.
Teksttunge nettsteder er ikke en av disse situasjonene. Mens kontrast har større innflytelse over hvor lesbar en side er, har fargevalget også innflytelse. Ifølge Jacob Nielsen tar negativ tekst, den hvite teksten på mørk bakgrunn, litt større innsats for å lese og blir lest tregere enn positiv tekst som er svart på hvit bakgrunn.
Bortsett fra det, så lenge kontrasten mellom teksten og bakgrunnen er tilstrekkelig, påvirkes ikke lesbarheten.
Jeg vil legge litt til det. Ved å si hvit tekst på mørk bakgrunn påvirker ikke lesbarheten så lenge du designer den riktig.
For meg betyr det:
- Intelligent bruk av tomrom mellom blokker for å forhindre lyslekkasje.
- Riktig lesbarhetsregler følges når det gjelder korte setninger, korte avsnitt, korte ord og lett fordøyelig kopi.
- Nøye skriftvalg for å maksimere lesbarheten på forskjellige skjermstørrelser.
- Opprettholde maksimal kontrast når du arbeider med mørk bakgrunn.
- Unngå stigninger og skyggelegging med mørk bakgrunn.
Skriftvalg er viktig i ethvert webdesign, men enda mer når du arbeider med mørk bakgrunn.
Vi velger vanligvis serif-skrifttyper fordi de gir et snev av klasse eller eleganse til et design og bruker sans serif for modernitet. Når du arbeider med lys tekst på en mørk bakgrunn, blir valget kun sans serif.
Serif-skrifttyper kan fungere, men krever mer arbeid fra leseren for å forstå. Det forverres når du bruker mindre skjermer eller mobil.
Det emosjonelle oppfatningsaspektet
Vi vet alle at forskjellige farger kan vekke forskjellige følelser. Vi har visst dette i årevis, og nyere studier har støttet det med bevis. Vi vet det annerledes fargekombinasjoner påvirke hjernen på forskjellige måter og noen markedsførere tror at fargebruk alene kan øke konvertering.
Fargesykologi forteller oss at når vi ser farger, signaliserer hjernen vår frigjøring av hormoner som kan få oss til å føle følelser. Ulike farger fører til at forskjellige hormoner frigjøres som kan påvirke hvordan vi føler om noe av en bestemt farge. Dette kombineres med vår oppfatning av hva en farge betyr som kan brukes mot oss til markedsføring og salg.
Vi har inngrodd ideer om hva en farge betyr.
For eksempel, svart blir ofte assosiert med en kraftig farge, erotisk, mystisk, formell og elegant. Hvit føles ren, frisk, moderne, ung, tilgjengelig og kjent. Rød er dristig, kraftig, selvsikker og sensuell.
Hver farge påkaller forskjellige følelser hos leseren, og derfor bruker vi som webdesignere så uvanlig mye tid på å finne den perfekte kombinasjonen og deretter enda lenger på å overbevise kunden om at fargene vi valgte vil fungere.
Fordeler med mørk bakgrunn
Mørk bakgrunn er ikke egnet for alle design eller prosjekter.
Når de er passende, kan en mørk bakgrunn legge til karakter, innvirkning, vekt og litt følelsesmessig respons på et webdesign. Jeg har dekket alt det allerede, så la oss se på noen andre fordeler ved å bruke mørke bakgrunner i design.
1. Less øyenstamme
Det er tilsynelatende lettere å lese lenger når en mørk bakgrunn brukes. Selv om vi leser tregere, så lenge kontrastforholdet er bredt nok og designet ellers er lyd, kan vi lese uten belastning i lengre perioder.
Om øynene, mørk bakgrunn vil påvirke søvn less også. Skjermen vil inneholde less blått/hvitt lys enn en tradisjonell webside. Dette blå lyset antas nå å påvirke vår døgnrytme og påvirke søvnen vår, forårsake sykdom og påvirke dagliglivet negativt.
2. Stilig
Det er en grunn til at hver kvinne har en liten svart kjole eller hvorfor limousiner er svarte. Det gir en følelse av stil og eleganse som er vanskelig å få andre steder. Så lenge den generelle utformingen er av høy kvalitet, gir mørk bakgrunn den følelsen med en gang som kan påvirke en kjøpsbeslutning, skape en følelsesmessig kobling eller få leseren til å ta det de ser mer seriøst.
3. Kjennskap
Nettsteder med mørk bakgrunn pleide å være veldig sjeldne. De vi så, fulgte ofte ikke bruksreglene i det hele tatt og presterte ikke bra. Med flere program-brukergrensesnitt som bruker mørk bakgrunn, spill som i økende grad bruker mørk bakgrunn i menyer, navigering og kuttbilder og nattmodus på alle slags enheter, er mørket ikke lenger så nisje.
Vi ser det overalt. Fra mange Adobe-produkter, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop og Dreamweaver og mange andre ledende programmer.
Nå er vi mer vant til å se lys tekst på mørke bakgrunner, det overrasker ikke eller påvirker forventningene våre negativt slik det en gang gjorde.
4. Skiller seg ut
Mens nettsteder med mørk bakgrunn blir mer akseptable, er de fremdeles i mindretall. Dette gir et innvirkningselement umiddelbart når noen lander på siden. Selv før et ord blir lest eller skannet et bilde, gjør siden din allerede inntrykk og får leseren til å se med friske øyne på designet.
Så lenge designet bygger på det første førsteinntrykket med god lesbarhet, god plassutnyttelse og noen virkningsfulle bilder, er du med på en vinner.
5. Visner i bakgrunnen
Mørke brukergrensesnitt og bakgrunner gir den første innvirkningen, men kan deretter falme stille inn i bakgrunnen for å la innholdet skinne. Dette gjelder mer i UI-design, men har også relevans i webdesign. Nøye plasserte bilder og innhold med riktig kontrastnivå vil da skille seg ut mye mer mens selve bakgrunnen trekker seg tilbake.
Dette kan hjelpe til med å lese sideinnhold i lyse miljøer som utendørs eller under sterkt lys. I mørkere miljøer kan en hvit eller lys bakgrunn belaste øynene og være vanskelig å lese. I lysere miljøer kan en mørk bakgrunn være det motsatte. Selv om vi ikke kan designe for bestemte miljøer, er det aldri detless en fordel med en mørkere bakgrunn at den leser godt i sollys.
Ulemper ved å bruke mørk bakgrunn
Å bruke en mørk bakgrunn i design er ikke generelt positivt. Det er noen ulemper ved denne stilen, og de bør ikke undervurderes.
1. Nøye hensyn
Mørk bakgrunn fungerer ikke for hver klient eller enhver situasjon. Dette designtemaet krever mye mer tanke og planlegging enn den tradisjonelle lysbakgrunnen gjør. Det vil også kreve mer brukertesting for å sikre at balansen er rett før lansering. Ikke alle merkeoppsett fungerer med mørk bakgrunn. Ikke alle produkter eller fag vil fungere med det heller.
Noen klienter oppfatter fortsatt mørk bakgrunn slik vi pleide, negativt. Selv om du er overbevist om at en mørk bakgrunn er veien å gå, kan det hende du har vanskeligere for å overbevise klienten din enn om du skulle den tradisjonelle ruten.
2. Forsiktig planlegging
Alle designvalg krever nøye planlegging, farge, skrift og bildevalg. Å bruke mørk bakgrunn gir det enda mer tanke. Hvitt / mørkt rom blir enda viktigere for å stoppe lyset som blåser ut i mørket og for å sikre at teksten er lesbar. Bilder og designelementer trenger reell separasjon for å holde dem leselige og for å slutte å lekke lys eller farger inn i andre områder.
Utviklingsprosessen kan ta lengre tid med en mørk bakgrunn på grunn av dette. Mer brukertesting kan være nødvendig, og det må kanskje også tas hensyn til flere forbedringer av mobilopplevelsen.
3. Forsiktig balanse
Bruk av mørke elementer i et design legger vekt på en side. For mye vekt og siden kan føles tungvint og tung. Det er enda mer sant når du har å gjøre med mørke bakgrunner. Hver side må balanseres veldig nøye for å hindre at den føles tung og for å få frem sin iboende eleganse i stedet for ugudelighet.
Det er en tøff spørring og vil kreve mye raffinering og mye hvit / svart plass på siden for å holde den balansert.
4. tilgjengelighet
Et aspekt av mørke design som ikke får mye oppmerksomhet er tilgjengelighet. Ethvert webdesign bør ha tilgjengelighet i bakhodet i de tidligste planene. Heldigvis, så lenge du følger de generelle reglene for høy kontrast mellom tekst og bakgrunn, vil flertallet av brukerne være i stand til å lese og forstå siden din.
De Retningslinjer for tilgjengelighet for nettinnhold (WCAG) krever en 4.5.1 fargekontrast mellom tekst og bakgrunn for normal tekst og 3: 1 for stor tekst. Det antyder hvit tekst for svart bakgrunn, men det er noe spillerom der for andre farger så lenge kontrastforholdet forblir så bredt som mulig.
Jeg nevnte astigmatisme tidligere, da dette er en svekkelse som påvirkes negativt av å bruke mørk bakgrunn. Astigmatisme er en ufullkommenhet i hornhinnen som forårsaker uklart eller forvrengt syn. På en mørk bakgrunn må eleven utvide seg for å lese, noe som fremhever uskarpheten.
Selv om dette bare er en svekkelse i en verden av mange, rundt 33% av amerikanerne har en eller annen form for astigmatisme. Hvis du utvider det til et globalt publikum, kan nesten en tredjedel av ditt potensielle publikum ha astigmatisme i en eller annen grad. Det er noe hvert design må ta hensyn til.
Når du skal bruke en mørk bakgrunn
Det er en rekke situasjoner når mørk bakgrunn egner seg godt til webdesign. De inkluderer:
- Når du vil ha den innledende visuelle effekten.
- Når det er mørkt passer klientens merkeidentitet.
- Når du viser frem produkter eller tjenester for luksus eller høy status.
- Når designet er moderne eller minimalistisk.
- Når du trenger å lage drama eller mysterium i et design.
Når du ikke skal bruke en mørk bakgrunn
På samme måte er det tider med mørk bakgrunn som ikke vil være det beste alternativet og bør unngås for enhver pris. Selv om klienten insisterer på å bruke en.
- Når siden er tung.
- Når merkevarestemmen ikke støtter det.
- Når målgruppen er kjent for ikke å svare godt på den.
- Når det skjer mye med siden og hvitt / svart mellomrom er til en premie.
- Når hensikten er B2B eller offisiell, for eksempel statlig.
10 eksempler på temaer med mørk bakgrunn
For å vise deg hva jeg mener om mørk bakgrunn som ser fantastisk ut når jeg gjør det riktig, har jeg samlet ti gode temaer som bruker dem. Hver er litt annerledes når det gjelder design, men alle har en ting til felles, de bruker mørk bakgrunn for maksimal effekt.
1. Divi med layoutpakken for web-frilansere
Divi WordPress-temaet må være et av de mest fleksible rundt. Mens mange av malene har lys bakgrunn, kan du reversere den på få sekunder. Legg til Web Freelancers Layout Pack til Divi, og du kan ha et flott nettsted med mørk bakgrunn for enhver bruk.
Alt du trenger å gjøre er å installere de to temaene, aktivere temaet, åpne en side og bytte bakgrunn til mørkt. Bruk deretter alternativet 'Utvid bakgrunnsfarge' på sideseksjoner for å bringe alt på linje.
Få Divi med 10% avslag til Mars 2023
2. Astra med Photograph Starter Site
Ved å bruke Astra-rammeverket med Photograph-demosiden installerer det et utmerket nettsted med svart bakgrunn. God plassbruk, kontrasterende skrifttyper og minimalistisk design gjør at dette temaet skiller seg ut.
3. Genesis med Parallax Pro
Parallax Pro er et tema for Genesis framework som bruker en vekslende monokrom design til stor effekt. Det er en annen enkel design som lar sideinnholdet skinne og gir et utmerket eksempel på hvordan mørke bakgrunner kan fungere så bra.
4. Linse fra PixelGrade
Linse fra PixelGrade bruker et rutenettdesign for å gi oss en portefølje eller et bildevisning med et mørkt tema. Den mørke bakgrunnen er bare veldig synlig i sidemenyen og temaet bruker kontrasterende farger på en veldig interessant måte, og legger til andre farger enn svart og hvitt for å virkelig skille seg ut.
NB: Vi har en FÅ 20% RABATT PÅ DIN NESTE direkte fra PixelGrade, eksklusiv til CollectiveRay besøkende. Bare klikk på lenken nedenfor, rabatten din blir automatisk brukt når du sjekker ut. Dette tilbudet gjelder KUN ut Mars 2023.
5. Divi med Electrician Dark Pack
Et annet Divi-tema, denne gangen Electrician Landing Page i mørke. Dette er et tema av høy kvalitet med mørk bakgrunn, skarp typografi, god bruk av bilder og noen komplementære farger for å gi interesse. Denne er en personlig favoritt, og jeg synes den fungerer utrolig bra.
6. Aldo fra ThemeRex
Aldo fra ThemeRex er et tema som gjør elegant utseende enkelt. Det er en innsatsless tema som ville fungere for mange emner og balanserer mye sideinnhold med en mørk bakgrunn uten å overbelaste siden. Det er en veldig gjennomført design som fungerer godt på alle skjermstørrelser.
7. Neve Pro med Dark Parallax Images
Neve Pro med Dark Parallax Images bruker Neve-temaet med all sin kraft, hastighet og funksjoner. Kombinert med en mørk bakgrunn og utfyllende tema, er dette WordPress-temaet et av de beste der ute. Sidene er balansert godt, det lastes raskt, innholdet guider leseren jevnt nedover på siden, og du vil ikke ha noe.
8. Forteller med spillelayout
Telling with Gamer Layout er et utmerket eksempel på hvordan du bruker andre dristige farger for å berike en mørk bakgrunn. Ikke la deg lure av spilleren, du kan bruke dette temaet til hva som helst, og det vil fortsatt se fantastisk ut. En sterk meny, utmerket layout, suveren skarphet og kontrast og god plassbruk er bare noen få av de positive.
9. Neste ut
Nextout er et veldig stilig WordPress-tema som bruker en lysere mørk bakgrunn med kontrasterende og utfyllende farger. Med en attraktiv toppglidebryter, blar du ned i et flislagt oppsett som passer perfekt for bilderettede nettsteder. Med glatt navigering og veloverveide oppsett er det definitivt et av de bedre webtemaene her.
10. Hestia Pro med Dark Parallax Images
Hestia Pro med Dark Parallax Images er et annet veldig glatt tema som balanserer mørk bakgrunn med lyse elementer, kontrasterende farger og utmerket typografi. Sidene er rike, men ikke overfylte, og balansen er akkurat riktig, uansett hvilken type skjerm du bruker. Det kan fungere på en hvilken som helst enhet, for ethvert emne, og er definitivt en å prøve.
Hvis du vil lære mer om Hestia - sjekk denne artikkelen på Collectiveray.
Konklusjon: Bruk av mørke bakgrunner i webdesign
Noe av det beste med det moderne internett er friheten til å uttrykke deg og bryte reglene. Mens noen av disse reglene absolutt ikke bør brytes, kan noen gjøre det. Som den tradisjonelle sort-hvite designen som har fulgt med oss siden 17th århundre.
Jeg tror mørk bakgrunn kan se fantastisk ut når du er ferdig med et forsiktig øye. De får den første innvirkningen og forsvinner deretter i bakgrunnen. De fungerer bra under de fleste lysforhold, og en godt balansert side med smart plassbruk kan gjøre at bakgrunnen fremhever produktet eller intensjonen til en side bedre enn hvite bakgrunner.
Mørke design passer ikke til hvert prosjekt eller enhver intensjon, og krever mye mer planlegging, forbedring og testing enn hvit bakgrunn. Imidlertid gjort bra, jeg tror all den ekstra tid og krefter kan være vel verdt det!
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!
Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.
og mange flere ...