De do's en don'ts van Dark Web Design
Donkere webontwerpen zijn erg populair en kunnen een elegante en creatieve aantrekkingskracht hebben.
Ze zijn ook perfect voor veel soorten werk van klanten, maar ze zijn niet geschikt voor elke website en mogen alleen worden gebruikt wanneer dat nodig is.
Ondanks de opvallende visuele impact die deze donkere ontwerpen kunnen hebben, weten veel ontwerpers niet hoe ze er effectief uit moeten halen zonder de bezoeker uit te schakelen.
Met een donker ontwerp komt minder leesbaarheid , minder aantrekkingskracht voor de meeste lezers en minder kans voor conventionele ontwerpelementen.
In deze post bespreken we enkele tips om uw volgende donkere websiteontwerp aantrekkelijk te maken voor een breder publiek , terwijl u, de ontwerper, uw creativiteit tot uitdrukking kunt brengen.
EEN recente enquete suggereert dat lichte ontwerpen de voorkeur hebben van het algemene webpubliek met maar liefst 47%. De belangrijkste reden is leesbaarheid . De meeste mensen houden er niet van om lichte tekst tegen een donkere achtergrond op websites te bekijken, omdat het hun ogen spant, wat zorgt voor een veel minder aangename ervaring.
Daarentegen zei 10% van de ondervraagden dat zij altijd de voorkeur gaven aan donkere achtergronden voor websites, terwijl nog eens 36% zei dat de beste keuze afhankelijk zou zijn van het type website.
Dus, wat is het juiste antwoord? Als het erop aankomt, heeft iedereen zijn eigen mening, en dat is dat.
Maar met zo'n groot percentage gebruikers dat donkere websiteontwerpen aanvaardbaar zijn en soms zelfs de voorkeur hebben, moeten we als webontwerpers leren hoe we effectieve donkere ontwerpen kunnen maken voor onszelf en onze klanten.
Dit betekent dat we alle echte gelovigen van lichte achtergronden overtuigen dat donker ontwerp leesbaarder en gebruiksvriendelijker kan zijn.
Gebruik meer witte ruimte
Of zou het "zwarte ruimte" moeten worden genoemd? Effectief gebruik van witruimte is belangrijk voor elk type ontwerp, maar is essentieel voor websites met een donkere achtergrond.
Donkere ontwerpen hebben de neiging om zich "zwaar" te voelen , en als ze worden opgeborgen, kan dat gevoel worden versterkt. Bekijk hieronder enkele populaire donkere webontwerpen en merk hun liberale gebruik van witte ruimte op met groot effect.
Black Estate wordt overal op internet gezien in donkere webdesign-vitrines. Het is inderdaad een mooi ontwerp en verdient alle aandacht. In het ontwerp wordt veel witte ruimte gebruikt en wat dit specifieke ontwerp uniek maakt, is hoe de witte ruimte wordt gebruikt om bepaalde elementen zo efficiënt te schetsen.
Het logo heeft veel witte ruimte eromheen en is het eerste dat we als bezoekers zien. We zien de hoofdinhoud en fles hiernaast. Zoals u ziet, wordt witte ruimte perfect gebruikt om de tekst op de fles en de kop van de hoofdinhoud te markeren.
De aanbevolen inhoud in Tictoc en de bijbehorende afbeelding in dit ontwerp zijn omlijst met de meest witte ruimte. Naarmate we naar beneden gaan, zien we minder witte ruimte, waardoor we letten op de inhoud die wordt weergegeven.
Het punt hier is dat de witte ruimte de gebruiker geleidelijk naar het einde van de pagina leidt .
De donkere achtergrond voegt diepte toe aan het ontwerp. Omdat de website zo afhankelijk is van witte ruimte, zou het minder interessant zijn zonder het creatieve effect van de donkere achtergrond.
De Mark Dearman website heeft liberale en gelijkmatig verdeelde witte ruimte door zijn lay-out.
De witte ruimte die elk portfoliostuk vormt, biedt voldoende ademruimte voor de inhoud die het bevat, en het is een mooi rustpunt voordat je verdergaat naar het volgende stuk.
Veel witte ruimte is essentieel voor donkere ontwerpen, omdat het niet alleen helpt bij het oplossen van de lay-out, maar ook bij het inlijsten van belangrijke elementen en het toevoegen van elegantie aan de algehele look.
Tekstuele witte ruimte
Omdat leesbaarheid de belangrijkste zorg is van diegenen die een hekel hebben aan een donkere achtergrond, moeten ontwerpers extra aandacht besteden aan de tekst zelf.
Net als in het algemene ontwerp, is een manier om de leesbaarheid op donkere websites te verbeteren, het vergroten van de witruimte door het aanpassen van alinealaat, kerning en leading .
Het onderstaande voorbeeld laat zien wat een verschil de spatiëring tussen en rond tekens is bij het vergelijken van donkere en lichte lay-outs.
Een andere manier om de leesbaarheid in donkere webontwerpen te verbeteren, is het vergroten van de tekengrootte . Zoals de meeste andere regels in dit bericht betekent een grotere lettergrootte meer witruimte. Hoe groter de letters, des te meer witruimte er rond en binnen elke letter zal verschijnen.
De letter "a" hieronder krijgt bijvoorbeeld meer witruimte naarmate deze groter wordt, zowel in het gebied eromheen als in de ruimte binnen de behuizing van de a en onder de overhang.
Merk op hoe het lezen van kleine tekst zoveel gemakkelijker is op een lichte achtergrond dan op een donkere achtergrond. Let bij het instellen van de typografie voor een nieuwe website op een aantal dummy-tekst om te zorgen dat deze goed leesbaar is . Zo niet, kijk dan of het vergroten van de tekstgrootte helpt.
Tekstcontrast
Veel mensen zijn het erover eens dat de slechtst bedachte donkere websites oogvermoeidheid veroorzaken. Te veel of te weinig contrast is meestal de boosdoener. Hoe vind je de perfecte balans?
Als je in een kamer bent die pikzwart is, is plotseling kijken in het licht niet prettig. Maar kijken naar een minder helder licht in een minder donkere kamer is prima. Hetzelfde principe is van toepassing op webdesign.
Het vinden van het perfecte contrast betekent het balanceren van de duisternis van de achtergrond met de lichtheid van de tekst .
Hieronder staat een (zeer) ruwe handleiding die laat zien hoe contrast tussen tekst en achtergrond werkt. Je merkt dat als de achtergrond lichter wordt, ook de tekst.
Het vinden van een aangenaam contrast voor tekst is veel moeilijker met een puur zwarte achtergrond.
Om de perfecte balans te vinden, experimenteer met verschillende tinten. Het beste resultaat is meestal een achtergrond die niet puur zwart is en tekst die niet puur wit is.
Omgaan met lettertypen
Lettertypen spelen een grote rol in het ontwerp en moeten zeker worden overwogen met donkere lay-outs. De afbeelding hieronder toont een lettertype van 14 punten op een donkere achtergrond in zowel schreef- als schreefloze lettertypen.
Het schreefloze lettertype is duidelijk leesbaarder . Maar veel ontwerpers kiezen nog steeds serif-lettertypen vanwege hun elegantie.
De truc is echter om alleen grotere tekst in serif-lettertypen te plaatsen, zodat de extra witte ruimte rond elk teken vloeit en de tekst goed leesbaar maakt.
De onderstaande schermafbeelding is van een website die eerder in dit artikel is besproken. Het bevat zowel schreefloze als schreefloze lettertypen, maar gebruikt ze op een slimme manier.
Grotere tekst, zoals koppen, navigatie en kopteksten, is in een serif-lettertype voor extra elegantie. Voor een beter contrast en verbeterde leesbaarheid bevindt de hoofdtekst zich in een schoon schreefloos lettertype.
Gebruik Minimale kleurenschema's
Om hun donkere ontwerpen een strakke en overzichtelijke uitstraling te geven, moeten ontwerpers altijd kiezen voor minimale kleurenschema's .
Uit de paar voorbeelden hieronder zien we dat drukke kleurenschema's donkere achtergronden echt in de weg zitten, omdat het contrast te scherp is.
Blijf bij een of twee kleuren . Probeer een donkere achtergrond om meer kleuren toe te voegen.
Toegegeven, veel donkere webontwerpen hebben meer opwindende kleurenschema's. Dus deze regel is vaak gebroken, maar alleen met de juiste technieken.
Over het algemeen is kleur echter vaak de oorzaak van een te drukke website . Omdat donkere websites al diepgang hebben, moet u de kleur voorzichtig gebruiken.
Bied een Style Switcher aan
Hoewel we veel goede werkwijzen tot onze beschikking hebben om donkere webontwerpen aantrekkelijker te maken, zal geen enkele inspanning aan elke gebruiker voldoen.
Zorg ervoor dat u een schakelaar voor stijl invoegt , zodat gebruikers uiteindelijk de optie hebben om donkere tekst op een lichte achtergrond te bekijken.
Daarvoor zijn twee stylesheets nodig, een voor de standaard donkere lay-out en een voor de alternatieve lay-out van het licht.
SitePoint heeft hier een uitstekende tutorial over: Bouw een Simple Style Switcher in CSS . Gebruik in plaats daarvan de 'oranje', 'blauwe' en 'witte' versies in de zelfstudie. Gebruik hiervoor de bladen 'light' en 'dark'.
Wanneer Dark Web Design het beste werkt
Zoals gezegd, denkt een groot deel van de internetgebruikers dat een donker webontwerp zou kunnen werken voor bepaalde soorten websites. Maar de studie is vaag over wat deze soorten precies zijn.
Over het algemeen werkt donker het beste voor creatieve of elegante ontwerpen . Voor moderne slanke websites voegen donkere achtergronden elegantie toe. Voor grungy of handgetekende stijlen verbeteren donkere achtergronden de creativiteit van de lay-out.
Elegant donker ontwerp
Donker kan diep zijn, gezaghebbend en sterk en ziet er vaak elegant uit als het op de juiste manier wordt gebruikt. Hier zijn een paar voorbeelden en enkele technieken om de elegantie in een donker ontwerp naar voren te brengen.
De website voor Larissa Meek heeft een eenvoudig patroon in vintage-stijl op de achtergrond, een elegante toonzetting. Andere opvallende kenmerken voegen een persoonlijk tintje toe aan het ontwerp.
Deze techniek kan voor vele soorten websites worden gebruikt. Vintage of klassieke patronen en texturen kunnen een elegante en tijdgeschikte look creëren .
De meesten van ons associëren vintage patronen met een hoge klasse, dus het is gemakkelijk om een hoogwaardige website te maken.
Dieptekern heeft een zeer schoon ontwerp, met een donkere achtergrond die stijl en klasse toevoegt. Een gevoel van autoriteit is ook duidelijk in het ontwerp. Deze elegantie kan er ook voor zorgen dat het portfoliowerk van een ontwerper waardevoller wordt.
Merk op dat dit ontwerp geen andere textuur of afbeeldingen heeft dan de portfoliostukken en het logo. Anders zou het ontwerp veel te druk zijn geweest; zoals het is, is de inhoud goed samengevoegd.
Een goed proces om te volgen is om eerst essentiële inhoud toe te voegen en vervolgens indien nodig ontwerpelementen in te brengen . De ontwerper kan dan pauzeren en reflecteren wanneer elk nieuw element wordt toegevoegd, zodat de lay-out niet overbelast wordt.
Net zoals kunst waardevoller in een elegant ontwerp kan lijken, net als producten. Een donker en strak ontwerp, zoals Tapbots en zoveel anderen, helpt bij het laten zien van het product dat wordt verkocht.
Het ontwerp weerspiegelt het apparaat zelf , met zijn gradiënten en lichteffecten; sommige ontwerpen bootsen zelfs de textuur van hun high-tech producten na.
Creatief donker ontwerp
Naast het verschijnen van elegante, donkere websiteontwerpen kunnen ze ook meer emotionele reacties oproepen dan standaard lichtontwerpen, waardoor ze ideaal zijn voor creatieve projecten. Laten we eens kijken naar enkele voorbeelden van de soorten creatieve ontwerpen die mogelijk zijn.
De plaats hieronder heeft heel weinig inhoud maar heeft een unieke lay-out en donkere kleuren voor diepte. Donkere achtergronden zijn perfect voor websites met zeer weinig inhoud .
En omdat ze meer witruimte nodig hebben, heeft de ontwerper meer ruimte om mee te werken.
Grunge webdesign komt in vele vormen en omdat grunge 'donker en vies' is, zijn donkere achtergronden een van die vormen.
Donkere grunge-ontwerpen zoals Trozo lijken alle regels te overtreden: drukke texturen, drukke lay-out en een breed scala aan kleuren. En toch werkt deze website nog steeds. Hoe is dat mogelijk?
Met zoveel rommelige elementen om mee te werken, kan grunge-ontwerp lastig zijn voor beginners. Wat dit werk doet, is de organisatie ervan .
De achtergrond heeft duidelijk afgebakende blokken die het oog van de gebruiker leiden en helpen de inhoud te verdelen in hanteerbare secties.
Ten tweede heeft het een hoop witte ruimte . De achtergrond kan getextureerd zijn, maar het herhaalde patroon wordt door de gebruiker gezien als witte ruimte, waardoor het ontwerp lichter wordt.
Deze witte ruimte is het duidelijkst links van het logo, onder de navigatie en aan de rechterkant.
Zelfs tussen "Expositie 01" en "Expositie 02" is meer witruimte dan men gewoonlijk op een dergelijke website zou vinden.
De witte ruimte egaliseert dingen, ook al lijkt het niet op witte ruimte omdat het textuur heeft . De minimale tekst en enkele secties (slechts drie) dragen ook bij aan deze eenvoud.
Het ontwerp van Drew Wilson breekt zeker de regel van het gebruik van minimale kleur. Het werkt echter nog steeds, omdat de felgekleurde kopbal een van de weinige functies in dit schaarse ontwerp is, dus niets overdoet het.
En de donkere achtergrond doet de kop er zelfs feller en buitengewoon uitzien.
Donkere achtergronden worden vaak gebruikt om lichteffecten te maken en felle kleuren vallen meer op .
Dergelijke ontwerpen zijn een prachtig creatieve uitzondering op de regel van minimale kleur. Maar de regel moet met de nodige voorzichtigheid worden geschonden: vermijd afleidende hellingen, texturen en kleuren verderop in de pagina.
Afsluiten
Donkere achtergronden geven een elegant en creatief gevoel aan webontwerpen, waardoor ze perfect zijn voor sommige portfolio's, maar ze zijn niet geschikt voor elke site.
Voor grotere websites, vooral voor mensen met een visuele beperking en andere handicaps, zijn donkere ontwerpen een niet-nee, zelfs met een stijlwisselaar.
Hopelijk als het tijd is om een website met een donkere achtergrond te ontwerpen, helpen deze tips en strategieën.
Exclusief geschreven voor WDD door Kayla Knight .
Er zijn veel meer technieken en strategieën voor het verbeteren van donkere webontwerpen, dus deel degene die je hebt opgepikt in de comments hieronder.