Website redesign using Google’s Material Design
A lot of work goes into creating a website, especially if it’s going to be successful. It’s important to have fast load times, be “bug-free”, and have valuable content to engage your users. But there’s some equally important that isn’t as easy to see right away: the success of the design. Not only does a website have to be pleasing to the eye, but the user has to be able to navigate the site and have an effortless, positive experience. If your role involves UI/UX, or you’re preparing to assess a website re-design, this article will explain a new leap forward in design that will be valuable to know.
Google’s Material Design
With so many varieties of digital platforms and interfaces available, one challenge is keeping your design consistent. Google’s Material Design has been made to conquer this challenge head-on and allow a unified experience across your platforms and user experiences. It has already been implemented with Android mobile apps and has now become popular with other platforms.
Google’s design theory is based on the simplest of tools: paper, ink and shadows. Thinking about the way a real object moves, or the way paper layers on top of paper, is the easiest way to understand material design; it consists of guidelines that follow all natural principles. It’s not about eye candy or flashy design, but about reducing the barriers between the physical and digital worlds. Designer Matías Duarte explained, "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." (Source: http://www.engadget.com/2014/06/25/googles-new-design-language-is-called-material-design/)
If you’re a Gmail user, you may have noticed their new app and web platform “Inbox”; if not you can see it here: https://www.youtube.com/watch?v=bzNTjpUMOp4 & https://inbox.google.com/. This re-design uses all the guidelines of Google’s Material Design. Some of the most notable design changes include the simplified top panel, which has the ‘settings’ and ‘compose new email’ icon removed. Compose has now been replaced by a bold button that floats in the bottom right corner, making it easier for the user to find and use.
The guidelines state: “floating action buttons are distinguished by a circled icon floating about the UI and have special motion behaviours related to morphing, launching, and the transferring anchor point.” Take a look at what it looks like on mobile and desktop:
Even when an inbox is empty (including when emails are organized as “done”), the main page has an interesting graphic that definitely resembles a material design look:
How can we, as designers, implement this?
In order to achieve a physical inspired look digitally, Google created guidelines, which includes elements that are easy and intuitive for users to interact with. Using paper and ink as inspiration, Google created categories that naturally fall under these topics including colour, typography, layout, and animation to name a few. For example, the colour scheme Google provides includes bold colours, taking cues from contemporary architecture, road signs, pavement marketing tape, etc. Take a look at this helpful colour guide: www.materialpalette.com.
Style guidelines for icons are bold and designed as if the material was folded, cut, and lit as paper would be. When it comes to animation, there is a strong emphasis on “natural” movement. Just as braking while driving a car, sudden movements can make it uneasy for the user experience. Here’s an example:
By using the initial tools used for designing, paper and ink, the design guidelines and principles combined create an impressive look and feel to any UI/UX design and improve core functionality. Check out the full material design guidelines here: http://www.google.com/design/spec/material-design/introduction.html.
How can we be so sure of these guidelines? We tried them out for ourselves.
An industry that hasn’t adapted as quickly as trends have evolved – and that could definitely benefit from material design - is the travel industry. Most travel sites are out-dated, complicated to use and not mobile-friendly. They are often full of stock photos and inconsistent with their layout and (navigation?). We decided to take the very out-dated website, www.belairtravel.com and redesign it with the Google’s Material Design theory as the inspiration. BelAir Travel targets the “trendier” travellers; the ones who look for five-star deals but their website, in its current state, did not accurately target this audience.
The material design guidelines have an emphasis on mobile app design since it is much easier to showcase the use of the interactive animations Google has introduced on a mobile platform. We wanted to test the guidelines out a desktop example for ourselves to see how they could be used.
Some elements used:
First and foremost, we made the home page very clean and deliberate. The buttons are distinguishable since they are “floating” – a material design element - and it is clear to the user there are a number of clearly defined, different clickable options. We also made use of the elevation design element, giving the buttons and content some hierarchy and dimension.
On the current site, there were too many buttons, and they were not all consistent, which led to confusion. With the new site, users get to the core of the website faster and easier. It has an improved modern look through the bolder colours– another material design element. The typography was also improved, making it more modern and crisp. Important to note, this design can be easily implemented into the secondary pages and even used for mobile, one of the core reasons to consider trying out material design.
Why should I know this?
Although Google’s Material Design is still relatively new, it is the future. John Wiley, the principal designer at Google, said that Google considered what technology would be like two or more years down the road when it started to work on this project. If you haven’t already, you will definitely, see this style of design and notice the phrase “material design” more frequently as more people become aware and jump on board.
Learning the guidelines and trying a re-design for yourself is a great practice and learning opportunity and will likely cause you to rethink web and app design processes. Also, since these are just guidelines, it’s a unique opportunity to use it to create something on your own with your own twist, just as we did.
As a consumer, how can you benefit from redesigning your site with the Google Material Design guidelines? Not only is it the visual language of the future, but also a lot of UX/UI (user experience/user interface) research and testing has been done to result to this design, meaning it is practical, accessible, and usable. There is a reason why Google created these guidelines and made it accessible to everyone; they want people to follow and implement it.
Do you see yourself using material design? Why or why not? Let us know in the comments.