Embrace the darkness
Designing a beautiful template is always a struggle, but when it comes to dark design you need to be extra careful. Many small things can totally ruin your masterpiece.
These are the techniques that I've used to create this website and since I received pretty good feedbacks, I decided to share them with you.
Keep in mind that I'm not a professional front-end developer nor a web designer; These are just the things I've learned along the way, from web development and 3D modeling/rendering; So take it with a grain of salt.
Contents of this article is more like a checklist, each title deserves its own dedicated article to deeply examine its ups and downs but it's out of scopes of this blog, and out of my area of expertise.
If used wisely, shadow can be your ally.
I only work in black. And sometimes very, very dark gray. - Batman
Limited color palette
This is the most important aspect when it comes to dark websites; When you're designing a website with bright background, it's totally acceptable to use like five different colors, and a touch of their darker and brighter shades (for hover, border, etc.).
However, when setting camp on the dark side of the moon, using too many colors on your canvas just makes the whole thing unattractive. So before you start, you need to decide on one or maximum two colors to match with the dark background.
Here, I chose only one color; except for the top-left logo and code blocks, which take a very little portion of the page. Colorful content might sound cool but in practice, it doesn't blend in.
Another thing to consider is to use simple and solid color for the background; It's just easier on the eyes.
However if you're keen to use a background picture, only use a very low-contrast, seamless, simple pattern. A noisy and distracting background behind the content is the last thing you want, even on the bright side of the moon!
DO NOT crowd the room!
Filling the page with texts and images, is another pitfall you should avoid. There should be a lot of blank spaces in the page. It's easier to concentrate on the content if there's less distraction around it.
If it's a blog page filled with text, like this one, side panel usually makes it messy; Also each line of text really shouldn't be longer than 100 characters (more on that later).
Images are necessary part of a promotion or landing page, but using too many of them here and there, only makes the visitors confuse. So leave some room between images and maybe avoid using too many words to describe the content.
The overall contrast
Having a perfectly white text on a pitch black background (aka. high contrast) only contributes to eye strain. Text might seem more vivid at first sight, but would make it hard to follow the lines and focus on the textual content for a long time.
So I suggest using a very dark background (but not pitch black) behind a very bright text (but not flawless white). For example background color of #222222 would be very nicely with foreground color of #DDDDDD or #EEEEEE (More on colors later).
Typography
There are many aspects in typography. Let's start with typeface, shall we?
We all love Serif typeface, their dashy look always contributes to a formal context; But reading a long wall of text written in Serif is kinda tiresome. And it's not just about dark design.
Try some Sans Serif typeface with normalized line thickness and your audience will thank you! Keep Serif for titles, they're eye-catching and formal.
Did you say line thickness?
Line thickness is probably the most important aspect, specially on dark backgrounds; Best fonts are designed with this in mind. Take a look at the most beloved fonts in Google Fonts, you get the idea!
Irregular line width or sharp edges could look nice on big titles or captions, but not for the main content, which is usually written in small size.
Font size and line spacing
Even with a good font, small text is hard to concentrate for a long period of time; Even on bright background, small texts are hard to read. In my experience, font-size: 16px should be your bare-minimum.
line-height is important too. Depending on your font face, you might want to increase the value to 1.1 or even 1.3! It would be easier to follow lines that way.
Character per line
Following long lines are difficult in any context. Try to keep your lines short that each line contains approximately 80 to 120 characters. As anything else, it's not set in stone, but don't get overboard with it.
I've seen websites that practically fill the width of your screen with text and I just wish they would consider re-designing their twenty-years-old theme from scratch!
Putting blank space around content would make the lines easier to track. Think about it, it's hard to follow lines of text, spread across a 24inch display!
Paragraph style
There are two main ways to declare paragraphs in English:
- Indent the first line of each paragraph, except the first paragraph.
- Leave a blank line between two paragraphs.
Personally, I prefer the latter, but either is fine; Just remember not to mix those two. It looks unprofessional!
Colors
To state the obvious, we have 256 shades of gray (including black and white); As I said earlier, we can't go for a really high-contrast design and expect an attractive look; So we got to keep a little distance from #000000 and #FFFFFF.
Also, a perfectly gray background might look a bit dull to you, you can mix a bit of blue like #222225 or #22222F for a cooler feel or a little purple like #282238 to make it a bit more sophisticated. You see? A few percentages go a long way!
As for the background that's what most designers go for: Gray text on darkish blue background. I tried mixing other colors but couldn't make a good-looking one. But you can also do what I did: Gray background behind a bright text that has a dash of green (or actually any other color).
Speaking of which, you have more control over the color of your textual content. You can mix all kind of colors with your light-gray foreground and without making it obvious, you introduce a unique feeling to your customers.
Blue is probably your best choice. It tricks peoples' minds. Some black hair dyes have a hint of blue added to them to make your hairs look "blacker than black"! Same goes for laundry formulas; Some laundry detergents have blue dye added to them so they make your black clothes "blacker" and white clothes "whiter" (usually branded as "specific for black clothes").
Also most computer monitors are designed in a way that they shift all colors -a little bit- towards blue. If your monitor is not specifically built for designers, there's a high chance it emits more blue than necessary, making everything look vivid!
That's how human eyes work, so why not take advantage of it while designing our website?
Final thoughts
Black is symbol of power and elegance. It gives you the opportunity to show off some fine details in your design. You just have to keep things simple.
Very few websites are of dark design; So you can stand out.
It also helps your viewers by reducing the amount of light, emitted to their eyes from their computer or cell phone displays. Personally I always appreciate dark templates for the blogs I visit.
But not everybody likes a dark websites. You need to consider your content and audience. There are tons of resources about Color Psychology; But if you like black, I hope you enjoyed this article.
Keep in mind:
Simplicity is the ultimate sophistication. - Leonardo Da Vinci
Image by me, made with Blender.