Design Aesthetics discussion on flat interface style

This is a small article on the visual aspect, about flat and quasi-materialized styles. Many people come to express their views, indicating that this is indeed a design issue that everyone is very concerned about. Although everyone's points of view are different, there is a certain degree of truth. We can see the thinking and passion of the designers who have published the arguments. Some people have said why are you so cool? What do you think is better? What I want to say is that, in my opinion, there should be no stronger controversy in this case, because it is not a non-black, white, non-beautiful, or ugly question; it is separated from the context of the actual product and from the association between product functions and target user group types. The so-called good and bad proposition is not true at all.

To be specific, let alone the visual style of beforweb, apart from the icons in each article, it can be said that it is completely flat (of course, careful friends can find a one-pixel border similar to the shadow effect at the bottom of the title background on the sidebar. This does not count ...), but if someone says that I am a flat-style defender, I will be very unhappy, because I just use this style where I think it is appropriate. I like many anthropomorphic interfaces in IOS. The most typical interfaces include voice memos, ibooks, and calendars on the iPad. Their interfaces make me feel friendly and natural, it's so easy for me to find the reality of life in cold electronic devices. A front-end UI framework that can improve development efficiency by 500%!

The following are some music iOS or OS x applications that I usually use for self-entertainment. Their functions are really great. I really spent a lot of money on these things, but if their interfaces didn't adopt such a realistic quasi-materialized design, I would never spend half a cent on them if they were just dry functions and data display or metro.

I have seen one sentence before. The general idea is that the metro style makes people see the future, while the materialized style makes people feel like they are back home. It is quite good to say that people cannot stay at home all the time, and they cannot find new and futuristic ideas from outside. I like music played by real people using real instruments, but it does not prevent me from occasionally listening to electronic things. A front-end UI framework that can improve development efficiency by 500%!

Starting from the flat style, the text of the translation gradually leads to a relatively "fair" view. I personally think it is more interesting than the articles that simply emphasize a certain style.

Today, the debate over "flattening" and "quasi-materialized" is one after another in the circle. I am personally attracted by simple design, so the flat interface design style is indeed my dish.

What is flat design?

In reality, the term "flat design" refers to abandoning anthropomorphic visual effects such as gradient, shadows, and highlights that have been popular for many years, to create a more "flat" interface.

Allen grinshtein, designer of layervault, once wrote in hackernews: "For a long time, the website's interface style seems to follow the same design aesthetics, we are all using effects such as slope, gradient, and shadow to highlight the texture of interface elements. For designers, the creation of such 'cute 'elements has simply become a rule or even an honor. However, for us and a few other designers, this method is not always correct ."

When you look at layervault, you will find that the visual beauty they pursue is embodied in simplicity. It is also quite interesting to see that the visual styles we have been used to are being subverted by more and more websites and mobile app products. Below are some other examples: front-end UI framework that can improve development efficiency by 500%!

Squarespace

The new squarespace uses almost all flat visual styles. It only uses traditional methods to highlight important interaction elements in some details. After a trial, you will find that their products are still quite complicated in terms of functional logic, but all these are hidden behind the simple and straightforward interface, you can feel the painstaking efforts of your design team.

Facebook

Another example that everyone is familiar with is Facebook. "Facebook is an excellent case for flat interface design. In addition to the slight slope effects used in several major action buttons, all other interface elements adopt a flat style. Given that they have maintained such a feature over the years, at least we can say that this design style is perfect for Facebook ." -Ian storm Taylor (segment. Io) can improve the development efficiency by 500%!

Rdio

The latest version of rdio uses a minimal and flat design style on the website and product interface. It is difficult for you to find the interface elements that use shadow, gradient, and other effects.

Nest

I once participated in nest's website development as a front-end engineer. I still remember their passionate pursuit of flat style. In their websites, photos of actual products and related application environments are integrated into the flat style media carrier (the website itself) as "authentic" elements, visitors can easily focus on products without being disturbed by visual elements on the website interface.

Inverse attack on quasi-materialized objects

Just like the minimalism movement in the S architecture field, the gradual rise of flat design styles can also be seen as a reverse attack on over-designed and over-crafted interface styles over the years; in particular, Apple's Paster style has been criticized sharply recently. A front-end UI framework that can improve development efficiency by 500%!

Wikipedia's definition of quasi-materialized objects ("counterfeits" and "skeuomorph") is that some necessary forms of the original objects are no longer necessary in the new design, however, the new design still imitates the old form to make the new appearance more familiar and friendly.

For example, we usually add gradient and projection effects to the buttons in the interface, because the buttons in reality have these visual features, even if these effects do not have any practical significance for the functions of the interface elements. For example, some weather applications use a thermometer to show the temperature. In the real world, the existence of such entities is necessary, and in the application software, the image of a thermometer is purely decorative.

Are leather design elements necessary in calendar applications? If 3D textures are not used on buttons, do you still know that they can be clicked? How many decorative elements are really necessary?

"In real life, when a button is pressed, you can clearly feel its elasticity, but on the display screen of a desktop or mobile device, you cannot feel this physical feedback. What seems to be an entity, but it cannot make people feel the feedback that the entity should have. At least for me, this is a very bad and unexpected experience ." -Allan Yu (svpply/eBay) can improve the development efficiency by 500% in the front-end UI framework!

Form service functions

Some Famous slogans were put forward in the minimalism movement of the architectural community in the 20th century, including "Form follows function" and "less is more, we have talked about this till today. In addition, I personally like the answer that asked him how he created the statue of David: "It's very simple. I just need to cut the extra stones and leave them useful ."

The same is true for the interface design. The 37signals team have obvious skills in this aspect. As a designer, we need to focus on how the product functions work, not just on visual presentation.

Flat or quasi-object? It's just a matter of choice.

At least I have not seen any research reports indicating that the quasi-thing style button will bring more clicks. Indeed, there are enough theoretical and practical conclusions to prove that the interaction elements that can produce more visual comparisons can attract the attention of users, but I believe that in some context, the comparison effect of a flat orange button is higher than that of a highlighted button. Therefore, context, that is, the specific interface environment of a specific product, is a key element here. Let's take a look at some of the opinions of other designers:

"This is similar to fashion. After a style is fully popularized, you have to do the opposite if you want to stand out from the crowd as a designer ." -Cemre güng R (Branch)
"If someone tells you that 'quasi-materialized is not a good design, 'it is equivalent to saying that 'purple is an ugly color', which makes no sense ." -When a Greif
"Why belittle a design style without any practical evidence while raising the other one? Ignoring the actual functions and overall experience of the product and simply pursuing a certain design style is not an exciting and pleasant task ." -Geoff steams (YouTube)

The quality of design is not determined by aesthetics.

The final choice of the design style depends on the actual situation of the specific product. In my opinion, one advantage of the flat style is that it can display information and how things work more simply and directly to reduce the emergence of cognitive barriers.

No matter what style is used, excellent interface design must follow some common design principles:

Consistency
With consistent design patterns and visual styles, you can build a complete and consistent mental model to make the product easier to use and improve the overall experience. A front-end UI framework that can improve development efficiency by 500%!

Comparison
By adjusting the color, size, and layout, You can visually compare the clickable interface elements with other elements.

Layout
You can try to Set visual specifications for the interface by using a grid layout of 960gs, so that the user's line of sight can naturally move along the path defined by the content itself, enhancing the visual balance of the interface.

Hierarchical
The most important things are easier to see than the less important things. I can write a whole article on this topic. Simply put, it is to highlight the interaction elements related to core functions and common use cases in the interface design, other operation elements are placed at a secondary position, which can optimize and simplify the interface. "My personal experience is that no matter whether it is flat or quasi-materialized, the most important thing is that the interface allows users to clearly identify the hierarchical relationship between information and functions in the shortest time, it is easy to know what to do next." -Caroline Keem

Target User
Different types of users prefer different interface styles. Users in the fields of architecture, design, and fashion can better embrace the flat style, while other users who are more "common" are more likely to accept the traditional quasi-materialized interface.

Feedback
When a click occurs, you must provide clear visual feedback to the user immediately. Animation transition effect is a common feedback method. For example, after a user executes an operation, the rotation icon is used to prompt that the user's system is responding.

Reduce "friction"
Regardless of the visual style, the interface should be simplified as much as possible to reduce the operations required for the user to complete the target and create a smoother interaction experience. Any obstacle or extra step will increase the operation cost, increase the complexity of the function, and thus reduce the conversion rate.

Encourage exploration
Measure the test taker's understanding about the potential exploration of the target user for the product. Once they get used to the product's interface and basic functions, and begin to move toward the "advanced user" stage, provide necessary guidance and "Rewards" for their exploration and Learning behaviors. A front-end UI framework that can improve development efficiency by 500%!

Prototype
Regardless of the style, the Interface Format depends on the actual function. A good design scheme is inseparable from the preliminary planning of the product, especially through the exploration of sketch or box prototype. Identifies the core use case requirements and uses prototypes for continuous experimentation and verification, laying a solid foundation for the subsequent interface design work.

Design Aesthetics discussion on flat interface style