What's the difference between flat and material design?

Two similar design styles, one based on the other. One is the new hot thing, the other, some speculate, has become a fashion in its own way. One is spontaneous--the tendency to adapt to design, the other is the goal--the design guidelines.

You may have understood the conflict between flattening and material design.

But what is the difference between them, essentially a better one than the other? In fact, some people want to know how big the difference between them, let us start from the most basic: the physical design of the figure appears on each body.

　　Quasi physical and chemical design

The physical and chemical design, in this context, is designed to simulate the real world of physics. Typically, this needs to be designed in the form of online applications that look like their real-world variants, such as the electronic synthesizer software, which is made like a keyboard. This interface is designed in a way that occupies a dominant position for most of the time.

The problem is that this is not based on the availability of digital devices, or that all knobs and buttons can be manipulated with a mouse or touch screen, and it looks just like the look of the real thing.

In fact, the design circle came to the conclusion that the need for something else, which would remove all the retro decorative elements, and then give them something to leave behind, is the availability of the first place. So they removed all traces of the physical design from the interface design, creating a flat design.

　　Flat design

Flat design, in many ways, based on the most basic elements of the design. It chooses to remove any style, those hilarious three-dimensional manifestations, like projections, gradients and textures. It only focuses on the connection to the icon, the font, and the color.

This is the first consistent style in digital media design, one that utilizes the unique properties of the Internet and the needs of users, quickly discovers simple buttons, direct color schemes for quick recognition of elements, and concise icons.

The appearance is secondary in the flat design: The emphasis is on the original function. Simple icon metaphor can even omit some of the content of a Web site and guide the user to operate it based solely on its color and image. Also, it accelerates load time and looks as good on high or low resolution screens, providing a more reliable user experience. Because of this, it makes things easier for designers and users.

In favor of the opinion

It embraces the limitations of the screen based on these to work, rather than trying to do something else.

Streamline design, get rid of unnecessary graphics and animation elements, reduce load time.

Without a materialized element, your reader can quickly find content.

Remove all unnecessary design options to make the site design more quickly

Flat design of the simplified Web site constantly adapt to the browser, can be very easy to respond.

Opposing points of view

Flat design may limit and constrain you to use simple colors, shapes and icons.

If you go too far, it's easy to accidentally create a unique and seemingly generic site

Some Web sites, or applications, require complex visual cues to guide users on how to use them, which is a major failure point for flat designs. A common complaint is that static vector graphics, it lacks shadows, edges hard to tell whether clickable buttons

Its universality makes it difficult to create a Web site or application that looks very unique.

One thing to note is that this is a unique aesthetic in the middle of the 2010-year period, and your site will soon become obsolete, and how you don't plan to redesign your site will be relatively fast.

　　Material Design

The flat-design critic, who believes that this goes too far, eliminates all of the proposed materialization more aggressively, even if it is useful. Enter, borrow the concept of material design layer, use shadow, the countless images are edited and separated; Cant and animations, it utilizes the depth and importance of natural interaction.

Material design, a set of designed standards developed by Google, has numerous unique and interesting features in this document, but perhaps most notably, it presents the z-axis concept of planar pixels. In fact, it adds some materialization to the flat design, creating a group of two-dimensional plane planes that float at the other's designated elevation impressions.

Imagine a piece of paper that can expand and shrink, reshape itself, blend and detach at random. Now stack them up (they can also float in the air) and draw a site element on each one. In short, this is the concept of material design.

Material design, however, is not the perfect feature of a well-designed document. It is not a rigid iron law. Try to think of it more as a physical framework and template that asks me about my future design. It's designed to be universally adaptable, like Android wears a watch, to respond to various sizes of the screen, or even to different shapes. The application of Material design is also being replicated in other app developers.

Material design is a standard for Android applications because it is applied to the wearing equipment mentioned. Whether it should be used on iOS is the source of ongoing controversy. Some argue that it is necessary to keep Google's profile. Others think it conflicts with the rest of the operating system. It's all up to you to decide what's right or wrong.

In favor of the opinion

Three-dimensional scheduling makes programs easier to interact with: For example, shadows are arranged to display hierarchies.

and flat design is different, Material has a detailed and clear set of reference, there is no need for you to guess.

If you want to develop a multi-platform thing, such as a Web site and an android application, Material design provides a unified experience for all devices. This will increase the ease of use of users, and then subtly promote your branding.

If you're interested in animations, Material design is a good idea because it brings a lot of this type of animation. Without them, you can only draw.

Opposing points of view

Whether you like it or not, Material design is inevitably associated with Google. If you want to keep yourself away from this and create a unique feature for your site or application, it's much harder to use Google guidelines.

Not all systems can achieve the expected frame rate. And it's hard to know what to do to improve the usability of those who are not.

The animation will deplete the cell phone user's battery.

Forcing developers to comply with design guidelines may further stifle individual creativity and hinder the development of more animated and decorative features.

　　Summarize

Material design and flat designs are really not that big a difference: two use the same clean and lowest beauty. When the flat interface is segmented, you can basically think of a texture interface. Although material design animation widely received praise, but summed up is only more user-friendly. In fact, no one says you can't combine the beauty of the two and use the material design to activate the flat Web site in a static format.

In my opinion, the flat website is very practical. They download faster than websites full of animated and complex pictures. If you want to design a very simple site, for the use of different equipment, technical experience level of the various users, or just focus on the user experience more than the form, flat design is suitable for you. If you are not interested in putting a variety of animated or dynamic images on the site, and are primarily concerned with the simplicity and usability of the original, I would certainly recommend you to choose a flat design. But if you want to create a more fancy website with animations, of course you have to choose material design.