Post Image

Web Design Trends 2017: The Year of Material Design Lite

Jerry Cao
By Jerry Cao on 23rd February, 2017 Updated on 17th September, 2020

Without a doubt, touches of Material Design are the must-have aesthetic of the year.

Google’s Android-based design scheme may have started as a mobile device interface, but has exploded in popularity and usage, regardless of device or platform.

It’s a natural continuation of the biggest trend in design during the past few years: flat design. Yet, Material does something flat never could, it adds just enough embellishment to enhance usability. Instead of stripping everything away to favor visual appeal, at the root of Material Design is usability.

What’s Material Design Lite?

Material Design Lite Android webdesign

Photo credit: Android

Material Design Lite, or MDL, is the next phase of Material Design. It takes the ideas and optimizes them for all devices. MDL has been crafted to include guidelines, components, and an overall framework with templates and tools that help nearly every designer craft an MDL website with minimal prior knowledge up front.

MDL essentially makes the concept accessible to everyone in a quick and easy way.

While MDL may be a variant of “classic” Material Design, it is in no way a lesser version. Most sites designed with MDL are robust, easy to use, and visually pleasing.

The idea of MDL goes back to the mission of Material Design as a whole: “Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.”

If that weren’t enough, every part of MDL is open source. Rules, templates, best practices, and code snippets are available on the MDL website or GitHub.

Join the world's best designers who use UXPin.

Sign up for a free trial.

The Principles of Physics

The principles of Physics in webdesign

Photo credit: Rumchata

The foundations of this style’s aesthetic come from physics. The designer should aim to create something that looks and functions like it would (or could) in the physical world.

This simple concept is what supports the innate usability of Material. Consider all of the design tools that rely on this idea—layering, cards, motion, color.

MDF webdesign

Photo credit: MDF

Best webdesign examples

Photo credit: Serio Verify

To understand how to create these elements in a way that looks truly Material, let’s think back to physics class, for a moment.

  • Varying x and y dimensions are recommended, but all elements should have a uniform thickness.
  • Shadows should fall naturally on the z-axis, seemingly from a natural light source.
  • Content can appear on any plane, in any color or shape.
  • Material components are solid and have no transparencies.
  • Each space is limited to a single component; they can’t overlap. Layering is only acceptable with backgrounds and photo elements, not singular components.
  • Components can shrink and expand, but not bend or break. They have a fluidity to their movements.
  • Components can split or be combined.
  • Motion can occur on any axis and should be dictated by user interaction.

Mix and Match Components

Mixed components in webdesign

Photo credit: wrk.

Google developers simple design

Photo credit: Google Developers

MDL is packed with user-friendly tools to help start the design process. While the visual design is primarily what you see, what makes Material Design Lite different is in the backbone.

MDL is not JavaScript-based; it is designed to work on all devices, degrade in older browsers, and provide cross-platform accessibility. You don’t necessarily need to know how it works, but there is one vital takeaway you should remember: MDL will work pretty much everywhere. And that’s by design.

The easiest way to start with MDL is to pick a template. Each template (there are six to choose from) comes with everything you need for the design, including the components and color palettes. But the beauty of MDL is that you can customize as much as you like. The templates are merely a starting point.

In addition to templates, MDL has a massive component library that lets you mix and match pieces to create something uniquely yours. (You can grab just code snippets for only the components you like to keep your website lightweight.)

While these parts are a lighter, easier to manage version of Material, all of the basic elements are the same, including typefaces (Roboto), layer styles and elements, and color palettes. Almost any element can be added to a design or removed. You can even include elements of MDL in a site that’s not fully Material if you want to experiment.

Material Color Palettes

One of the most visual aspects of MDL are the associated color palettes. Material projects are often bright and bold in color. Hues are deeply saturated and color combinations can be a little unexpected.

Material Color Palettes

Photo credit: Get MDL Custom CSS Theme Builder

Material color is often based on a palette that consists of a primary color and one accent. (You’ll want to choose wisely.)

Dropbox Business webdesign

Photo credit: Dropbox Business

Dropbox Business is a classic example of a website that adopts design concepts early, yet maintains brand identity. Luckily, their branded blue is perfect for Material. Here, the site uses a single color palette with black and white to communicate. (This is quite common with MDL, as brands work to maintain an identity while using the style.)

Color palettes in MDL

Photo credit: Pumperl gsund

The site for Pumperl gsund takes the opposite approach and goes all-in with two bright colors. Note again how color is used against a mostly minimal background, with black and white for everything else.

usign bold colors in webdesign

Photo credit: Fila

While MDL projects can feature big, bold color throughout (such as Fila, above), this can be tricky to pull off with finesse. You need just the right content to make it work well. In this case, Fila had the perfect combination of elements to go big with color thanks to a colorful athletic clothing line.

Conclusion

Material Design Lite is a more usable, more flexible version of Material Design and one that you can implement in whole or in part for almost any website design. It offers overall functionality, focus on usability, and design known for clean lines and organization.

For more UI advice from analyzing 61 examples, download the free e-book Web Design Trends 2017.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you