Quick answer: Material Design is a design language Google introduced in June 2014 for Android, its apps and the web. It treats interface elements as layers of paper-like material with realistic shadows, uses bold colours, a clear grid and type scale, and adds motion that explains what is happening when users interact. For websites, it offers a well-documented set of principles and components that make interfaces consistent and easy to use. It works especially well for web applications, dashboards and tools. For marketing sites, borrow its principles rather than copying its look, so your brand does not end up resembling a Google app.
Google published Material Design to bring consistency across its own products, and it published the guidelines openly for anyone to use. Since then, Material-style buttons, cards and floating action buttons have appeared across the web. Business owners and designers ask whether they should adopt it. The answer depends on what your website does.
The ideas behind Material Design
Material as a metaphor
The core idea is that interface elements behave like sheets of paper in a physical space. They have thickness, sit at different heights and cast shadows. A card sits on the background, a button sits slightly higher, and a dialog sits above everything else. Shadows show which elements are on top and which can be interacted with.
This is a deliberate step on from pure flat design, where everything sits on one plane and it can be hard to tell what is clickable. We covered the strengths and weaknesses of flat design in an earlier article. Material Design keeps flat design’s clean shapes and colours, but adds depth cues to make interfaces easier to understand.
Bold, graphic, intentional
Material Design uses strong colours, large type, plenty of white space and edge-to-edge imagery. Google provides a colour palette with primary and accent colours in a range of shades, and a typographic scale based on the Roboto typeface. The aim is a clear visual hierarchy, so users know where to look.
Motion provides meaning
Animations are not decoration. When you tap a card and it expands into a full page, the motion shows how the two views relate. Ripple effects on buttons confirm that a tap was registered. Motion should be quick, smooth and purposeful.
A consistent grid
Layouts follow an 8 pixel baseline grid, with consistent spacing and keylines. That makes it easier for designers and developers to work together and keeps interfaces tidy.
Common Material Design components
The guidelines describe many components. The ones you see most on the web are:
- Cards: containers for a single piece of content, such as a product, article or contact.
- Raised and flat buttons: raised buttons for primary actions, flat buttons within cards and dialogs.
- Floating action button: a circular button for the main action on a screen, such as “compose” or “add”.
- Navigation drawer: a menu that slides in from the side.
- App bar or toolbar: the bar across the top with the page title and actions.
- Text fields with floating labels: labels sit inside the field and move above it when the user starts typing.
- Snackbars: brief messages at the bottom of the screen confirming an action.
- Tabs, chips and dialogs.
Frameworks for building Material websites
You do not have to build everything from scratch. Several frameworks implement Material Design for the web:
- Materialize: a popular front-end framework based on Material Design, similar in approach to Bootstrap, with a grid, components and JavaScript effects.
- Material Design Lite (MDL): Google’s own lightweight library, released in July 2015, providing Material components using plain HTML, CSS and JavaScript, without depending on other frameworks.
- Angular Material: Material components for applications built with AngularJS.
- Polymer Paper Elements: Material components built as web components with Google’s Polymer library.
For WordPress, a number of themes follow Material Design, and a custom theme can adopt its principles through a framework or hand-written CSS. Our guide to custom WordPress themes explains when bespoke work makes sense.
Where Material Design works well
Web applications
Dashboards, customer portals, booking systems and internal tools benefit from Material Design’s clear components and feedback. Users already know these patterns from Android and Google’s apps, so there is less to learn.
Mobile-focused sites
Material Design was built with touch in mind. Large tap targets, clear feedback and bottom-positioned messages suit sites used mainly on phones, including progressive web apps, which Google has been promoting alongside it.
Product and SaaS interfaces
If your business offers software, Material Design gives you a well-tested foundation and saves designers from inventing every component.
Where to be careful
Brand identity
The biggest risk for marketing sites is looking generic. A site built with Roboto, a standard Material colour and floating action buttons can look like a Google product rather than your brand. Use your own typefaces, colours and imagery. Adopt the principles of hierarchy, depth and feedback, not the exact look.
Performance
Shadows, ripples and animations add CSS and JavaScript. Frameworks can be heavy if you include every component. Use only what you need and test page speed, particularly on mobile.
Patterns that do not suit the web
Some Material patterns come from apps and feel odd on websites. A floating action button makes sense in an email app, where there is one obvious main action. On a business website, a clearly labelled call to action button is usually better. Hamburger-style navigation drawers can hide important pages on desktop, where there is room for a visible menu.
Over-animation
Motion should be quick and purposeful. Too many animations make a site feel slow and can distract from the content.
Material Design principles worth using anywhere
Even if you never use a Material framework, several of its ideas improve any website:
- Make clickable things look clickable. Subtle shadows or clear button styles help users.
- Give feedback on every action. A button state change, a loading indicator, a confirmation message.
- Use a consistent grid and spacing. It makes pages feel organised.
- Create a clear hierarchy. Size, colour and position should show what matters most.
- Use motion to explain, not decorate.
- Design for touch. Generous tap targets and spacing.
Material Design and conversions
Design language alone will not make a page convert. Clear copy, an obvious next step, trust signals and fast loading matter more. Material Design can support those goals by making calls to action stand out and forms easier to complete, especially on mobile. Floating labels, for example, keep forms compact while still showing what each field is for. Test changes rather than assuming a new visual style will help.
FAQ
Is Material Design only for Android?
No. Google uses it across Android, iOS apps and the web, and the guidelines are open for anyone to use on any platform.
Will Material Design help my SEO?
Not directly. Usable, fast, mobile-friendly pages help visitors, which supports your goals, but the design language itself is not a ranking factor.
Should my business site use Material Design?
For web applications and portals, it is a strong option. For marketing sites, use its principles while keeping a distinct brand.
Design that helps people act
Good design makes it obvious what to do next, on any device. If you want help with a website or web application that is clear, fast and on brand, see how we help businesses turn visitors into customers.
