2013 new trend of Web Design: Flat Web page Design

Article Description: Here is a brief introduction to the concept of flattening, the so-called "flat design" refers to the word is to discard those who have been popular for many years of gradient, shadow, highlight and other visual effects, so as to create a look more "flat" interface. Good at using color to encourage users to explore.

With the rapid development of the Internet, we can see the texture of heavy, layer style of a wide range of sites less, instead of a variety of light texture, bold layout, creative and innovative, the site has slowly entered the vision of human development so far, people's aesthetic, fashion standards are always changing, the internet is so, The following article will give you a talk about 2013 web design of the new air to "flat design" (flat)

What is flat design

Here is a brief introduction to the concept of flattening, the so-called "flat design" refers to the word is to discard those who have been popular for many years of gradient, shadow, highlight and other visual effects, so as to create a look more "flat" interface. Good at using color to encourage users to explore.

Why Choose flat Design

> Rapid and efficient is a flat design of a very important gene, time is money, how to update the information so fast on the internet to keep up with its pace-fast this is one of the reasons why many internet giants choose flat design. For example, we swim in the official website of Deer Ding, the early official website button texture is heavier, layer style more, very affected load time, according to the statistics page size in 357K.

The image below is our tour of the latest Deer Tripod official website, obviously can see and the old version of the difference between the two ~ in the case of ensuring the overall vision, as far as possible the thin layer style, statistical page size in 214KB. At the same time reduce the number of page requests (each picture is a request) from the old version of the 26 optimization to 14, optimized than over 40%.

> Quick and low cost operation

Each game version of the update we will be the official website design revision. The use of flat design, we can be in the shortest possible time to update the official website, only need to produce the corresponding color value on the line, greatly saving the project time, but also convenient to update next time.

> Information Highlighting

The image above is the March 2013 Yahoo International Homepage's revision

The image above is the Facebook concept version

Microsoft 2012 Brand Refresh website homepage

Nest

By contrasting the colors, the sizes are different, let important information in the first place, unimportant elements of the weakening, in addition to a few major action buttons using a slight bevel effect, all the other interface elements using a flat style, such a design so that visitors can easily focus on the product and information, Without being interfered with by visual elements on the Web site interface. Thus highlighting core information and operations. These all enhance the readability and legibility of the website.

> Concise and concise things are always popular, in a concise design of a clear logic of the site you can quickly find the things you want, and can be used to reduce mistakes in the process. To improve the user experience, the following figure

Because the site is relatively long, I only cut a part, interested students can enter the following link address to the site to see.

Figure One transmission gate: https://layervault.com
Figure II Transmission door: http://www.rdio.com
Figure three transmission gate: http://lorenzoverzini.com
Figure Four Transmission door: http://builtbybuffalo.com

How to build flat design

In the past work, I have consulted and studied a lot of attention to flat design, and finally share with you on the flat design of some small ideas, hope to be helpful to everyone.

Less and less.

Maybe everyone just started to design, do not know how to do a subtraction, how to choose between elements, you can do "addition", and then 1.1 points less, ask yourself this piece is not necessarily need to put this element, is icing on the cake or superfluous.

Be bold, be bold.

Unrestrained thinking run, excellent design is innovation. I personally prefer Apple's chief design Jony Ive: Break the old frame first. For example, the design of a lunch box, then he would like to wipe out the concept of "boxes", do not be trapped by this "box" thinking, just want the best use of this vessel and design form. For example, when it comes to music, don't just think about notes or CDs. Think of any other better and more innovative way to present it.

Fine point, more detail.

The design of the so-called details determine success or failure, sometimes a little bit of line spacing a little bit of color value will be a big impact on the overall visual effect, spend time fine-tuning details is very necessary.

Cool and cool.

Cool is not just a vision, but a more rational way of interacting, as a result of less texture, so the color has become particularly important, the use of a reasonable color can play a decisive role, designers completed the design, the site only completed 50%, later if the page can be a good interactive effect, can give the entire site a lot of grace.

Postscript

Here to talk about the design in the product application, accustomed to do the visual designer to do products may need to adapt to the stage, the understanding of products, primary and secondary needs of the analysis, interactive performance, data research, and so accustomed to product design designers, do pure vision also needs to adapt to the stage, all kinds of cool performance, the arrangement of primary and secondary information , the spatial level of the open layout of the form of innovation, in fact, the quality of the design is not to assess the visual, different products on the visual have different needs, the type of game designers, may need to be more color and visual expression to be more strong, that is, you pm often told you I want to look good, users are interested in playing, And the Product Class UI designer, more attention is the design level, the information logic, the design style unification, the continuation and the expansion, is also the PM request, the information explanation is clear, the level is distinct, the interaction is concise and clear.

Reduce the user's thinking, reduce the cost of learning, in fact, no matter what designers, are in the user Service, are to do user experience design, the same, regardless of the current fashion design style, we have to start with the characteristics of their products, rather than blindly follow, follow, follow the trend, designers to think, rational judgment, Will this design bring better benefits to the company? Can you bring a better experience to the user? Instead of blindly pursuing visual performance! We should also be rational in treating flat design. No one design is omnipotent, no one design is the best, only more appropriate!