How can we help?

Apple iOS App Branding and Images Follow

Below we’ve outlined both optional and required image assets. We've also included a checklist at the end of this article so that you can make sure to have all the necessary assets ready when you build your Apple iOS app.

Image Assets

Channel Store Icon

Please note that this icon should NOT have a transparent background or rounded corners. For more information on best practices, visit iOS Interface Design Guidelines

Screen_Shot_2017-03-13_at_9.17.10_PM.png

  • Image Requirements: 1024 x 1024px, JPEG or PNG (no transparency and no rounded corners)

Launch Screen

A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen and gives the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use. Every Apple iOS app must supply a launch screen.

Launch Screen First Screen
Screen_Shot_2017-03-13_at_9.36.34_PM.png Screen_Shot_2017-03-13_at_9.36.26_PM.png
  • Image Requirements: 1125 x 2000px, JPEG or PNG

For more best practices, visit the iOS Interface Design Guidelines.

Playlist Images

Each of your playlists has a thumbnail associated with it in the Zype platform. These thumbnails will appear as background images in your iOS app (see image below). These are designated within the playlist thumbnail view and can be edited following guidelines HERE.

Note: Please don’t include titles of the playlists or right-hand side arrows within your images as these elements will automatically populate on top of your images within your app.

Screen_Shot_2017-03-13_at_9.39.29_PM.png

If you would like to have specific playlist thumbnails in your iOS app that are independent of other playlist images you might have for additional endpoints (ex. Roku), you may achieve this using the Related Images section of the playlist thumbnail view.

We recommend you upload an image with a 3:1 aspect ratio. Keep in mind, the larger the pixel size of the thumbnail, the slower the load time. So we suggest approximately 1242px x 414px in dimension while maintaining a 3:1 aspect ratio. Once uploaded, title your custom image "mobile" to ensure that this playlist thumbnail appears on your iOS app only.

Related_Images.png

Optional Image Assets

Background Image for Sign In Screen (Optional)

If you’ve opted to monetize through Universal Subscription, your users will have to sign into your app to gain access to the content they’ve subscribed to on your website. You are able to brand this page separately from the rest of your app with a background image.

We recommend keeping all significant imagery toward the top half of the Sign In Screen page as anything that extends may get cut off by the email and password fields. We also recommend adding your logo to the top half of the page to remind your users what they're signing into. 

  • Size: 1125 x 2000px
  • Suggested Safe Zone: 850px from the top of the image
Wireframe of Sign In Screen Example Sign In Screen
Screen_Shot_2017-03-13_at_9.45.33_PM.png Screen_Shot_2017-03-13_at_9.45.46_PM.png

Custom Video Thumbnails

Thumbnails for your videos are automatically generated during Zype's transcoding process. You can keep these auto-generated thumbnails or upload your own for each of your videos through the Zype platform. We recommend uploading custom thumbnails as it gives your app a polished look.

Auto-generated Thumbnail

Custom Thumbnail

Screen_Shot_2017-03-13_at_9.51.29_PM.png

Screen_Shot_2017-03-13_at_9.51.41_PM.png

  • Standard 16:9 ratio (minimum size: 250 x 141px)
  • Movie Poster Size (minimum size: 215 x 305px)

Note - You only need to add custom thumbnails once. If you’ve already added them for another app, you don’t need to add them again.

Branding

Dark or Light Theme

Please choose between our standard dark theme (dark background with light text on top) OR our light theme (white background with dark text on top).

Screen_Shot_2017-03-13_at_9.28.34_PM.png

Example of Dark Background

  • Image Requirements: 1125 x 2000px

Alternatively, you could create your own background image to be used throughout the app. Please make sure that the background is dark enough that light text is legible on top of it or light enough so that dark text is legible on top of it.

Brand Color

Please choose a brand color (hex #) that will be used sparingly throughout your app. You can expect to see this color as button states throughout the screens.

Screen_Shot_2017-03-13_at_9.32.15_PM.png 

Example: Blue brand color selected and showing on the “Back” and “Home” button.

   

Asset Checklist

Name

Size

Required?

Channel Store Icon

1024 x 1024px (no transparency, no rounded corners)

Yes

Dark or Light Theme (or Background Image)

Choose between a dark or light theme OR a background image (that’s either very dark or very light) sized: 1125 x 2000p

Yes

Brand Color Choose a hex # Yes

Launch Screen Image

1125 x 2000px

Yes

Background Image for the Sign in Screen:

1125 x 2000px

No

 

 

Comments

Please sign in to leave a comment.