haley marketing logo
Search
Close this search box.

Material design takes the flat look up a level

Share this:

BlogHeader

For the last few years, flat and skeuomorphic design have been in fierce competition with each other. The two are very different design philosophies that aim to achieve very different things for websites, emails, apps, print, and everything in between.

Skeuomorphism aims to imitate aspects of the real world for interface and design elements. If you’ve ever seen realistic sliders, switches, buttons, or, in the case of some Apple products a few years ago, stitched leather on a website or in an app, you’ve seen examples of skeuomorphic design. These components tend to be relatively heavy in terms of the web and require a lot of different colors with shading and depth to get the point across. On the plus side, however, because these objects already exist in the real world, users tend to be familiar with them and generally know how to interact with them.

Flat design’s goal is to strip out all of the unnecessary components (shadows, gradients, textures, and so on) in order to provide a clean, crisp, and minimal look to designs. By doing this, flat designs tend to have smaller file sizes which in turn leads to quicker load times and lower data usage, which is especially important because of the ever-increasing market share that mobile devices command.

Last year, Kaitlin wrote a very good post about the differences between the two which you should check out for an in-depth look at the two ideologies and examples of them in practice if you want more information on flat and skeuomorphic design.

Google Material Design – Free AE Project File

Recently though, a third player has come into the mix. Material Design, courtesy of Google, is a mix of the two other styles to a degree. Material Design is a cohesive and defined visual language that covers everything from material itself (if you’re curious, check out Google’s awesome documentation) to animation, style, layout, and usability.

Inbox + Material Design

If you use Google Now, YouTube, Google Calendar, own a Google Wear device, or an Android phone that’s version 5.0 or 5.1, then you are very familiar with Material design, even if you don’t know it. Material Design is Google’s latest design language, introduced in 2015, and it is taking over.

Visually, it looks very similar to flat design with bold colors, a distinct lack of gradients, and a very clear direction for what the user is supposed to interact with and where they are supposed to go. Where it differs from flat design is in its use of shadows and depth. While flat design concentrates on the X and Y axes (2D space), Material Design adds in the Z axis for 3D movement and allows elements to move on top of each other. By utilizing subtle shadows and smooth movement, it creates a real sense of depth and hierarchy without sacrificing too much in file size and load time. Material design is growing at a rapid pace and because it is backed by a juggernaut like Google, it doesn’t show any sign of slowing down.

websites

Which is the right choice for you and what does all of this mean for your company’s next design project? Well, the choice is yours. Design is very much a subjective decision for both client and designer. Flat, skeuomorphic, and material design are not hard and fast rules. As such, it is all about preference and the look that really speaks to you in addition to your company’s objectives.

If you’re in need of a fresh look for your website, Haley Marketing offers a number of options that fit each of these styles in our starter design library or we can create something totally unique for you with a completely custom site.

Contact Us Today

Share this:

Hey you! Don’t miss out…

WEEKLY INSPIRATION

Get our best marketing tips—one idea a week. You’ll also get invites to our webinars, and exclusive offers on our products and services.

You may also like