Fantastiske svarte nettsteder / Dark Website Design: Et dypere blikk med 35 eksempler

svarte nettsteder mørke

Mørkt nettsteddesign og svarte nettsteder har alltid vært et veldig kontroversielt diskusjonstema. Mange webdesignere tror på å skyve grenser, og tar gjerne imot konseptet med svart webdesign og lanserer svarte nettsteder. Andre er fremdeles ikke for å bruke det i designene sine. Dette er hovedsakelig basert på bekymringer over mørkt design og lesbarhet eller merkevarepassering.

Gjort riktig, kan webdesign med mørke farger formidle et veldig kreativt, elegant og profesjonelt utseende til brukerne. Når det er sagt, er det ganske utfordrende å lage et mørkt nettsteddesign webdesigner å være ekspert på brukervennlighet på nettet for å få det riktig.

Denne artikkelen fokuserer hovedsakelig på forskjellige scenarier når du kan bruke mørk eller svart webdesign. Vi vil også dekke noen ting du må huske på mens du arbeider på et nettsted med mørkt tema. 

innhold[Forestilling]

 

35 Fantastiske eksempler på svarte nettsteder

Her er noen fantastiske eksempler vi lovet.

Vi har samlet noen av det vi synes er de fineste eksemplene på svarte nettsteder akkurat nå. De viser alle de kvalitetene vi har diskutert så langt og viser merkevaren, produktet eller tjenesten på sitt beste.

1. Mitchell kanashkevich

Mørkt nettsteddesignfotografi

2. Dev art

dev art mørk webdesign

3. Jack Daniels

En fordel med svarte nettsteder er at det umiddelbart gir en førsteklasses følelse som kan fungere med visse produkter. Jack Daniels er et av disse produktene. Den mørke designen passer perfekt til merkevaren, og god balanse mellom skriftvalg og farge, tom plass på siden og veldesignede bilder gjør at dette fungerer. 

 Jack Daniels

4. Pasticceria Adami

Pasticceria Adami er et italiensk nettsted som markedsfører et bakeri i Verona. Det gjør utmerket bruk av en mørk bakgrunn med sparsom bruk av bilder, skrifttyper og sideelementer. Det er et enkelt, men veldig effektivt svart nettsteddesign. 

Pasticceria Adami

5. Divi med digital betalingsmal

Divi, det stadig populære produktet fra ElegantThemes er et godt alternativ av flere grunner. Det er et populært, modent, allsidig tema som du kan tilpasse til hvilken som helst nisje du ønsker, så som designer bør dette være et av alternativene du kan gå til.

Du kan bruke de innebygde layoutene til å lage et bredt spekter av design. For eksempel kan du se oppsettet som bruker lyse farger og mørkere bakgrunn for å få elementene til å poppe. Et utmerket utseende hvis du vil skille deg ut fra mengden!

Lyse farger mørkere divi-oppsett i bakgrunnen

Klikk her for å få 10% RABATT Divi med mørke oppsett til Oktober 2021

6. Astra - Responsivt e-handelstema

Følgende smykkeside, et startside av Astra for et smykkeside, er et godt eksempel på design av svarte nettsteder som kombinerer attraktive bilder med stort skriftvalg. Det er en enkel installasjon som inkluderer de fleste elementene en ny nettbutikk sannsynligvis trenger for å begynne å handle.

Selvfølgelig kan et slikt tema brukes for mange andre e-handelsbutikker som trenger å fokusere på deres luksuriøse produkt. 

astra smykker

Sjekk ut Astra Starter-nettsteder for Prestige Black-nettstedet 

7. Rhapsody - WordPress Multi-purpose tema

Rhapsody er et mote-orientert svart nettsteddesign som gir god bruk av sideplass med bilder og grafikk av høy kvalitet. Den integreres med WooCommerce, så i stedet for å se på andres e-handelsbutikk, kan du bygge din egen!  

rhapsody wordpress e-handelstema

 Ta en titt på Rhapsody-temaet

8.KingGym - Fitness, Gym og Sport Magento-tema

KingGym Responsive Magento Template er en flott løsning for nettbutikk for sportsklær, sportsutstyr og sko. Den imponerende designen gir besøkende en kraftig, dynamisk og sterk følelse ved første blikk.

Gitt at Magento vanligvis er et ganske komplekst system du kanskje vil les dette Collectiveray artikkel om hvordan du ansetter en Magento -utvikler eller frilanser.

kinggym treningsstudio og sport

Lær mer om KingGym Magento Theme 

9. Kallyas - Responsivt flerbruks WordPress-tema

Kallyas er et av de mest avanserte temaene du kan få i dag som bruker mørk design. Den kommer med sin egen sidebygger, inneholder de fleste verktøyene du trenger for å begynne å handle, og fungerer med flere plugins og tillegg. 

Kalyas responsive wordpress e-handelstema

10. HotDot

hotdot minimalt mørkt webdesign

11. OregonGridiron

oregongridiron minimalt mørkt webdesign

12. Velthy

Velthy

13. Parallax Pro fra Genesis StudioPress

StudioPress, en WordPress -temaleverandør bak det utrolig vellykkede Genesis framework har brukt Parallax Pro -temaet til å lage et utmerket svart nettsteddesign, som du kan se nedenfor.

parallax pro svart

Ta en titt på Parallax Pro

14. Neve med Photograph Starter Site

Neve from ThemeIsle er et annet WordPress -tema med sluttless muligheter, men fotografens startsteder tar det nedover den svarte minimalismen. Sjekk det ut i demoen nedenfor.

neve fotograf svart nettsted eksempel

Se Live Demo og få 10% AV til Oktober 2021 bare (CollectiveRay eksklusiv)

15. Minimaliser - Enkeltsidig WordPress-tema for flere formål

Minimaliser WordPress-temaet er et godt eksempel på å ta minimalisme, kombinert med svart design for å oppnå et fantastisk resultat. Sjekk ut demoen nedenfor for å se hvor flott dette ser ut.

minimer wordpress-temaet

16. Rhythm HTML-mal

Hvis du leter etter en HTML-mal som du kan bygge på, er denne Awwward-vinnermalen et godt valg.

 Rytme Bestlooker

17. Nerisson

nerisson mørk webdesign

18. Kaber Tech

kabertech-dark webdesign eksempel

19. Ta turen

Ta turen

20. Esteban Munoz

Esteban Muñoz

21. Ryan Mulford

ryanmulford-dark webdesign eksempel

22. Vitamin Talent Agency

vitamintalent-dark webdesign eksempel

23. Skjeggbok

bookofbeards-dark webdesign eksempel

24. Ull

vool-dark webdesign eksempel

25. Umar Sheikh

umarsheikh-dark webdesign eksempel

26. Blackberry

blackberry

27. Lamborghini

Lamborghini

28. Mer søvn

mer søvn

29. Creature Technology

skapningsteknologi

30. EXO - Kreativt og bedriftsspesifikt formålstema

Hvis det er en type selskap som kan trekke ut et mørkt nettsteddesign, er det et kreativt byrå. Ta en titt på EXO, et tema designet for kreative byråer og bedriftssider.

exo kreativt wordpress-tema

Se Exo i aksjon

31. Metal - mobilvennlig mal for bygg og anlegg

Men du trenger ikke å være verken kreativ eller et selskap. Selv vanlige virksomheter, inkludert selvstendig næringsdrivende tjenestebaserte virksomheter, eller andre vanlige virksomheter kan bruke et nettsted med et mørkere utseende.

Metall er et utmerket eksempel på denne bruken.

metall virksomhetsmal

Klikk her for å lære mer om metall 

32. StyleShop

Dette er et flott tema, basert på en mørk bakgrunn, slik at produktene du vil selge til pop. StyleShop er et kraftig e-handelstema som har alle nødvendige verktøy du trenger for å starte en vellykket nettbutikk.

Designet er både vakkert og responsivt, det inkluderer et unikt mobiloppsett som gjør det enkelt å surfe på nettstedet ditt uansett hvilken størrelse på enheten du bruker!

Styleshop

33. Uno - WordPress-tema for kreativ fotografering

Uno har et svart nettsted og et lett nettsted, og begge fungerer bra. Det er et godt designet tema med ren kode, støtte for Retina Display, flere side- og layoutalternativer og en rekke ekstra verktøy for å lage en suveren porteføljeside.

UNO - fotografering mørkt webdesign Wordpress-tema

Sjekk ut Uno Demo 

34. PhotoLux - Fotoportefølje WordPress-tema - Fotoportefølje WordPress-tema

Photolux er et kraftig og elegant WordPress-tema for portefølje og fotografi som passer best for fotografer og reklamer som bruker porteføljer for å vise frem sitt arbeid.

Besøk PhotoLux Demo

Photolux - fotografering mørkt webdesign wordpress tema

35. RSW - Responsivt fullskjermstudio for WordPress

RSW (Responsive Fullscreen Studio for WordPress) er et kraftig tema for fotografer og kreative kunstnere og kommer med lys og mørkt med temaalternativer som støtter flerfarget tilpasning av temaelementer ved hjelp av fargevelgere.

Se Demo of RSW

Responsivt fullskjermstudio for wordpress

 

Svarte nettsteder: En ekte følelse av nøkternhet og alvor

For de som ikke er kjent med svart nettsteddesign, er det et unikt designkonsept med å bruke lette bokstaver og grafikk på en mørk bakgrunn. Det er en reversering av den tradisjonelle hvite bakgrunnen med mørk skrift og kan fungere usedvanlig bra for noen merker og i noen tilfeller.

Nettsteder designet med dette konseptet bruker hovedsakelig en svart farge som gir designet et seriøst, sofistikert og klassisk utseende. I motsetning til lys design, som ofte holder besøkende opptatt med å klikke og bla, trekker mørk design besøkendes oppmerksomhet til de viktigste delene av nettstedet ditt. Produktet eller tjenesten.

Mens de fleste nettsteder har lyse fargevalg i designet for å gi besøkende en energisk og munter nettopplevelse, kan svarte fargevalg også lokke besøkende til å utføre en ønsket handling.

Imidlertid, i forhold til lyse design som kan brukes i forskjellige sammenhenger, er mørke design ikke egnet for alle slags nettsteder. Hvis du bruker mørkt design i feil situasjon, kan det få nettstedet ditt til å se stygt, dystert og uprofesjonelt ut.

Du må virkelig sørge for at du bruker dette konseptet i riktige situasjoner!

Når er det fornuftig å opprette svarte nettsteder?

Konseptet med mørk design fungerer ikke i alle situasjoner. For eksempel vil svarte nettsteder ikke fungere der et merke rett og slett ikke passer, der produktet ikke er egnet eller der publikum ikke vil svare positivt på et mørkt design. Teksttunge sider er ikke ideelle på svarte sider, da det er vanskeligere for øynene våre å lese hvit tekst på svart bakgrunn i stedet for omvendt.

Her er noen hensyn når du vurderer svarte nettstedsdesign:

1. Gjør teksten lesbar

For å oppnå lesbarhet på mørke nettsteder, anbefaler vi at du øker skriftstørrelsen. Små skrifttyper er lett lesbare på et lyst nettsted, men å lese liten lys tekst på en mørk bakgrunn i lang tid kan belaste øynene. For å overvinne dette, øk skriftstørrelsen til du finner teksten perfekt lesbar.

Som hovedregel, hold skriftstørrelsen 18 px eller mer. Husk å teste på forskjellige skjermstørrelser for å få den største appellen.

2. Analyser merkevaren

Tenk på hvilke ord som beskriver merkevaren din best, og hva slags tjenester, produkter eller innhold du skal tilby på nettstedet ditt. Hvis du for eksempel skal lage en webdesignportefølje, kan en mørk bakgrunn passe dine behov bedre. Hvis du driver et opplæringsnettsted, kan det hende at et mørkt design ikke fungerer så bra.

Premiummerker fungerer bra med svarte nettsteder, det samme gjør kreative nettsteder, porteføljer, bilsider og nettsteder for avanserte produkter.

3. Velg de riktige skriftene

Skriftvalg spiller en viktig rolle i ethvert design og må følges nøye når du arbeider med svarte nettsteder. Uansett hvilke skrifttyper du har valgt å bruke i det mørke oppsettet ditt, må du sjekke om de er passende på alle skjermstørrelser og med forskjellige øyesett. Brukervennlighetstesting er viktig for svarte nettsteder, og jo mer du tester, desto bedre blir sluttresultatet.

Fontfarge er også viktig.

En svart bakgrunn krever en lys skrift for å være lesbar. Kontrast er nøkkelen. Å få det riktig reduserer belastningen på øynene og øker lesbarheten.

4. Bruk mer hvitt mellomrom

Økende mellomrom er en annen flott måte å forbedre lesbarheten på mørke nettsteder. Uttrykket mellomrom refererer til "tomt" område på en side og er en arv fra trykte medier. Selv om vi snakker om svarte nettsteder her, er mellomrom fortsatt relevant.

Jo mer hvit plass du har, jo mer lesbar blir teksten din. Dette kombinerer med antall ord på sider, men er ikke det samme. Hvite mellomrom handler like mye om hvordan du plasserer innhold på siden så mye som hvor mye innhold du legger på siden.

Vurder å tilpasse skjæringen og føre inn teksten for tilstrekkelig hvit plass. Hvis du har mye innhold på nettstedet ditt, kan du dele det inn i små avsnitt og være spesielt oppmerksom på plass rundt innholdet.

5. Eksepsjonelle kvalitetsbilder

Alle nettsteder fortjener bilder av høy kvalitet, men svarte nettsteder trenger mer. Når designet trekker blikket mot bildene, må bildene være av meget høy kvalitet. Det må også være skarpt, bruke godt fokus, ha tilstrekkelig dybde og interesse og vise frem motivet til bildet på sitt beste.

Svarte nettsteder har et lavere krav til skrevet innhold, men et mye høyere kvalitetskrav til bildeinnhold.

6. Bruk refleksjoner i bilder

En av fordelene med et mørkt design er at det gir deg muligheten til å legge vekt på viktige elementer på nettstedet ditt. Selv om det samme kan gjøres i en lys bakgrunn, gir en mørk bakgrunn deg flere alternativer som refleksjoner og andre teknikker for bildeblanding. Så dra nytte av dem for å gi ditt mørke design et stilig og fascinerende utseende!

7. Sett så lite innhold som mulig

Sist men absolutt ikke minst, legg bare viktig innhold på et mørkt nettsted. Som allerede nevnt påvirker hvit tekst på mørk bakgrunn lesbarheten, så det må tas hensyn til å balansere dette. Du kan kombinere en svart webside med lettere tekstblokker eller skille designet, slik at du har et stort sett svart nettsted med omvendte innholdstunge sider.

Påvirker virkelig mørk design lesbarheten?

Mange klager over at en mørk design ikke er bra når det gjelder brukervennlighet og lesbarhet. De anser at å lese lett tekst på en mørk bakgrunn kan belaste øynene, noe som resulterer i mye less hyggelig leseopplevelse. Det er ingen vitenskap som støtter dette, men det er en utbredt oppfatning at svarte nettsteder er vanskeligere å lese enn hvite eller lyse.

Problogger utførte en undersøkelse tilbake i 2009 på akkurat dette spørsmålet og fant 47% av nettbrukere foretrukket lys bakgrunn på blogger.

En mørk sidebakgrunn og lys skrift er ikke eneansvarlig for dårlig lesbarhet, og det påvirker ikke alle besøkende du har. Imidlertid er det vanlig nok å kreve nøye vurdering hvis du vurderer et svart nettsteddesign.

Lesbarhet handler om typografi og riktig bruk av elementer på nettstedet ditt. Et nettsted med svarte sider kan appellere til et bredt publikum hvis du velger passende skrifttyper, bruker riktig skriftstørrelse og farge og tar litt hensyn til mellomrom og linjehøyde.

Du må nøye vurdere hvert sideelement for å oppnå den estetiske elegansen i ditt mørke design. 

Hvilke typer nettsteder er gode kandidater for mørke design?

Foto- og kunstnettsteder

Hvis du planlegger å lage et nettsted der du vil vise (eller selge) kunstverk eller profesjonelle fotografier, kan et nettsted med mørkt tema vise seg å være ganske gunstig. Denne typen design er mer egnet for bilderike nettsteder som en webdesignportefølje og gir nettstedet en stilig følelse.

Dette er en utmerket liste over nettsteder for fotografer og kunstnere.

e-handel og butikknettsteder

Siden et e-handelssted inneholder mange produktbilder, kan svarte nettsteder hjelpe deg med å gjøre produktene dine i sentrum. Den mørke bakgrunnen retter dine besøkendes øyne mot bildene i forgrunnen. Denne tilnærmingen fungerer ikke med alle typer produkter, men den kan fungere for mange med intelligent design.

Vil du sette opp et e-handelssted ved hjelp av svart nettsteddesign?

Hvis produktene du vil selge ville fungere innenfor et svart nettsteddesign, eller du tror at målmarkedet ditt ville gjort det react gunstig til det, hvorfor ikke prøve et mørkt tema selv?

Svarte nettsteder for minimalistiske sider

Hvis nettstedet ditt ikke har mye innhold, kan du vurdere å prøve et mørkt nettsteddesign.

Mørk design kan fungere på teksttunge sider, men kan være vanskelig å lese, spesielt på mobile eller mindre skjermer. For å kombinere det beste fra design og brukervennlighet, må du nøye vurdere vekten av teksten på en side for å se om et svart nettsteddesign passer.

Les mer:  30+ Beste gratis og premium minimale WordPress-temaer

HotDot, Velthy og OregonGridiron omtalt i listen ovenfor er to veldig gode minimalistiske nettstedseksempler som bruker mørk design med stor effekt:  

Vil du sette opp et minimalistisk nettsted ved hjelp av mørkt design?

Takket være populariteten til mørk design er det et stort utvalg av temaer som passer for svarte nettsteder. Vi har tatt med et par temaforslag i listen ovenfor, for eksempel Parallax Pro, Neve, Minimalize og mer.

Stor skriftbruk på svarte nettsteder

Vi nevnte øverst at skriftvalg er utrolig viktig når man vurderer et svart nettsteddesign. Vi har også sett noen få mørke design ovenfor som vi tror har fått balansen perfekt når det gjelder skrifttyper.

Merker som har brukt svarte nettsteder 

Svarte nettsteder kan skildre følelsen av eleganse, modenhet og luksus.

Fargeteori sier at svart er assosiert med kraft og formalitet så vel som det ovennevnte. Det må utvises forsiktighet, da det også kan assosieres med ondskap, død og mystikk. En flott designer kan kombinere disse positive og de negative for å skape den effekten du leter etter.

Lamborghini og BlackBerry (omtalt i listen vår) er noen fantastiske design fra store merker som har fått svarte nettsteder til å fungere for dem.

Vil du sette opp et mørkt webdesign for ditt merke?

Noen merker, spesielt de som gjerne tar risikoen og velger et premium, raffinert utseende, kan se fantastiske ut som mørke nettsteder. 

Så hvis du foretrekker livlige svarte nettsteder, kan du følge med på følgende temaer som du kan bruke på alle måter, sjekk ut EXO ovenfor.

Vil du bruke mørke eller svarte design på ditt neste nettsted?

Hvis du har hentet inspirasjon fra noen av disse eksemplene og vil være med på den mørke siden på ditt neste nettsted, har vi inkludert som en del av listen noen temaforslag du kan bruke.

Ofte Stilte Spørsmål

Hva er svarte nettsteder?

Svarte nettsteder og mørk nettsteddesign er et konsept der fargevalget til et nettsted er mørkt eller svart. Mens det meste av teksten vil ha en lys farge, er det generelle skjemaet mørkt eller helt svart. Svart design er vanligvis assosiert med premium- eller luksusmerker. Du vil oppdage at mange premiummerker bruker et mørkt nettsted.

Hva betyr svarte eller mørke farger i fargelære?

Svart er en for det meste nøytral farge, men det er vanligvis forbundet med kraft, eleganse og formalitet. Det er også veldig assosiert med opprør. Det brukes ofte i edgy design, så vel som veldig elegante design. Svarte eller mørke nettsteder kan være konservative eller moderne, tradisjonelle eller ukonvensjonelle, avhengig av de andre fargene de kombineres med. Svart kan gjøre det lettere å formidle raffinement i design.

Konklusjon om svart / mørkt nettsteddesign

Til slutt, hva slags design - mørkt eller lyst - du bør bruke for din virksomhet, avhenger av din personlige preferanse, merkevaren, tjenesten eller det aktuelle produktet og ditt målmarked.

Hvis du vil gi de besøkende et energisk og levende utseende eller vil fremstå som luksuriøse eller premium, kan svarte nettsteder fungere. Hvis du ønsker å fremkalle en følelse av mystikk, eksklusivitet eller ønsker å få besøkende til å føle seg elite, kan svarte nettsidesign og mørke nettdesign fungere.

Så lenge du følger tipsene i denne artikkelen om sidebalanse, mellomrom, skriftvalg, bildekvalitet og design, kan ditt neste mørke design være det beste du noen gang har produsert!

Har du en mening om svarte nettsteder eller mørkt webdesign? Fortell oss om det i kommentarfeltet nedenfor!

om forfatteren
Ajeet Yadav
Forfatter: Ajeet Yadavnettside: https://www.wordpressintegration.com/
Ajeet er senior webutvikler hos WordpressIntegration - PSD til WordPress-tjenesteleverandør, hvor han er ansvarlig for å skrive tilpasset JavaScript-kode under konverteringsprosessen. På fritiden skriver han om forskjellige emner relatert til JavaScript, WordPress og webdesign for å dele arbeidserfaringen sin med andre.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
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.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...