Trends

Material Design Tips & Techniques in Web Design

Once you understand the fundamental points of Material Design, you can replicate the same features for any digital interface.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

Google’s Material Design language has changed the way UI designers craft interfaces. Material Design was first used on native Android apps but quickly spread into web design.

The goal of Material Design is to provide a consistent library of design aesthetics and behaviors that can be repeated across any medium. Interface designers latched onto Material Design for its ease of use and consistent design patterns.

But how do these design patterns work in modern websites? I’ve examined some Material Design trends with examples to show how they work on the web. Once you understand the fundamental points of Material Design, you can replicate the same features for any digital interface.

Distinct Flat Elements

The first thing you might recognize about Material Design is the flat color set. All UI elements generally use flat colors and flat icons.

Material interfaces use primary and accent colors to provide depth and contrast in the layout. Google outlines very specific guidelines with sample color schemes and guidelines.

But the page doesn’t always look completely flat thanks to floating buttons. These are part of Google’s components list which includes drop shadows to help “lift” some items off the page.

A great flat design should follow these guidelines strictly and only use what’s necessary. For example, KUPON layout uses bright buttons with drop shadows all over the page.

01-kupon-theme-design-layout

The shadows are very subtle yet noticeable. With other elements lying flat on the page it’s easy to see how the shadow buttons pop out and create a sense of depth.

Also notice how the site uses orange to highlight the clickable buttons. This is an excellent example of how certain color choices can be used to grab attention from the visitor.

The NRGHost Material layout is another example of mixed Material elements. The page does include some detailed icons, so those don’t adhere strictly to the Material specs. But you’ll find a lot of flat colors and page blocks which rely on flat colors and the drop shadow effect.

02-material-hosting-company-theme

The layout has so many different graphs, forms, and buttons that you’d expect to find some texture. But Material Design keeps it simple, and relies on color to grab attention rather than to look pretty.

Also when hovering over the buttons you should see a very slight ripple effect. More info about this effect can be found on the Material motion page.

This is how a Material layout should act on user input. The ripple effect animates outward from the point of user action. Buttons might also lift up when activated through click.

It’s important to understand how flat design elements tie into the animation effects. With a simple design, you don’t have many distractions, so any motion on the page will immediately draw attention.

Ripple Animations

Small micro interactions are crucial to a great Material Design experience. These animated reactions only occur when the user has actioned something like click, swipe, or hover.

A micro interaction is just a small animation that reacts to the user’s behavior. For example, when swiping through a slideshow, the individual elements might bounce before settling into place. This behavior replicates the real laws of physics and gives the interface a breath of life.

Lots of info is provided on the Material Design motion page with code snippets and strict guidelines. I’m focusing on the ripple effects because they are the most common animations you’ll find. But keep in mind that Material Design motion should aim to replicate the real world.

03-skillfully-ripple-animation

Take a look at the Skillfully WordPress Theme to see a great example of Material ripples in action.

The top navbar uses a three-bar hamburger menu for sliding the menu in and out of view. When hovering over the hamburger menu it’ll pop up from the background with a dark shadow. This motion tells you that it’s a clickable item.

Then once you click you’ll get the side navigation which is full of nav links. Clicking any of these links will generate a ripple effect with the clicked area being the center of the ripple.

Material defines this animation as a radial reaction which can be applied to more than just buttons.

However, you’ll notice that most of the on-page links do not have this ripple. Only buttons and interactive elements use this animation because they’re meant to stand out more against the other page elements.

04-materialist-dropdown-nav-menu

The Materialist WordPress Theme uses a different style for the animation. Instead of following a ripple effect, this theme uses a transition on the dropdown links in the top navigation.

When hovering you’ll notice the ripple-style background moves from left to right with the standard Material Design easing. I wouldn’t say this is bad practice, although it is somewhat unconventional. But the goal is ultimately the same by drawing attention to whichever element is currently activated.

The idea of this radial reaction is to clarify the connection between user input and the surface (or Material) that is being interacted with. A radial animation tells the user two things:

  • Where the click/tap was registered.
  • Which element was clicked/tapped.

Motion is important to Material Design, and I hope these examples show you why. The more you examine Material interfaces the more you’ll pick up on those nuanced animations.

Tabbed Content

Dynamic content tabs are very common in native applications to save space and improve usability. But with the rise of responsive design there’s a greater incentive to include tabbed content into websites too.

The premise of a tab component is to organize related content together on the same page. This way users don’t need to load a different page for related content, plus they can move back and forth with ease.

The Sauce Restaurant Layout has tabs setup for their menu listing. These tabs break up the meal types by entrée, main course, and dessert. This means that visitors can browse all menu items without any extra HTTP requests.

05-sauce-theme-tabbed-content

Most of the Material tab components use at the very least three different tabs. But it’s possible to add far more than three, especially in a desktop environment.

All tabs should follow a design style where the currently active tab gets an underline and a highlight in the text color. This helps the active tab stand out against the rest, and it gives Material Design users a clear pattern to follow for all websites.

Also keep in mind that tabs should never be nested. These are standalone components so tabbed content should not be created like a drop-down menu.

06-triangular-theme-dashboard-tabs

Tabbed content is perfect for complex single-page web apps. Check out the Triangular Dashboard design and click on the “server” page. It uses four distinct tabs to combine graph data from 24 hrs, a week, or a year.

Each tab element uses the ripple effect when clicked or when switching to a different tab. The layout follows Material Design to a ‘T’, and it’s the perfect example of why you should use tabs.

Before jumping into this component you should consider why you’re using it and what problem it’s solving. If the content can be merged into a single page, then tabs are a very simple way to handle that.

But if you have lengthy content that might even include another tab widget then it needs to be on a separate page.

Drop Shadows for Depth

Although most of the Material Design spec follows flat design principles, there is a full page dedicated to elevation and shadows.

The primary reason for adding a drop shadow is to create spatial distance in the layout. Objects in the real world tend to stack on one another. This creates an assumption of distance where one object is closer than another.

Take a look at the shadow reference page to get an idea of how these components work.

The idea is to use shadows on elements that might appear “on top” of the main screen. For example, a sliding navigation would be hidden offscreen until it slides on top of the page. A drop shadow clarifies that the nav is on top of the page rather than sitting at the same level as the page.

On the demo of Unika’s Web Template, you’ll notice a scroll to top button in the bottom-right corner. It has been designed to stay fixed on the page while you scroll to offer a quick jump to the top.

07-unika-theme-floating-action-button

This uses a Material Design shadow to denote its position on the screen. It may look a bit out of place, but this is why floating action buttons tend to incite user actions.

Spatial distance creates depth in an otherwise flat digital layout. Simple flat colors work great when contrasted by shadows and imaginary light sources.

You’ll see a lot of this in the Materialize Dashboard as well. It has another bottom-right button which acts as a flyout menu.

08-materialize-flyout-menu-icons-links

Hovering the link displays a series of icon links which help the user navigate to other pages.

But looking at other page elements, you’ll notice small drop shadows everywhere. Specifically in the left navigation where if you click the “John Doe” link you’ll be greeted with a drop-down menu sporting this Material drop shadow.

09-materialize-dropdown-nav-menu

If you’re not sure about when to use shadows then consult the Material Design docs. You generally want elements to appear “on top” when they’re actionable and made to garner attention.

This can include sliding nav menus but can also include dialog boxes and header navbars.

Hidden Flyout Menus

Many designers argue vehemently against the three-bar hamburger menu, but for now, it’s clearly here to stay. Native mobile apps rely on the hamburger menu because users have learned how it works. They quickly recognize the symbol and relate it to a navigation menu.

This is why it’s also very popular on responsive websites. Most side flyout menus are built on this three-bar menu icon because it has become a recognized symbol for “show the navigation”.

In Material Design it’s very popular to use the hamburger icon. But some designs like the Sility WordPress Theme follow a different technique.

10-vcard-cv-slideout-nav

This layout uses a floating action button to show and hide the sliding menu. When it’s visible, the whole page darkens to bring attention to the side navigation.

Google calls this type of menu a navigation drawer and it comes with a few design requirements. All navigation drawers must have:

  • A full height spanning the entire screen.
  • Drop shadow to denote spatial distance.
  • A visible yet darkened page behind the navigation.

Design specs can be much more detailed regarding fonts and icons. The drawer documentation page has more info, but don’t worry about following everything to the letter.

Instead think about when you’d want to use a sliding side navigation and how it would impact usability.

11-material-news-theme-sliding-drawer

The Material News Layout uses a sliding navigation to add extra items onto the screen which would otherwise be hidden. This design is unique in that it has multiple navigation menus.

I wouldn’t say this is a great technique for all websites, but it can work if you have an overflowing pool of content. The horizontal nav auto-hides on smaller screens which leaves the sliding menu as the only navigation tool.

Personally, I support the hamburger menu because it has become recognized by most users and it has widespread usage across the web. There may be other options for sites with only a few pages. But when you have 10+ nav items there’s no better replacement to the sliding drawer menu.

Your best bet for designing a mobile responsive Material Design site is to rely on Google’s suggested components. In this case, the sliding drawer menu is fully supported, widely recognized, and easy to replicate across any domain.

Simple Material Icons

The Material Design icon spec breaks icons down into two categories: product icons and system icons. They each have different specs but they are closely related.

Product icons often use drop shadows and light sources to illustrate life and physical properties. On the other hand system icons are mostly flat, simple, and portrayed in a single color.

If you’re designing a website, then you probably won’t care much about product icons. They can be used in a layout, but they’re most often used for application icons and branding.

But system icons are used in interfaces to denote commands, actions, or data representation(like the icon of a person represents the profile page).

12-material-admin-icons-flat-ui

Check out the Material Design Admin Theme to see these flat icons in action. You’ll find one icon attached to each link in the side navigation explaining what the link is all about.

Then if you check the top navbar you’ll find similar icons with different behaviors. The gear icon opens a settings menu. The painter’s palette icon opens a color palette switcher dropdown.

The system icons all look the same, but some compliment existing links while others denote specific actions without any text.

If you’re interested in designing your own Material Design icons, then take a look at the Material icon documentation. It’s exhaustively detailed, but it’ll give you everything you need for designing consistent icons from scratch.

Wrapping Up

There is so much to cover when it comes to Material Design, but studying and researching is only half the battle. To fully comprehend the design language you’ll need to build your own projects and learn as you go.

I hope the examples in this post have guided you along and provided assistance when designing similar layouts. If you follow Google’s Material guidelines and craft interfaces with usability in mind, then you’ll have no problem adapting Material techniques into your web design workflow.

Featured image: Vasabii.


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.