Google introduced Material Design in 2014, their standard design philosophy for the Google suite of websites, and more importantly for developers, the Android operating system. Recently, Google introduced the next phase of Material Design, known as “Material You.” What is Material You, and how could it influence your website? Let’s take a look.
What’s new about Material You? In a nutshell, Material You allows a device’s color palette to change dynamically based on a custom wallpaper selection. This means that typically static elements now appear differently from device to device.
That may sound like a lot of gibberish, so here are a few examples to help this concept make more sense. According to Google’s announcement, “We mix color science with years of investment in the disciplines of interaction design and engineering to make it possible to tailor any app—not just Google’s—to the user’s unique Material palette in real time.” Assume for a minute you have a pink and purple wallpaper. Google’s demo shows buttons in a calculator app in pink and purple, and then shows text message bubbles in the same pink and purple. Now assume you change your wallpaper to a dark black and blue picture. The text message bubbles now appear as blue and black. Contrast that with, for example, Apple’s standard blue text message bubbles for iMessage users and green text message bubbles for other users (with the other user’s bubbles always appearing in gray) and you begin to get the idea behind Material You.
How could these principles translate to a website?
Theoretically, you could spend a lot of time making elements of your website different on each page. For example, you could make the color of outgoing links or buttons on a page match the primary color of your featured image.
In practice, however, this would be a time-consuming task with no real benefit and potential confusion. Branding consistency is important. However, perhaps a more practical idea is simply to give your website’s colors more attention. Much has been written about color psychology and the mood different colors can present. For example, red is associated with excitement and energy while blue is associated with trust and confidence.
For more on color psychology, check out this article from the London Image Institute.
Instead of using these psychological principles, you could also use your brand’s colors to inform your choices. Outbound links are typically blue on websites, but they don’t have to be. If your company logo is a similar but slightly different color — purple, for example — consider making them purple instead. A lighter color like yellow or orange might throw off your users, but a darker color that matches your brand would give your website a sense of cohesion but also offer some uniqueness. The same goes for buttons and other elements as well.
If you really want to add a unique element to your site, you could even allow your users to customize the look of your site with cookies. This was a popular offering in the early days of the Web when “skins” for apps were popular, but you could provide a more modern take for your users.
Material You introduces a new, unique emphasis on color. While you may not employ their exact strategies when it comes to color, it opens up the door for new ideas on how you handle color on your website.
Was this tip helpful? Subscribe to receive more!
Get our free WordPress tips delivered to your inbox once a week with MPWR Monday, our weekly email list. You’ll receive one email every Monday with a new WordPress tip.
You’ll also receive our Latest Post Redirect plugin for WordPress when you sign up! Latest Post Redirect allows you to use a shortcode to redirect a post or page to your latest blog post. Use it to keep an link to your latest work that automatically updates when you create new content.