Google’s Material Design took over the web design world. Google implemented Material Design in most of its online products to some extent and thousands of designers around the globe followed this trend.

The simple, bold, logical and clear aesthetics of Material Design is easy to recognize and became a brand on its own rights. Some designers though tend to see it as beginning of the revolution and the very end of flat design era.

“If there were no constraints, it’s not design — it’s art.”– Matias Duarte,vice president of design at Google.

While we all love Material Design aesthetics and beautiful applications built with it, many designers might fall into the trap that will ruin their design ambitions. Material Design language might be very tricky, as it follows strict guidelines and design constrains. We receive dozens of Material Design web and mobile app applications, yet only few qualifies to be published. Why is it so? In order to answer this question we’ve made a list of 5 biggest misconceptions about Material Design.

1. Floating Action Button (FAB) = Material Design

Many designers think that by implementing FAB button into your mobile or web application, it immediately turns your app into Material Design online monument. Not true! Floating Action Button is a very distinctive Material Design UI element. It should be used only for the key action in your application.Misconception: adding circle button at the bottom right corner makes your app “Material Design style”

2. Cards

As mentioned in this Forbes article, tiles, cards, chunks or “material cards” is simply a commonsense solution to a new style of media creation and consumption.It’s absolutely true. According to 1stwebdesigner.com cards design is one of the biggest web design trends in 2015. However, nowadays cards are common trend in web design. Simply adding cards layout , doesn’t make an application to be entitled for Material Design style. As clearly stated in Material Design guidelines, cards should be only used when displaying content that:

• As a collection, comprises multiple data types (for example, the card collection consists of images, movies, and text).
• Does not require direct comparison (a user is not directly comparing images or text strings).
• Supports content of highly variable length, such as comments.
  Consists of rich content or interaction, such as +1 buttons or comments.
• Would otherwise be in a list but needs to display more than three lines of text.
• Would otherwise be in a grid list but needs to display more text to supplement the image.

Surely, this list can be extended and amended depending on your brand needs and application goals. Misconception: adding cards layout to your app, makes it “Material Design style”

3. Shadows

In CSS world, shadow effects have been around for a while. But in Material Design language shadows help users to understand the anatomy of the application interface and the principles of interaction with it. Commonly known flat design principles does not contain stylistic enhancements, which simulate 3D objects such as shadows, but in Material Design shadows perform an important function in notation structure and hierarchy of elements on the device screen. A simple, tiny shadow can express a lot and it’s absolutely sufficient in most cases, if it’s being used properly and with meaningful intention. Each surface in Material Design language has its height – a position on the axis Z and;- it casts a shadow at the bottom – exactly as the real world objects (materials) do.The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness. On the web, the z-axis is used for layering and not perspective, so the 3D world is emulated by manipulating the y-axis. Therefore shadows are meaningful and crucial part of Material Design. The Material environment is a 3D space, which means all objects have x, y, and especially z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. This ‘z’ parameter is what provides the feel of depth to any object in a layout. Misconception: adding shadow to application buttons or cards makes your app or website “Material Design style app”.

4. Product Icons

Product icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements.
Material Design icons are quite distinct from flat design icons. In Material Design language icons are limited by shape, geometry and icon anatomy (layers) constrains. Misconception: adding long shadows makes your icon “Material Design style”. Forget shadows, think of overall icon structure and appearance…

5. Animations

In the world of Material Design, motion describes spatial relationships, functionality, and intention with beauty and fluidity. Animations are extremely engaging part of Material Design. But that doesn’t mean that any graphical simulation or Adobe AE concept will do. It’s important to know that authentic motion in Material Design is limited by mass, weight, acceleration, deceleration, entrances and exits principles. Misconception: animating UI elements in Samsung mobile or tablet frame, does not make animation “Material Design style”.

#materialdesign #application #technology #websites #apps #development

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn