Last Updated on
Google’s Vice President of Design, Matias Duarte, introduced Material Design to an appreciative audience during the 2014 I/O Keynote. Material Design provides a clear, simple, intuitive user interface based around the concept of digital paper and ink.
Material design is pretty cool in its own right. Before you start working on your next app or website project, look for great way to create something really neat and unique. Adapting Material Design to the industry in which your next customer operates can really add that ‘wow’ factor.
Here are 10 simple tips for achieving that blend:
Ways of Adapting Material Design Concepts
1. Understand what Material Design really is.
Material Design is all about the fine details. It’s worth getting to know its features and the concept behind it. Watching the 2014 I/O Keynote by Duarte on YouTube is a great introduction to how it works.
There is also a Material Design micro-site at Material.io where you can go into more depth about this awesome concept. There are no shortage of related articles and YouTube videos from various industry sources. Fill your boots and then move on to the next step, considering your industry in light of your new knowledge.
2. See your industry through a materials lens.
So how could you represent your industry through the medium of material design? To begin with, what sort of materials does your industry work with?
For example, the health and medical fields combine both organic (skin, bone, flesh, etc.) materials with inorganic (e.g. metal) ones. How might these different materials move and respond to touch? If you work in the construction industry, you have plenty of ideas to work with due to the many different materials used in building.
Anything from pouring concrete to sanding wood to laying bricks could form interesting effects on your site. And remember, Material Design isn’t just about 2d surfaces. You also need to think about the edges of elements and the effect elevation has on shadows and light.
3. Create amazing images.
When people think about Material Design, they often focus on UI elements such as modals, buttons, menus, icons and the like. However, some of the best Material Design examples incorporate impressive images – both photographs and illustrations.
With Material, use big images that bleed off the screen. To really capture your industry, invest in a professional photo shoot using real people and situations. Try not to rely on industry stock shots if you can help it. Not only are they often overly posed and artificial, there is also a high likelihood that a competitor’s app or website will be using a similar – if not identical – shot.
As Material Design is cross-platform, ensure your main images have a focal point near the center so that important parts aren’t cropped out of view when being resized for smaller devices.
4. Look at other websites for inspiration.
One of the best ways to understand a design concept while generating ideas for your own projects is to spend a good hour looking through existing websites in that style.
Many talented graphic, UI, app and web designers promote their wares through online platforms. You can often filter results or use a search facility to specify Material Design. You could also narrow results down by industry type to find, for example, all real estate websites using Material Design.
Remember to look at everything including menus, logos, backgrounds, icons, transitions, modals and buttons as well as the overall color scheme and organization of the app or site.
5. Be bold with color.
The bold use of color is a central feature of Material Design. It is used for branding, making sense of function and hierarchy (e.g. lighter variants above darker ones) and legibility (no white text on yellow backgrounds please).
You will normally find that the best Material Design influenced websites and apps feature a primary and secondary color with light and dark variants of these. There is a Material Design palette tool that can help you to create this. Google also recommends a background color over which other elements move (the default is white) and an alert color for warnings (default red).
To tie your website together nicely, Google recommends that you extract colors from your main images for use elsewhere on your pages.
6. Pay attention to structure and space.
In Material Design, there is often a lot of white (or negative) space. This is space between elements and pieces of content and is as important to a visual design as silence is to a musical composition.
Space is used as a structural element to help focus the viewer’s attention on certain elements and understand which parts of the page belong together. It also helps to make the content easier to consume through reducing ‘cognitive load.’
Again, studying as many different examples as possible will help you to understand this function and stimulate ideas for your own project.
7. How do things move in your industry?
So, for example, a feather will float around, a bubble will bounce and pop and a heavy weight will fall quickly. How can you represent this in your industry? One way is to use the concept of the industry itself. For example, a children’s nursery website could feature elements bouncing around in a fun manner while an architect’s app could reflect very deliberate and precise movements.
However you implement the concept, remember that in Material Design ‘motion is meaning.’
8. Spend time browsing for industry themes.
Why reinvent the wheel every time you build a new website or app? Whichever framework you prefer, there are plenty of high quality templates and UI kits out there to get you started. These include Angular website templates, Bootstrap admin templates, Polymer web app templates, React dashboard templates and more.
You might even be able to download a suitable template for free although your options for commercial use may be restricted. Nevertheless, license fees are normally very reasonable so we do recommend you have a look around.
9. Create customized UI elements.
One way to guarantee a unique app or website is to create your own customized UI elements including icon sets. Remember that Material Design icons are based on simplified realism so that the important functions of the represented object are included but any extra detail is left out.
Just as you can track down entire site templates, you will be able to find vector templates for creating your own icons in programs such as Adobe Illustrator or Inkscape.
10. Don’t forget the dashboard.
Finally, why spend hours perfecting the customer-facing area of a website or app with pure Material Design beauty and ignoring the admin area.
Customizing the dashboard using Material Design concepts will create a polished product that you can be proud of. Again, you could use a paid or free admin dashboard template to start you off.