Web Design Spotlight: Google’s Material Design

Web Design Case Study: Google’s Material Design

Web design is a sort of nebulous discipline, existing somewhere around the intersection between science and art. While technical subjects like HTML, CSS, or JavaScript can present their own difficulties, at least they have well-defined structures and syntaxes that can be grasped by a diligent learner.  Web design, on the other hand, is more of an art-form. To get good at web design, we must work with intuition as well as logic, and developing an intuition for web design requires looking at examples to get a “feel” for it.

One example you can look at to get a feel for where web design is going in 2016 / 2017 is in the trend toward flat & simple. If you’ve been paying attention to tech for the past few years, you may have noticed a general trend toward flatter, simpler app icons (see the evolution of iOS app icons below for example), flatter and simpler websites, etc.

 

web design

Google has taken this trend toward flat & simple to the next level, by gearing all of its web design around the idea that everything in the Google universe should look and feel like it’s made out of paper. Not only app logos and websites, but all user-interfaces, all menus and buttons, all pages and workflows, should impart to the user the feeling that the materials he or she is interacting with are made out of a paper-like material.

One very thoughtful application of this is in the way that elements interact with the user’s touch/click. In past design paradigms, if a user touched/clicked, for example, a button, the button would depress, as if it is being pushed downward. Google’s web designers put some thought into this concept, and realized that it doesn’t quite make sense. If you’re pressing down on your smart-phone screen, your finger doesn’t feel like it’s actually depressing anything, giving the effect a slightly unrealistic feel. Worse yet, because of the thickness of the glass on your phone, your finger doesn’t even reach the icon in the first place, which adds to the disconnect between what you’re seeing on the screen and what you’re feeling in your finger. This kind of disconnect is what makes kills the magic that designers work so hard to create. So Google’s crack team of web designers came up with a revolutionary solution: instead of making the button look like it’s being depressed, design it to look like it’s coming up to meet your finger (through a combination of making the button bigger and making its shadow larger and fuzzier). This creates a feeling of magnetism between finger and button, which feels much more realistic than the old-school depression effect. In this way, Google’s web designers brought the magic back to internet buttons. This effect — along with all the other elements of material design — is now found throughout all of Google’s applications, creating a feeling of design continuity and cohesiveness throughout the Google universe.

If you want to become a better web designer, you can apply these same general principles in your own work: cohesiveness, thinking of elements as made out of real material, etc — or you can take it to the next level and actually apply the details of Google’s material design paradigm for yourself! Google has essentially “open-sourced” its material design specifications so that everyone can make apps & websites that fit beautifully into the Google Universe. Integrating these styles into your websites and/or apps can make your visitors feel more comfortable and at home while looking at your pages.

You can find Google’s full specifications at material.google.com. Click through for full, detailed instructions on how to make your websites look like they were designed by Google.

Good luck, and have fun designing!

2017-07-19T15:31:20+00:00