Sorte websteder / mørkt webstedsdesign: 35+ eksempler (2024)

sorte websteder mørke

Mørkt webstedsdesign og sorte websteder har altid været et meget kontroversielt diskussionsemne. Mange webdesignere tror på at skubbe grænser og er glade for at vedtage begrebet sort webdesign og lancere sorte websteder. Andre er stadig ikke for at bruge det i deres design. Dette er hovedsageligt baseret på bekymringer over mørkt design og læsbarhed eller brand fit.

Udført korrekt kan webdesign ved hjælp af mørke farver formidle et meget kreativt, elegant og professionelt udseende til brugerne. Når det er sagt, at skabe et mørkt webstedsdesign er et ret udfordrende job, der kræver webdesigner at være ekspert i webanvendelighed for at få det rigtigt.

Denne artikel fokuserer hovedsageligt på forskellige scenarier, når du kan bruge mørkt eller sort webdesign. Vi vil også dække nogle ting, du skal huske på, når du arbejder på et websted med mørkt tema. 

Indhold[show]

35 Fantastiske eksempler på sorte websteder

Her er et par fantastiske eksempler, vi lovede.

Vi har samlet nogle af, hvad vi synes er de fineste eksempler på sorte websteder lige nu. De udviser alle de kvaliteter, vi hidtil har diskuteret, og viser mærket, produktet eller servicen bedst.

1. Mitchell kanashkevich

Mørkt webstedsdesign fotografering

2. Dev art

dev art mørkt webdesign

3. Jack Daniels

En fordel ved sorte websteder er, at det med det samme giver en præmiefølelse, der kan arbejde med bestemte produkter. Jack Daniels er et af disse produkter. Det mørke design passer perfekt til mærket og en god balance mellem skrifttypevalg og farve, tom plads på siden og veldesignede grafik får dette til at fungere. 

 Jack Daniels

4. Pasticceria Adami

Pasticceria Adami er et italiensk websted, der promoverer et bageri i Verona. Det gør fremragende brug af en mørk baggrund med sparsom brug af billeder, skrifttyper og sideelementer. Det er et simpelt, men meget effektivt sort webstedsdesign. 

Pasticceria Adami

5. Divi med skabelon til digital betaling

Divi, det altid populære produkt fra ElegantThemes er en god mulighed af flere grunde. Det er et populært, modent, alsidigt tema, som du kan tilpasse til enhver niche, du ønsker, så som designer burde dette være en af ​​dine muligheder.

Du kan bruge de indbyggede layout til at skabe en bred vifte af designs. For eksempel kan du se layoutet, der bruger lyse farver og mørkere baggrund for at få elementerne til at poppe. Et fremragende udseende, hvis du vil skille dig ud fra mængden!

Lyse farver mørkere baggrund divi layout

Klik her for at få 10 % rabat på Divi med mørke layouts indtil marts 2024

6. Astra - Responsivt e-handelstema

Det følgende smykkeside, et startside fra Astra for et smykkeside, er et godt eksempel på sort webstedsdesign, der kombinerer attraktive billeder med et stort skriftvalg. Det er en enkel installation, der inkluderer de fleste elementer, som en ny onlinebutik sandsynligvis har brug for for at begynde at handle.

Naturligvis kan et sådant tema bruges til mange andre e-handelsbutikker, der har brug for at fokusere på deres luksuriøse produkt. 

astra smykker

Tjek Astra Starter-websteder for Prestige Black-webstedet 

7. Rhapsody - WordPress Multi-purpose tema

Rhapsody er et modeorienteret sort webstedsdesign, der leverer stor brug af sideplads med billeder og grafik i høj kvalitet. Det integreres med WooCommerce, så i stedet for at se på en andens e-handelsbutik, kan du bygge din egen!  

rhapsody wordpress e-handel tema

 Tjek Rhapsody-temaet

8.KingGym - Fitness, gym og sport Magento tema

KingGym Responsive Magento Template er en fantastisk løsning til online-shop til sportstøj, sportsudstyr og sko. Det imponerende design giver besøgende en stærk, dynamisk og stærk følelse ved første øjekast.

I betragtning af at Magento typisk er et ret komplekst system, du måske vil læse dette Collectiveray artikel om, hvordan du ansætter en Magento -udvikler eller freelancer.

kinggym fitness gym og sport

Lær mere om KingGym Magento-tema 

9. Kallyas - Responsivt Multipurpose WordPress-tema

Kallyas er et af de mest avancerede temaer, du kan få i dag, der bruger mørkt design. Den leveres med sin egen sidebygger, inkluderer de fleste af de værktøjer, du har brug for for at begynde at handle, og fungerer med flere plugins og addons. 

Kalyas lydhør wordpress e-handelstema

10. HotDot

hotdot minimal mørk webdesign

11. OregonGridiron

oregongridiron minimal mørk webdesign

12. Velthy

Velthy

13. Parallax Pro fra Genesis StudioPress

StudioPress, en WordPress -temaleverandør bag det utroligt succesrige Genesis framework har brugt deres Parallax Pro -tema til at skabe et glimrende sort webstedsdesign, som du kan se herunder.

parallax pro sort

Tjek Parallax Pro

14. Neve med Photograph Starter Site

Neve from ThemeIsle er et andet WordPress -tema med endeless muligheder, men Photographer-startsiderne fjerner det sorte minimalisme sti. Tjek det ud i demoen nedenfor.

Neve fotograf sort websted eksempel

Se Live Demo og få 10 % rabat indtil marts 2024 kun (CollectiveRay eksklusiv)

15. Minimer - Enkelt sidet multifunktionelt WordPress-tema

Minimaliser WordPress-temaet er et godt eksempel på at tage minimalisme kombineret med et sort design for at opnå et fantastisk resultat. Tjek demoen nedenfor for at se, hvor godt det ser ud.

minimer wordpress-temaet

16. Rhythm HTML-skabelon

Hvis du leder efter en HTML-skabelon, som du kan bygge på, er denne Awwward-vindende skabelon et godt valg.

 Rytme Bestlooker

17. Nerisson

nerisson mørkt webdesign

18. Kaber Tech

kabertech-dark webdesign eksempel

19. Gå en tur

Tag turen

20. Esteban Munoz

Esteban Muñoz

21. Ryan Mulford

ryanmulford-dark webdesign eksempel

22. Vitamin Talent Agency

eksempel på vitamintalent-dark webdesign

23. Skægbog

eksempel på bookofbeards-dark webdesign

24. Uld

vool-dark webdesign eksempel

25. Umar Sheikh

umarsheikh-dark webdesign eksempel

26. BlackBerry

brombær

27. Lamborghini

Lamborghini

28. Mere søvn

mere søvn

29. Skabningsteknologien

skabningsteknologi

30. EXO - Kreativt og virksomhedsspecifikt formålstema

Hvis der er en type virksomhed, der kan trække et mørkt webstedsdesign ud, er det et kreativt bureau. Tjek EXO, et tema designet til kreative bureauer og virksomhedswebsteder.

exo kreativt wordpress tema

Se Exo i aktion

31. Metal - Mobilvenlig skabelon til byggeri og byggeri

Men du behøver ikke være hverken kreativ eller et selskab. Selv almindelige virksomheder inklusive selvstændige servicebaserede virksomheder eller andre almindelige virksomheder kan bruge et websted med et mørkere udseende.

Metal er et glimrende eksempel på denne anvendelse.

metal forretningsskabelon

Klik her for at lære mere om metal 

32. StyleShop

Dette er et fantastisk tema baseret på en mørk baggrund, der tillader de produkter, du vil sælge til pop. StyleShop er et stærkt e-handelstema, der har alle de nødvendige værktøjer, du har brug for til at starte en succesrig onlinebutik.

Designet er både smukt og lydhørt, det inkluderer et unikt mobilt layout, der gør browsing på dit websted til en leg uanset hvilken enhedsstørrelse du bruger!

Styleshop

33. Uno - Creative Photography WordPress-tema

Uno har et sort websted og et let websted, og begge fungerer godt. Det er et veldesignet tema med ren kode, Retina Display-understøttelse, flere side- og layoutmuligheder og en række ekstra værktøjer til at skabe en fremragende portefølje-webside.

UNO - fotografering mørkt webdesign Wordpress-tema

Tjek Uno Demo 

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

Photolux er et kraftfuldt og elegant WordPress-tema for portefølje og fotografi, der er bedst egnet til fotografer og reklamer, der bruger porteføljer til at fremvise deres arbejde.

Besøg PhotoLux Demo

Photolux - fotografering mørkt webdesign wordpress tema

35. RSW - Responsivt fuldskærmsstudie til WordPress

RSW (Responsive Fullscreen Studio til WordPress) er et kraftfuldt tema for fotografer og kreative kunstnere og leveres med lys og mørkt med temaindstillinger, der understøtter flerfarvet tilpasning af temaelementer ved hjælp af farvevælgere.

Se Demo of RSW

Responsivt fuldskærmsstudie til wordpress

IMH

Vil du have en hurtig hjemmeside?

Hvem laver jeg sjov? Gør vi ikke alle sammen?

Så hvorfor kæmper så mange af os?

Den største udfordring er normalt at finde et hurtigt, pålideligt hostingfirma.

Vi har alle været igennem mareridtene - støtte tager evigheder eller løser ikke vores problem altid skylden noget på din side... 

Men den største bummer er, at hjemmesiden altid føles langsom.

At CollectiveRay vi hoster med InMotion hosting og vores hjemmeside er dum hurtig. Vi kører på en brugerdefineret stak af LightSpeed-serveropsætning på MariaDB med en PHP7.4-motor og frontet gennem Cloudflare. 

Kombineret med vores frontend-optimeringer serverer vi pålideligt 6000 brugere hver eneste dag, med peaks på 50+ samtidige brugere. 

Vil du have en hurtig opsætning som vores? Overfør dit websted gratis til InMotion-hosting og få vores 50% rabat på nuværende priser.

Prøv InMotion Hosting med 50 % rabat for CollectiveRay KUN besøgende i marts 2024!

InMotion hosting 50% RABAT for CollectiveRay besøgende

Sorte websteder: En ægte følelse af ædruelighed og alvor

For dem, der ikke er bekendt med sort webstedsdesign, er det et unikt designkoncept at bruge let bogstaver og grafik på en mørk baggrund. Det er en vending af den traditionelle hvide baggrund med mørk skrifttype og kan fungere usædvanligt godt for nogle mærker og under visse omstændigheder.

Websteder designet med dette koncept bruger overvejende en sort farve, der giver designet et seriøst, sofistikeret og klassisk look. I modsætning til lysdesign, der ofte holder besøgende travlt med at klikke og rulle, henleder mørkt design den besøgendes opmærksomhed på de vigtigste dele af dit websted. Produktet eller tjenesten.

Mens de fleste websteder indeholder lyse farveskemaer i deres design for at give besøgende en energisk og munter browseroplevelse, kan sorte farveskemaer også lokke besøgende til at udføre en ønsket handling.

Men sammenlignet med lyse designs, der kan bruges i forskellige sammenhænge, ​​er mørke designs ikke egnede til alle slags websteder. Hvis du bruger mørkt design i den forkerte situation, kan det få dit websted til at se grimt, dystert og uprofessionelt ud.

Du skal virkelig sørge for at bruge dette koncept i de rigtige situationer!

Hvornår giver det mening at oprette sorte websteder?

Begrebet mørkt design fungerer ikke i enhver situation. For eksempel fungerer sorte websteder ikke, hvor et brand simpelthen ikke passer, hvor produktet ikke er egnet, eller hvor publikum ikke reagerer positivt på et mørkt design. Teksttunge sider er ikke ideelle på sorte sider, da det er sværere for vores øjne at læse hvid tekst på sort baggrund snarere end omvendt.

Her er nogle overvejelser, når man overvejer sorte webstedsdesign:

1. Gør teksten læsbar

For at opnå læsbarhed på mørke websteder anbefaler vi stærkt, at du øger skriftstørrelsen. Små skrifttyper er let læselige på et let websted, men at læse lille lys tekst på en mørk baggrund i lang tid kan belaste øjnene. For at overvinde dette skal du øge skriftstørrelsen, indtil du finder teksten perfekt læsbar.

Som hovedregel skal du holde skriftstørrelsen 18 pixel eller derover. Husk at teste på forskellige skærmstørrelser for at få den bredeste appel.

2. Analyser brandet

Overvej hvilke ord, der beskriver dit brand bedst, og hvilken type tjenester, produkter eller indhold du vil tilbyde på dit websted. For eksempel, hvis du vil oprette en webdesignportefølje, kan en mørk baggrund bedre passe til dine behov. Hvis du kører et tutorial-websted, fungerer et mørkt design muligvis ikke så godt.

Premium-mærker fungerer godt sammen med sorte websteder, ligesom kreative websteder, porteføljer, bilsider og websteder til avancerede produkter.

3. Vælg de rigtige skrifttyper

Skrifttypevalg spiller en vigtig rolle i ethvert design og skal følges nøje, når du arbejder med sorte websteder. Uanset hvilke skrifttyper du har valgt at bruge i dit mørke layout, skal du kontrollere deres egnethed på alle skærmstørrelser og med forskellige sæt øjne. Brugervenlighedstest er nøglen til sorte websteder, og jo mere du tester, jo bedre er slutresultatet.

Fontfarve er også vigtig.

En sort baggrund kræver en let skrifttype for at være læsbar. Kontrast er nøglen. At få det rigtige reducerer øjnene og øger læsbarheden.

4. Brug mere mellemrum

At øge det hvide rum er en anden god måde at forbedre læsbarheden på mørke websteder. Udtrykket hvidt mellemrum refererer til 'tomt' rum på en side og er en arv fra trykte medier. Selvom vi taler om sorte websteder her, er mellemrum stadig relevant.

Jo mere hvidt rum du har, jo mere læselig bliver din tekst. Dette kombineres med antal ord på sider, men er ikke det samme. Hvid plads handler så meget om, hvordan du placerer indhold på siden, så meget som hvor meget indhold du lægger på siden.

Overvej at justere kerning og føre i din tekst for tilstrækkelig hvid plads. Hvis du har meget indhold på dit websted, skal du opdele det i små afsnit og være særlig opmærksom på rummet omkring dette indhold.

5. Enestående kvalitetsbilleder

Alle websteder fortjener billeder i høj kvalitet, men sorte websteder har brug for mere. Når designet trækker øjet mod billedet, skal billedet være af meget høj kvalitet. Det skal også være skarpt, bruge godt fokus, have tilstrækkelig dybde og interesse og fremvise billedets emne på sit bedste.

Sorte websteder har et lavere krav til skriftligt indhold, men en meget højere kvalitetskrav til billedindhold.

6. Brug refleksioner i billeder

En af fordelene ved et mørkt design er, at det giver dig mulighed for at lægge vægt på nøgleelementer på dit websted. Selvom det samme kan gøres i en lys baggrund, giver en mørk baggrund dig flere muligheder som refleksioner og andre billedblandingsteknikker. Så udnyt dem for at give dit mørke design et klassisk og fascinerende look!

7. Sæt så lidt indhold som muligt

Sidst men bestemt ikke mindst, sæt kun essentielt indhold på et mørkt websted. Som allerede nævnt påvirker hvid tekst på mørk baggrund læsbarheden, så man skal være opmærksom på at afveje dette. Du kan kombinere en sort webside med lettere tekstblokke eller adskille designet, så du har et stort set sort websted med indholdstunge sider omvendt.

Påvirker mørkt design virkelig læsbarheden?

Mange mennesker klager over, at et mørkt design ikke er godt med hensyn til brugervenlighed og læsbarhed. De mener, at læsning af let tekst på en mørk baggrund kan belaste øjnene, hvilket resulterer i meget less fornøjelig læseoplevelse. Der er ingen videnskab til at bakke op om dette, men det er en udbredt opfattelse, at sorte websteder er sværere at læse end hvide eller lyse.

Problogger udførte en undersøgelse tilbage i 2009 på netop dette spørgsmål og fandt 47% af webbrugere foretrukket lys baggrund på blogs.

En mørk sidebaggrund og en lys skrifttype er ikke eneansvarlig for dårlig læsbarhed, og det påvirker ikke alle besøgende, du har. Det er dog almindeligt nok at kræve nøje overvejelse, hvis du overvejer et sort webstedsdesign.

Læsbarhed handler om typografi og den rigtige brug af elementer på dit websted. Et websted med sorte sider kan appellere til et bredt publikum, hvis du vælger passende skrifttyper, bruger den rigtige skriftstørrelse og farve og lægger mærke til hvidt mellemrum og linjehøjde.

Du skal nøje overveje hvert sideelement for at opnå den æstetiske elegance i dit mørke design. 

Hvilke typer websteder er gode kandidater til mørke designs?

Fotografi- og kunstwebsteder

Hvis du planlægger at oprette et websted, hvor du vil vise (eller sælge) kunstværker eller professionelle fotografier, kan et websted med mørkt tema vise sig at være ret gavnligt. Denne form for design er mere velegnet til billedrige websteder som en webdesignportefølje og giver webstedet en klassisk fornemmelse.

Dette er en fremragende liste over websteder til fotografer og kunstnere.

e-handel og butikswebsteder

Da et e-handelssted indeholder mange produktbilleder, kan sorte websteder hjælpe dig med at gøre dine produkter til centrum. Den mørke baggrund retter dine besøgendes øjne mod billederne i forgrunden. Denne tilgang fungerer ikke med alle typer produkter, men den kan fungere for mange med intelligent design.

Vil du oprette et e-handelssted ved hjælp af sort webstedsdesign?

Hvis de produkter, du vil sælge, ville fungere inden for et sort webstedsdesign, eller du tror, ​​at dit målmarked ville react positivt til det, hvorfor ikke prøve et mørkt tema selv?

Sorte websteder til minimalistiske sider

Hvis dit websted ikke har meget indhold, kan du overveje at prøve et mørkt webstedsdesign.

Mørkt design kan fungere på teksttunge sider, men kan være svært at læse, især på mobile eller mindre skærme. For at kombinere det bedste ved design og brugervenlighed skal du nøje overveje vægten af ​​teksten på en side for at se, om et sort webstedsdesign passer.

Læs mere:  30+ Bedste gratis og premium minimale WordPress-temaer

HotDot, Velthy og OregonGridiron, der er vist i vores liste ovenfor, er to meget gode minimalistiske webstedseksempler, der bruger mørkt design med stor effekt:  

Vil du oprette et minimalistisk websted ved hjælp af mørkt design?

Takket være populariteten af ​​mørkt design er der et stort udvalg af temaer, der passer til sorte websteder. Vi har inkluderet et par temaforslag på listen ovenfor, såsom Parallax Pro, Neve, Minimalize og mere.

Fantastisk skrifttype brug på sorte websteder

Vi nævnte øverst, at skrifttypevalg er utroligt vigtigt, når man overvejer et sort webstedsdesign. Vi har også set ovenfor et par mørke designs, som vi synes har fået balancen perfekt, når det kommer til skrifttyper.

Mærker, der har brugt sorte websteder 

Sorte websteder kan skildre følelsen af ​​elegance, modenhed og luksus.

Farve teori siger, at sort er forbundet med magt og formalitet såvel som ovenstående. Der skal dog udvises forsigtighed, da det også kan forbindes med ondskab, død og mysterium. En god designer kan kombinere disse positive og de negative for at skabe den effekt, du leder efter.

Lamborghini og BlackBerry (vist på vores liste) er nogle fantastiske designs fra store mærker, der har fået sorte websteder til at fungere for dem.

Vil du oprette et mørkt webdesign til dit brand?

Nogle mærker, især dem, der er glade for at tage risikoen og vælge et premium, raffineret look, kan se fantastiske ud som mørke websteder. 

Så hvis du foretrækker livlige sorte websteder, kan du overveje følgende temaer, som du kan bruge på hver tælling, se EXO ovenfor.

Vil du bruge mørke eller sorte designs på dit næste websted?

Hvis du har hentet inspiration fra et af disse eksempler og vil deltage i den mørke side på dit næste websted, har vi medtaget som en del af vores liste et par temaforslag, du kan bruge.

Ofte stillede spørgsmål

Hvad er sorte websteder?

Sorte websteder og mørkt webstedsdesign er et koncept, hvor farveskemaet på et websted er mørkt eller sort. Mens det meste af teksten har en lys farve, er det overordnede skema mørkt eller helt sort. Sort design er typisk forbundet med premium- eller luksusmærker. Du finder ud af, at mange premiummærker bruger et mørkt websted.

Hvad betyder sorte eller mørke farver i farveteori?

Sort er en for det meste neutral farve, men det er typisk forbundet med magt, elegance og formalitet. Det er også meget forbundet med oprør. Det bruges ofte i kantede designs såvel som meget elegante designs. Sorte eller mørke websteder kan være enten konservative eller moderne, traditionelle eller ukonventionelle, afhængigt af de andre farver, det er kombineret med. Sort kan gøre det lettere at formidle sofistikeret design.

Hvilke typer websteder er typisk sorte eller har et mørkt farveskema?

En sort hjemmeside er typisk en ret modig designbeslutning, så mærker med dristige personligheder er typisk dem, der vælger dette farveskema. Premium- eller luksusmærker er også synonyme med hjemmesider med sort farveskema. Eksempler på nicher ville være fotografi- og kunstwebsteder, e-handelswebsteder, luksusbiler, fitnesswebsteder osv.

Påvirker et mørkt designskema læsbarheden?

Nej, der er ingen forskning eller videnskab, der understøtter den opfattelse, at et mørkt design ikke er godt med hensyn til brugervenlighed og læsbarhed. At læse lys tekst på en mørk baggrund belaster ikke øjnene, så meget, at de fleste enheder og platforme i dag understøtter mørk tilstand indbygget. Selv for teksttunge industrier som softwareudvikling har mørke baggrunde været normen i årevis.

Konklusion om sort / mørkt webstedsdesign

I sidste ende afhænger hvilken type design - mørkt eller lys - du skal bruge til din virksomhed, af dine personlige præferencer, det pågældende brand, service eller produkt og dit målmarked.

Hvis du vil give dine besøgende et energisk og pulserende udseende eller vil fremstå luksuriøse eller premium, kan sorte websteder fungere. Hvis du vil fremkalde en følelse af mysterium, eksklusivitet eller ønsker at få din besøgende til at føle sig elite, kan sort webdesign og mørkt webdesign fungere.

Så længe du følger tipene i denne artikel om sidebalance, mellemrum, skrifttypevalg, billedkvalitet og design, kan dit næste mørke design være det bedste, du nogensinde har produceret!

Har du en mening om sorte websteder eller mørkt webdesign? Fortæl os om det i kommentarfeltet nedenfor!

Om forfatteren
Ajeet Yadav
Ajeet er senior webudvikler hos WordpressIntegration - PSD til WordPress-tjenesteudbyder, hvor han er ansvarlig for at skrive tilpasset JavaScript-kode under konverteringsprocessen. I sin fritid skriver han om forskellige emner relateret til JavaScript, WordPress og webdesign for at dele sin arbejdsoplevelse med andre.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig at forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...