Flat or Material Design? Flaterial Design!

saying hello to my new friend, Flaterial.

Primer by Google. This is an example for what Flaterial Design can help you achieve.

Material Design by Google Design

Material is the metaphor

Let’s start with material design, why? Since I really admire the approach for this design scheme. Unfortunately it does have some disadvantages. From a User Experience and Interaction Designer perspective, Material Design is very bold approach towards actions and reactions to User’s interactions. But UX principles need not follow or rotate around UI Design, right? That’s exactly where Material Design didn’t focus much, and this caused Users and Flat Design lovers to not understand Material Design.

Inbox By Google. Google made this application for modern applications of Gmail.

Flat Design

Flat design is a minimalist UI design genre, or design language

Flat Design, is more leaning towards beautiful User Interface but loses its hold on User Experience when compared to Material Design. Flat Design is way to represent Beautiful User Interface which is awesome for users’ eye. Some may coin Flat Design to be less focused on Visuals, yes it’s true when compared to Skeuomorphism (realistic looking design). Flat Design has to have a third dimension or Z-Axis to prove that one element or User Interface component is visually having depth.

FreeCharge, an App which follows Flat Design at it’s best.

I am at a position where I want to create Designs which have the best User Interface and User Experience. So I am coining this principle for once and for all.

Flaterial Design

What to grab on to from each design Ideology? I think, just what you need from each. What I prefer holding on to from each of the Ideologies are as follows:

Material Design

1) Shadows, preferably double shadows which means one light source is global light and the other is a stronger light from a particular angle, for example, I take 90 Degree.

2) Materials. Not just the card layout or the look of it, it’s the behavior of material in respective to each other. Like, one material cannot fold and such Material Principles.

3) Floating Button. These are very eye catchy and can be used whenever required user’s action. In cases such as, within an Email App, when reading an Email. The primary action could be reply, so Floating Button may have reply icon and it’s respective action.

Flat Design

1) Color. Possible all the flat colors are my favorite. They are amazing and do not hurt my eyes on brightest level. Therefore it’s a better bet to have colors in from Flat Design. In short, search for some words such as “Flat Design Colors” and that would be exactly what you’d need for flat and blending colors.

2) Typography and Icons. As we know it’s been quite a long time that Flat Design is here, and everyone just loves Flat Icons. Therefore it had to be there in this list.

The above list and the article is just my personal thought and Ideology I like to follow. I am writing this as my first article because I couldn’t find people coin this Idea. I am the person to coin this! Over and look out for more quick tips from me on my twitter account. @artakshar