An Introduction To Dark Website Design

Posted in Tips, Web Design2 years ago • Written by 5 Comments

Dark versus light design has been a long and controversial topic since almost… forever. You probably have read many articles about this matter and you probably have found contradictory facts among them. The truth is that there are no certainties whether you should use a light or dark design on your new layout. However, there are indeed strong indicators that may tell you which version you should be using to provide the majority of your visitors with a better experience.

Since I’m going to give you a personal opinion on how you should build your dark layout, it makes sense for me to first see if you should or should not indeed adopt a dark version for your website.

Dark vs Light background

There are three crucial indicators that should make your life easier when deciding if you should or should not design a dark layout. Most of them are pretty much common sense and should only take a few minutes to analyse.

1) Subject

Are you going to sell clothes? Is it a blog about weddings? Or a vacation planning site? As you may know, color and contrast are associated to feelings and that’s why a very dark gray background may not be suitable on a website that sells vacation plans to the best beaches during the summer.

2) User

Now you should ask yourself:

  • Who is going to visit your website more often
  • What type of person
  • Social level
  • Age

This question is not only useful for the type of contrast and colors you should use on your website or application, it also defines the majority of other question marks like style, minimalism and typography. You may realize that a person in his late 50′s may prefer a light background color, not due to readability (you’ll understand why in the next topic) but maybe because that person is used to visiting light background websites. It’s all about what they do, what they are used to and what they like.

3) Purpose

Will it be a store? Just a blog? Someone’s portfolio? A photo gallery? Always remember that every website has a purpose. If you’re going to sell a product to which you need to emphasize colors (this obviously depends on the type of product) a dark background would suit that purpose better than a light background, however if you’re going to have a news portal with plenty of content, a light background may suit your needs better.

Does the use of dark background really affect readability?

There are contradictory studies and scientific research so all I can give you is my personal opinion which is no, a dark background does not affect readability.

You may be wondering “What are all those sites and articles talking about when authors say dark backgrounds really affects readability? They even give examples!” To answer your question, readability is affected by the use of wrong text color, wrong line-height, kerning and font size, not by the use of a dark background. In the end it’s all about typography and the elements you use, not the background itself. It’s obvious that you just can’t compare a paragraph of text with a line-height set to 0.5 in a light and dark background – you always need to adjust the element you are using to the surrounding background.

I’ll give you tips on how to design a dark layout focusing on elements, I won’t tell you if you should use a #000 or #111 color for your background – that’s irrelevant. I’m going to tell you how you should use and design the elements on your dark background. Again, is all about how you use the elements.

So let’s get started.

White Space

If you have read some of my articles, you know I always touch on this key topic. White-space is there to help in almost every design related topic.

As I said above, you need to suit every element to the condition they are in. In the case of dark layouts, you can actually focus better on each element which gives you the feeling that elements are closer than they really are leading to a cluttering sensation.This is why you need to use white-space effectively. Readability is also favored with more white-space.

White-space

Avoid cluttering more than ever

Consequently related to the white-space topic above, cluttering is something to avoid when you’re using a dark background. Remember that a dark design is more sensitive to content spacing so what may sound enough on a light background may not be the case on a dark one. If you have low to medium content you always need to make efficient use of white-space, however, if you have too much content you should consider separating it through subpages/sections or changing to a light background.

Typography

Typography

Typography is the most sensitive element in any design but especially while using a dark background. It clearly needs to be carefully planned otherwise you will see more and more articles stating that dark backgrounds are bad for readability.

In order to improve readability,  the first thing you can do is increase font-size, line-height, kerning and write in small paragraphs. You may have noticed that all these text options are still related to white-space. Having this said, your second concern should be with the font itself. Should you use sans-serif or serif fonts? Serif fonts are not clean which makes it harder to read with small sizes. This means you should use serif fonts for bigger sizes like titles and sans-serif fonts for small text like paragraphs.

Contrast

I could have written about contrast on the Typography topic above, however, what applies to typography also applies to every other element on your page except for imagery.

So you wake up and you suddenly look up to the sky with a very bright sun-light… you know the feeling right? The same applies to the contrast use on your screen. Using pure white text on pure black background (or vice-versa) will somehow be unpleasant to your eyes. The first basic rule is to never use pure-white/black on the opposite color. Using #ddd for your text and #111 will be more preferable than  #fff text color on #000 background.

Content emphasis

One big advantage while using a dark background is the ability to easily apply emphasis on a desired element like text or image. That’s because in a darker background the focus will be completely transferred to the main elements. You also have more ways to do it than in a regular light background. You could achieve great emphasis using reflections and different blending modes for vivid colors or gradients which are possibilities that would be very difficult or almost impossible to get with a light background.

Background elements

If you’re going to use a dark background, one thing you can do is to make use of background images, textures or patterns. On most cases, images/textures and light backgrounds don’t make a perfect match. Nevertheless, be sure to avoid making your background distracting, focus needs to be on the content.

Conclusion

I believe that everything should be used according to the surrounding elements, so a dark background can have real benefits over light backgrounds when the elements are properly adjusted to it. Some people prefer reading and using light backgrounds and others not so much, as I said there are no certainties so all you can do is to check competition, make some research on your end-user and conclude which option is the best for your business.

Good luck!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

18 Written ArticlesWebsite

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

5 Comments Best Comments First
  • Tony

    Wednesday, November 9th, 2011 09:31

    2

    The website looks really rich with its black design. Liked knowing about and thanks for the so worthy information.

    0
  • Andrew Groat

    Wednesday, November 9th, 2011 01:00

    1

    Hey dude, great article!

    I’m currently in the middle of redesigning my portfolio and I am faced with this very decision. Light or dark?
    I think given the nature of what I do dark is going to work best form me, however for my blog I’m definitely going to have white incorporated into the content area.

    Thanks Ruben!

    0
  • Ruben D'Oliveira

    Thursday, November 10th, 2011 19:40

    4

    Thanks for reading. Good luck guys

    0
  • adumpaul

    Thursday, November 10th, 2011 12:51

    5

    I always like black theme.Nice collection of black theme.Thanks!

    0
  • Ryan

    Wednesday, November 9th, 2011 12:01

    3

    Ruben, thank you for your post! It was a surprise for me that a dark background does not affect readability. Now I know the truth and will share your post with my web design fellows! :)

    -1
  • adumpaul

    Thursday, November 10th, 2011 12:51

    5

    I always like black theme.Nice collection of black theme.Thanks!

    0
  • Ruben D'Oliveira

    Thursday, November 10th, 2011 19:40

    4

    Thanks for reading. Good luck guys

    0
  • Ryan

    Wednesday, November 9th, 2011 12:01

    3

    Ruben, thank you for your post! It was a surprise for me that a dark background does not affect readability. Now I know the truth and will share your post with my web design fellows! :)

    -1
  • Tony

    Wednesday, November 9th, 2011 09:31

    2

    The website looks really rich with its black design. Liked knowing about and thanks for the so worthy information.

    0
  • Andrew Groat

    Wednesday, November 9th, 2011 01:00

    1

    Hey dude, great article!

    I’m currently in the middle of redesigning my portfolio and I am faced with this very decision. Light or dark?
    I think given the nature of what I do dark is going to work best form me, however for my blog I’m definitely going to have white incorporated into the content area.

    Thanks Ruben!

    0

Comments are closed.

54.234.60.133 - unknown - unknown - US