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.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

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

Chanel

Adidas

Adidas

Yves Saint Laurent

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.

Choose Fonts

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.

Contrast Text and Background

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

Stampede-design

Rockycreekwinery

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

SebDesign

Shopcaterpillar

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

Birdbrainapp

Quazarwebdesign

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

eeci2009

Versionsapp

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

Modernois

DanielSchutzsmith

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

Jamesgarner

Turnplay.ramotion

Turnplay.ramotion

FT Designer

FT Designer

Tompain

Tompain

Raya Photographer Director

Raya Photographer Director

Pontiac

Pontiac

Bootb

Bootb

Redmillion

Redmillion

Vanschneider

Vanschneider

Buffalocorp

Buffalocorp

Driver-club

Driver-club

Spalding

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:

Alex Bulat

Alex Bulat is a blogger, article writer and published author currently working for TemplateMonster.com, an established provider of website templates and turnkey web solutions. Alex is committed to beautiful and functional OpenCart templates designed with the focus on customers and products.

Newsletter

2 Comments
  1. Daisy Bono Nov 26, 5:37 pm

    Though black look simple and sometimes grungy but when you pair it with a different color it emanates elegance. Thanks for sharing this post and good job!

    Reply
    0
  2. Anonymous Jan 1, 9:20 pm

    wow, this article started off really good, but once the examples came it, it just became stupid

    Spalding? The brand that no one knows? Maybe if Nike or Addidas endorsed full black on their website – but Spalding?

    Pontiac? Another failure for a car company? You’d have credibility if Honda, Toyota, Audi or BMW used black maybe.

    Who is Buffalocorp?

    That pink and black combination is just wretched – if you check out the DanielSchutzsmith website, you’ll see his fonts are contorted and an eyesore. His portfolio page is also horrible, walls of weird webpages that have no meaning

    Quazarwebdesign – looks like some middle schooler designed it that has flashy space and fighter jet pictures.

    SebDesign – if I wanted my design to stand out for #WorstDesign, I’d hire them

    Caterpillar was the one of the only good examples

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters