Flat design Aesthetics: A design trend with Facebook as an example

One of the most recent trends in Web and UI design is the use of "flat design" and is now a very hot topic. Full-street on-site seminars and lots of tutorials. I am often attracted to minimalist design, so flat design is a natural inspiration to me in design aesthetics, especially in the redesign of a recent project.

In this article, I'll discuss what a flat design is, review other design methods, and provide some tips on how to implement in your own design.

What is flat design?

In fact, flat design means that you don't use the usual gradients, pixel-perfect shades in your design, and then typically the user interface that has been spreading in recent years to achieve a seemingly "flat".

Layervault Allen Grinshtein may have initially defined "flat design". In an essay published in Hackernews, he said:

"Popular products in Web pages often have similar design aesthetics, such as stereo, inner shadow, and external shading. For designers, they will be proud to achieve this "kitsch" interface. But for us, for the other few designers, this is 2 ... “

If you go to see Layervault, its beauty lies in its simplicity, without even any additional detail design that we as a designer will often try to achieve. Understanding and pondering the gradients and other styles that are used as current trends is a pretty interesting thing, and these things are slowly changing ~ ~

Example of flat design

In the new Squarespace Web site, they chose an almost completely flat interface, and you can estimate the time they spent on prototyping and designing the UI, which is quite complex, but very easy to use.

Although I've only seen it and never used it myself, the new flat-Layervault UI looks really simple and easy to use.

Facebook has embraced flat design aesthetics almost all the time-only to have recently added some minor cubism.

"Facebook is a perfect example of a flattened design trend. Their main operation buttons still use a slight stereo, but a large number of minor buttons use a fully flattened design. And judging by the fact that they never change the interface style, it has always been like this. “

Although they have been criticized over the years for changing their interface, it is still one of the most used Web sites, well, users are not wrong ...

The newest Rdio interface is so flat and minimalist that it's almost completely free of shadows, gradients, and even colors ...

Before Nest, I was happy to give it a little bit of front-end code, and I was fascinated by the flat aesthetics it showed.

The designers who embrace flat design are really obsessed with it.

“... As interactive designers-we should embrace this approach in our work and firmly avoid the physical and shadow of our bodies. ”

Challenges to the proposed physical and chemical design

Like the impact of the minimalist movement on the excesses of the last century in architecture, flat design could be a subversion of web sites and interfaces that have been used for years, or too fancy. A typical example is the recent overuse of Apple's proposed materialized design.

Wikipedia this defines the materialization:

The design element of a product mimics its essential function in the original product design, but becomes the decorative design element in the new design

For example, we usually use gradients and shadows on the elements to look like buttons, because most of the buttons in the real world have features, although they are not necessary in the computer user interface settings.

"So a weather app that uses a glass thermometer picture is intended to be materialized: the glass in the original (real thermometer) is necessary, and becomes fully decorated in the new design." “

Is it really necessary to use leather elements in Calendar apps? Similarly, is it really necessary to design buttons with gradients and stereo corners? Or do users know to click on them? How many decorations are necessary?

"In the real world, when a button is pressed, you can feel its resilience and elasticity, but on the phone or on the screen, there is a congenital deficiency of physical feedback." Your consciousness knows the existence of physics and is not materialized. So at least for me, it didn't actually meet the expectations and let me down. ”

Therefore, flat design may be an excessive use of decoration in the interface design of the subversion, and the past minimalism is a flashy decorative style of subversion.

Form follows function, embracing flattened

In the minimalist movement of the architectural field of the 20th century, some great designs cite the concept of "form follow function" and "less is much (less are more)" that we are still talking about today. To put it simply, I like this phrase from sculptor Michaelangelo when asked how it created the iconic statue of David Michelangelo.

"It's easy to cut off the stones that don't look like David," he said. “

)

In the user interface design, often remove what really brings the interface into the life of those things. 37signals's team is notorious (but also successful) in applying this concept to their products-such as basecamp--. In the flat design of the world, less, really is more.

In order to achieve flat design aesthetics, we designers must focus on what the product is, not what it looks like. This is the key and the reason the wireframe is critical to the design process.

Aesthetics is a matter of opinion

In my study of this article, I hardly found any scientific research about buttons on the screen that look more like buttons are actually more clickable. There is a lot of evidence to support contrast, color, and hierarchy, but I would wager that in an appropriate context, an orange flattened button is as effective as a three-dimensional orange button. Here are some ideas from other designers.

"It's not the same as runway fashion--everyone starts doing the same thing, and when it's everywhere, it's going to stand out as a designer and you have to runway." “

"To say that materialization is bad design" is like saying "purple is a dirty color" or "a place without an ellipse in Web Apps". It doesn't make any sense. ”

"Why is it better to promote some kind of design philosophy over other ideas than to prove that you are really good at it? Is it more valuable to look at than to reduce availability?"

Good design is good design, independent of aesthetic thought

So, if stereo, gradient, shadow is just a matter of opinion, then how do you achieve a good design? Whether you want to use flat design, user interface and planning related. I believe that flat design makes it easier to identify a great design because there is a lot less interference between the design and how it works.

Here are some tips on the great interface design:

Consistency

By using common UI elements and styles, you can help users understand what is expected and make it easier to use your application.

Contrast

There should be a proper contrast between clickable elements and non clickable elements. This can be achieved by color, size, position, and style.

Layout

Using a grid layout, such as 960GS, is a good way to build some visual guidance for your design. The sight will naturally be from the lines and proportions created by the content, so understanding and using a grid is a good way to enhance the visual balance.

Level

I prefer to interpret this as "user behavior" and I write an article on this topic, but implementing the most common user behavior (sometimes referred to as use cases) is easy to spot, and removing less common behavior is a good way to simplify the user interface and make it better. As a general rule, the most important thing is to be more visible than the less important.

My experience is that it doesn't matter if it's flat or lifelike, and it's important that the hierarchy is very important for fast browsing and for users to find the next operation conveniently.

To prevent you from not being able to understand it, savor it: "Flat design means no more commonly used gradients, pixel-perfect shades, and then typically a user interface that has been spreading in recent years to achieve a seemingly" flat. ”

Well, in order to get you into the flat design trend faster, today we have collected a few wonderful examples (and some dribble screenshots) that they can illustrate the "flat" beauty of web Design ...

Microsoft

Spelltower

Supereight Studio

Hundreds

From: The Flat design aesthetic:a Discussion

Original: Flat Design Aesthetics