Material Design Framework

Material Design & Frameworks

Material design, introduced by Google, is a powerful tool. It’s scope is massive, but because it’s understandable, it does not feel overwhelming when you apply it to your project.

It would be quite a difficult technical task to take all those principles and just start designing and developing a site from scratch. Luckily for us a small group of people created Materialize.

Materialize is a web framework based on the principles of Material Design. Materialize is some CSS and javascript that work together with your markup to create an experience based on Material Design’s principles.

Frameworks & Lazy Design

When using a framework, any framework, there are tradeoffs. It’s important to keep these tradeoffs in mind when beginning a project.

  • Bloat – Every site has different needs, so chances are all the features of a framework will not be utilized. This leads to bloated CSS and javascript on a production site if the code is not cleaned up. Many frameworks, like bootstrap or foundation, will give you the options to pick and choose what pieces you want. Although, depending on your process you may not know what you will need just yet, which usually leads to grabbing extra elements “just in case”.
  • Sameness – Bootstrap is a popular framework, and a lot of times you can tell when a site has used it (not the worst thing in the world). Material design is catching on and frameworks like Materialize may become just as popular. It’s important to think about why you’re using the framework in the first place and let it support your ideas instead of working around it. In fact, some talented designers and front end devs don’t use frameworks for production code at all.
Material Design establishes responsive design as a core principal

Frameworks & rapid development

When you use a framework there are tradeoffs. It’s important to keep these tradeoffs in mind when beginning a project.

  • Rapid prototyping – Because a framework is a starting point, a robust starting point, you can begin developing the user experience and aesthetics much sooner instead of dealing with a load of grunt work just to get a baseline.
  • Best practices – Popular frameworks are constantly under development by their teams/creators. This means that the techniques and code they use are up-to-date with best practices and new technology, like browser updates and new devices.
  • Philosophy – Material Design is not just a set of visual rules and guidelines, it is a philosophy on screen design. That philosophy includes design, motion, relationships and much more. A framework like Materialize gives you quick access to that philosophy at your discretion.

It’s exciting to see frameworks like Materialize pop up, and even more exciting when brands like Google release a philosophy on design like Material Design. Hopefully we see more brands and more talented people follow in these footsteps. With more options, more perspectives on design, the better for everyone.