Setup Page

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!

Setup Page Basics

Your setup page is where you will upload your splash screen (the first initial loading screen users will see for 2-3 seconds while your app loads) and home screens. You will also be able to enter a description of your app for the Apple App Store, Google Play Store and create a device name and app store name for your app!

*Note: All fields with a red asterisk are required to be completed before we can start building your app.

Your App: Device name will display on individual's device who have downloaded your app. Your app device name does have a 12 character limit. It is important to note that using a space between letters within your app device name does count as a character.

App Name: Store will display your organization's/app name in the App Store and Google Play Store. Your app store name has a 30 character limit. It is important to note that using a space between letters within your app device name does count as a character.

Description: The description box is where you will create a description of your app that will be displayed in the Apple App Store. There is a character limit of 4,000 characters for this description box.

*Note that in the Apple App Store, the first 580 characters are displayed initially, then the rest of the text is available via a "More" button.

Example: This app is the communications hub for aware3 church.

-Sign up for events and small groups
-Watch sermons
-Access discussion guides
-Give and support specific needs
-Request immediate prayer or help
-Access text-to-give and other texting tools
-Occasional notifications for events or last-minute changes

These tools are to help you grow roots in our community and to share aware3 church with others!

Short Description: This description box is where you will create a description of your app that will be displayed in the Google Play Store. This description box has a character limit of 80 characters.

Example: This app is the communications hub for aware church. Watch sermons, give & more

Keywords: Keywords help individuals find your app in the app stores when they search by the keywords you have entered.

Important: Your app device name, app store name, description, short description and keywords cannot be changed dynamically after your app is live. In order to have change to these fields be reflected in the app stores, your app must be submitted to Apple and Google to go through their review process. Your app is scheduled to be updated every six months. You can make changes to any of these fields at any time and then after your scheduled six month update, your changes will be reflected in the app store.

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.

Sizes:

• 1242 x 2208 px (iOS iPhone 8+, 7+, 6s+)
• 1284 x 2778px  (12 Pro Max)
• 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. 

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.

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
• 1284 x 2778 px (iPhone X Max, iPhone 12 Pro Max)
• 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.

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):
  
  • 1242 x 2208 px iOS iPhone 8+, 7+, 6s+
  • 1284 x 2778px (12 Pro Max)
  • 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
  • 1284 x 2778px PNG or JPEG (X Max, iPhone 12 Pro Max)
  • 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!