What do the keylines on product icon design guidelines mean exactly?

What do the rectangles, squares and circles exactly represent on icon guidelines like this one?

(I numbered them for practicality)

enter image description here

source : https://developer.android.com/google-play/resources/icon-design-specifications


That spec is IMHO extremely clear about the intent and usage of the keylines:

Icon artwork can populate the entire asset space, or you can design and position artwork elements such as logos onto the keyline grid. When placing your artwork, use keylines as a guideline, not a hard rule.


After the asset is uploaded, Google Play dynamically applies the rounded mask and shadow to ensure consistency across all app/game icons.

To me it seems abundantly clear that Google’s intent is to help you, as a developer, develop an icon or logo which will fit into their new “uniformed shapes” Google Play icon scheme, which they are enacting to get away from what has been a visually cluttered user experience.

They ask you to develop either a logo / icon using those keylines such that there is “white space” (which can be coloured) around the primary logo / icon to give a balanced, easy-to-parse silhouette to the final Google Play icon, after their internal graphic logic engine does its thing: you deliver artwork in a 512 x 512 square, it radiuses the edges, and creates the external drop-shadow on the fly.

They ask you to try to match Google Materials guidelines for any drop shadows you use inside your logo or artwork, and they also ask you to go full bleed on artwork which is illustrative versus an icon or logo.

So those keylines are simply suggestions for locational proportionality for logos / icons you may develop – like this example from that same spec page.

enter image description here

Hope this helps.

Poste Script:

After a brief comment exchange, I whacked up a quicky example to explain what I mean in more detail: Their example is shown fitting into the square guidelines – my quicky ligo fit inscribed into the portrait oriented rectangle.

Hopefully this clarifies more.

enter image description here

Source : Link , Question Author : Sébastien , Answer Author : GerardFalla

Leave a Comment