Wednesday, July 29, 2015

Flat Design & Material Design

When an UI designer is asked for a design layout, probably he/she would prefer for a flat UI design. Nowadays, this flat design has been overtaken by material design.Some people says that, material design is adapted from flat design. In designing, we refer to a word Skeuomorphism, which means adapted or inspired from other design.

So, What is flat design and material design?


Flat Design is a design which has solid cool colors with removal of stylistic choices such as gradients, textures, drop shadows and 3D or realistic views. This design is mainly focused on detailing of icons, typography and color. Flat design is to explain the advantage of the internet’s unique properties and its users’ needs with simple buttons to make design more efficient, straightforward color schemes made for fast identification of elements, and simple icons.

Simpler words, it guides the user by its color, design and icons. In addition to this, it speeds up load times and looks just as good on high or low resolution screens, resulting in a more reliable user experience. As such, it makes things much easier on both designers and users.

flat ui design

Pros of Flat design:

1.) Simple colors, shapes and icons is adaptive, fits to all device resolutions and in also easy in responsive design.

2.) Flat design helps the user in avoiding unwanted graphics, gradient images which affects the site performance.

3.) Using flat icons, design and simpler layout, user can easily overview the concept or content which is given in the website.

Cons of Flat design:

1.) Simple colors, shapes and icons will restrict the design to a particular limits, so there will be lack in creativity.

2.) Unable to differentiate between buttons and other static vector shapes due to non-realistic stylish views.


Material design emerges out from flat design which has simple colors separated with lighter drop shadows, bevels and slight animations. Texts are bolder, graphic and intentional. Develop a single underlying system that allows for a unified experience across platforms and device sizes. Material design is a set of design standards guidelines developed by Google and has good number of unique and interesting features, the use of the Z-axis being one of the prominent ones.

The material environment is a 3D space, which means all objects have x, y, and z dimensions. 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.

material design

Pros of Material design:

1.) Material design comes with set of standard designed rules and built-in animations so that user need not to handle manually.

2.) It gives unified user experience across all devices which adds to user friendliness.

Cons of Material design:

1.) Since material design has built-in design elements and linked to Google, it is little bit harder for UI designers to showcase their website as a unique design.

2.) Material design has lighter animation effects which may vary in frame rates in cross browsers and drain the mobile battery soon.

3.) Forcing UI designers to use defined rules may lack in creativity in design.

Source: google material design, one extra pixel, designmodo 

1 comment:

Thanks for your comments. It'll be published after admin's approval !