Page design strategy with deep background color style

The deep background Color style page design is very popular, it can create the chic elegant, the extremely rich creativity effect.

the deep background color style page Design is very popular, it can create the chic elegant, the extremely rich creativity effect.

Deep Color design applies To many site types, but not all. This style should be used under appropriate conditions.

Although deep background color style can bring visual impact, but many designers do not know how to effectively express them, the effect is often counterproductive. Failed designs can lead to poor readability , difficulty in attracting users, and inability to use traditional design elements.

So here we will discuss some of the elements of the deep background page design to make your next design more popular and creative .

According to the latest survey, 47% of respondents preferred a shallow background design, mainly because of readability . Most people do not like to read bright text on dark backgrounds, so that the eye is tired and can lead to an uncomfortable reading experience.

By contrast, 10% of respondents tended to have deep background sites, and another 36% thought it would depend on the type of site.

So what's the right answer? Although everyone has their own point of view, since there is such a high proportion of users can endure the deep background of the page design, sometimes even their preferred. We as web designers must understand how to create a more effective deep color design for ourselves and our customers. At the same time we must believe that deep background color style can increase its readability and friendliness.

use more whitespace

Maybe we should call it "empty black" here.

Effective use of white space, in any design is important, for deep background style is more essential.

Dark designs are "heavy"and crowded layouts add to this feeling. Take a look at some popular deep background designs and notice that they use a lot of white space.

The website Black Estate displays the excellent deep color page design on the Internet, it is also a remarkable design worthy of attention. Its design uses a lot of white space, but also unique: effectively in some important elements next to the use of white space.

First, the user will see the first element--logo, next to a lot of white space. The user will then notice the main content area and the wine bottle on the right. As you can see, the blanks perfectly contrast the main title of the content area and the text on the bottle.

In the design of Tictoc , the selected content and related pictures are combined with large blank. As the page moves down, we can see that there is less white space, so our attention shifts to the indented content.

The key is: white space can gradually guide users to the bottom of the page

The black background adds a sense of depth to the design. The site is very dependent on the design of the blank, with the black background to create the creative effect, the page is so attractive.

Site Mark Dearman has a large number of symmetric-distributed whitespace applied to the layout.

The gap between each chunk of content provides enough breathing space to provide a good resting point before the user browses to the next block. A lot of white space is a deep background design essential, it can make the layout concise, highlighting important elements, make the overall appearance more elegant.

Text Spacing

Because readability is the number one problem of deep background design, designers should pay more attention to the design of text. In the overall design, one way to improve readability is to increase the paragraph spacing, kerning, and line height of the text.

The following figure compares the effects of different text spacing between deep and shallow background.

Another way to improve the readability of a site is to increase the font size . As with most of the rules mentioned in this article, larger fonts mean more whitespace. The larger the letters, the more blanks appear in the middle and four weeks of the letters. The "a" in the following figure, the larger the font size, in addition to the surrounding blank larger, the letter "a" arm and the word valley in the gap is also greater.

Note that small text on a light background is easier to read than a dark background. So when designing a new website, use some virtual text to do the test to ensure the readability of the text, if not, try to increase the font size to see if it helps

Contrast of text

Many people agree that deep background design can easily cause eye fatigue, too high or too low contrast is usually the culprit. So how do you find the perfect balance?

If you are in a darkened room and suddenly there is a bright light coming in, you will certainly feel very unwell. But in a not too dark room, it would be much better to shoot less bright light. The same applies to web design.

Finding the perfect contrast means finding a balance between background darkness and text brightness .

The following figure briefly illustrates the contrast between the background and the text. You can notice that the brightness of the background and text is decreasing in the Echelon.

It's much more difficult to find the right brightness for text in a deep background. To find the perfect balance, you have to experiment with different colors. Usually no black or white can be used to bring better results.

How to choose a font

Fonts play an important role in design, in deep background design we should be more careful to consider the choice of fonts. The following illustration shows the display of 14th sans serif fonts and serif fonts in a dark background.

(Serif: For example, the right side of the "S" letter curve at both ends of the small strokes, that is, lining line. The serif font in Chinese is xxfareastfont-Arial, and the sans serif font is bold. Line font In addition to the top of the brush strokes, lines have obvious thickness changes. and sans serif fonts tend to be the same as the thickness of the strokes, or the change is very inconspicuous. )

Sans serif fonts are more readable , but many designers still use serif fonts to represent the elegant parts of the design. The trick is to use serif fonts only on large-font text, and large-font serif fonts can create additional whitespace, making each letter very clear.

In the case of the following illustration, the use of serif fonts and sans serif fonts forms a graceful match.

The use of serif fonts on large text (such as title, navigation, and page headers) doubles the elegance of the design. A concise, sans-serif font is used in the body section to improve readability and contrast.

use a streamlined color scheme

In order to make deep background design with a concise and crisp appearance, designers should choose a streamlined color scheme .

From the following few cases, we can see that the dazzling color scheme does not apply in deep background design because the contrast is too strong.

insist on using only one or two colors .

If you want to try more color, try to match the background color with the colors.

Of course, many deep background page designs have an exciting color scheme. You can break the rules by using the right techniques.

However, in general, too many colors make the page look messy , because the background color has made the page color very deep, so please use color carefully.

provides switching mode.

Although we have mastered a lot of techniques to make deep color design more attractive, but we can do a little more to meet more users.

Be sure to add a style sheet so that users can choose to switch to another version with the effect "light background + dark text."

Creating 2 style sheets at the same time can guarantee this, one for the default deep color style, one for the light background.

There's a good tutorial on the site SitePoint on this: build a simplicity style switcher in CSS. "How to use CSS to create a simple style of interface switching function." 》。 Just create dark and light two style sheets here, without the need for other colors (such as orange, blue, white) interface skin.

type of design that works best with deep color style

As mentioned earlier, a large number of users believe that the deep background of the page design can be applied to some types of Web sites, but the survey did not say exactly what type.

In general, the deep background is suitable for creative or elegant design, such as: for modern fashion web sites, the depth of the color can be chic and elegant. For hand-painted websites, dark backgrounds can be used to better reflect individuality and creativity.

unique deep background design

Dark but the feeling of bringing is deep, authoritative, powerful. It will look very chic and elegant when used properly. Here are some examples and techniques for using a deep background color style design.

The site Larissa Meek uses classical textures in the background to create an elegant tone. Other features are impressive for this design.

This technique can be applied with many types of Web sites. Retro and scenic textures can be created with both elegant and personalized style.

Most people associate classical textures with high-end, so using this method makes it easy to create a site that looks classy.

Depth Core Design is very concise, dark background to enhance the style and grade, but also a clear embodiment of the style of the site owner. Chic design can enhance the value of the work you show.

Please note that there is no texture in this design and there are no pictures outside of the logo and the display of the artwork. Otherwise the design will look bloated, and as it is now, the content area is beautifully and compactly rendered.

A good process in design is to add all the necessary elements first, and then one by one to add the required elements, in this process, the designer can stop to think about whether the addition of each new element is necessary, and the layout is too saturated.

Artwork that is backed by an elegant background will look more valuable, so for a product display site, such as a website tapbots , a design with a dark background and a good sheen can help sell the product.

Wonderful gradients and light, as well as simulating the texture of the High-tech equipment itself, good design should be complementary to the product itself.

Creative Deep background design

In addition to being able to show elegant temperament, deep color design can be more emotional than light-colored design, so that they become a creative project. Let's try to show some examples of creative design.

The content of this site is very small, but the layout is very different, dark background is the perfect choice of content few sites.

In addition, because this type needs more blank, so the designer also has more room to play.

Grunge (Rock) style of the site presents a variety of forms, due to the Grunge style with dark and sloppy meaning, so deep background color style a matching choice.

grunge--is synonymous with alternative rock. The sort of metal (metal-like) alternative rock originated in Seattle. Grunge gradually formed a fashion style, such as loose, multi-layer clothes and torn jeans, etc.

The deep background grunge style of the Trozo looks like breaking all the design rules, messy textures, crowded layouts, and a large number of colors. But this site still looks good, how is this going on?

There are so many and confusing elements involved that may be tricky for a design beginner. The key to maintaining this design balance is to organize the elements properly.

First of all, the background clearly defined the block, can guide the user's view, but also can place the content into the organized block.

Secondly, there are lots of blank spaces in the design. Although the background is a texture, the duplicate pattern is actually a blank, which helps to balance the weight and density of the layout.

The blank space that appears on the left side of the logo, below the navigation, and on the right side of the page. In addition, the gap between "Exhibit 01″ and" Exhibit 02″ is also a common technique.

White space balances the layout, even if it doesn't look like a blank but a texture. For this, fewer text and blocks (only 3 in this design) help make the page look neat ...

The Web site Drew Wilson 's design seems to break the rules of using a streamlined color scheme, but in fact bright and rich colors are concentrated only in a small area of the head, without global abuse.

A dark background can make the light and bright colors look brighter and more prominent.

Some designs create a perfect effect outside of the rules. But you should still be cautious about the rules and avoid getting too many gradients, textures, and colors across the page.

Summary

Deep background design can give the design elegant temperament and creativity, so that the display of products more perfect. But not for all types of Web sites.

For some large sites, especially users may have vision defects or mobility inconvenience, do not use deep background design, even if you provide the interface switch mode.

I hope the above tips and strategies will help you when you need to design a website with a deep background