Icon Design Standard

app_icon_design_template_imagesSelecting Art for Your App Icon

  • Keep it simple – with a simple and clear representation, the less line segments needed to represent the object the better
  • Think about how “Apple” and “Google” keep their icon shapes simple but meaningful
  • Simple shape, nothing overly detailed or too complex – keep in mind the iPhone icon is only 3/8” x 3/8”

Using the App Icon Design Template (Vector)

The official vector template should be used for all app icons being created for Cleveland Clinic. The template can be requested by sending an email to onbrand@ccf.org.

Notes about the template:

  • Adobe Illustrator is required to utilize this template
  • The file dimensions are 1024px x 1024px
  • Dissection of the file as follows:
    • “Icon sizing grid” – is a reference layer and can be left active (non-printing ‘template’ layer)
    • “Icon layer” – place your new vector art into this layer, feel free to remove the example icon when placing in new art.
    • “Example Palette” – This is layer is reference layer, but can also be your creative crayon box for color experimentation. Once you create the gradient you like just apply it to your chosen art.
    • “CC logo Layer” – is our logo and part of the brand standard for all Cleveland Clinic App Icons (locked and should remain unchanged)
    • “Base” – is essential for the look of our icons (locked and should remain unchanged)

Cleveland Clinic Icon/Logo

  • Cleveland clinic icon/logo is in the lower left hand corner (and must remain there as part of our brand standards)
  • Logo is spaced 80 pixels up and 80 pixels right from lower left corner
  • Logo is 212 pixels wide and 212 pixels high
  • The icon art SHOULD NEVER invade the standoff (white space) around the Cleveland Clinic icon/logo (30 pixel imaginary border around the logo)

App Icon

GOALS: Icons should fit within the circles provided in the template, optically centered and be a simple/clear representation of your app

  • Icon should sit between the two circles without overlapping the white space around the icon/logo
    • Inner circle/minimum: 664×664
    • Other circle/maximum: 864×864
    • Outer box: 864×864 (white space should be 80 pixels from the border edge. Do not make icon any bigger than that
  • Optically center the icon on the template – all icons will not necessarily be able to be mathematically centered given the shape of the icon, so visual (optically) centering is a technique that should be used for best results

Gradient

  • Our icon brand use only two colors in a vertical gradient (sample gradients provided with the vector icon template file)
  • Avoid stark white, stark black, and other dark colors – think ‘bright and beautiful’ icons
    The entire icon symbol needs to be filled by a unified gradient (a continuous gradient thru a “compound path”)

Standard/Marketing Apps/Clinical/Enterprise Apps

  • Apply two color vertical gradient applied to the icon
  • Background: Pure white, standard should not be changed

Samples:

standard_app_icon_examples

Wellness Apps

  • Apply two color vertical gradient applied to the background
  • Icon: Pure white, standard should not be changed

Samples:

wellness_app_icon_examples

App Icon Preview and Sizing Template (Photoshop) – the quick way to SEE how the app icon will look in various sizes

  • We recommend using PixelResort’s Apple App Icon Template & Android App Icon Template Photoshop templates
  • A few notes about using PixelResort’s templates (please defer to the readme.rtf included with the downloads for a complete explanation)
  • Start by opening your App Icon Design (Illustrator file) with Photoshop (on a Mac just drag the file to the Photoshop icon in the dock)
    • For iOS: Ensure resolution is 72 and width/height is 1024×1024
    • For Android: Ensure resolution is 72 and width/height is 400×400
    • Look for the “Edit me and save” layer
    • Double click this layer
    • It will open a file called “icon.pbs”
    • Drop your App Icon Design (sized appropriately) into the now opened “Edit me and save” layer file (icon.pbs)
    • Center your layer with within the working area
    • Save and close layer file (icon.pbs)
    • Your icon will automatically be applied in various sizes in the layout (if you’re having problems, please defer to the readme.rtf included with the downloads)

Creating the final icon files for Apple App Store & Google Market Place

  • After you applied your icon to the proper “iOS App Icon” & “Android Launcher Icon” Photoshop templates
  • Go to the “Actions Palette”
  • Load in the .atn file provided by PixelResort
  • Execute the action, and follow the on screen steps to create the final icon files folder