Concise and supreme Web design-creative elements and design skills

Concise, not simple. This is similar to playing the piano. You may be able to play quickly, but you don't need to play so fast in all places. In many cases, it is more difficult to slow down than to fly quickly. In fact, the taste is often most reflected in the calm, natural, soothing and dull rhythm. Next I entered the personality of the original author. I found myself a Dummy System to a large extent.

The concise Web page design style is one of the trends in the current circle. In this article, we will first analyze the most representative elements of these styles, and then I (author of the original English version) I will also share some practical skills in my work with you.

　　

 

　Creative elements of a concise style

Fixed-width page layout

Take the time to observe some concise websites and you will find that most of them are useful to well-planned grid layout systems. If a friend doesn't know much about grid layout, you can imagine that before starting the actual visual design work, use guides to divide the page into several equally wide columns, in this way, you can more accurately plan the Page Structure and element layout. Grid layout can make the information structure in the design scheme clearer, and have a strong sense of rhythm and consistency in the visual.

　　

 

A fixed-width grid layout structure can bring order and efficiency to the page. For example, although the page layout in the Creative Review is different based on the content type, the browsing experience we can feel is quite consistent, these pages are designed based on the same grid layout framework. The home page and the About page are displayed:

　　

 

For websites such as online magazines or newspapers that need to present a large amount of content, it is more difficult to create a simple page design solution. However, The Guardian (The Guardian) in The UK and some online newspaper sites of The same type show us The feasibility of implementing a concise design scheme through a fixed-width grid layout:

　　

 

The color scheme is a little cool-the translator C7210 note.

If you do not use a fixed-width layout to organize the content, it can be said that the homepage will be messy. However, with the help of grid layout, the white space and hierarchical relationships between modules are quite clear, and the robustness of the entire content structure is improved.

The following two articles can help you better understand and practice the concept of grid layout:

A Brief Look at Grid-Based Layouts in Web Design

The 960 Grid System Made Easy

It is not a new concept, and there are quite a lot of good articles made in China. If you want to find something, you can feed yourself-the translator C7210 note.

　　Good text Layout

A good text layout scheme can often play a multiplier role in the design of simple pages.

The limit on the number of fonts is a key factor. If too many fonts are used in the same design scheme, visual competition and conflicts will occur between them, which will undoubtedly make the pages messy, the user's reading consistency will also be greatly damaged.

Looking at well-designed websites, you will find that they usually only use one or two fonts, on this basis, different attributes such as font size, color, width, and spacing are used to display the hierarchical structure of the content.

In this regard, The New York Times and The Mavenist are both good examples.

　　

 

　　

 

These two sites use no more than two types of fonts, but their design schemes fully utilize the font attributes and make the information layers on the entire page very clear.

In addition to fonts, line-height is also a key factor in the text layout scheme. Make sure that there is sufficient space between the row and the row, so that the text section can become easier to read. When the user reads the end of a line of text, you can also easily turn your eyes to the starting position of the next line. We can adjust the row spacing in the style sheet through the line-height attribute.

In addition, letter-spacing is also a matter of detail for each line of text. Reasonable word spacing can bring a better sense of breathing to the text.

Some good articles (in English) are recommended for text printing:

A Basic Look at Typography in Web Design

CSS Typography: The Basics

CSS Typography: Techniques and Best Practices

CSS Typography: Examples and Tools

　Simplified Color Scheme

In the field of printing, the number of colors used by the design scheme is usually limited by various practical problems. For example, the project budget only allows designers to design posters in two colors. Similar situations are common. Designers often feel quite confused due to these limitations.

This type of problem does not exist in the Web design field. Nowadays, most display devices support a large number of colors. Technically, we can create a variety of colorful design solutions as we like. However, such a practical method is clearly contrary to the concise and supreme design goal. In many classic cases, only two colors are used, that is, the gray color of a certain brightness plus a color. Color is used on the most critical page elements, such as interaction objects in important links or page headers. From a certain point of view, this simple color scheme plays a vital role in building a concise visual style, this type of solution can also effectively improve the contrast between page elements, so that important elements can be highlighted to the maximum extent.

AisleOne's color scheme is an example of this:

　　

 

Fuzzco uses only one color for extreme purposes:

　　

 

Okay? I personally reserve my opinion-the translator C7210 note.