Submit a request

Articles in this section

See more

Mobile.Next Asset Guide

Follow

✅ Asset quick checklist

  • Colors- attach brand guide or list all #HEX color values.
  • Brand font (optional) - For an open source font, provide the link. If proprietary font, provide the font files and proof of mobile app license.
  • App icon foreground (vector) - .SVG .AI or .EPS
  • App icon background (vector) -.SVG .AI or .EPS or, if the background is a solid color, provide the #HEX color value.
  • Nav bar logo -or 850 x 200 px .SVG or .PNG with a transparent background.
    - If necessary, provide two different files for light and dark modes.
  • Custom tab icon (optional) - single-color icon in .SVG .AI or .EPS
    - or indicate in the comments that a standard icon is fine.
  • Onboarding intro slides (4) - four 1080 x 1080 px .PNGs with corresponding copy.
    - If necessary, provide alternate graphics for light and dark modes.
  • Launch screen background - 1440 x 2560 px .JPEG or .PNG
  • Launch screen brand logo - 1080 x 1080 px .PNG with a transparent background
  • Launch screen sponsor logo (optional) - any aspect ratio .PNG with a transparent background, at least 600 px on the longest side.
  • FanCam intro slide - 1080 x 1080 px .JPEG or .PNG
    - or indicate that FTS can create this with a stock image and your logo.
  • FanCam overlay placeholder - 1080 x 1080 px .PNG with a transparent background
    - or indicate that FTS can create a simple one for you with your logo.
  • Event placeholder - 960 x 540 px .JPEG or .PNG
  • Profile background - 960 x 540 px .JPEG or .PNG
  • Venue image (if applicable) - 1282 x 818 px .JPEG or .PNG
  • Sign-in reminder - 895 x 1000 px .JPEG or .PNG along with the copy for the headline, body, and call-to-action button.
  • Google Play store image - 1024 x 500 px .JPEG or .PNG
  • App store screenshots - iPhone set (3-8 images) - 1242 x 2688 px .JPEGs; Android set (3-8 images)- 1242 x 2208 px .JPEGs

👉 See categories below for descriptions, screenshots, and instructions for each asset

Colors

Attach your brand guide if possible, or list all of your brand colors as web HEX values, i.e., #FF6600. The FanThreeSixty Design Team will use your brand’s colors to create color palettes for light and dark modes and ensure the applications meet WCAG 2.2 AA 4.5:1 color contrast requirements.

Brand font

Brand fonts can be used as widget headers.

Open source fonts: provide the name and link to the font-family.

Proprietary fonts: provide your font files as well as a copy of the license indicating it is permitted to be embedded in the mobile app.

Important! Proprietary fonts require a mobile app-specific license to be embedded. This is a separate purchase from a web license.

brandfont.png

App icon

The icon that launches the app.

Provide two separate files:
Foreground: your brand icon with a transparent background in .SVG, .AI or .EPS format.
Background: if a solid color, provide the HEX value. Or, attach the 1:1 file in in .SVG, .AI or .EPS format.

Important! Please ensure your .EPS or .AI files use vector art and not raster images. This is an Android requirement for the app icon file.

Nav bar logo

This logo displays on one of your main tabs (typically the Home tab), as well as when visiting external links through the app.

Provide an .SVG or 850 x 200 px .PNG with a transparent background. Consider if your logo will work with light and dark mode background colors. If not, provide two files- one for each mode.

BEST PRACTICE: use a short, wide logo for readability.

appheaderexample.png

Custom tab icon (optional)

A graphic for a tab icon.

Please provide a single-color graphic- black or gray works well. Must be a vector file- .SVG, .EPS, or .AI.

BEST PRACTICE: Use a simple icon as it is rendered very small, and too much detail can get lost. 

Onboarding intro slides

The intro slides are displayed the first time a user logs in after downloading the app. 

Provide four .pngs at 1080 x 1080 px. Include the corresponding copy in the comments section in Coordinate. The fifth slide will display your brand logo. If necessary, provide alternate graphics for both light and dark backgrounds.

BEST PRACTICE: Ensure the background is transparent. Consider images that will work on both a light and dark background.

Onboarding.pngonboarding slides.png

Launch screen

The launch screen appears while the app loads. It contains four separate pieces: your brand’s logo, a background image, the FanThreeSixty logo, and an optional sponsored logo.

Provide the following files:

  • Launch screen background image - a .PNG or .JPEG at 1440 x 2560 px. Consider that the image will be a backdrop and cropped for different device sizes, so it is recommended to have no borders or typography, as alignment cannot be guaranteed.

  • Launch screen brand logo - a 1080 x 1080 px .PNG with a transparent background.

  • Launch screen sponsor logo (optional) - a 600 x 600 px .PNG. The logo can be any aspect ratio, but be large enough to fit into the 600 x 600 frame.

Important! The background image will inevitably be cropped on different device screen sizes, so please make sure no logos, borders, or typography are included. Recommended: colors, patterns, or blurred images that contrast with the overlaying logos.

launchmockup.png

Optional: use this template to design.

BEST PRACTICE: Keep it simple-- don’t let your background distract from your logo.

Fan Cam

The Fan Cam widget allows users to take a selfie with a branded overlay. There are two files needed to get started.

Fan Cam Intro Slide: The intro slide is displayed in a slider modal the first time a user opens the Fan Cam, and potentially after an app or terms update. 

Provide a 1080 x 1080 px .JPEG or .PNG
- or - indicate that FTS can create one for you using a stock image and your logo.

Intro-slide.png

Fan Cam Overlay: One overlay is needed to activate this widget.

Provide a 1080 x 1080 px .PNG with a transparent background
- or - indicate that FTS can create a simple one for you with your logo.

Overlay.png

NOTE: Once the app is live, you can manage the overlays with Sony CI. Your client success rep will show you how.

Event placeholder image

This image displays for upcoming feature events or news stories that weren’t designated an image, or will display if there is low internet connectivity.

Provide a 960 x 540 px .PNG or .JPG.

Profile background image

Decorative image backdrop behind the avatar image on the profile page, with a darker overlay.

Provide a 960 x 540 px .JPEG or .PNG

profile image.png

Venue image (if applicable)

Image for the venue widget.

Please return a .PNG or .JPG of your venue at 1242 x 828 px.

venue.png

Sign in reminder

This widget can be placed on pages to display for unregistered users in lieu of app content, thus encouraging users to create account in order to access the content.

Attach an image larger than 800 x 800 px .JPEG or .PNG along with the copy for the headline, body, and call-to-action button. Example pictured is 895 x 1000 px.

BEST PRACTICE: Use a taller image as they take up more real estate in the viewport.

Google Play store image

The featured image displayed in Google Play.

Provide a 1024 x 500 px PNG or JPEG.

google play store.png

App store screenshots

This part cannot be completed until the app is ready to launch, as the app screenshots must resemble the final product.

You have two options for the Apple and the Google Play app store submissions:

  1. A FanThreeSixty designer will create them (most common). Optional: provide us with copy, your brand font file, and/or a background image.

  2. Create your own

    • You’ll need to make two sets of images (must be .JPEGs). You can have 3-8 images, but we recommend 4.

      • iPhone: 1242 x 2688 px (must include app screenshots from an iPhone)

      • Android: 1242 x 2208 px (must include app screenshots from an Android device)

app store android.pngapp store ios.pngApp store example.png

Related articles