Written by Hirsch Fishman on August 6th, 2009
Dark websites seem to be growing in popularity lately. If done properly, they can convey a sense of elegance, sophistication, sleekness, and/or professionalism. But in order to create a great dark website, web designers need to pay attention to some special usability concerns that come with the unique territory.
Dark websites can seem refreshing sometimes, especially because most websites are somewhat similar in the sense that they feature dark text on a white background. That’s no coincidence, either – that color contrast is easiest on the eyes.
Light text on dark backgrounds, on the other hand, is more difficult to read because it makes your eyes strain more in order to read the text on the page. Add that natural effect to the fact that a lot of dark websites out there don’t necessarily pay attention to some of these usability concerns, and it’s no wonder that some people have a love ‘em or hate ‘em mentality when it comes to them.
I’ll admit it: I was one of those designers who didn’t necessarily pay attention to all of these unique concerns. I created a dark website for a friend back in 2008 – actually the only one that I’ve done so far. I paid attention to most of these special concerns, but as I write this and look at the website again, I notice some things I would have done differently that don’t follow the advice I give below.
On a lot of dark websites, designers use a serif font (such as Georgia, Times New Roman, etc.) because those types of fonts help convey all the senses that dark websites have (elegance, professionalism, etc.).
So what’s the concern? Using a serif font for your main text, at a normal size of 12-14 pixels, means that the flourishes on the serifs start making the text less readable. The letters will start to blend into each other, so your eyes have to strain more to tell words and letters apart.
Here are a few tips to keep in mind for proper font selection:
Text contrast may be one of the most important determining factors in whether a dark website is successful or not. Too little contrast will make your text extremely difficult to read and your website difficult to navigate through – especially in conjunction with what fonts you used. Too much contrast will make everything stand out too much, and the design won’t look as nice.
The key to a great dark design is finding the right balance between the text and the background. Here are a few tips for how to do that:
The size of your text needs to help compensate a bit for the additional eye strain that people will have trying to read your text. That’s why on a lot of dark websites, the text is a little larger than it would normally be on a light website.
Keep in mind too that the font size is what will bring together the past three usability concerns. If your body text is a serif font, colored in a shade of gray that doesn’t give enough contrast, and is sized too small, that’s the perfect trifecta for what make your text almost completely illegible.
Generally speaking, when you’re designing a light website, you have a lot more flexibility when choosing a color scheme than when you’re working with a dark website. Most color schemes work well with a light color to contrast against, but they don’t all work well with black.
Most websites start with white as the foundation, and use color to achieve depth and some sort of visual effect. Dark websites are different in the sense that you’re already starting with a color and already have some depth to the website. You don’t want to add a color scheme with a lot of colors on top of the dark color you’re already using – that’s a lot of colors, and can be visually confusing. Your color scheme should generally be simpler, and should use less colors than the color schemes for light websites.
Here are some other things to keep in mind:
There are plenty of galleries out there with samples of great dark websites. Here are a few worth looking at for inspiration:
If you work with or come across a lot of dark websites, what do you think about some of these usability concerns? Are there others that I haven’t listed that you think are also important? Share your thoughts with everyone by leaving a comment below!
Copyright © 2013 Addicott Web, Chicago (IL) & Raleigh (NC). All rights reserved.