Deep-tone Web Interface Design considerations

Deep-tone web design is more popular, it can create a concise, creative effect.

It can meet the requirements of some customers on the style of web design. However, it does not apply to each customer's design style of the site, the designer should be based on the actual situation.

Although the deep tonal design style can achieve the noticeable effect, but many designers do not know if uses it effectively to impress, attracts the visitor.

The problem with dark-toned web design is that it is difficult to read, unattractive, and rarely break traditional design patterns.

In this article, we will discuss how to make your next dark-tone web design more attractive and appealing to the broad masses of viewers, and really make your design express your ideas.

The recent http://www.aliyun.com/zixun/aggregation/32268.html "> survey shows that more than 47% of the public are more likely to prefer a brighter web design. The readability of the content is the main reason. Most users do not like the bright text content displayed on the deep background, this contrast effect is more dazzling, giving people uncomfortable feeling.

By contrast, 10% of designers usually choose dark colors to design Web pages, while 36% think they should choose according to the specific style of the page.
So which is the right answer? It boils down to the idea that everyone has their own opinions.

However, a considerable number of users think that the design of heavy tones is acceptable, sometimes the design is preferred. As a web designer, we have to consider how to effectively design a deep tonal page to our customers with their own.

Enthusiasts who believe in bright-tone web design hope that the darker-toned web design should be easier to read and have a good user experience.

Use extra White

Or should it be called "black"? Reasonable and effective use of white leaves is very important for any style of design. But it's a must for dark-toned web design.

The deep tone of the web design gives the overall feeling of "heavy", if the overall layout of the messy structure more to give people a heavy feeling. The following shows some of the more popular shades of the web design, they are reasonable use of white to achieve a good design effect.

Black Pence is one of the web design of deep tones in the Internet, and the design is really great and worth studying. Design from the beginning of the end are reasonable, effective use of white, how to design elements around the effective use of white, so that the design of such a fastidious Web page.

Logo logo around a large number of "stay white", as the viewer we first see is it, and then see the main content and the right bottle. As you can see, the white is used to highlight the contents of the bright text on the bottle and the title of the content.

The main feature of TICTOC is that it has retained a large amount of "white" in the content and decoration of the picture, and as we continue to browse, we see that we have used little white leaves to focus our attention on the specific content below.

The key here is that white leaves play a guiding role, step-by-Step Guide users to browse this page.

Web site by using a large number of white to increase the depth of the design layer, leaving white is only to achieve the effect of deep tones

The frame structure of Mark Dearman's web site has since been used to make white with a flexible, uniform distributed layout.

The white space provides a lot of breathing and pauses for the contents of each adjacent content plate. When it comes to the next section, the white space between them is a good place to rest.

White for deep tone web design is necessary, it will not only help solve the layout of the messy, scattered, but also the web design to enhance the overall sense is very important elements.

Text content White
The readability of dark-toned web content is a concern for users of dark-toned web pages. Designers must focus more on the text itself.

In the whole design, it is a way to improve the readability of the text content of the background Web site by adjusting the distance between paragraphs and spacing, leading to increase the amount of white space.

The examples shown below describe the contrast between elements and elements that remain white, the element itself, and the background and light background.

Increasing the font size is another way to improve the readability of a dark-toned web page, as described above, a large font can increase its own and the surrounding white space, the larger the font, the larger the amount of room around it.

For example, the following letter "A", when the font increases, the surrounding white will increase. Whether it is the space around a or the space inside it, or the gap between the contents of the upper and lower content is changed.

Note that it is much easier to read small text content in light tones than in deep tones. When setting fonts on a new Web site, be sure to virtualize some of the content in advance to ensure it is legible. If you are not clear, you can try to increase the size of the font to adjust.

Text contrast
Some people generally think that most of the dark tones of the site can easily lead to eye fatigue. Designers are more or less ignoring comparisons. How to find a balance point?
If you are in a dark room, you will feel uncomfortable when you suddenly encounter a strong light. But it would be better if you met a light in a slightly weaker room. This rule also applies to web design.

Find a perfect contrast, that is, to find a contrasting balance between a deep background and a bright word.
The following example is a simple illustration of how to balance the contrast between a font and a background. Note that when you make the background color lighter, the text on it is also lighter together.
It is difficult to find a contrasting balance between text and background.
To find the final balance, we experimented with different levels of background color. The background is not pure black, the text is not pure white is the final balance point of the experiment.

Font processing
Fonts play a very important role in the design, especially in the deep tonal layout design. The following picture shows the effect of a 14-point size serif and serif font on a deep background.

Serif fonts are clearly clearer and easier to read. But part of the designer Jeangin is applying serif fonts.

Just zoom in on the serif font so that it leaves more white around and makes it clear and readable.

The following is a screenshot of the interface of the website forum before writing this article. The site uses both serif and serif two fonts, but using them is tricky.
Large fonts such as titles, navigation, etc. use the serif font to increase the effect. In order to better contrast and improve readability, the body defines the serif font.

Use fewer color schemes
To make the design look cleaner and more tidy, designers should try to choose fewer color schemes.
With a few simple examples, too many color scheme pins do not have to be designed in dark tones because the color contrast is too strong.
Retain one or two color lines

Some designers like to use contrast strong, stimulating color scheme, of course, this is also possible, but to be able to use the appropriate good.
Overall, color is very easy to make the Web interface flower, clutter, the original dark color of the site is very heavy. So in the use of color should be more cautious!

Original Author:
SOURCE the Do ' s and Don ' ts of Dark Web design
Translator Bishua

Original: Deep-tone Web Interface Design Considerations
English Original: The Do ' s and Don ' ts of Dark Web designs