E-commerce has gradually matured after several years of development, and has developed its own model and style. However, for the design style of e-commerce, most people still stay in the initial effect of stacking goods + text information + all kinds of chaos. In the past two years, each e-commerce company has attached great importance to design, and the design style is gradually moving towards simple and even minimalist style. This change is with the continuous development of e-commerce, pay more attention to the quality of products and evolution.
Review of past e-commerce design:
Here’s how to do minimalist design from 3 aspects, each of which has some specific knowledge points.
Let’s take a look at the example of minimalist design:
Review images
This is the page design of Smartisan T1. Although many people don’t like Luo, I think he is obsessed with perfectionism in design. Whether it is the appearance of mobile phone (various symmetries) or the design of system UI, I think I should learn more from him as a designer. Back to the page design itself, let’s take a look at the page design.
One, the ultimate layout
You may have been exposed to and learned composition when you started drawing, and composition is the foundation of layout design. But we tend to ignore the ultimate pursuit of composition and layout. Generally, we always say that it is almost comfortable to look at, but we also need to pay more attention to layout design for the promotion of designers’ ability.
Here are some tips for typography:
1. Alignment — basic but most important
Review images
Above figure A, B, C are the page layout, figure D is the original design. Although the overall look is ok, we can still intuitively see that the composition of Picture A is A little top-heavy, which makes people feel downward-centered. The main object of the mobile phone in Figure B has a sense of compression to the copywriting, which makes people feel depressed. The mobile phone and copywriting in Figure C are at an Angle of 90°, which makes people feel hindered and slippery. The design of Figure D perfectly coordinates the relationship between the main figure and the text, and gives people a middle-distance depth feeling from far and near. The middle alignment of the whole picture can maximize the highlight of the subject — the phone. As we can see from smartisan’s web design, this type of layout is aligned in the middle, whether horizontal or vertical.
Let’s look at some more examples of middle alignment:
Review images
The above designer also uses the middle alignment, the capital V has a very strong visual impact, and the Logo information in the upper left corner and the information in the lower right corner are in diagonal form, making people feel that the picture is very balanced and stable.
Review images
Xiaomi’s new product launch poster in 2015 also adopted the form of middle alignment, so that viewers can easily focus on the important information of “New Year gift” in the middle.
Review images
The legend below is left and right typesetting:
Review images
Review images
From this, we can summarize several characteristics and functions of the aligned format:
A. Visual focus;
B. Strengthen the unity and organization of the page;
C. Guidance to vision.
2. Contrast — Make the picture more ordinary
As a simple and even minimalist design, contrast is very important. It can make people read important information very quickly, and can also make the layout design have a sense of rhythm, so that the picture does not look boring.
View pictures View pictures
The design above is for the Calf N1 and OnePlus 3, which are typically left and right typesetting. On the right is a picture of the product and on the left is simple and useful basic copywriting information. The size contrast of the left and right pictures and copywriting information should be determined according to the attributes of the goods. For example, The OnePlus phone is mainly about the shape and texture of the phone, so put two phones that take up a large proportion of the area, with the most basic copywriting information (just the phone name, price and buy button).
Review images
The figure above is the area comparison of copy and merchandise.
Review images
This design is the opposite of OnePlus and Calf. It has a large copy area, but our visual center is still the watch, because photos of physical objects are often more attractive, which is the contrast. But there is another contrast that I don’t know if you can see, that is, the contrast in the copy. The title uses a large and thick font, while other information is put in a small font, so that you can see the content of the title quickly and accurately. In addition, because of the change in font size and thickness, people feel a sense of rhythm.
Review images
3. There is a “temperament” blank
White space in minimalist design is very important, the most typical is muji design, which is the best model of applying white space to current design, but I think we Chinese are the “ancestors” of white space, Traditional Chinese painting is a very typical example.
For comparison, let’s remove some of the unnecessarily complicated background and text from the image. The main purpose is to make the main body of the product and the main information displayed more clear and explicit.
View pictures View pictures
Further streamlining, increase the area of white space, so that the product and product information more clearly conveyed.
Review images
Here are some other examples that we can try to analyze for ourselves, noting that white space doesn’t necessarily mean white.
Review images
View pictures View pictures
Two, delicate color
In e-commerce design, the control of color is very important, in some cases, the quality of color control directly affects the page duration. Some inexperienced designers often have a headache in the grasp of color, dirty color, color matching is not good-looking, color overmuch is often the problem. In the minimalist design, it is more necessary to subtraction the color, and constantly adjust the subtle lightness, saturation and color collocation, it is the adjustment of these details will make the minimalist design more durable.
2.1 Let the design quickly “color” method
On minimalist pages, colors are often used very carefully, and the first step is to choose the main color.
Here are a few ways to choose a color:
A, black and white gray main color + bright color auxiliary color
Review images
Review images
By extracting the color, we can see the page above adopted in the design of black and white and grey color, use the complementary color bright yellow, while the bright yellow is complementary color, at first glance, but people tend to pay attention to the bright yellow, and designers to 70% off discount information for the font color to choose bright yellow is also the emphasis on the discount information.
Review images
Review images
Review images
The page design of Nike and Mavericks adopts this method. In order to keep the picture not monotonous, the background of Mavericks uses some graphic elements of plain black, white and gray, which not only makes the picture rich but also does not make the color too much and appear disorderly.
B. Choose the main color of the commodity as the main color of the whole picture
Review images
The Motox web design, shown above, uses the color of the phone’s back as the main color (background) to accentuate the color and impress the buyer.
Review images
The design of Nike also adopts this method. Generally speaking, manufacturers will choose a popular color or color match if they want to specially remove the popular style. The page designed by Nike in this way also better displays the unique characteristics of the product, so that people will remember the shoes of Nike when they see this color anywhere.
C. Use no more than 3 colors
Through the above cases, we can find that these designers do not use more than three colors, but as a minimalist design, sometimes only use two colors, or even only use variations of black, white and gray to design.
Review images
Review images
Review images
2.2 The seemingly complicated color collocation is actually very simple
In minimalist design, color collocation needs to be very careful, because when the color collocation is simple, even if it is slightly incongruous, it will be magnified a lot, so we need to understand several properties of color: hue, saturation, lightness, and the concept of contrast color, similar color and so on.
There are also several ways to match colors for minimalist designs:
A. Unified brightness and saturation;
The lightness and saturation in the image below are so harmonious that neither color is too bright nor too dark. Although they are different colors, the whole picture is also very coordinated and unified. Let’s analyze the color of the picture now.
Review images
Review images
Review images
Let’s take a look at, the above four colors in the round I extracted from pictures, below the position 4 is the color picture and parameters, basically see the location of the color, is each picture circle position, there are two lines, we see the picture the two lines is the code this four color lightness, you can see green and orange lightness position are very similar, Yellow and dark blue lightness position is also very similar, green and orange occupy the vast area of the whole picture, so the whole picture looks very harmonious. Saturation means the closer you get to the upper right corner of the palette, the more saturated you get. We see that except for dark blue, the other three colors are all near saturation.
Review images
Review images
Review images
Review images
You can experiment with these two designs and deconstruct the lightness and saturation of the matching colors by yourself. As a designer, I think it is necessary to have a detailed understanding of colors.
B. Control the level of color;
The so-called color level is still analyzed by using the picture of the calf electric car. We can see the color in the circle after all the colors are extracted.
Review images
Review images
Review images
In this way, we can easily see the levels of color. The gray system has 7 levels, while the red system has 4 levels. Because of these levels, the whole design is very rich and three-dimensional without being too “flat”.
Three, elegant fonts
The position of text in e-commerce design is extremely important, and it undertakes the use of intuitive information dissemination, such as the discount information on the activity page, the selling point information on the product promotion page, the preferential price of the product, the performance of the copywriting content, etc. In minimalist design, the choice of font is more careful.
1. Choose a font that fits the overall design style
Fonts also have their own appearance, personality and style. When the style of fonts is perfectly integrated with the design, it will add a lot of points to the whole design.
Review images
The two pictures above are the “What’s worth buying?” flash screen, let’s take a closer look at the relationship between glasses, camera and font (copy). The style of the glasses and camera are very retro, giving a feeling of the Republic of China era, so the designer chose an archaitic font to match the pattern, giving a very unified feeling. With wonderful copy, it will give people a scene of the Republic of China period, which can also be called the sense of bringing in. What if we changed the font in the picture to a very modern art font?
Review images
After changing the font, we can see that although each font looks good on its own, it doesn’t match with the illustration, and it immediately loses the “craftsman” feeling that the copy and picture are trying to convey.
Review images
If you look at the picture above, which means Animal Prints, you can see that the female figures on the right side are wearing a dress, so I guess this is a Banner for selling female Prints, and they are mature ones (you can see from the models’ bodies). Therefore, when choosing a font, you should choose a soft and delicate font rather than bold.
Take a look at the picture below. Does it feel a lot worse?
Review images
Let’s look at a few more examples and try to analyze them for ourselves.
Review images
Review images
Review images
2. Choose a simple font
In recent years, some fonts with complex structures and extremely exaggerated glyphs have appeared. Personally, I think we should use them less or even not. Font is a very professional category, and many designers are still unable to handle some fonts well. It is best to use fonts with relatively simple shape and structure, whether it is ordinary e-commerce design or minimalist design.
Review images
As can be seen from this design, the whole design is based on the combination of words. No matter English or Chinese, the font with very simple shape is used, and the size of the font itself makes the picture very rhythmical, without feeling that it is all words. From this we can lead to another theory, in some cases font is not only the carrier of information transmission, but also a kind of artistic graphics.
Here’s a bad example:
Review images
Here we don’t talk about the composition and color of the thematic design, but the text. In addition to the 9.9 yuan, which obviously highlights the selling points, the other text is basically very messy, and the font font has been changed beyond recognition. Therefore remind you, do not have the ability to grasp the font when do not modify or even design font.
Here’s a look at the apple clones:
Review images
Apple is relatively “cow”, designed a set of fonts for its own products, some people said that all kinds of ugly at the beginning, but it was still accepted by most people and won praise, the reason is nothing more than simple and easy to use. This is also what is most needed in this rapidly developing society, especially in the e-commerce industry.
Review images
Come with 6 kinds of thick and thin fonts to fully meet the general needs
3. A “great” Chinese font
Chinese fonts are “great” here, not only because I am Chinese, we can count how many fonts there are in China, each has its own historical background, such as Official script, common people are not allowed to use, Wei Bei is specially carved on tablets, etc. And Chinese is the only language that has become an art form — calligraphy. Some people may think that Chinese fonts or calligraphy fonts look old and unmodern. Here are some examples to prove that they are wrong.
Review images
The above page is the design of real kung fu. Obviously, the Chinese calligraphy font is conveyed and expressed as a kind of artistic graphics, and it highlights the theme of “taste” by combining some related elements (peppers, spices, vegetables, grains, etc.), and it is easy to see that it is a page of food.
Review images
English can also be designed as calligraphy, showing more tension, more in line with the feeling of warriors.
Review images
Millet rice cooker “new domestic product” also uses calligraphy font, let the plain page has vitality, and this font also reveals this kind of make new domestic product “ambition”.
conclusion
Actually the minimalist design is the inevitable outcome in the process of the evolution of design, this is a kind of optimization process, that is to do subtraction, unnecessary and interference elements of information deleted, keep the most basic is the most useful things, I also from this tutorial typesetting, colors, fonts, three aspects to the interpretation of the specific how to do a minimalist design, The same applies to the design of general e-commerce. At the end of the day, the fundamentals of good design don’t change.
directory
1. Extreme typography
1.1 Alignment — Basic but most important
1.2 Contrast — make the picture no longer ordinary
1.3 Have “temperament” blank
2. Exquisite colors
2.1 Let the design quickly “color” method
A, black and white gray main color + bright color auxiliary color
B. Choose the main color of the commodity as the main color of the whole picture
C. Use no more than 3 colors
2.2 The seemingly complicated color collocation is actually very simple
A. Unified brightness and saturation
B. Control the color hierarchy
3. Fancy fonts
3.1 Choose fonts in line with the overall design style
3.2 Choose fonts with simple font structure
3.3 “great” Chinese fonts
Welcome to follow the author’s wechat account:
Review images
“E-commerce Design Series good articles”
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.5 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com