On the dark background with magical charm in UI design

English: Medium

Translator: Excellent network-Chen Zimu

Links: http://www.uisdc.com/ui-benefits-of-dark-background#

-------------------------------------------------------------------------------------

Another article from Tubik Studio, with a wealth of experience in design projects, has made this senior design organization unique and systematic in every detail of the design. Today's article is to talk about the dark background in the design of the application, what is the doorway? Look down ~

The dark background, or dark background, has been a controversial issue in UI design today. Background selection is critical to the efficiency of the interface, and a reasonable background design makes the interface easier to use, whereas an inappropriate background can ruin your well-designed UI. Today, let's explore the techniques and considerations for using a dark background in UI design.

There are many factors that affect the color scheme and background color selection, as well as the advantages and disadvantages of dark backgrounds when applied to Web pages and app UI interfaces. The practical experience of Tubik Studio's many design projects proves that the dark background itself does provide a good user experience and offers compelling solutions. So, let's explore how to maximize the use of dark background in UI design.

visual perception in dark color systemAs early as 2009, ProBlogger has done the corresponding research, when asked users they like what kind of blog background, almost half of the user feedback like the light background-this is reasonable, after all, the blog is based on text content, light background more in line with the daily reading habits of everyone. But the interesting thing is that about 10% of user feedback prefers dark backgrounds, and about one-third of users think the background color is related to the properties and content of the site itself. At the same time, this also means that a significant portion of the user's needs are overlooked in the designer's design process. However, for non-text-driven Web sites and apps, users may have a higher demand for deep-tonal backgrounds. The importance of user research in actual design projects is evident.

The user's perception of the background color has been confirmed by Richard H.hall and Patrick Hanna's scientific research projects. Earlier, scientists from different fields made a systematic experiment and analysis of the readability of the web pages, and they came to the conclusion that the contrast between the background and the content is proportional to the readability and the black text in the white background has the best readability. The same applies to white on the black, which controls contrast and clarity, and two of scientists have designed the whole experiment reasonably well. This study contains a number of different color combinations of the effectiveness of testing, for the designer has a very important reference significance.

Readability Aspects

One of the most famous pioneers in user experience, Jacob Nielsen once said, "the text and background should use a high contrast color." Black words on White can increase readability to the highest, and black text on the readability of the effect is almost the same. Although the contrast between the two colors is the same, the latter will allow the user to recognize the text slightly more slowly. Limited by the color scheme, white text content compared to the black word on the white background, will appear more slender, blurred, the overall clarity is not as common as the black Word. This is most evident in the combination of a pure black background and a white font. ”

Indeed, readability is the most important factor affecting the performance of a product, and readability is not just about text, but all meaningful text, logos, symbols, numbers, patterns, and so on. Therefore, when the designer is ready to use a dark background, the actual effect of the fonts, icons and images on the dark background should be tested on different devices to support the entire design.

As demonstrated by the best black fine Web site design in the Awwwards website, these excellent black Web sites and app pages have carefully selected a reasonable color scheme to display content on a black background. These excellent cases have contributed to our experience as follows:

• Because the dark background will "absorb" other elements of the "light", so there is enough space between elements, elements and elements to ensure the recognition degree;

• Longer text has better readability and is easier for users to digest.

• The spacing between lines and the length of the text has a significant effect on readability, especially in the dark background.

  Therefore, the length of space, word spacing, line spacing needs to be carefully considered.

• Dark color does not mean that it is purely black, and the effects of different shades of background and text are also

  Different, so we should experiment with an open mind.

• Chroma, gradient, and glow have a significant impact on readability.

• Non-liner fonts are more readable in darker backgrounds, and the serif fonts appear more elegant in a darker background. The characteristics of both should be used in the actual design process.

contrast Aspect

The contrast form given by Webdesign.about.com is good for us to show the actual effect of different colors in contrast. The most interesting part of this table is that the black column proves that Black is almost the only color that can make a good contrast with other colors. When designing the interface, try to test each color carefully, while the black feature makes it possible to match colors in a dark background.

In the same way, contrast is also an important factor to ensure the identification and clarity of mobility.

An early survey of contrast and sharpness, the survey showed: in the dark background, try not to use white, white should be diluted to light gray, to prevent the extreme contrast of the white produce glare, and eliminate glare at least 5% gray to achieve the effect. The interesting thing is that this kind of gray is still recognized as white in the visual. In addition, the font bold is also placed white by black "eat" one way.

It is also worth mentioning that darker colors, especially black, are deeper and thicker than others, making it more suitable for displaying pictures, illustrations, posters, and more. With good layout and organizational structure, black can significantly enhance the expressiveness of other visual elements, making content more attractive.

The aspect of emotional perception

Color psychology is also a factor to consider. The background is not just a platform for content presentation, but also a message for visitors to convey. Dark colors tend to look more elegant and show mystery. In color psychology, black conveys the feeling of elegance, formality, fame, power, which may be why many big brands make visual designs around black and use black and white to make the main color scheme. This property, known as Black, provides a good, reasonable design for the customer in the UI design process, and can provide a clear explanation.

advantages of a dark background

To sum up, we can summarize the advantages of a dark background:

• Stylized, elegant

• Give people a mystical feeling

• Bring luxury and high-end ambience

• has a wide and good contrast ratio

• Easier to create a sense of visual hierarchy

• Create visual depth to make content easier to access

• Visual appeal

a question worth thinking about

In addition, the dark background also has the trouble side, if does not have the reasonable plan detail, the user is easy to lose in the layout. So, we have some questions that are worth thinking about:

• User research: The data and information generated are the basis for creating effective and attractive color schemes based on the actual investigation, theoretical research and experimentation of the target user.

• The product research: to competitor, unexpectedly product carries on is the market research, the research result will affect the design plan, makes the products easier to be understood, creates the more noticeable design.

• User testing: Dark background in different devices, different resolutions of readability, the actual effect of clarity, through testing to find the impact factors.

• Environmental factors: An analysis of external factors such as the support that the product can provide to other users, and the reasons why the user is disgusted.

• Content: The proportion of typical factors such as the coverage and background of the content of the page, and their impact on user experience and visual perception.

• Content properties: The effect of a dark background on elements of different properties, such as graphics and text.

On the dark background with magical charm in UI design