Dos and Don'ts of Dark Web Design
Mörka webbdesigner är mycket populära och kan ha en elegant och kreativ överklagande.
De är också perfekta för många typer av klientarbete, men de är inte lämpliga för alla webbplatser och bör endast användas när det är lämpligt.
Trots den slående visuella inverkan som dessa mörka mönster kan ha, vet många designers inte hur man effektivt drar av dem utan att stänga av besökaren.
Med en mörk design kommer mindre läsbarhet , mindre tilltal för de flesta läsare och mindre möjlighet till konventionella designelement.
I det här inlägget diskuterar vi några tips för att göra din nästa mörka webbdesign attraktiv för en bredare publik , samtidigt som du låter dig, formgivaren, uttrycka din kreativitet.
en senaste opinionsundersökningen föreslår att lätta mönster föredras av den allmänna webben publiken med en jättestor 47%. Huvudskälet är läsbarhet . De flesta människor gillar inte att visa lätt text mot en mörk bakgrund på webbplatser eftersom det stämmer över ögonen, vilket ger en mycket mindre njutbar upplevelse.
Däremot sa 10% av de undersökta att de alltid föredrog mörka bakgrunder för webbplatser, medan ytterligare 36% sa att det bästa valet skulle bero på vilken typ av webbplats som helst.
Så, vad är det rätta svaret? När det kommer till det, har alla en egen åsikt, och det är det.
Men med så stor andel användare som säger att mörka webbdesigner är toleranta och ibland till och med föredragna, måste vi som webbdesigners lära oss hur man skapar effektiva mörka mönster för oss själva och våra kunder.
Det betyder att övertyga alla sanna troende på ljusa bakgrunder att mörk design kan vara mer läsbar och användarvänlig.
Använd mer White Space
Eller ska det kallas "svart utrymme"? Effektiv användning av vitt utrymme är viktigt för alla typer av design, men det är viktigt för webbplatser med mörka bakgrunder.
Mörka mönster har en tendens att känna sig "tunga" , och det kan förstärka den känslan, och röra dem upp. Ta en titt på några populära mörka webbdesigner nedan och notera deras liberala användning av vitt utrymme till stor effekt.
Black Estate ses över hela Internet i mörka webbdesigner. Det är verkligen en vacker design och värd all uppmärksamhet. En stor del av det vita utrymmet används i hela konstruktionen, och det som gör den här unika designen är hur det vita utrymmet används för att beskriva vissa delar så effektivt.
Logotypen har mycket vitt utrymme runt det och är det första vi ser som besökare. Vi ser huvudinnehållet och flaskan på nästa sida. Som du ser, används det vita utrymmet perfekt för att markera texten på flaskan och rubriken för huvudinnehållet.
Det presenterade innehållet i Tictoc och medföljande bild i denna design är inramad med det mest vita utrymmet. När vi flyttar ner ser vi mindre vitt utrymme, vilket gör att vi uppmärksammar innehållet som visas.
Poängen här är att vitt utrymme gradvis leder användaren ner till slutet av sidan .
Den mörka bakgrunden lägger djupet i designen. Eftersom webbplatsen beror så starkt på vitt utrymme, skulle det vara mindre intressant utan den kreativa effekten av den mörka bakgrunden.
De Mark Dearman webbplatsen har liberalt och jämnt fördelat vitt utrymme genom hela sin layout.
Det vita utrymmet som skapar varje portföljdel ger gott om andningsrum för innehållet, och det är en trevlig vilopunkt innan du går vidare till nästa del.
Massor av vitt utrymme är viktigt för mörka mönster eftersom det hjälper inte bara att avveckla layouten utan också att utforma viktiga delar och lägga till elegans i det övergripande utseendet.
Textual White Space
Eftersom läsbarhet är den främsta anledningen till dem som inte tycker om mörka bakgrunder, måste designers ägna särskild uppmärksamhet åt själva texten.
Precis som i den övergripande designen är ett sätt att förbättra läsbarheten på mörka webbplatser att öka det vita utrymmet genom att justera styckstorlek, kerning och ledning .
Exemplet nedan visar vilken skillnad avståndet mellan och omkring tecken gör för att jämföra mörka och ljusa layouter.
Ett annat sätt att förbättra läsbarheten i mörka webbdesign är att öka teckensnittstorleken . Liksom de flesta andra regler i det här inlägget betyder större skriftstorlekar mer vitt utrymme. Ju större bokstäverna är desto mer blankutrymme kommer att visas runt och inom varje brev.
Brevet "a" nedan får till exempel mer vitt utrymme eftersom det blir större, både i området runt det och i utrymmet inuti a: s hölje och under överhänget.
Observera att läsning av liten text är så mycket lättare på en ljus bakgrund än på en mörk. När du ställer in typografi för en ny hemsida, se till att du ser på en del dummytext för att se till att den är läsbar . Om inte, se om du kan öka textstorleken.
Textkontrast
Många människor skulle hålla med om att de mest dåligt tänkta mörka webbplatser orsakar ögonbelastning. För mycket eller för liten kontrast är vanligtvis skyldige. Hur hittar man det perfekta balansen?
Om du befinner dig i ett rum som är svart, är det inte trevligt att titta direkt i ljuset. Men det är bara bra att titta på ett mindre starkt ljus i ett mindre mörkt rum. Samma princip gäller webbdesign.
Att hitta den perfekta kontrasten betyder att balansera bakgrundens mörkhet med textens ljushet .
Nedan följer en (mycket) grov guide som visar hur kontrast mellan text och bakgrund fungerar. Man märker att eftersom bakgrunden blir lättare, så gör texten också.
Att hitta en trevlig kontrast till text är mycket svårare med en ren svart bakgrund.
För att hitta den perfekta balansen, experimentera med olika nyanser. Det bästa resultatet är oftast en bakgrund som inte är ren svart och text som inte är ren vit.
Hantera typsnitt
Teckensnitt spelar en stor roll i design och bör definitivt beaktas med tankeväckande överväganden med mörka layouter. Bilden nedan visar en 14-punkts teckensnitt på en mörk bakgrund i både serif och sans-serif-teckensnitt.
Sans-serif-teckensnittet är uppenbarligen mer läsligt . Men många designers väljer fortfarande serif typsnitt för sin elegans.
Tricket är dock att bara lägga större text i serif typsnitt, så att det extra vita utrymmet översvämningar runt varje tecken och gör texten mycket läsbar.
Skärmbilden nedan är en webbplats som diskuterats tidigare i den här artikeln. Den har både serif och sans-serif-teckensnitt, men använder dem på ett smart sätt.
Större text, till exempel rubriker, navigering och rubriker, finns i en serif font för extra elegans. För bättre kontrast och förbättrad läsbarhet är kroppstexten i en ren sans-serif-typsnitt.
Använd minimala färgscheman
För att ge sina mörka mönster ett rent och snyggt utseende, bör designers alltid välja minimala färgscheman .
Från några få exempel nedan kan vi se att upptagna färgscheman verkligen kommer i vägen för mörka bakgrunder, eftersom kontrasten är för skarp.
Håll dig till en eller två färger . För att lägga till mer färg, försök en mörkfärgad bakgrund.
Beviljas, många mörka webbdesigner har mer spännande färgscheman. Så denna regel bryts ofta, men bara med rätt teknik.
I allmänhet är det emellertid ofta färg som gör att en webbplats ser upp för upptagen . Eftersom mörkare webbplatser redan har djup, använd färg med försiktighet.
Erbjuder en Style Switcher
Medan vi har många bra metoder till vårt förfogande för att göra mörka webbdesign mer tilltalande, kommer ingen ansträngning att tillgodose varje användare.
Var noga med att inkludera en stilomkopplare så att användarna slutligen har möjlighet att visa mörk text på en ljus bakgrund.
Två stilark krävs för detta, en för standard mörk layout och en för alternativ ljuslayout.
SitePoint har en utmärkt handledning om detta: Bygg en Simple Style Switcher i CSS . Istället för att använda "orange", "blå" och "vit" versioner i handledningen, använd bara "ljus" och "mörka" stilark.
När Dark Web Design fungerar bäst
Som sagt, tror en stor del av webanvändarna att en mörk webbdesign kan fungera för vissa typer av webbplatser. Men studien är vag på vad exakt dessa typer är.
Generellt sett fungerar mörkret bäst för kreativa eller eleganta mönster . För moderna snygga webbplatser, ger mörka bakgrunder elegans. För grungy eller handritade stilar förbättrar mörka bakgrunder kreativiteten i layouten.
Elegant mörk design
Mörk kan vara djup, auktoritativ och stark, och ser ofta elegant ut när den används på rätt sätt. Här är några exempel och några tekniker för att föra ut elegansen i en mörk design.
Webbplatsen för Larissa Meek har ett enkelt årgångsmönster i bakgrunden och ställer in en elegant ton. Andra snyggare funktioner lägger till en personlig prägel på designen.
Denna teknik kan användas för många typer av webbplatser. Tappning eller klassiska mönster och texturer kan skapa en look som är både elegant och åldersanpassad .
De flesta av oss ansluter vintagemönster med hög klass, så det är enkelt att skapa en högklassig webbplats på detta sätt.
Djup kärna har en mycket ren design, med en mörk bakgrund som lägger till stil och klass. En känsla av auktoritet är också uppenbart i designen. Denna elegans kan också göra en designers portföljarbete verkar mer värdefullt som ett resultat.
Observera att denna design inte har någon textur eller annan bild än portföljstyckena och logotypen. Annars skulle designen ha varit alltför upptagen; som det är innehållet knyts samman bra.
En bra process att följa är att lägga till väsentligt innehåll först och sedan ta in designelement efter behov . Designern kan sedan pausa och reflektera när varje nytt element läggs till, se till att layouten inte är överdriven.
Precis som konstverk kan verka mer värdefullt i en elegant design, så kan produkterna. En mörk och snygg design, som Tapbots och så många andra, hjälper till att visa upp den produkt som säljs.
Konstruktionen speglar själva apparaten , med dess gradienter och ljuseffekter. vissa mönster mimar även konsistensen av sina högteknologiska produkter.
Creative Dark Design
Utöver precis som elegant, kan mörka webbdesigner också framkalla mer känslomässiga svar än vanliga ljusdesigner, vilket gör dem ideala för kreativa projekt. Låt oss titta på några exempel på de olika kreativa mönster som är möjliga.
De webbplats nedan har mycket lite innehåll men har en unik layout och mörka färger för djup. Mörka bakgrunder är perfekta för webbplatser med mycket lite innehåll .
Och eftersom de behöver mer vitt utrymme, har designern mer utrymme att arbeta med.
Grunge webbdesign kommer i många former, och eftersom grunge är "mörk och smutsig" är mörka bakgrunder en av dessa former.
Mörk grunge mönster som Trozo verkar bryta alla regler: Upptagen texturer, trångt layout och ett brett utbud av färger. Och ändå fungerar den här webbplatsen fortfarande. Hur är det mojligt?
Med så många röriga element att arbeta med kan grunge design vara knepigt för nybörjare. Vad som gör att detta fungerar är dess organisation .
Bakgrunden har tydligt utarbetade block som leder användarens öga och hjälper dela innehållet till hanterbara sektioner.
För det andra har det massor av vitt utrymme . Bakgrunden kan vara texturerad, men det upprepade mönstret ses av användaren som ett vitt utrymme, vilket bidrar till att lätta på designen.
Detta vita utrymme är mest synligt till vänster om logotypen, under navigeringen och längs höger sida.
Även mellan "Utställning 01" och "Utställning 02" är mer vitt utrymme än man brukar hitta på en webbplats som denna.
Det vita utrymmet gör saker ut, även om det inte ser ut som vitt utrymme eftersom det har textur . Den minsta texten och få sektioner (endast tre) bidrar också till detta utseende av enkelhet.
Utformningen av Drew Wilson bryter definitivt regeln om att använda minimal färg. Det fungerar dock ändå, eftersom den ljust färgade rubriken är en av de få funktionerna i denna glesa design, så ingenting överkänner det.
Och den mörka bakgrunden gör rubriken ännu ljusare och mer extraordinär.
Mörka bakgrunder används ofta för att göra ljuseffekter och ljusa färger står ut mer .
Sådana mönster är ett underbart kreativt undantag till regeln med minimal färg. Men regeln bör brytas med försiktighet: Undvik distraherande gradienter, texturer och färg längre ner på sidan.
Avslutar
Mörka bakgrunder ger en elegant och kreativ känsla för webbdesign, vilket gör dem perfekta för vissa portföljer, men de är inte lämpliga för alla webbplatser.
För större webbplatser, särskilt de för personer med nedsatt syn och andra funktionshinder, är mörka mönster en no-no, även med en stilomkopplare.
Förhoppningsvis när tiden kommer att du behöver designa en webbplats med en mörk bakgrund, kommer dessa tips och strategier att hjälpa till.
Skriven uteslutande för WDD av Kayla Knight .
Det finns många fler tekniker och strategier för att förbättra mörka webbdesigner, så snälla dela dem som du har hämtat i kommentarfältet nedan.