How to make layout in web design easy for users to obtain relevant information efficiently and accurately

First talk about "Metro"--developed by Microsoft with the internal name "Typography-based Design Language" (based on typography).

Metro is based on the Swiss graphic design principles (clear, real, beautiful), from the traffic signs. People in life are in a hurry, more need to provide fast, concise, direct, clear design. Now the internet is not so, fast access to information at the same time, information flooding, complex and disorderly, simple wind popular-reducing elements to show the essence. Good typography helps make web design more concise and efficient.

Concept:

Typesetting is the limited visual elements of the organic arrangement of combinations, so that logic clear, reading smooth, interactive and convenient, resulting in a good experience.

Rams's 10 Principles on excellent design (innovation, practicality, beauty, simplicity, modesty, honesty, time test, detail, attention to environment, simplicity)

Typography has long been widely used in print media, newspapers, books and magazines, also applies to web design, but the characteristics of the web makes it different:

 Interactive (operable, instant response, state change, require not only beautiful but also easy to use)

 Presentation Media (PC, mobile phone, flat panel, TV, projection, etc., need to consider the size and color)

 Technical (the continuous upgrade of HTML and CSS, the support of Web typesetting is more excellent and efficient)

 Multimedia (text, pictures, video)

Make typesetting in web design more complex, more difficult and more challenging;

Principle:

Same, typesetting still follows the basic principle of plane composition--

Repetition and interleaving, rhythm and rhyme, symmetry and equilibrium, contrast and harmony, proportion and moderation, variation and order, reality and leave, change and unification

At the same time, it should emphasize:

 Function and form (in-depth understanding of the function and content, so that the form of a better embodiment of the theme of ideas)

 Compatibility and response (Cross-platform, different resolution, different device environment rendering effect)

Type:

1. Text

The content hierarchy is represented by attributes such as font size, font, word color, weight, spacing, and line spacing.

2. Color

The use of color of the body, location, area, and hue, lightness, purity and other attributes and combination of content and environment to organize color.

3. Picture

Pinterest to lead the flow of waterfall typesetting trends

4. Form

Careful form typesetting allows users to feel comfortable and happy to register, pay, and content creation and management.

5. Interface

The most important difference is that the Web interface can operate the functional, need to emphasize the usability of the design, typesetting should also take into account the user's browsing, operating habits.

6. Navigation/Charts

Through the induction and collation of information data, effective classification, arrangement, the complex information can be effectively and clearly passed to the user-clear, intuitive.

Summarize:

Typography is important in web design. Good typesetting design, not only to be beautiful, more is to be effective organization and arrangement of information content, so that its standardized and orderly, clear and clear, user-friendly efficient, accurate access to relevant information, so that the web design more friendly, easy to use, authentic and trustworthy.

This requires the designer to understand the design of the information content, improve the organization of information content, processing capacity, the content itself as a design element, according to the design principle of effective arrangement. Good typography helps make web design more concise and efficient.

(Weibo UDC original blog, reproduced please indicate the source, welcome to subscribe)