Flat Design vs. Material Design

Website Technology Moves Backwards

Whoa! Website technology moves backwards? How is that possible in this era of new and improved everything? The end results will still bring leads and share information but the website itself will look different! Subtly, but different.

So before we delve into what is going on here, it is important to understand each type of website.

Material Design:  Material design (also called Realism) is a "branded" website (in several ways). Meaning that it has been defined by Google, guidelines have been created by Google and all changes to the concept are controlled/approved by Google. However, the main things is that you don't have to attribute anything to Google; like your branded website. The problem is that it often isn’t based in digital usability, or how well all its knobs and buttons can be operated by mouse or touchscreen – it simply refers to the imitation of the way things used to look. This is most like the website you have now.

Flat Design:  This is a newer version of website design. A Flat Design website has been stripped of any three-dimensional elements. Everything looks like it is part of a flat paper lying on a flat surface. There are a few flaws with Flat design as well. Flat design websites aren't usually very detail-oriented making them look very simple.

This example from Creative Bloq succinctly illustrates the different between the two: When you compare the flat design to the material design you can see the difference in the details. 

The difference between the two lie mainly in the amount of Skeuomorphism. (yeah, right?)

According to DesignModo.com, Skeuomorphism is the design concept of making items represented resemble their real-world counterparts, in other words, like a real object.

Or the Wikipedia Definition:  A similar alternative definition of skeuomorph is "a physical ornament or design on an object made to resemble another material or technique". Most recently there has been a move away from Skeuomorphism to the newer Flat Website Approach.

Pros & Cons of Flat Website Design

PROS

• The web design decided to take away all the decorative elements that would put usability first. This would speed up loading times and puts the focus on getting visitors through the content most efficiently. So they removed all traces of additional design options from the Material (digital interface) to create the flat design.
• The lack of these elements can speed up the readers progression through your website. Easy on and easy to understand.
• The Flat Design removes all unnecessary design elements facilitating faster website design.
• Since they are easier to build, they are more versatile and easy to make responsive.

CONS

• Appearance is secondary in Flat Design and focuses on functionality instead of design. Colors, shapes and icons are somewhat limited. Consider the graphic above. You can definitely see that the buttons on the bottom of the page are clickable.
• You want your designer to be very careful because your site may come out to featureless and generic looking (like a 4th grader built it).
• Many current apps may require a more complex cue to guide the visitor through the site. One complaint from users is that they can't always tell clickable buttons from static graphics.
• Because of it's universality, it is harder to create a unique and original design. According to DesignModo.com, "this is a distinctively mid-2010s aesthetic and it'll date your site if you don't plan on redesigning again relatively soon."

Pros and Cons for the Material Website will be tomorrow. I will give a final conclusion and a synopsis that may make more sense when boiled down to bullet points!