Drop a line

Have a tip, or just want to say hi? Just use the form to the right!

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

In Google's Vision, Icons are Made of Material Too

All

In Google's Vision, Icons are Made of Material Too

Liam Spradlin

Google has yet to publish new standards on launcher icon design (they will eventually), but as Material design becomes the new hotness, it's important to take a step back and notice a few things about the Google icons we've already seen. These are key elements of designing launcher icons to fit with Google's new vision, and should be considered as you make your own icons or re-create those that Google has already created.

Many of these fall into the territory of Google's existing visual asset guidelines, which I've written about before - for example the best icons are geometric shapes, with the primary element facing forward. But there are some new nuances. Here's a quick rundown.

1. They're material too 

These icons are made of something. Specifically, the same "quantum" material used in Android's new interface - quantum paper. Quantum paper is a "technologically advanced material" with the consistency of card stock. The folds and edges give icons distinct depth, and in some instances there are very subtle gradients to suggest a soft, almost nonexistent light source.

Look at the tops of the Fit icon's ruffles, or the bottom edge of the Chrome beta icon to see this super subtle depth.


2. Hard shadows gradate

The hard shadows used in Google's icons are used sparingly. Typically they are only used for the secondary object in an icon, or the top-most element. When they are used, they gradate - set your gradient to black-black positioned at 0 and 100%, then change the transparency of the far black to 0%, and set the gradient's blend mode to multiply. Then set the overall gradient's opacity to around 20-40%. Now you have a properly gradating hard shadow.


3. Use a Unique Silhouette

Google's old launcher icon guidelines said this too. Your icon should have a unique silhouette that's recognizable and thoughtful, embodying the essence of your app. After all, this is a user's very first point of contact every time they use your app. A rounded square isn't that interesting.


4. Use the grid

Google hasn't officially released the icon grid yet, but we saw it for a few seconds at a time at I/O, and it is helpful. It may seem too prescriptive at first, but it will help constrain icon designs to proportions and rhythms that feel familiar and comfortable to users. The grid is something like what you see below, and is fairly easy to create - take a 512x512 canvas (or larger if you prefer to start big), create a rectangular grid with 24 dividers in each direction, add a circle and some 45-degree lines, then emphasize some dividers to form a square and you're done. If you want to skip all that, download my version here.

So far, these are the major tenets we can distill from Google's icon design. As more Google apps are updated (or when Google finishes the design guidelines, whichever comes first), we may learn more. Until then, start folding some card stock!