Website Design: Simple Style in Design

Hi everyone, I am AMU. Today I will share with you some simple design experiences in my weibo project. In modern urban life, we face noisy streets and subways, various advertisements, and various emails and information every day. Therefore, we are pursuing a kind of experience in our hearts-simple, like all well-known brands such as MUJI, apple, and Ikea, their products have also achieved great success.

　　

 

Minimalism is a photography method that highlights the simplicity and complexity of the subject. It is a relaxed attitude in life and a concise design method in design.

The same is true for Weibo's design experience. We have removed complex visual interference and strive to provide users with a pleasant and easy visual experience.

　　1. Weibo local project

Speaking of Weibo's local project design, I had to thank a photographer for some inspiration.

German photographer Joseph fschulz (born in Holland 1966)

　　

 

The same city project requires you to determine the logon location based on the user's logon ip address. This requires a first image that reflects the local customs and customs to create an atmosphere. How can this problem be solved? How can we make users feel at home?

Just as I wanted to use food, scenery, and architecture as the subject matter, I accidentally discovered this set of photography works. It has no extra light effects, the picture is clean and looks very comfortable. However, the seemingly simple things are more detailed in terms of angle and composition than ordinary photos. For example, the following photography set is the plane composition and perspective principle, and the content seems monotonous, however, it has a strong sense of composition.

Then I decided to use city buildings for performance. I began to search for landmark buildings in several major cities on the internet, simplified and refined them, and outlined the main characteristics of the building. take Hong Kong as an example:

First, I found a representative Hong Kong Night View.

　　

 

Then draw a simple building skeleton and start to color it. When it comes to this, I insert an interesting thing. In Hayao Miyazaki's studio, the "Little Boy" group is responsible for drawing sketch and structural drafts, and then the "Little Girl" Group completes coloring.

　　

 

[Final]

　　

 

The same is true for the design process of other cities. I will not go into details here :)

　　

 

Unfortunately, this project was launched soon for various reasons, so we may not be able to see it. Haha ~

I have learned a little bit about this process. When dealing with similar product pages, you can consider using a flat silhouette image to design a picture with a rhythm, we can use a color to render the image. We hope that you can use it in a good visual effect.

In the following project, everyone is using it every day. Although it is small and hard to perceive, it reduces the user's cognitive burden. Icons allow us to quickly find what we need and provide clear guidance to users.

　2. Weibo icon design

This icon was painted at the end of last year. At that time, we needed to revise Weibo (V4). There were many problems with the previous icons, such as inconsistent styles and varied sizes.

This is the finishing icon. The icon has no crystal texture and no texture. Taking the simple design style as the main line, this is also consistent with the "light" and "thin" Spirit of Weibo's overall experience.

　　

 

Let's take a look at the comparison between the release boxes of the new Weibo version and the old Weibo version, which clearly shows the definition of the icon and the visual effect of the simple design style. There are a lot of unnecessary highlights and stereoscopy in the old version of icons, but these effects do not have the desired effect, but the recognition is greatly reduced.

　　

 

　　3. chart design

First, define the color of the chart. The difference between the chart and the above two designs is that it is identified by color. Therefore, color selection is particularly important. Sometimes, charts are boring, so I chose a cold color. This is easy to see. Compared with the warm color, it can reduce users' dislike.

I will add some weak light and projection, but the general direction is dominated by a simple style.

　　[Pie chart]

When adding options, the colors of other options need to be extended according to the main color, but there is a small note: because of the approximate color relationship, to ensure that the color can be separated between the left and right, we need to specify the location where each color appears, so I made a face Filter Specification for developers.

　　

 

　　

 

　　[Curve chart]

This is also true for curve charts, with weak projection and highlight changes in details.

　　

 

Summary: minimalism is not simple, but minimalism is unnecessary.

Thank you for reading :)

Finally, we recommend the following urls:

Http://www.josefschulz.de/(the first article mentioned the photographer's URL)

Https://www.mint.com/t/012-c/ (charts do a good job)

Http://www.icoeye.com/(the icon is awesome and also comes with the design process)

(Weibo UDC original blog post. You are welcome to repost and indicate the source. Welcome to subscribe)