Material Design color system
I’d like to expand a bit on this post written by Cameron Chapman about color pschychology. We can’t talk about colors in UI without mentioning the Material Design color system.
Ever since google launched material design in 2014. It has taken the design world by storm.
In the words of google’s vice President for design Matias Duarte: “Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
And that’s basically what material design is now: a way to make design elements look touchable. Characteristics of Material Design include the use of meaningful transitions (or motion), the use of light and shadow, grid layouts, and bold colors. You’d be surprised how easily these elements can improve the overall design and UX of your website.
A core element of material design is the Material Design color system. It uses an organized approach to applying color to your UI. In this system, a primary and a secondary color are typically selected to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways creating subtle gradients and adding depth to your UI. See an example of my logo that I first wanted to create in these colors Which I later rebranded in a material design color palette. The latter looks much brighter, sleeker and sophisticated.
.
See what I mean? Here are some great tools to design your application in material design.
Material Design Color Tool This tool is great because it lets you test the colors on a UI where you can collaborate and share with your team. Another great resource is Material UI A pretty stratightforward tool that has all the hues of the priamry color which you can click to copy to your application of choice. Material Palette works similarly but expands the fact that you can create custom palettes, test it on your UI and then save it. It also features a bunch of useful material Icons available for download. Let’s start designing!
Recent Comments