Mørk webdesign er veldig populær og kan ha en elegant og kreativ appell.

De er også perfekte for mange typer klientarbeid, men de er ikke egnet for hver nettside og bør bare brukes når det er hensiktsmessig.

Til tross for den slående visuelle virkningen som disse mørke designene kan ha, vet mange designere ikke hvordan man effektivt kan ta dem av uten å slå av besøkende.

Med en mørk design kommer mindre lesbarhet , mindre appell for de fleste lesere og mindre mulighet for konvensjonelle designelementer.

I dette innlegget diskuterer vi et par tips for å gjøre ditt neste mørke nettsteddesign appellere til et bredere publikum , mens du lar designeren uttrykke kreativiteten din.

EN nylig avstemning antyder at lysdesigner foretrekkes av det generelle web-publikum med en hel 47%. Hovedårsaken er lesbarhet . De fleste liker ikke å se lystekst mot en mørk bakgrunn på nettsteder fordi det stammer øynene deres, noe som gir en mye mindre fornøyelig opplevelse.

I motsetning til dette, sa 10% av de undersøkte at de alltid foretrukket mørke bakgrunner for nettsteder, mens en annen 36% sa at det beste valget ville avhenge av type nettside.

Så, hva er det riktige svaret? Når det kommer til det, har alle en egen mening, og det er det.

Men med en så stor andel brukere som sier at mørke webdesign er tålelig og noen ganger til og med foretrukket, må vi som webdesignere lære å lage effektive mørke design for oss selv og våre kunder.

Dette betyr overbevisende alle de sanne troende av lyse bakgrunner at mørk design kan være mer lesbar og brukervennlig.

Bruk mer hvitt plass

Eller skal det kalles "svart plass"? Effektiv bruk av hvit plass er viktig for enhver type design, men det er viktig for nettsteder med mørk bakgrunn.

Mørk design har en tendens til å føle seg "tung" , og rytme dem opp kan forsterke den følelsen. Ta en titt på noen populære mørke webdesigner nedenfor, og noter deres liberale bruk av hvitt rom til stor effekt.

Black Estate er sett over hele Internett i mørke webdesign showcases. Det er faktisk en vakker design og verdig all oppmerksomhet. En stor del av den hvite plassen brukes i hele designet, og det som gjør denne spesielle designen unik, er hvordan den hvite plassen brukes til å skissere visse elementer så effektivt.

Logoen har mye hvit plass rundt den og er det første vi ser som besøkende. Vi ser hovedinnholdet og flasken på neste side. Som du ser, brukes hvitt plass perfekt for å markere teksten på flasken og overskriften til hovedinnholdet.

BlackEstate

Utvalgte innholdet i Tictoc og tilhørende bilde i dette designet er innrammet med den mest hvite plassen. Når vi beveger oss ned, ser vi mindre hvitt plass, noe som gjør at vi tar hensyn til innholdet som blir vist.

Poenget her er at hvit plass gradvis fører brukeren ned til slutten av siden .

Den mørke bakgrunnen legger til dybde i designet. Fordi nettsiden stoler så sterkt på hvitt mellomrom, ville det være mindre interessant uten den kreative effekten av den mørke bakgrunnen.

TicToc

De Mark Dearman Nettstedet har liberalt og jevnt fordelt hvitt rom gjennom hele oppsettet.

Den hvite plassen som rammer hvert porteføljestykke gir rikelig med pusterom for innholdet, og det er et hyggelig hvilested før du går videre til neste stykke.

Rikelig med hvitt plass er viktig for mørke design fordi det ikke bare hjelper deg med å avklare oppsettet, men også legge fram viktige elementer og legge til eleganse til det generelle utseendet.

MarkDearman

Tekstlig hvit plass

Fordi lesbarhet er nummer én bekymring for de som ikke liker mørke bakgrunner, må designere være ekstra oppmerksom på selve teksten.

På samme måte som i den generelle utformingen, er en måte å forbedre lesbarheten på mørke nettsteder på å øke den hvite plassen ved å justere stykkstørrelse, kerning og ledende .

Eksempelet nedenfor viser hvilken forskjell mellomrummet mellom og rundt tegnene gjør ved å sammenligne mørke og lyse oppsett.

Tekst hvitt rom

En annen måte å forbedre lesbarheten på i mørke webdesign er å øke skriftstørrelsen . Som de fleste andre regler i dette innlegget betyr større skriftstørrelser mer hvitt plass. Jo større bokstavene er, jo mer hvitt mellomrom vil dukke opp rundt og i hvert brev.

For eksempel får bokstaven "a" under mer hvit plass som det blir større, både i området rundt det og i rommet inne i a-kabinettet og under overhenget.

Legg merke til hvordan lesing av liten tekst er så mye lettere på en lys bakgrunn enn på en mørk. Når du setter inn typografien for et nytt nettsted, må du se på noen dummy-tekst for å sikre at den er lesbar . Hvis ikke, se om du øker tekststørrelsen, hjelper.

Tekststørrelse Matters

Tekstkontrast

Mange mennesker vil være enige om at de dårligst utviklede mørke nettstedene forårsaker øyebelastning. For mye eller for liten kontrast er vanligvis synderen. Hvordan finner man den perfekte balansen?

Hvis du er i et rom som er tone svart, er det ikke hyggelig å se direkte inn i lyset. Men å se på et mindre lyst lys i et mørkere rom er helt fint. Det samme prinsippet gjelder for webdesign.

Finne den perfekte kontrasten betyr å balansere bakgrunnens mørke med tekstens lysthet .

Nedenfor er en (veldig) grov guide som viser hvordan kontrast mellom tekst og bakgrunn fungerer. Man merker at som bakgrunnen blir lettere, så gjør også teksten.

Å finne en hyggelig kontrast for tekst er mye vanskeligere med en ren svart bakgrunn.

For å finne den perfekte balansen, eksperimentere med forskjellige nyanser. Det beste resultatet er vanligvis en bakgrunn som ikke er ren svart og tekst som ikke er ren hvit.

Tekstkontrast

Håndtere fontene

Fonter spiller en stor rolle i design og bør definitivt tas i betraktning med mørke layouter. Bildet under viser en 14-punkts skrifttype på en mørk bakgrunn i både serif og sans-serif-fonter.

Sans-serif-skrifttypen er åpenbart mer leselig . Men mange designere velger fortsatt seriffonter for sin eleganse.

Trikset er imidlertid å sette bare større tekst i seriffonter, slik at det ekstra hvite rommet oversvømmer rundt hvert tegn og gjør teksten veldig leselig.

Font Choice

Skjermbildet nedenfor er et nettsted som diskuteres tidligere i denne artikkelen. Den har både serif og sans-serif-fonter, men bruker dem på en smart måte.

Større tekst, for eksempel overskrifter, navigasjon og overskrifter, er i serif font for ekstra eleganse. For bedre kontrast og forbedret lesbarhet er tekstene i en ren sans-serif font.

Serif og Sans-serif

Bruk minimale fargeskjemaer

For å gi sine mørke design et rent og ryddig utseende, bør designere alltid velge minimal fargeskjema .

Fra de få eksemplene nedenfor kan vi se at travle fargeskjemaer virkelig kommer i veien for mørke bakgrunner, fordi kontrasten er for skarp.

Hold deg til en eller to farger . For å legge til flere farger, prøv en mørk farget bakgrunn.

Farge

Gitt, mange mørke webdesign har mer spennende fargeskjemaer. Så denne regelen er ofte ødelagt, men bare med de riktige teknikkene.

Generelt er det imidlertid ofte farge som gjør et nettsted ser for opptatt . Fordi mørkere nettsteder allerede har dybde, bruk farge med forsiktighet.

Tilbyr en stilbryter

Mens vi har mange gode metoder til rådighet for å gjøre mørke webdesign mer tiltalende, vil ingen innsats tilfredsstille hver bruker.

Pass på å inkludere en stilbryter , slik at brukerne i siste instans har muligheten til å vise mørk tekst på en lys bakgrunn.

To stilark er nødvendig for dette, en for standard mørk layout, og en for alternativ lysoppsett.

SitePoint har en utmerket opplæring på dette: Bygg en enkel stilbryter i CSS . I stedet for å bruke "oransje", "blå" og "hvit" versjoner i opplæringen, bruk bare "lys" og "mørke" stilark.

Når Dark Web Design fungerer best

Som nevnt, tror en stor andel av nettbrukere at et mørkt webdesign kunne fungere for bestemte typer nettsteder. Men studien er vag på hva disse typene er.

Generelt fungerer mørkt best for kreative eller elegante design . For moderne elegante nettsteder, gir mørk bakgrunn eleganse. For grungy eller håndtegnede stiler, forbedrer mørke bakgrunner kreativiteten til layoutet.

Elegant mørk design

Mørk kan være dyp, autoritativ og sterk, og ser ofte elegant ut når den brukes riktig. Her er noen eksempler og noen teknikker for å få ut elegansen i en mørk design.

Nettstedet for Larissa Meek har en enkel vintage-stil mønster i bakgrunnen, setter en elegant tone. Andre quirkier-funksjoner legger til et personlig preg på designet.

Denne teknikken kan brukes til mange typer nettsteder. Vintage eller klassiske mønstre og teksturer kan skape et blikk som er både elegant og alder-passende .

De fleste av oss forbinder vintage mønstre med høy klasse, så det er enkelt å lage en førsteklasses nettside.

Larissa Meek

Dybde Core har en veldig ren design, med en mørk bakgrunn som legger til stil og klasse. En følelse av autoritet er også tydelig i utformingen. Denne elegansen kan også gjøre en designers porteføljearbeid virke mer verdifullt som et resultat.

Legg merke til at dette designet ikke har noen tekstur eller bilder enn porteføljens stykker og logo. Ellers ville designen ha vært altfor opptatt; som det er innholdet strikket sammen godt.

En god prosess å følge er å legge til essensielt innhold først og deretter ta inn designelementer etter behov . Designeren kan deretter pause og reflektere etter hvert som hvert nytt element er lagt til, slik at utformingen ikke blir overdrevet.

Dybde Core

Akkurat som kunstverk kan virke mer verdifullt i en elegant design, så kan produktene. En mørk og slank design, som Tapbots og så mange andre, bidrar til å presentere produktet som blir solgt.

Konstruksjonen gjenspeiler selve enheten , med gradienter og lyseffekter; Noen design selv etterligner konsistensen av deres høyteknologiske produkter.

Tapbots

Creative Dark Design

Utover bare å være elegant, kan mørke nettsideutformninger også fremkalle mer følelsesmessige svar enn standard lysdesign, noe som gjør dem ideelle for kreative prosjekter. La oss se på noen eksempler på hvilke kreative design som er mulige.

De nettstedet nedenfor har svært lite innhold, men har en unik layout og mørke farger for dybde. Mørke bakgrunner er perfekte for nettsteder med svært lite innhold .

Og fordi de trenger mer hvitt rom, har designeren mer plass til å jobbe med.

Inca

Grunge webdesign kommer i mange former, og fordi grunge er "mørkt og skittent", er mørke bakgrunner en av disse formene.

Mørk grunge design som trozo Synes å bryte alle reglene: travle teksturer, overfylt layout og et bredt spekter av farger. Og likevel fungerer dette nettstedet fortsatt. Hvordan er det mulig?

Med så mange rotete elementer å jobbe med, kan grunge design være vanskelig for nybegynnere. Hva som gjør at dette fungerer, er organisasjonen .

Bakgrunnen har tydelig utelukkede blokker som veileder brukerens øye og hjelper å dele innholdet i håndterlige seksjoner.

For det andre har det massevis av hvitt rom . Bakgrunnen kan være strukturert, men det gjentatte mønsteret blir sett av brukeren som et hvitt rom, som bidrar til å lette designet.

Denne hvite plassen er tydeligst til venstre for logoen, under navigasjonen og langs høyre side.

Selv mellom "Utstilling 01" og "Utstilling 02" er mer hvit plass enn man vanligvis finner på et nettsted som dette.

Den hvite plassen gir ting ut, selv om den ikke ser ut som hvit plass fordi den har tekstur . Den minimale teksten og få seksjoner (bare tre) bidrar også til dette utseendet av enkelhet.

trozo

Utformingen av Drew Wilson bryter definitivt regelen om å bruke minimal farge. Det fungerer fortsatt, fordi den fargerike toppteksten er en av de få funksjonene i denne sparsomme designen, så ingenting overkrefter det.

Og den mørke bakgrunnen gjør at overskriften vises enda lysere og mer ekstraordinært.

Mørke bakgrunner brukes ofte til å lage lyseffekter og lyse farger skiller seg ut mer .

Slike design er et fantastisk kreativt unntak fra regelen om minimal farge. Men regelen bør brytes med forsiktighet: unngå å forstyrre gradienter, teksturer og farge ytterligere ned på siden.

Drew Wilson

Wrapping Up

Mørke bakgrunner gir en elegant og kreativ følelse til webdesign, noe som gjør dem perfekte for noen porteføljer, men de er ikke egnet for alle sider.

For større nettsteder, spesielt for personer med nedsatt syn og andre funksjonshemninger, er mørke design et nei-nei, selv med en stilbryter.

Forhåpentligvis når tiden kommer, må du designe et nettsted med en mørk bakgrunn, disse tipsene og strategiene vil hjelpe.

Skrevet utelukkende for WDD av Kayla Knight .

Det er mange flere teknikker og strategier for å forbedre mørke webdesign, så vær så snill å dele de du har tatt opp i kommentarfeltet nedenfor.