top of page
Writer's pictureJason Allen

Believe That the World is Flat? Or Are You Living in a Material World?



Hey guys! So today I will go over 2 styles of web design, and show just how similar these 2 are. I'm talking of course about Flat Design and Material Design. Let's get started, shall we?


Flat Design:

Flat Design is design stripped down to the basics. It removes any stylistic choices that give it the illusion of 3-D, such as drop shadows, gradients, and textures. It’s focused purely on the interplay of icons, typography, and color. It's a seemingly simple stye of design where color does play an important role. Because of it's simplicity it is a good design choice to use if you want your site to load quicker, but it's also so simple there isn't any guidelines when using it, so there is a gray area when discussing how much is the right amount of flat design in your website. Below is an example of Flat Design.



Simple shapes, simple colors. Now Let's go over Material Design.


Material Design:

Material Design was made by Google. It actually has a set of guidelines for designers to go by. Material design is still simplified design, but it was created to show depth of field. Whatever is designed with material design uses drop shadows, gradients, and a light source is usually present in it's design. They have a set of rules for depth, usually meaning that the darker a drop shadow is, it is the most important part of the page. The lighter the drop shadow is is less important. It is based on flat design but it just expands more on it to give things a sense of hierarchy on a page. Below is an example of Material Design.


Again, simple, but you can see slightly more detail in the colors, and the light source causing a shadow behind the icons.


The Cover Picture for this blog does a pretty good comparison of the Google Chrome Icon. The top is Flat Design, and the bottom is Material Design.


So now that you know a little more about these 2 design styles, which one do you prefer? Let me know in the comments below!

14 views0 comments

コメント


bottom of page