Start from scratch and teach you to create minimalist style in web design

What is minimalist design

Minimalist design, strictly speaking, can not be regarded as a visual style, but a design philosophy. It keeps the basic skeleton content on the basis of the elimination of superfluous elements, decorations, colors and textures, is through continuous thinking and the design process of simplifying. The result of this is to highlight the subject content. Therefore, it is rooted in the concept of the roots of design ideas.

Minimalism originated in Scotland, at that time, in various cultural fields have set off a minimalist trend: graphic design, architecture, music, literature, painting and so on. Until now, it has also begun to flourish in web design.

Although minimalist design style in the decade has not been enough attention, the previous Internet field can not see its shadow, the style of complex logo and advertising, gorgeous colors ... Web design has always been a bloated and complex image appears.

　　Less is more

Previously mentioned, minimalist style is a straightforward display of themes, reducing the visual interference to the viewer. If a page has too many elements, users will be confused by the number of elements that cannot be determined by their priorities. An excellent minimalist design is bound to use impartial attitude to focus the main content.

For example, a black-and-white gray-color Web page, if any color, will become the visual focus. As shown in the following example, white as background, plus a little light background, with black text, at the same time there is a corresponding map, the color of the map is concentrated in the model's clothing, this is a good highlight of the clothing brand this focus.

This kind of design style lets the user focus to the clothing itself the texture, the color, the style, thus easily locks the user's attention. At the same time, in addition to the clothing itself no longer add any decorations and elements, except the main structure of no other.

　　How to simplify content

First of all, the designer should have a clear understanding of the content displayed on the Web page. Make a list of the elements that are required on the Web page, and then review whether there is a need to remove them.

This is a list of elements I think might need to think about whether or not to play.

Icons for social media

Banners and detailed descriptions

Some of the more intriguing elements (such as sharing and praise) that are now prevalent

More than three parts of a page

Secondary elements in Navigation

Of course, this is not a framework, and you certainly need to consider not deleting it if necessary and then quickly. Some of the elements that appear on the home page can be placed in level two pages. After all, if the homepage is too informative, your users may also be "indigestion".

As a result of this streamlining, perhaps the functionality of your site is weaker than some, but the redundant elements are reduced to make it a simpler layout, which allows users to stay longer on your site. And let the user become willing to learn the site.

　　How to simplify the design

You need to keep simplifying any elements that appear so that the texture disappears until it's gone, less color, simpler styling ... In a nutshell, this series of processes does make your design a little bit dull. But you have to remember, do not deviate from the direction of minimalism, you can focus on the design focus on content, so that the focus of the content to become the only important visual core. Use some creative techniques to deal with the details.

　　Use a graceful wireframe

As you all know, using wireframe can make your design look more "solid", because your eyesight is more useful than you think, it will even remember every intersection of each interval, so any element that destroys the visual balance will be particularly abrupt, and your intuition will only tell you "feeling wrong". But that's actually the result of not using a good wireframe.

A suitable wireframe is the prerequisite for the minimalist design. You can use it to get the right proportions and create an interesting visual balance.

You can use the 2B pencil to draw your page layout and element style on the draft at the beginning of your design.

When you draw a wireframe, you need to follow the following order

1 decide which element you want to appear in your Web page 2) to the elements, order by Priority 3) draw the outline frame and try to achieve the best layout visual effect

　　Leave White

In my eyes, leaving White is a kind of design material. White is not synonymous with minimalism, but it is inextricably linked to minimalist design.

No matter how creative you are, a minimalist design, if not enough to keep white, will be a failure. So, in design, you have to consider that there are enough white space around each element.

For example, the above page in the homepage of the logo part of a large number of white around, so that the logo itself to be intuitive display.

　　Make Simplicity a habit

We cannot deny that we have a habit of inflating ourselves. In design, you can add too much to your mind because you have a desire to be perfect. In view of this, we must let ourselves out of this habit to form another good habit.

If you are in the design of the blind spot, always feel something wrong "as if missing something", at this time, rather than dwell on adding more elements to the page, think about how to reduce the page more elements.

Finally, when you are satisfied with the design, see if you can still further simplify the design. It's like giving the saplings the patience to trim their foliage.

　　Minimalist paradigm in Web design

　　Black and white gray: color asceticism

The atmosphere of black and white ash is unforgettable, although it is a handy design reason, but put into practice, designers often need more courage to do such a design. Because the risk of doing this kind of design is too big, careless will let the design become lifeless a barren, bring to the viewer negative feeling. As in the image above, the background of the black as the need to strictly match the content of the site, showing the black "cool". At the same time, the elements of the choreography must also be eclectic, such as the characters to the front, text on the background, black and white with a sense of fashion.

　　Linear illustration: Shape charm

Gray background with only white as the front view, the focus of the home page is the center of linear illustration, which is a brand to show the most intuitive way. And the use of a certain projection effect, let the illustration as if suspended in mid-air is to add some creative details, which let the screen active, will not fall into a barren when.

　　Letter: The idea of shape

The shape of the letter itself is a perfect composition, plus the text itself has a certain meaning, integration, it will make the screen into two-way sound. So, to shrink or enlarge the text, so that the text becomes the focus of the screen to convey the brand image, this way in the minimalist website is easy to do. As in this example, you can use the background of the text as a creative extension of the part, so that the mouse when the movement of different gradient color background, these gradient colors are prone to bright, and here is a wonderful embellishment of the text itself aesthetic. and Chinese compared to English more complex, want to turn the text into a form of focal length, you need to change the Chinese in the form of more prominent fonts, such as calligraphy fonts. As shown in the following figure.

　　Photography: Telling stories with pictures

With a high-definition photography as a background, it is also a common method of minimalist design in Web pages. The photographic work itself is minimalist, allowing the brand story to be hidden in the photo. The realism of the photograph is incapable of being left or right, and its own style must clearly highlight the subject. The appearance of words is to explain the role of the explanation, you can be in your design to be deleted or added.

You can also show pictures and text as shown in the diagram example, so that the combination of the images and the text, you must consider the combination of words and pictures, do not use a picture and text content irrelevant.

　　Applications for minimalist design

As we all know, minimalist design due to less content, in the current commercial applications are not too extensive, mostly used in the small creative field agencies more than the official website. When it comes to marketing, because the purpose of marketing is the shortest time to push the most comprehensive information to users, so the General mall will not let themselves look too relaxed. That said, but when we were designing the mall, we noticed that there are already designers who have begun to use this simplified style to design the mall and make a different detail to deepen the small mall. This kind of mall's products are also targeted at the higher end of the user, such as the fashion industry site, you may wish to try such a design style. Shown in the following example.

You can see that all the information is condensed and the products are displayed at a glance. I think this is a step forward, both in terms of aesthetic and marketing impact, so that the product and the user's distance is closer.

　　Postscript

I think the minimalist design is the future pie, to highlight the theme of the design of the idea itself is the designer should carry out the thinking. No matter what is designed, the purpose of the design is to be tortured, so the simplification and optimization of the subject content is a very effective way to improve the efficiency of communication. This is also an irreversible one in the future.