Apps & Games on Google Play are adopting a new icon system to better fit diverse
developer artwork to Google Play’s various UI layouts, form factors, and
devices, as well as to bring consistency and a cleaner look to Google Play.

Uniformed shapes are visually more appealing and easier to digest. They help
users focus on the artwork, as opposed to the shape. They fix alignment issues
caused by random open space to better present surrounding information, such as
the title, rating, and price.


Freeform – original format

Uniformed – new format

This page describes the guidelines you should follow when creating assets for
your app’s listing on Google Play. For example, because Google Play dynamically
renders rounded corners and drop shadows for your app icons, you should omit
them from your original assets.

Important: If instead you’re interested in learning more about creating APK
launcher icons, which are separate from the Google Play icons described on this
page, see the resources below:

  • Android Adaptive Icons
    Follow these APK icon guidelines to learn how to create adaptive launcher
    icons introduced in Android 8.0 (API level 26).
  • Product icons
    Discover Material Design principles for product icons, including guidelines
    for icon design, shapes, specs, and treatment.

Creating assets

This section describes some guidelines you should follow when creating visual
assets for your app on Google Play.

Attributes

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.

When creating your artwork, ensure it conforms to the following:

  • Final size: 512px x 512px
  • Format: 32-bit PNG
  • Color space: sRGB
  • Max file size: 1024KB
  • Shape: Full square – Google Play dynamically handles masking. Radius will be
    equivalent to 20% of icon size.
  • Shadow: None – Google Play dynamically handles shadows. See ‘Shadows’ section
    below on including shadows within your artwork.

Total asset size

Product icon keylines

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

On the left-hand side is your new icon asset. The following three images
on the right-hand side show Google Play dynamic processing of the icon.

Sizing

Utilize the full asset space as the background when dealing with minimalistic
artwork.

Use the keylines as guides for positioning artwork elements (i.e. logos).

Your full bleed artwork (final asset)

End result with shadows and rounded corners dynamically applied by Google
Play

Don’t force your logo or artwork to fit the full asset space. Instead, utilize
the keyline grid.

Don’t.

Don’t force drastic brand & artwork transformation to full bleed

Do.

Place freeform icon artwork on keylines instead

Illustrated artwork typically works well as a full bleed icon.

Don’t.

Don’t scale down illustrated artwork onto keylines

Do.

Utilize full asset space so your artwork occupies the entire icon

Shadows

Google Play will dynamically add a drop shadow around the final icon once
uploaded.

When adding shadows inside your icon artwork, consider consistency with the
Android platform by following Google Material guidelines.

Don’t.

Don’t add drop shadows to your final asset

Do.

You can create shadows and lighting within the artwork

Corner radius

Google Play dynamically applies corner radius. This ensures consistency when the
icon is resized across different UI layouts. Radius will be equivalent to 20% of
icon size.

Don’t.

Don’t round the edges of your final asset

Do.

Fill your entire asset with artwork when possible

Badges

Embedded badges take away from the artwork itself and don’t scale down well with
the icon.

Caution.

Avoid communicating promotions on your artwork

Caution.

Avoid using branding badges

Brand adaptation

If shapes are a critical part of a logo, do not force the artwork to full bleed.
Instead place it on the new keyline grid.

From left to right: original icon asset, new icon asset (recommended
adaptation), new icon rendered on Google Play.

If possible, pick a background color for your asset that’s appropriate for your
brand and doesn’t include any transparency. Transparent assets will display the
background color of Google Play UI.

From left to right: original icon asset, new icon asset (recommended
adaptation), new icon rendered on Google Play.

If there is no distinct shape around a logo defining it, place it on a full
bleed background.

From left to right: original icon asset, new icon asset (recommended
adaptation), new icon rendered on Google Play.

If your artwork is flexible enough, consider tweaking it to fully utilize the
asset size. If that’s not possible, revert to placing the logo on a keyline
grid.

From left to right: original icon asset, new icon asset (recommended
adaptation), new icon rendered on Google Play.

Legacy mode

Original icon assets that have not been updated per the new specifications will
eventually be migrated to legacy mode and scaled down 75% to the keyline grid
size (512 * 0.75 = 384px).

Uploading an icon per the original specification will not be allowed as of May
2019. See more details on timelines.

Original icon assets will be automatically turned into legacy mode assets
and be scaled down 75% to new keyline grid.

Download design templates & resources

To get started, download one of the provided asset templates:



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here