Dos and Don'ts of Dark Web Design
Mørke webdesign er meget populære og kan have en elegant og kreativ appel.
De er også perfekte til mange typer klientarbejde, men de er ikke egnede til alle hjemmesider og bør kun bruges, hvis det er relevant.
På trods af den slående visuelle indvirkning, som disse mørke designs kan have, ved mange designere ikke, hvordan man effektivt kan trække dem af uden at slukke for den besøgende.
Med et mørkt design kommer mindre læsbarhed , mindre appel til de fleste læsere og mindre mulighed for konventionelle designelementer.
I dette indlæg vil vi diskutere et par tips til, at dit næste mørke website design appellerer til et bredere publikum , mens du tillader designeren at udtrykke din kreativitet.
EN nylig afstemning antyder, at lysdesigner foretrækkes af det generelle web-publikum med en kæmpe 47%. Hovedårsagen er læsbarhed . De fleste mennesker kan ikke lide at se lys tekst mod en mørk baggrund på hjemmesider, fordi det spænder deres øjne, hvilket giver en meget mindre fornøjelig oplevelse.
I modsætning hertil sagde 10% af de undersøgte, at de altid foretrak mørke baggrunde til websites, mens yderligere 36% sagde, at det bedste valg ville afhænge af typen af websted.
Så hvad er det rigtige svar? Når det kommer til det, har alle deres egen mening, og det er det.
Men med en så stor procentdel af brugere, der siger, at mørke website designs er tolerable og nogle gange endda foretrukne, skal vi som webdesignere lære at skabe effektive mørke designs til os og vores kunder.
Det betyder at overbevise alle de sande troende af lyse baggrunde, at mørkt design kan være mere læseligt og brugervenligt.
Brug mere hvidt rum
Eller skal det kaldes "sort rum"? Effektiv brug af hvidt rum er vigtigt for enhver form for design, men det er vigtigt for hjemmesider med mørke baggrunde.
Mørke design har en tendens til at føle sig "tung" , og det kan forstærke den følelse, når de klutter dem op. Tag et kig på nogle populære mørke webdesigner nedenfor, og bemærk deres liberale brug af hvidt rum til stor effekt.
Black Estate ses over hele internettet i mørke webdesign showcases. Det er faktisk et smukt design og værdig til al opmærksomhed. En stor del af det hvide rum bruges i hele designet, og hvad der gør dette særlige design unikt, er, hvordan det hvide rum bruges til at skitsere bestemte elementer så effektivt.
Logoet har meget hvidt rum rundt om det og er det første, vi ser som besøgende. Vi ser hovedindholdet og flasken lige ved siden af. Som du ser, bruges hvidt rum perfekt til at fremhæve teksten på flasken og overskriften for hovedindholdet.
Det fremhævede indhold i Tictoc og ledsagende billede i dette design er indrammet med det mest hvide rum. Når vi bevæger os ned, ser vi mindre hvidt rum, hvilket gør os opmærksomme på indholdet, der vises.
Pointen her er, at hvidt rum gradvis leder brugeren ned til slutningen af siden .
Den mørke baggrund tilføjer dybden til designet. Fordi hjemmesiden er så afhængig af hvidt rum, ville det være mindre interessant uden den kreative virkning af den mørke baggrund.
Det Mark Dearman webstedet har liberalt og jævnt fordelt hvidt rum i hele sit layout.
Det hvide rumsramme, der udgør hvert portrætstykke, giver masser af åndedrætsrum til det indhold, det rummer, og det er et godt hvilested, inden du går videre til det næste stykke.
Masser af hvidt rum er afgørende for mørke designs, fordi det hjælper ikke kun med at afklamre layoutet, men også at udforme vigtige elementer og tilføje elegance til det overordnede udseende.
Textual White Space
Da læsbarhed er den største bekymring for dem, der ikke kan lide mørke baggrunde, skal designerne lægge særlig vægt på selve teksten.
Ligesom i det overordnede design er en måde at forbedre læsbarheden på mørke hjemmesider at øge det hvide rum ved at justere stykkens størrelse, kerning og ledende .
Nedenstående eksempel viser, hvilken forskel mellemrummet mellem og omkring tegn gør i sammenligning af mørke og lyse layouter.
En anden måde at forbedre læsbarheden på i mørke webdesign er at øge skriftstørrelsen . Som de fleste andre regler i dette indlæg betyder større skriftstørrelser mere hvidt rum. Jo større bogstaverne er, jo mere hvidt rum vil dukke op omkring og inden for hvert brev.
F.eks. Får bogstavet "a" nedenfor mere hvidt rum, da det bliver større, både i området omkring det og i rummet inde i a-kabinettet og under overhænget.
Bemærk, hvordan læsning af lille tekst er så meget nemmere på en lys baggrund end på en mørk. Når du indstiller typografien til en ny hjemmeside, skal du kigge på nogle dummy-tekst for at sikre, at den er læselig . Hvis ikke, se om du vil øge tekststørrelsen.
Tekst Kontrast
Mange mennesker er enige om, at de mest dårligt udtænkte mørke hjemmesider forårsager øjenbelastning. For meget eller for lidt kontrast er normalt synderen. Hvordan finder man den perfekte balance?
Hvis du er i et rum, der er tonehvidt, pludselig ser direkte ind i lyset, er det ikke behageligt. Men at se på et mindre lyst lys i et mindre mørkt rum er fint. Det samme princip gælder for webdesign.
At finde den perfekte kontrast betyder at balancere baggrundens mørke med tekstens lyshed .
Nedenfor er en (meget) ru vejledning, der viser, hvordan kontrast mellem tekst og baggrund fungerer. Man bemærker, at som baggrunden bliver lettere, så gør teksten også.
At finde en behagelig kontrast til tekst er meget vanskeligere med en ren sort baggrund.
For at finde den perfekte balance, eksperimentere med forskellige nuancer. Det bedste resultat er normalt en baggrund, der ikke er ren sort og tekst, der ikke er ren hvid.
Håndtering af skrifttyper
Fonter spiller en stor rolle i design og bør helt sikkert tages i overvejende overvejelse med mørke layouter. Billedet nedenfor viser en 14-punkts skrifttype på en mørk baggrund i både serif og sans-serif skrifttyper.
Sans-serif-skrifttypen er tydeligvis mere læselig . Men mange designere vælger stadig serif skrifttyper for deres elegance.
Tricket er dog at sætte kun større tekst i serif skrifttyper, så det ekstra hvide rum oversvømmes omkring hvert tegn og gør teksten meget læselig.
Skærmbilledet nedenfor er af et websted, der er diskuteret tidligere i denne artikel. Den har både serif og sans-serif skrifttyper, men bruger dem på en smart måde.
Større tekst, såsom overskrifter, navigation og overskrifter, er i serif skrifttype for ekstra elegance. For bedre kontrast og forbedret læsbarhed er tekst i en ren sans-serif skrifttype.
Brug minimale farvesystemer
For at give deres mørke design et rent og ryddeligt udseende, bør designere altid vælge minimale farveskemaer .
Fra de få eksempler nedenfor kan vi se, at travle farveskemaer virkelig kommer i vejen for mørke baggrunde, fordi kontrasten er for skarp.
Hold dig til en eller to farver . For at tilføje mere farve, prøv en mørkfarvet baggrund.
Indrømmet, mange mørke webdesign har mere spændende farveskemaer. Så denne regel er ofte brudt, men kun med de rigtige teknikker.
Generelt er farve dog ofte, hvilket gør et websted til at se for travlt . Fordi mørkere websteder allerede har dybde, skal du bruge farve med forsigtighed.
Tilbyder en Style Switcher
Mens vi har mange gode metoder til vores rådighed for at gøre mørke webdesign mere tiltrækkende, vil ingen indsats tilfredsstille enhver bruger.
Sørg for at inkludere en stil switcher , så brugerne i sidste ende har mulighed for at se mørk tekst på en lys baggrund.
Der kræves to stilark til dette, en for standard mørkt layout og et til det alternative lyslayout.
SitePoint har en fremragende tutorial om dette: Byg en enkel stil switcher i CSS . I stedet for at bruge "orange", "blå" og "hvide" versioner i vejledningen, skal du blot bruge "lyse" og "mørke" stilark.
Når Dark Web Design virker bedst
Som nævnt mener en stor del af webbrugere, at et mørkt webdesign kunne fungere for bestemte typer websites. Men undersøgelsen er vag på, hvad disse typer er.
Generelt fungerer mørkt bedst for kreative eller elegante designs . For moderne slanke websites tilføjer mørke baggrunde elegance. Til grungy eller håndtegnede stilarter forbedrer mørke baggrunde kreativiteten i layoutet.
Elegant mørkt design
Mørk kan være dyb, autoritativ og stærk, og ser ofte elegant ud, når den anvendes korrekt. Her er et par eksempler og nogle teknikker til at bringe elegancen i et mørkt design.
Webstedet for Larissa Meek har et simpelt vintageformet mønster i baggrunden og indstiller en elegant tone. Andre quirkier funktioner tilføjer et personligt præg til designet.
Denne teknik kan bruges til mange slags hjemmesider. Vintage eller klassiske mønstre og teksturer kan skabe et udseende, der er både elegant og aldersmæssigt .
De fleste af os forbinder vintage mønstre med høj klasse, så det er let at oprette en førsteklasses hjemmeside.
Dybde Core har et meget rent design med en mørk baggrund, der tilføjer stil og klasse. En følelse af autoritet er også tydelig i designet. Denne elegance kan også gøre en designer portefølje arbejde synes mere værdifulde som følge heraf.
Bemærk at dette design ikke har nogen tekstur eller andre billeder end porteføljen og logoet. Ellers ville designet have været alt for travlt; som det er indholdet strikket sammen godt.
En god proces at følge er at tilføje væsentligt indhold først og derefter indføre designelementer efter behov . Designeren kan derefter sætte pause og reflektere, da hvert nyt element er tilføjet, og sørg for, at layoutet ikke er overdrevet.
Ligesom kunstværker kan synes mere værdifulde i et elegant design, så kan produkterne. Et mørkt og slankt design, som Tapbots og så mange andre hjælper med at fremvise det produkt, der sælges.
Designet afspejler selve anordningen med sine gradienter og lyseffekter; nogle designs selv efterligner teksturerne af deres højteknologiske produkter.
Creative Dark Design
Udover at være elegant, kan mørke website designs også fremkalde mere følelsesmæssige reaktioner end standard lysdesign, hvilket gør dem ideelle til kreative projekter. Lad os se på nogle eksempler på de slags kreative designs, der er mulige.
Det websted nedenfor har meget lidt indhold, men har et unikt layout og mørke farver til dybde. Mørke baggrunde er perfekte til hjemmesider med meget lidt indhold .
Og fordi de kræver mere hvidt rum, har designeren mere plads til at arbejde med.
Grunge webdesign kommer i mange former, og fordi grunge er "mørkt og snavset", er mørke baggrunde en af disse former.
Mørk grunge design som Trozo synes at bryde alle reglerne: travle teksturer, overfyldt layout og en bred vifte af farver. Og alligevel fungerer denne hjemmeside stadig. Hvordan er det muligt?
Med så mange rodet elementer at arbejde med, kan grunge design være vanskelig for begyndere. Hvad der gør dette, er dets organisation .
Baggrunden har tydeligt udtrukne blokke, der styrer brugerens øje og hjælper med at dele indholdet i håndterbare sektioner.
For det andet har den et ton hvidt rum . Baggrunden kan være struktureret, men det gentagne mønster ses af brugeren som hvidt rum og hjælper med at lette designet.
Dette hvide rum er tydeligt til venstre for logoet under navigationen og langs højre side.
Selv mellem "Udstilling 01" og "Udstilling 02" er mere hvidt rum, end man normalt finder på et websted som dette.
Det hvide rum udligner tingene ud, selv om det ikke ser ud som hvidt rum, fordi det har tekstur . Den minimale tekst og få afsnit (kun tre) bidrager også til dette udseende af enkelhed.
Designet af Drew Wilson bryder helt sikkert reglen om at bruge minimal farve. Det virker dog stadig, fordi den farvestrålende overskrift er et af de få funktioner i dette sparsomme design, så intet overstyrker det.
Og den mørke baggrund gør overskriften til at blive endnu lysere og mere ekstraordinær.
Mørke baggrunde bruges ofte til at lave lyseffekter og lyse farver skiller sig ud mere .
Sådanne designs er en vidunderligt kreativ undtagelse til reglen om minimal farve. Men reglen skal brydes med forsigtighed: Undgå distraherende gradienter, teksturer og farve længere nede på siden.
Afslutter
Mørke baggrunde giver en elegant og kreativ stemning til webdesign, hvilket gør dem perfekte til nogle porteføljer, men de er ikke egnede til alle sider.
For større websteder, især dem til personer med nedsat syn og andre handicap, er mørke designs et nej, selv med en stil switcher.
Forhåbentlig når tiden kommer, skal du designe et websted med en mørk baggrund, disse tips og strategier vil hjælpe.
Skrevet udelukkende til WDD af Kayla Knight .
Der er mange flere teknikker og strategier til forbedring af mørke webdesign, så vær venlig at dele dem, du har hentet i kommentarfeltet nedenfor.