material design

The Summer of 2014 — it’s the annual Google I/O conference, and Google is finally ready to release something new and exciting to the World, something that would completely change the way we view modern design, and it goes by the name of Material Design. A library of design principles that allow you to create more intuitive and optimized websites for desktop, mobile and tablets.

Since then, we have seen thousands of designers and developers to begin transition to this new design style, because surely as the general capabilities of the web browsers evolve, things like Material Design are going to become the industry standard.

Feedly found some success with learning Material Design and what it can do for them (perhaps there’s no need for an alternative anymore), and most recently we’ve seen Plex to continue release new updates that include a complete Material Design overhaul.

feedly material design

Daniel Hollick called the concept of Material Design as Design Science, going in-depth about the transitions that this design style utilizes, and how it can be compared to the time of space. And while the majority of web designers out there are still working with Bootstrap, we can already tell that Material Design is going to be a big success for modern startups, and businesses alike.

Which brings us to our initial question. What are the reasons for switching over to Material Design, and are we going to lose out on anything in the process? After you’re reading indulging yourself in these brainy nitpicks, engage with us in the comments to let us know what you think of Material Design, and how you’re going to use it in your own projects!

1. Design Consistency

The one thing to remember about Google’s Material Design is that everything is free of charge, and that the concept was created for the community by some of the Worlds leading designers, web designers, and design analysts — people who are paid hundreds of thousands of dollars yearly for the work that they do. This is something to take into consideration.

Apart from that, Material Design is a concise UX and UI library of design principles that all work together with each other, taking away the strain of having to look for individual solutions to problems that you’d encounter with typical web design practice — this is what makes Material Design so special, anything you need a solution to is already in-built within the core itself.

2. Material Design Lite

Polymer lets you build encapsulated, re-usable elements that work just like HTML elements, to use in building web applications. It’s the foundation of Material Design, but it also one of the reasons why so many people haven’t adapted to the new design style just yet, Polymer can be tough to learn, even tough to use. However, to make it easier for simple sites, such as content websites, Google has released Material Design Lite — the perfect solution for creating a Material Design oriented website with the help of a JavaScript library.

material design lite

MDL makes it easy to add a material design look and feel to your websites. The “Lite” part of MDL comes from several key design goals: MDL has few dependencies, making it easy to install and use. It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains. MDL has a low overhead in terms of code size (~27KB gzipped), and a narrow focus — enabling material design styling for websites. — Google Announcement

You can get (and learn more about) MDL by following this link.

3. Same Design for Different Devices

adaptive ui
One of the really great things about Material Design is that the documentation is all about giving you the tips and insights on how to build a website that will look exactly the same on a tablet, as it does on a mobile phone, as it does on a desktop computer. This is where Material Design really stands out — because there are very few things more irritating than having to find a way on how to convert a particular element to look good for a different device. Material Design was built with the idea in mind that all the elements/principles should accordingly work regardless the type of device that is being used.

See our recent column about podcasts for designers to stay up to date about the latest developments in the world of design, including frequent guests and features that talk about material design and where it has been heading so far.

4. Intuitive Design

While others continue to struggle figuring out how to make Bootstrap work for their users, Material Design is built with users in mind — meaning, by following the guidelines of building a fully compliant Material Design website, the design interface is going to be intuitive by default, giving your users a browsing experience that simply won’t be a match for any other similar type framework/library out there.

google music

Material Design is highly favorable for mobile experience, which is why you can already find countless of amazing and beautifully designed apps on the Play Store.

5. Industry Standard

As we were able to see throughout the article, a lot of sites/apps have already adapted to Material Design, and are keen to let everyone else know that Material Design is ready for production. What are some other cool apps/sites that utilize Material Design?

  • WhatsApp Web — The Web version of WhatsApp has integrated a number of MD principles in their design, and it seems to be working out really well for them.
  • Kenya Apps — This company utilizes the full spectrum of MD and the design quality goes to show the real capabilities of modern web browsing. Really blown away by the end result, as you will be too.
  • Inbox by Gmail — Google is without question going to adapt MD to their most favorite apps and products, and we an foresee that eventually such a change should happen to their Search Engine as well. The design of Google Inbox is staggering!

and these are just the very tip of the iceberg, as we’re expecting to see an influx of MD designed websites in the near future, it’s all about allowing the first batch to settle down and to allow other web design enthusiasts to experience the browsing experience of MD for themselves.