The Elegance & Authority of Black in Web Design

“It is difficult to look for a black cat in a dark room, especially when it’s not there”

Confucius.

Actually, perfect black – it’s not even the color. This is complete lack of color, darkness, nothingness, the “black hole.” Therefore, no object that can be perceived by us is absolutely black. By the way, astronomical “black hole” by assumptions of scientists, is an extremely compressed star by its own gravity that even the light can’t “escape” from its gravity forces.

In everyday life, we’ve got lots of variants of black that can be divided into two groups: light and dark blacks. Gunn Johansson color specialist said: “There are amazing shades of black. You look at it as into the tunnel, the tunnel that never ends.” The deepest blackness among fabrics is the black velvet.

Human fear of darkness and blindness gave this color some negative associations. You can easily continue the list of associations: the raven as a messenger of death, the black cat as an unlucky sign, black magic, black mass, blacklist, black humor, black day…

Black Sells!

Black is authoritative, powerful, creative, easy to match and it gives the feeling of perspective and depth. It can be elegant, conservative, modern, traditional, and unconventional. Black is able to increase your brand recognition by almost 80%! Black is extremely good if you want people to spend money, as it is associated with prosperity and luxury. Black can make is easier to convey a sense of sophistication and class. Use a lot of black if you want your visitors to feel that your products are of high quality in order to justify the price.

Below are presented 3 brands that use black as primary black color. They are great success. Their products and services are of pure quality without any compromise.

Chanel

Adidas

Yves Saint Laurent

Black Typography vs. Black Backgrounds

Black is mainly used for typography and other functional parts because of its neutrality. For text based websites black as a background is not recommended, since white text on a black background will make user’s eyes pop out. Black is a perfect backdrop for portfolio or photo websites, it allows images to be placed “in a spotlight” of a visitor. Colors are able to stand better and seem brighter on black backgrounds.

The Principle of Long Intervals

Text blocks accommodated on dark web pages always seem to be “densely stuffed”, that’s why website designer should use much wider spacing between individual elements than on the similar but lighter websites. In this case, text and images will be perceived more comfortably, not producing a feeling of information cluttering.

The Correct Choice of Font

In general, the principle of widening of intervals between lines, letters and words for black sites is as important, as the distance between the blocks. Not to pop out the eyes of your visitors you need to use fussy fonts for headlines only, the body of the text should be composed using simpler font faces. For example: Tahoma and Verdana will be perceived better than Times New Roman.

The Correct Choice of Contrast Text and Background

Pure black background and white font makes maximum contrast combination, any visitor quickly gets tired of reading such text on the page. It would be much preferable if you soften the contrast, using less saturated shades of the background or light-beige font. The example below clearly shows which combinations of font and background are optimal in each case.

Combination of black with the other colors

The Black color will absorb and dissolve all the colors that surround it, that’s why your secondary color has to be chosen really carefully. #000000 goes well with the bright colors and hues. You can also add lighter hues, what will make supplementary colors look even brighter. Dark colors are not advised to be used with black, such as dark green, because they will simply merge together.

Black + Red

The combination of black and various shades of red results in a beautiful and bold website design which is always popular. Designer with a good taste will easily develop vivid and memorable pages using this beautiful combination.

Stampede-design

Rockycreekwinery

Black + Yellow

Yellow on a black background can be used virtually in all hues of this color colors. Such color combination looks bright, bold, and optimistic.

SebDesign

Shopcaterpillar

Black + Blue

Perhaps blue is the only one color that can be combined with black most successfully. Sites with similar range seem balanced, solid, and credible.

Birdbrainapp

Quazarwebdesign

Black + Green

Green on a black background always looks fresh and appealing. On varying shades up to bright fluorescent colors, you will achieve different effects, from soothing to invigorating.

eeci2009

Versionsapp

Black + Pink

At a first glance, the combination of pink and black is more suitable for women, but such alliance can be used for personal website designs and creative software developers.

Modernois

DanielSchutzsmith

Of course, the use of black is not limited to portfolio or design sites. It can be successfully used for any kind of websites, including business, ecommerce, entertainment websites, etc. The examples below perfectly prove this!

Jamesgarner

Turnplay.ramotion

FT Designer

Tompain

Raya Photographer Director

Pontiac

Bootb

Redmillion

Vanschneider

Buffalocorp

Driver-club

Spalding

Let’s sum up everything and point out useful rules on how not to mess up black website:

1. Not enough “black space” makes website too heavy.
2. Don’t forget to adjust paragraph size, kerning and leading.
3. Don’t use small fonts! Ever!
4. Find perfect contrast combination between darkness of the background and lightness of the test.
5. Guess what, Sans Serif font is more legible.
6. Forget about color schemes like “black + rainbow”, stick to one or two complementary colors/hues.
7. Don’t forget to use style switcher that allows you to read black text on white background.
8. Vintage or classic patterns and textures can create a look that is both elegant and age-appropriate.
9. Avoid the over-powered layout, add essential content first and then bring in design elements.
10. Remember! Black backgrounds are perfect for websites with very little content.
11. Do not apply faded colors on black backgrounds, lighting effects and bright colors stand out more.

Further reading:

• The professional Designer’s Guide to Using Black
• Shades of Black
• The Ultimate Guide to Designing with Black