The Dos and Don’ts of Dark Web Design

Dark web designs are very popular and can have an elegant and creative appeal.

They are also perfect for many types of client work however, they are not suitable for every website and should be used only when appropriate.

In spite of the striking visual impact that these dark designs can have, many designers don’t know how to effectively pull them off without turning off the visitor.

With a dark design comes less readability, less appeal for most readers and less opportunity for conventional design elements.

In this post, we’ll discuss a few tips to make your next dark website design appeal to a broader audience, while letting you, the designer, express your creativity.

A recent poll suggests that light designs are preferred by the general web-going audience by a whopping 47%. The main reason is readability. Most people don’t like viewing light text against a dark background on websites because it strains their eyes, making for a much less enjoyable experience.

By contrast, 10% of those surveyed said that they always preferred dark backgrounds for websites, while another 36% said that the best choice would depend on the type of website.

So, what’s the right answer? When it comes down to it, everyone has their own opinion, and that’s that.

But with such a large percentage of users saying that dark website designs are tolerable and sometimes even preferred, we as web designers have to learn how to create effective dark designs for ourselves and our clients.

This means convincing all of the true believers of light backgrounds that dark design can be more readable and user-friendly.

 

Use More White Space

Or should it be called “black space”? Effective use of white space is important for any type of design, but it is essential for websites with dark backgrounds.

Dark designs have a tendency to feel “heavy”, and cluttering them up can reinforce that feeling. Take a look at some popular dark web designs below, and note their liberal use of white space to great effect.

Black Estate is seen all over the Internet in dark web design showcases. It is indeed a beautiful design and worthy of all the attention. A great deal of white space is used throughout the design, and what makes this particular design unique is how the white space is used to outline certain elements so efficiently.

The logo has a lot of white space around it and is the first thing we see as visitors. We see the main content and bottle on the right next. As you see, white space is used perfectly to highlight the text on the bottle and the headline of the main content.

BlackEstate

 

The featured content in Tictoc and accompanying image in this design are framed with the most white space. As we move down, we see less white space, which makes us pay attention to the content being shown.

The point here is that white space gradually guides the user down to the end of the page.

The dark background adds depth to the design. Because the website relies so heavily on white space, it would be less interesting without the creative effect of the dark background.

TicToc

 

The Mark Dearman website has liberal and evenly distributed white space throughout its layout.

The white space framing each portfolio piece provides plenty of breathing room for the content it holds, and it is a nice resting point before moving on to the next piece.

Plenty of white space is essential to dark designs because it aids not only in de-cluttering the layout but in framing important elements and adding elegance to the overall look.

MarkDearman

 

Textual White Space

Because readability is the number one concern of those who dislike dark backgrounds, designers must pay extra close attention to the text itself.

Just as in the overall design, one way to improve readability on dark websites is to increase the white space by adjusting paragraph size, kerning and leading.

The example below shows what a difference the spacing between and around characters makes in comparing dark and light layouts.

Text White Space

 

Another way to improve readability in dark web designs is to increase the font size. Like most of the other rules in this post, larger font sizes mean more white space. The bigger the letters are, the more white space will appear around and within each letter.

For example, the letter “a” below gets more white space as it gets larger, both in the area around it and in the space inside the a’s enclosure and under the overhang.

Note how reading small text is so much easier on a light background than on a dark one. When setting the typography for a new website, be sure to look at some dummy text to make sure it is legible. If not, see if increasing the text size helps.

Text Size Matters

 

Text Contrast

Many people would agree that the most poorly conceived dark websites cause eye-strain. Too much or too little contrast is usually the culprit. How does one find the perfect balance?

If you are in a room that is pitch black, suddenly looking directly into light is not pleasant. But looking at a less bright light in a less dark room is just fine. The same principle applies to web design.

Finding the perfect contrast means balancing the darkness of the background with the lightness of the text.

Below is a (very) rough guide that shows how contrast between text and background works. One notices that as the background gets lighter, so does the text.

Finding a pleasant contrast for text is much more difficult with a pure black background.

To find the perfect balance, experiment with different shades. The best result is usually a background that isn’t pure black and text that isn’t pure white.

Text Contrast

 

Dealing with Fonts

Fonts plays a big role in design and should definitely be taken into thoughtful consideration with dark layouts. The image below shows a 14 point font on a dark background in both serif and sans-serif fonts.

The sans-serif font is obviously more legible. But many designers still choose serif fonts for their elegance.

The trick, though, is to put only larger text in serif fonts, so that the extra white space floods around each character and makes the text very legible.

Font Choice

 

The screenshot below is of a website discussed earlier in this article. It features both serif and sans-serif fonts, but uses them in a smart way.

Larger text, such as headlines, navigation and headers, is in a serif font for added elegance. For better contrast and improved readability, the body text is in a clean sans-serif font.

Serif and Sans-serif

 

Use Minimal Color Schemes

To give their dark designs a clean and uncluttered look, designers should always opt for minimal color schemes.

From the few examples below, we can see that busy color schemes really get in the way of dark backgrounds, because the contrast is too sharp.

Stick to one or two colors. To add more color, try a dark-colored background.

Color

 

Granted, many dark web designs have more exciting color schemes. So this rule is often broken, but only with the right techniques.

In general, though, color is often what makes a website look too busy. Because darker websites already have depth, use color with caution.

 

Offer a Style Switcher

While we have many good practices at our disposal to make dark web designs more appealing, no amount of effort will satisfy every user.

Be sure to include a style switcher, so that users ultimately have the option of viewing dark text on a light background.

Two style sheets are required for this, one for the default dark layout, and one for the alternative light layout.

SitePoint has an excellent tutorial on this: Build a Simple Style Switcher in CSS. Instead of using the “orange,” “blue” and “white” versions in the tutorial, just use “light” and “dark” style sheets.

 

When Dark Web Design Works Best

As stated, a large proportion of web users believe that a dark web design could work for certain types of websites. But the study is vague on what exactly these types are.

Generally speaking, dark works best for creative or elegant designs. For modern sleek websites, dark backgrounds add elegance. For grungy or hand-drawn styles, dark backgrounds enhance the creativity of the layout.

 

Elegant Dark Design

Dark can be deep, authoritative and strong, and often looks elegant when used appropriately. Here are a few examples and some techniques for bringing out the elegance in a dark design.

The website for Larissa Meek has a simple vintage-style pattern in the background, setting an elegant tone. Other quirkier features add a personal touch to the design.

This technique can be used for many kinds of websites. Vintage or classic patterns and textures can create a look that is both elegant and age-appropriate.

Most of us associate vintage patterns with high class, so creating a high-class website in this way is easy.

Larissa Meek

 

Depth Core has a very clean design, with a dark background that adds style and class. A sense of authority is also evident in the design. This elegance may also make a designer’s portfolio work appear more valuable as a result.

Note that this design has no texture or images other than the portfolio pieces and logo. Otherwise, the design would have been far too busy; as it is, the content is knit together well.

A good process to follow is to add essential content first and then bring in design elements as needed. The designer can then pause and reflect as each new element is added, making sure the layout is not being over-powered.

Depth Core

 

Just as artwork can appear more valuable in an elegant design, so can products. A dark and sleek design, like Tapbots and so many others, helps showcase the product being sold.

The design reflects the device itself, with its gradients and lighting effects; some designs even mimic the texture of their high-tech products.

Tapbots

 

Creative Dark Design

Beyond just appearing elegant, dark website designs can also elicit more emotional responses than standard light designs, making them ideal for creative projects. Let’s look at some examples of the kinds of creative designs that are possible.

The site below has very little content but has a unique layout and dark colors for depth. Dark backgrounds are perfect for websites with very little content.

And because they require more white space, the designer has more room to work with.

Inca

 

Grunge web design comes in many forms, and because grunge is “dark and dirty,” dark backgrounds are one of those forms.

Dark grunge designs like Trozo seem to break all the rules: busy textures, crowded layout and a wide range of colors. And yet this website still works. How is that possible?

With so many messy elements to work with, grunge design can be tricky for beginners. What makes this one work is its organization.

The background has clearly laid-out blocks that guide the user’s eye and help divide the content into manageable sections.

Secondly, it has a ton of white space. The background may be textured, but the repeated pattern is seen by the user as white space, helping to lighten the design.

This white space is most apparent to the left of the logo, under the navigation and along the right side.

Even between “Exhibit 01″ and “Exhibit 02″ is more white space than one would usually find on a website like this.

The white space evens things out, even though it doesn’t look like white space because it has texture. The minimal text and few sections (only three) also contribute to this appearance of simplicity.

Trozo

 

The design of Drew Wilson definitely breaks the rule of using minimal color. It still works, though, because the brightly colored header is one of the few features in this sparse design, so nothing over-powers it.

And the dark background makes the header appear even brighter and more extraordinary.

Dark backgrounds are often used to make lighting effects and bright colors stand out more.

Such designs are a wonderfully creative exception to the rule of minimal color. But the rule should be broken with caution: avoid distracting gradients, textures and color further down the page.

Drew Wilson

 

Wrapping Up

Dark backgrounds give an elegant and creative feel to web designs, making them perfect for some portfolios, but they’re not suitable for every site.

For larger websites, especially ones for people with visions impairment and other disabilities, dark designs are a no-no, even with a style switcher.

Hopefully when the time comes that you need to design a website with a dark background, these tips and strategies will help.

 

Written exclusively for WDD by Kayla Knight.

There are many more techniques and strategies for improving dark web designs, so please share the ones you’ve picked up in the comments section below.

 

0 shares
  • http://www.orphicpixel.com Mars

    this is a very good point to consider

  • http://ffffffive.com Henry

    Awesome post! Great advice for design dark websites. Sometimes designers overlook these tips.

  • http://www.pbvisuals.com Senthil

    Wonderful Article and very useful Information…

    Thanks for Sharing

    PCP

  • http://zachkrasner.com/ Zach Krasner

    Very awesome! Great article…. will definitely keep in mind!

  • http://www.trishacupra.com/ Trisha Cupra

    There’s another alternative. You can have a dark design with the background, the header and the footer but still have a light background behind the main text area.

  • http://ethanlane.posterous.com Ethan

    This is a great post! Loved the info. Much better than simply showing 10 more websites to look at and forget about…

    • http://simon.vansintjan.org Simon Vansintjan

      I’m in complete agreement with this statement. There are so many lists out there that just cover ’10 great looking websites’. This is essentially the same, but you take something away with you.

      I’m sure someone already posted ‘ten dark websites’ somewhere, but with a round up like this, and with the explanations Ms. Knight gives, this post is really useful.

  • http://galaxydesign.com.au Sam Frysteen

    great article, plenty of things there that would not of even crossed my mind. Thanks.

  • http://tomleo.com Tom

    I am surprised at how many people prefer light websites over dark websites. I personally prefer dark websites. Also when I am programming I usually choose to work with a dark color school like wombat.

  • http://www.themedium.co.za SteHan

    Really a helpful post – thanks! No longer in the dark about these things… ;-) [cringe!]
    S+

  • http://www.ripplenet.co.uk Tim Read

    Good post! I think I need to tweak my own site now! Its always very difficult to balance having a lot of content, with the dark background. You want to spread the text out, but also you don’t want to make people scroll down too far…

  • http://www.enablingbiz.com Devendra

    I personally use light, clean, minimal designs as far as possible but sites pertaining to certain products or services do justify the need for a dark background. I am doing one such site on home furnishings now, where a dark background would really make the images look much more appealing. This article will be of much use.

    Thanks.

  • http://www.blog.exxcorpio.com Luis Lopez

    Excellent tips really useful and I think Withe space and typography are some of the most important.

  • Phil

    There are some great examples of dark websites over at siteInspire:

    http://siteinspire.net/showcase/category/style/dark

  • Adriaan van Marle

    It’s interesting that the common belief is that white text on a black background (WOB) is harder to read – in my opinion it is the same as black on white (BOW). Articles published about this are usually a matter of opinion, from either the author or the test subjects.

    I believe the issue is with the reader’s expectation of foreground and background colour. Most text (print or web) is BOW, and therefore we are conditioned to expect that. Therefore, readability is initially diminished when reading WOB, but the reader’s perception adjusts in a short time.

    After reading some of the ‘dark’ websites for a while, I noticed it took me a moment to adjust back to reading ‘light’ websites again.

    Designers should also note that the legibility of WOB and BOW text is affected by environmental light conditions – http://colorusage.arc.nasa.gov/luminance_cont.php – although it is hard to predict the conditions in which a website will be viewed, particularly with the increase in usage of mobile devices.

    Anyone with any thoughts on this?

    • Dan

      Yes, i’ve always wondered that myself. For non-light emitting systems (aka paper) white on black is obviously bad, because the black parts swallow all the light. Only the little white areas of text reflect any light, and it can get worse if the printing was bad and the black bleeds into the white text.

      So far so good.

      But on light emitting systems (aka monitors) i think white on black is actually better to read. The area containing the information (the text) is the brightest of all. So your eyes don’t have to shut out blinding big white areas to focus on the black text, but can easily adjust on what’s important -> the white text on the black background. The human eye can also distinguish more details in dark areas for the exact same reason – again IF there is no big, bright area nearby.

      That, and the high contrast color setting in Windows is WOB. :p

  • http://www.vickynimbalkar.com Vicky Nimbalkar

    That was awesome.

    I was recently planning to give a new dark touch to my portfolio website. Your article is like a bonus for me.

    Keep up the good work.

    Vicky Nimbalkar

  • http://www.toputop.com kiran voleti

    Awesome post…useful points indeed…Thank you.

  • http://www.justinslack.com Justin Slack

    A very useful post. I’ve been working on a dark design and this has given me a few more things to consider.

  • http://www.twitter.com/lakey Chris Lake

    Another staggeringly good walk through. I personally think that text-heavy websites should avoid white on black as the default option… but dark backgrounds can work well for some retailers, portfolio sites, image-rich sites, etc.

  • http://www.bickov.com Alexander Bickov

    Nice and clear designs

  • http://www.designstudio16.com Saruabh Shah

    very nice post …

  • http://www.alx21creations.com alx21creations

    very nice post, full of colors n ideas! thanks

  • http://www.elmastudio.de Manuel

    thx , awsome tipps, i am working on layout right now, maybe shold do it in dark. Very good inspiration.

  • http://www.nazcarpine.com nazcar

    I prefer dark website designs and I like experimenting on color blending. Thanks for the good points.

  • http://www.rezpls.com Murray

    Very insightful.

    I enjoy dark websites over light sites just because I’m usually in a dimly lit room, and the combination of color makes the site really pop out sometimes.

    (Sometimes I use Google as a quick light, so bright)

  • http://marcushill.com/websites Marcus

    I usually decide on whether a dark website will work by thinking of the balance between visual and textual content. If it’s more visual than textual (i.e. a photography portfolio) then a dark background can be more relevant and make the images stand out better.

    As Trisha says, another way to present text on a dark site is to use a light background behind the text areas. This can work well with a semi-opaque white background over a dark, textured background.

  • http://www.egracecreative.com Brandon Cox

    Great post – dark sites get a bad wrap quite often, but the tips you offer lead to the kind of design that looks really great!

  • Bilge

    You don’t understand what whitespace is. In the article, you are just referring to spacing of elements, so refer to it as such. Whitespace is something else. Look it up.

  • wuss

    A dark overlay or grid can also be applied over full screen pictures to give a dark feel.
    Here is an example: http://soundphuket.com/

  • http://www.newbiewebsitedesign.com David – Newbie Website Design

    Excellent article!

    I really liked how you went into detail on how to make light text on a dark background easier on the eyes and more legible.

    I often give the advice to beginners of website design to avoid this combination. Not so much that it’s bad. It’s just that it needs to be done right. And many beginners to website design don’t have the experience to pull it off just yet. In time, they will acquire the design skills to make dark websites look great and easy to read… and this post is a great lesson that all can learn from!

    Thanks,
    David

  • http://gomobile.com.ar/ Zim

    Very nice article…

  • http://frilenzfactory.com not2comply

    very educative… thanx for sharing. gotta bookmarked this one ;)

  • http://www.littledogdg.com/ Mike

    Thanks for the refresher; great article!

  • http://webitect.net Kayla

    Thanks for all the comments everyone! Feel free to share anything I might have missed as well, like Trisha did –Thanks Trisha!

  • Darkslayer

    Wow! this post suits me perfectly for my university assigment in wich i`m designig a dark website, thanks a lot, i will keep in mind the tips you presented.

  • http://marielydelrey.com/blog Mariely

    Great tips. Black works are always interesting.

  • http://www.joinprofit.blogspot.com anisa

    Wow, what a great post! I also use dark website, but never thought that dark website could be that amazing like yours. They have great sense of art and mostly suitable for art websites. I wonder, does dark website could also for formal website?

  • http://www.redesignyourbiz.com/ Web Design Mumbai

    i feel dark designs only look good for websites displaying photo galleries while websites with lots of text content should for lighter colours

  • http://paololemos.blogspot.com marcelo

    my blog is almost dark, you left me wondering … O_O

  • http://austinpassy.com The Frosty

    True ;)

    I’ve got a dark block site I just created. And I put all this into account :).

  • Liz

    Great article, and very timely… I’m in the middle of designing a dark website right now :)

  • http://www.dileepsharma.com Dileep K Sharma

    I personally feel a dark design is not as much readable and pleasant to eyes as a light one. But dark one fits well for portfolio of a photographer or just to emphasize a particular detail. But the tips here are no doubt very useful. On a lighter note, why you call it as (Use More) White Space, while everything is black ;)

    • http://www.dileepsharma.com Dileep K Sharma

      Walter, I just have a feedback here. Is it possible for you to add Edit Comments functionality similar to Smashing Mag? I just missed a word (lighter note) in my last comment. On Smashing Mag they allow us to edit comment for certain amount of time.

      • http://www.webdesignerdepot.com Walter

        Sure, i’ll look into it – in the meantime, I’ve corrected the comment.

  • http://www.empfehlenswert-wien.at erk

    nice post
    thanks

  • Adam

    Good write up and tips on the do’s and dont’s for dark websites.

  • http://www.gotmedia.org/ Steph

    WOW! Brilliant article! I too, have a dark design and I remember ditching the serifs for copy, it was just too busy.

    Thanks for this, I learned a lot!

  • http://www.filmes-de-terror.net KATIERO

    I love dark web designs, my website is dark and people always like..
    Good job here in WDD, keep the good work.

  • RoaldA

    Nice article, thanks WDD! :)

  • http://www.bendesign.eu Bendesign

    great website thank you very much. this usefull tipps are inspiring for me.

  • http://offroadinghome.blogspot.com DJ

    links broken on “textural white space”

    • http://www.webdesignerdepot.com Walter

      Where exactly do you mean?

  • http://www.aledesign.it aledesign.it

    A nice article… a good point of view! In this period I prefer use the grayscale..

  • http://naniprints.wordpress.com Nani

    Hello! Your article is a great reference for web designers. I’d like to post a link to it on my blog, “Printing Disasters–and how to avoid them.”

    I’d recently written a post on legibility and design, but didn’t touch on website designs.

    One thing that you didn’t mention is that the weight of a typeface can also make a big difference in legibility. Sometimes you can get away with smaller type if it’s bolder, as long as it’s tracked out and has generous line spacing.

    Thanks,

    -Nani
    http://naniprints.wordpress.com

  • http://twitter.com/halibuthero halibuthero

    Great post. I think dark backgrounds are my favorite to work with because of the minimal aspect of the design. It always has to be clean and elegant. Beautiful line-up!

  • http://tomleo.com Tom

    I strongly disagree with the opinion that certain color schemes should be used for certain applications (a portfolio/web gallery). IMHO the color scheme and overall design of a website reflects a designers personality and creativity, and should not be hindered by mainstream common practices.

    With that being said I think the big issue with dark websites are that, if they are not done right they can be very hard on the eyes (the same goes for light websites), so it’s not so much a question as to what color scheme you should use for a certain application but a question of how will the overall design reflect the purpose of the content or service the site provides.

  • http://www.pyemachine.com pyemachine

    Currently bout to throw myself into designing (finally) my portfolio / blog site and am leaning towards a dark design. Some really great points here.
    cheers

  • Asherd

    Books are written predominantly using black on a white background. Perhaps this is the way we all grew up and got used to reading things in this manner.

    Those who grew up reading text on magazines /comics/computers -esp computer games may view this differently.

    Thinking back though teaches used blackboards with white text (chalk) and we the students used white papers and pencil/blue/black pens.

  • http://www.technewsworld.com/story/56106.html Anthony Mitchell

    Lots of good advice above, supplemented by invitations to auto-destruct. Red fonts on black backgrounds? Blues on blues? Such design choices can quickly render a website unusable by the 10% of American men with some form of colorblindness.

    Even grey font on a white background can be painfully frustrating for many viewers.

    Simply greyscaling a draft version of a page is not going to indicate usability for colorblind people.

    Microsoft, Forrester Research, Seesmic, AIM, BulkRegister (eNom) and Meebo are big winners in the hate-your-colorblind-users prize category. Sedo also has problems. For BulkRegister it is a problem because it is an ecommerce website where major impediments have been created for the performance of simple tasks.

    Any time a web designer relies exclusively on color to transmit information — it is likely to create problems for colorblind readers. In Forrester’s case, they commonly color code their charts in such a way that the colors cannot be distinguished from each other.

    I frequently send messages to sites with usability problems. BulkRegister was kind enough to write back to say that they consider usability to be a ‘feature.’

  • http://www.edhardylife.co.uk ed hardy shirts

    i like

  • http://www.stablewebdesign.co.uk web design for hertford – ware – hoddesdon

    You have decided that the time has arrived when you need to have an internet prescence for your small business. You are fully aware that the future of advertising and gaining new clients will be internet based. The old favourites of paper based business directories, newspaper adverts and media advertising may soon be a thing of the past. We all have to move with the times if we are to continue to succeed.

  • http://www.branditsolutions.com web application development

    It is advisable to maintain your graphic sizes diminutive. When the pixel size of your graphics is too immense, your page loads slowly. Your readers might not wait that long.

  • http://twitter.com/ryanve Ryan

    Sleek post—especially the contrast section. I’ve been designing a “dark” site VirtualMusic.tv and finding the right contrast has been an issue that I’ve been debating. Right now I’ve got #333 background and #999 text. When I tried using brighter text (#aaa–#ccc) I thought it was just too bright. Do you think my site is readable, or should I go for more contrast? Thanks a lot for this post—you found some great examples.

    • http://www.nouveller.com/ Benjamin Reid

      I would say your background could be a bit darker from a design POV (point of view) but from a readability POV it’s fine. Your ‘Tags’ header on the right however is very hard to read.

  • http://www.visual-blade.com Daquan Wright

    You must not do much reading if black backgrounds with white text are better than the opposite. There’s a reason books aren’t created with reversed colors, I’d never read a book that did have a colored background anyway and websites with lots of content are better off not making that mistake. Black backgrounds I find are more suitable for smaller amounts of content and a lot of spacing.

  • http://cahcepu.com om ipit

    great tips,
    long time ago i can’t get inspire tips how to designing arround dark.
    but this tips help me so much
    thanks for share.

  • http://www.web-designmiltonkeynes.co.uk Jake

    Great article on dark web design, you see so many websites and low budget designers butchering now that’s it is easy to forget what makes it great in the first place.

  • http://www.nopun.com Noel Wiggins

    It doesn’t matter if your black or your white…

    sorry I had to say it…

    I find the percentages of who preferred white over black, I recently went through about a year of research and redesign for a major website for a client and we too like white.

    However, I was recently exposed to “blackle” and their case of dark backgrounds actually uses less energy… Once everyone gets word of going black is also going green I wouldn’t be surprised if everyone starts wanting their websites to be black.

    At which point I will be reviewing these points and topics very closely, so we can get the best user experience while going green


    Thanks & Regards
    Noel

  • http://hiddenson.graphility.com/ hiddenson

    Hey there,

    Really enjoyed this post, especially because of my small moment of glory here: for every point you stated, I had it implemented on my site. I hope you will have a look: http://hiddenson.graphility.com/

    Now, if only Internet Explorer would be kinder on my JSON calls, the world would be a better place…

  • http://www.freeiphone4me.co.uk Mandy

    This is an excellent post – thankyou. My site is dark, with white text and I have been considering changing it to the more traditional black text on whit ebackground, but would be interested in your thoughts? Does the current dark design work on my site?
    Thanks

  • Lionel

    Very nice post, very great tips.

    Merci beaucoup!

  • http://www.antonagestam.se/ Anton Agestam

    Thanks for this great article!

  • http://www.trokas.pt Helder Magalhães

    My website is also built using dark colors. Me and my friend (both programmers, not designers) have found it really difficult to achieve a somewhat decent dark layout. And we’re still struggling to make things coherent. You’ll probably not understand the website as it is in Portuguese, but in any case it’s http://www.trokas.pt.

    I guess this Post would have been excelent about 4, 5 months ago when we were still on the drawing board :)

  • http://tomleo.com Tom

    @Daquan Wright
    You logic doesn’t quite make sense to me. Books are black text on white paper, but books are a different media than a screen (hence the reasoning for different style sheets for different medias).

    If you open up a book near you the type face is most likely a Serif, so does that mean we should use Serif types for large bodies of text on a websites? I personally prefer to read large bodies of text in a serif typeface but many sites (like this one) use a sans-serif typeface and it looks very nice.

    I guess when it comes done to it, it’s more of a personal preference thing IMHO.

    • http://www.visual-blade.com Daquan Wright

      I guess, but it makes sense to me. I just like to read black text on white, whether it be screen or books, thus why I compared the two. It’s find to bring up the differences, they are two different mediums after all. I find that the better the spacing is, the more I don’t mind white text on a black background. Nice to bring up those points.

  • http://www.misty-blue.net Sarah

    Some really beautiful examples of “dark web design”. Great points to keep in mind.

  • http://b-82.daportofolio.com/ B-82

    excellent article, useful and inspiring ! I think dark backgrounds fits well mainly for portofolios; but they always have that sleek and elegant effect in any case ;)

  • http://www.webdesign-gm.co.uk Oliver Web

    Some great tips and something I should take on board when designing any dark websites. I’ve designed a few dark websites and I could have used these tips. Thanks for this post.

  • Kay Gonzalez

    Great post, i enjoyed reading it. I personally hate black backgrounds with large amounts of text. I liked the different sites you showed and the different ways of handling the dark.

  • http://atrium-nn.ru/ Andrey

    Dark is good for personal and promo sites, imho

  • Thomas Montana

    Apple uses a dark background on webpages concerning pro products to implie power. http://www.apple.com/macpro/design.html

  • http://www.underworldmagazines.com Julio A Rivera

    thanks for the details of what to do and not to do when designing a dark page website.

  • http://www.all-maroc.com/vb abdelah

    Very nice post, very great tips.

    Merci beaucoup!

  • chetan

    very nice posting bro…

    caaryy on…:(

  • http://www.ventzke-partner.de Frederik

    wonderfull websites, thx for it.

  • http://gdkey.cn Joey

    WoW, very useful article, I will read it again and again.

  • http://gdkey.cn Joey

    It worth read 10 times!

  • http://piwigo.org Pierrick Le Gall

    This is a great article, very useful. Thank you.

    We have decided to switch “Piwigo” to a dark style recently. It is photography related, so I think it just “makes sense”. Many users find the style more attractive than the old dark grey font on white background we had previously. But a part of our users don’t really like it because it has seriously reduced the readability.

    Piwigo is a photo gallery software, and I think that dark background is perfect for photography. But we have a forum, and if you don’t have a high contrast on your screen display, you just can’t read the posts :-/

    We are currently preparing a “style switcher” (as advised in this post) for the presentation website. I hope our users will appreciate :-)

  • http://www.crearedesign.co.uk Adam

    I’m going to be designing a dark website next week, this tutorial has been invaluable to me – thanks so much!

  • http://www.iconimagery.om elijah

    great article. I’m designing a website now and the client requests a black background. so this will be really useful. thanks

  • http://www.refine-led.com ben

    good article thanks

  • http://www.linksolondon.co.uk links of london

    Thank you very much!

  • http://www.linksoflondons.uk.com links of london

    Thanks for your information!

  • http://www.tiffanyfree.co.uk tiffany jewellery

    good post,I think so!

  • http://www.neoprolog.com Özgür Odabasi

    Really greate article, thank you very much.

    Is this article for an usability research? Or academic writing?
    I never seen this topic in tons of typografy books, graphic design books etc.

  • http://www.webdevtuts.net Marcell

    Great article! I love dark layouts because they seem to feel like you’re “underground” or in a dark room lol…Well thats how I feel

  • http://www.brandsimplicity.com.au Fabian

    Great article, thanks for that…it should come in handy shortly:)

  • http://radiocost.blogspot.com/ chamichaze

    very useful. thanks for posting!

  • http://jpedroribeiro.com J. Pedro Ribeiro

    Great tips on text contrast and white space, but I am not sure about the minimalistic approach on colours. In my opinion dark websites accept colours just as light ones, it’s just a matter of choosing the right colours for the theme of the project.

  • http://www.iamafreelancer.net Egypt web design

    thank you

  • http://www.egyptwebdesign.com egypt web design

    thanks for the useful information

  • http://www.moistdesigns.com Garry

    I agree with the write up ideas.I have my site which is basically in black color.I have done many experiments with it and find it good to look at.
    Many tips in the write up are very handy because the most dark point with black websites is that they become a pain to read.I have come across so many sites which I just skipped because I was having to burn my extra calories to just read what was written on that blackboard!
    I recommend all to go through this article to know the various do’s and dont’s with the dangerous BLACK :)
    Keep up the good job,you seem to be an experienced professional

  • http://letlove.be love

    just let love be

  • http://www.christianlouboutinshoesmart.com christian louboutin

    yeah ,i think so@!!

  • LM

    Thank you very much for this great article. Really learned a lot from it.

  • http://dashboardoverdrive.blogspot.com laexis

    ah, this article hits me hard, because my blog design is dark.. i’m fixing it now..

  • http://www.undo-studio.com/ Ali Suarez

    Really great post! Thanks!

  • http://www.squiders.com Web Design Maidstone

    Some great tips here, darker sites are becoming more acceptable as people move away from printing information

  • http://www.binaryhaiku.com Todd Wallace

    Working on a dark website design right now, so this came in handy.

  • http://www.thepfmall.com coach handbags

    Working on a dark website design right now, so this came in handy.

  • http://www.rvandenbussche.nl Ruben Vandenbussche

    I build myself a dark portfolio website. Would love to have some feedback.

  • http://rolling-webdesign.com Theo

    Very useful article
    thanks!!!!

  • http://www.wedgeim.com/ Calgary web design

    Good article great advice Will use for sure thanks

  • http://blog.shaihalov.ru/ Maksim Shaihalov

    darkside of darksite

  • http://n/a cyber

    I am a graphic designer and I do agree with allot of what the article says, but i have to disagree with the disadvantages of a dark website. I have been doing this for almost 10-13 yrs, i have to say my customers prefer the dark sites that i create. They say they get enough traffic through there sites and bringing in more than enough personal income excluding what the company makes. They get ppl asking them who designs there websites and I get new clients who want something dark. I also add in allot of lowbrow art to the design myself. but there is nothing wrong with a black background as long as it does not compete with the foreground nor the fonts. which i can do very well. I can see ur using simple color theory which is taught through design classes, in this case for me graphic artist. Most ppl dont have an understanding of what design is or they call themselves graphic artists and claim they can pull these types of designs off and able to get good results. But f.y.i. I have a fallowing that are into the type of art I do. They like the dark side aka lowbrow or simple terms dark art. my work is inspired by the Dada movement and is influenced by lowbrow art movement. This is where I draw in my clientele and not the mainstream crowd. I attract ppl who are into dark trance, cybertrance, ebm, which are sub genres of goth and industrial. So it is helpful to get into a niche and cater that niche, in this case its the unsettling dark art. So my web designs work all the time when using dark colors, cause of whom i am catering too.

    I am not big on mainstream, there used to be a website called f**kthemainstream.com, which did not inspire me but had the same concept as I, tho they did touch on other subjects that I stay away from.

  • http://desaindigital.com jeprie

    great tips. never tought of that.

  • http://www.ukabercrombieandfitch.com/ abercrombie online store

    Mixed Prints
    Afraid your ikat will clash with your plaids or stripes will upset your florals? Well, fear not, for this season anything goes. Mix and match your most colorful pieces and let your imagination run free.

  • http://www.abercrombieandfitchuk.com/ abercrombie and fitch outlet

    Copper Tones
    Not only did designers look to burnished bronze shades for spring, but the autumnal hue also popped up as a fun nail polish.

  • http://www.badrabble.co.uk Daz Anslow

    Excellent article! Just a beginner when it comes to web design, and as I’m just starting to rebuild a website using dark backgrounds, found the information first class! and now have an idea of where I am heading.

  • http://www.edhardyuk.net/ Ed hardy online

    Most ppl dont have an understanding of what design is or they call themselves graphic artists and claim they can pull these types of designs off and able to get good results. But f.y.i. I have a fallowing that are into the type of art I do. They like the dark side aka lowbrow or simple terms dark art.

  • http://www.138le.com/ 招聘公司

    hemselves graphic artists and claim they can pull these types of designs off and able to get good results. But f.y.i. I have a fallowing that are into the type of art I do. They like the dark side aka lowbrow or simple terms dark art.

  • http://www.ClickWebDesign.com.au Chris

    We’ve gone for a dark web design. Challenging for printer-friendly pages, but happy with the result. http://www.ClickWebDesign.com.au

  • http://www.JonReese.com Jon Reese

    http://www.Kharmik.com » Nice clean dark-designed site. I designed this site for a friend of mine a few years ago.

  • http://google-seo-top.com blog commenting service

    You can have a dark design with the background, the header and the footer but still have a light background behind the main text area.

  • http://blueprintds.com chicago web design

    great article! the only thing about dark web I really dont like is that its not as clean (usually) as it could be. These tips are greatly beneficial to anyone try to complete a dark site!

  • http://www.pinghsiang.com.tw CNC mockup

    Excellent works, and awesome article, i learn a lot, many thanks.

  • http://www.certpartners.org/category/Cisco Cisco

    great article! the only thing about dark web I really dont like is that its not as clean (usually) as it could be. These tips are greatly beneficial to anyone try to complete a dark site!

  • http://www.nicedhardy.com ed hardy

    great article! the only thing about dark web I really dont like is that its not as clean (usually) as it could be. These tips are greatly beneficial to anyone try to complete a dark site!

  • http://www.createur.ro le createur

    hi, i have a black design on my site. what do you think?

  • http://www.highheelssale.com Christian Louboutin

    These tips are greatly beneficial to anyone try to complete a dark site!

  • http://www.goahats.com red bull hats

    it is interesting and informative article. This has been very helpful understanding a lot
    of things. I’m sure a lot of other people will agree with me.

  • http://www.4unfl.com wholesale nfl jerseys

    great article! the only thing about dark web I really dont like is that its not as clean (usually) as it could be. These tips are greatly beneficial to anyone try to complete a dark site!

  • http://www.louboutinshoesbox.com christian louboutin

    Fantastic website I will bookmark it and come back later. Thanks for posting this. Very nice recap of some of the key points in my talk. I hope you and your readers find it useful! Thanks againMonster .

  • http://o3o.cc o3o

    Agree most of the article. For readability, Jonathan (http://snook.ca/archives/design/reboot_light_vs/) has a good point that people can be divided into Light-mode and Dark-mode. For those usually working in dark environment, they are Dark-mode person and prefer a light-on-dark design.

  • http://www.ecwebcom.com buy nfl jerseys

    Most ppl dont have an understanding of what design is or they call themselves graphic artists and claim they can pull these types of designs off and able to get good results.

  • http://winstonmuller.com Winston Muller

    Super post, I’ve always loved dark web designs, time to get cracking and do some of my own…

  • http://www.ecwebcom.com Jerseys

    Any time a web designer relies exclusively on color to transmit information — it is likely to create problems for colorblind readers. In Forrester’s case, they commonly color code their charts in such a way that the colors cannot be distinguished from each other.

  • Federico Totti

    Very cleaver article.

    I agree with Asherd about reading habits and I think white on black is just as annoing as black on white.

    I always try to use greys in both cases. #eeeeee as the lightest color, #333 as the darkest.

  • http://www.fimedia.ca/ Calgary Web Design

    Yeah I can never quite get away with approving a dark design from our design staff – just never quite sits well visually.

    Doing something off-grey I found works but if darker colors suite the client, do a gradient fade in/out in terms of the header/content/footer. Tends to feel more elegant in my opinion.

  • http://www.redelements.com Rob

    I have always liked dark design… you make some very good points. Some people tend to write off dark at all costs. I think this may be a result of over zealous modern pop psychology marketing. I especially like your insights about font types and sizes!

  • http://holly-ann-keate-rescues-yeti.wikispaces.com/Holly+Ann+Keate+Talks+About+Policy+Doggy Kurtis Sedita

    US Federal Reserve Chairman Ben Bernanke has stated the sluggish recovery can imply the financial institution will take more motion around the economic climate.

  • http://www.benstokesmarketing.co.uk Web design Shropshire

    The use of white space is obviously crucial in any black web design – I think silver and th likes of bold colours work well – if chosen properly. Black sites can portray a image of quality and luxury . . .

    Thanks guys :)

  • http://www.open-axcss.com zaira

    great article! very informative..
    Thank you for sharing.. :)