Graphics

We are so excited that you are building an app with us. Whether it’s your first time or you are refreshing your app’s look, we are here to help you make it look the part and be a valuable mobile extension of your brand.

  • Pro Tip: Check out our full Design Guide, made by our expert Design Team, for best practices, visual examples, and tips to optimize all of the design options throughout your app!

App Icon 

The app icon is very first thing your user sees when downloading or using your app. It also lives on your Giving pages. Make sure it is an icon that is easily recognizable and clearly legible for your brand. Keep text on your icon minimal. Use your primary color as either the color of the icon or background color.

Size: 1024x1024px

Format: PNG (no transparency)

Usage: Display on phone home page, receipt pages, and on any giving form.

Important: The icon should be full-bleed, with no shadows or corners applied, and not transparent. Additionally, the icon can not be changed dynamically after your app is live. 

*Check out some more examples and tips for creating your app icon in our Design Guide

Splash Screen

The splash screen is your branded loading screen. This is a full frame static screen that welcomes your user to the app when loading. Consider using an image or dynamic design elements that showcases the personality of your brand. Remember, for consistency, it is best practices to use the same color palette you are using across the app. Feel free to add your tag line or branded copy to add personality as well.

Screen_Shot_2019-02-04_at_2.11.00_PM.png

Sizes:

  • 640 x 960 px (iOS iPhone/iPod)
  • 1242 x 2208 px (iOS iPhone 8+, 7+, 6s+)
  • 1242 x 2688 px (iOS iPhone XS Max)
  • 1125 x 2436px (iOS iPhone X, XS)
  • 1668 x 2224 px (iOS 10.5” iPad Portrait)
  • 2224 x 1668 px (iOS 10.5” iPad Landscape)
  • 1668 x 2388 px (iOS 11” iPad Portrait)
  • 2388 x 1668 px (iOS 11” iPad Landscape)
  • 2048 x 2732 px (iOS 12.9” iPad Portrait)
  • 2732 x 2048 px (iOS 12.9” iPad Landscape)
  • 1280x2174px (Android)

Format: PNG

Usage: Application splash (boot/initial) screen

Important: The splash screens cannot be changed dynamically after your app is live. 

Screen_Shot_2019-02-04_at_2.18.17_PM.png

 

Home Background

The Home Screen is where all of the magic happens! Your buttons live here for easy navigation between features. You will need to build a background at multiple sizes. Include branding (you can also include: color, imagery, service information, and pretty much whatever you want!) You also have 4 different grid height ratios to choose from.

Grid Height Ratio

You will need to choose the grid height percentage at which you’d like to display your buttons. Because the Home Screen background image is set behind the buttons, 40, 60, 80 or 100% of the image will be semi-covered by feature buttons at the bottom, while the remainder of the display will be available as your header.

Screen_Shot_2019-02-04_at_1.51.35_PM.png

Sizes:

  • 640 x 960 px iOS 3.5″ (iPhone 4 and earlier) JPEG or PNG
  • 1242 x 2208 px iOS 4″ (iPhone 5 and later) JPEG or PNG
  • 1125 x 2436 px (iOS iPhone X) JPEG or PNG
  • 640 x 1087 px (Android) JPEG or PNG
  • 2048 x 2048 px (iOS iPad - be sure to top-center your logo.) *must be a JPEG
  • 800 x 200 px *Home Header Image (If using Mosaic at 100% Grid Height you will need this image - see layout on the far left in graphic above) - *must be a PNG

 

Feature Buttons 

Buttons help your user navigate to the features and content they want to interact with.
Readability when creating buttons is crucial. All buttons — icon or image-based —
require the name of the button designed as part of the image.

Screen_Shot_2019-02-04_at_2.35.26_PM.png

 

Pro Tip: When creating buttons consider using design resources like Unsplash for images and Nounproject for icons.

Icon Buttons

Size: 300x300px

Format: PNG (transparency supported)

Usage: Individual feature tile images

Feature tiles are displayed on the home screen and link to the individual features of your mobile app.

Mosaic Buttons

Size: 

  • 300 x 300p x (Standard)
  • 600 x 300 px (Wide)

Format: PNG (transparency supported)

NOTE: BOTH standard and wide button are required for wide buttons to display. Make sure the Wide Tile is checked. Mosaic Upload Instructions.

 

Google Play Feature Graphic

Size: 1024x500px

Format: PNG (no transparency) or JPEG

Usage: Feature image in Google Play

Google Play requires a header graphic to display within the Play Store. You can read more about the graphic here, under the Feature Graphic section.

 

Google Play Promo Graphic 

Size: 180x120px

Format: PNG or JPEG

Usage: Promo image in Google Play

Google Play does not require this image in order to submit updates. Used for promotions on older versions of Android OS.

You can read more about the graphic here, under the Feature Graphic section.

 

Putting It All Together

  • App Icon: 1024x1024px PNG
  • Splash Screen iOS - no transparency (PNG):
    • 640 x 960 px iOS iPhone / iPod
    • 1242 x 2208 px iOS iPhone 8+, 7+, 6s+
    • 1242 x 2688 px iOS iPhone XS Max
    • 1125 x 2436 px iOS iPhone X, XS
    • 1668 x 2224 px iOS 10.5” iPad Portrait
    • 2224 x 1668 px iOS 10.5” iPad Landscape
    • 1668 x 2388 px iOS 11” iPad Portrait
    • 2388 x 1668 px iOS 11” iPad Landscape
    • 2048 x 2732 px iOS 12.9” iPad Portrait
    • 2732 x 2048 px iOS 12.9” iPad Landscape
  • Splash Screen Android - no transparency (PNG):
    • 1280 x 2174 px
  • Home Background iOS - no transparency:
    • 640 x 960 px iOS 3.5″ (iPhone 4 and earlier) PNG or JPEG
    • 1242 x 2208 px iOS 4″ (iPhone 5 and later) PNG or JPEG
    • 1125 x 2436 px iOS iPhone X PNG or JPEG
    • 2048 x 2048 px iOS iPad (Be sure to top-center your logo.) JPEG
    • 800 x 200 px Home Header Image (If using 100% Grid Height) PNG
  • Home Background Android - no transparency:
    • 640 x 1087 px Android JPEG
  • Feature Buttons: 300x300px PNG (transparency supported)
  • Google Play Feature Graphic: 1024x500px PNG or JPEG
  • Google Play Promo Graphic: 180x120px PNG or JPEG

 

Templates

We have some easy to use design templates that you can download here. (Templates include .psds for icon, all screen sizes, and buttons.)

You can also access our Feature Images Library which includes styled themes for your buttons.

 

Additional Information / Q&A

Q: Does resolution affect my images?

A: No. The PPI or DPI of an image displayed on-screen or in your app doesn't change the way it's displayed. A standard PPI to work from is 72, and will work great in-app and on-screen.

Pro Tip: Check out our full Design Guide, made by our expert Design Team, to optimize all of the design options in your app!

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk