Design Overview

The below guide can assist you with ensuring your App design meets the exact requirements specified. The Core will not accept assets with any deviations from the specifications.

Asset_Design_Checklist_20180605.png

Before Exporting

  • Zoom in to corners to ensure all graphics extend fully to the edge of the artboard and that there are no transparent pixels

  • If using Illustrator, make sure all artboards are aligned to pixel grid by selecting “Rearrange All Artboards”. If this is not done, Illustrator may add additional pixels  – resulting in oversized assets which will not upload

  • Ensure no important design elements such as text or logos are inside the crop areas:

    • App Background: 520px from top

    • Stand Alone App’s Phone Splash Screen: 170px from top and bottom

    • Stand Alone App’s Tablet Splash Screen: 200px from top and bottom

When Exporting

  • Export all assets at their exact specified size, RGB, PNG format and 72 dpi resolution – with or without transparency as required.  View asset checklist

Common mistakes

  • Transparent pixels. Artwork that doesn’t extend to the edge of the artboard can result in transparent pixels on the edges of exported PNGs.

  • Exported assets which are an extra pixel wide or high. Working in Illustrator? Make sure you rearrange artboards before exporting. This will make sure that the artboards are positioned using whole pixel values. If this still doesn’t work, check that all artboard positioning and size values (X, Y, W & H) are whole numbers and not decimals. Any artboards positioned or sized with fractions of pixels will be rounded up.

  • Not including an android version of the app icon, this asset MUST have transparency. Android icons are 1024 x 1024 px. Transparency can be achieved by rounding corners or using a more complex shape.

  • Not including a CMS icon. The CMS Icon is used to easily identify the project in the Core CMS and is also seen by attendees using Interactive Sessions or Lead Capture. The CMS icon is often the same as your app icon.

After Exporting

  • Double check exported assets meet all requirements (size, transparency, dpi)

  • Collate list of all colours used in UI Elements

Next steps: 
Refer to Templates

Was this article helpful?
0 out of 0 found this helpful