This guide is to be used alongside your Coordinate project, specifically for Creative Asset Specifications. It is designed to help you get an idea of how the assets will look in the app, so that any revisions after testing are minimal.
✅ Asset checklist
You may return all the files as a .zip in the Asset Upload section to save time. However, if you have any questions, comments, or revisions regarding a particular asset, please post them in the respective section. Here’s a checklist to ensure you have everything:
- Colors - comment in Coordinate with your web HEX values; specify primary color
- App icon - return our .psd with your designs
- App icon (vector) - attach your icon in .ai or .eps format
- App header - return our .psd template with your designs
- Placeholder image - attach .jpg or .png at 960 x 540 px
- Additional photography - attch 2-4 images, jpgs or pngs
- Intro slides (4) return .psd templates or four .png images at 1080 x 1080 px; comment in Coordinate with corresponding copy
- Custom tab icon - attach your single-color icon in .svg, .eps, or .ai format, or indicate in the comments that an FTS designer can create one for you.
- Venue image (if applicable) attach a .jpg or .png at 1282 x 818 px
👉 See categories below for definitions, screenshots, and instructions for each asset
🎨 Colors
Primary: The main color in the app
Secondary: used as an accent or alternative color where appropriate
Provide your brand colors as web HEX values, and indicate which is your primary color.
For example, Primary: #FF6600; Other colors: #496600, #EEF556
Optional: attach your brand guide.
Important! Make sure your primary color passes accessibility contrast standards with white. You can compare the HEX value with #ffffff (white) on the WebAim site.
App icon
The icon that launches the app.
Foreground: your brand icon, with a transparent background.
Background: a solid color or simple gradient.
We’ll need two file types for the app icon to accommodate iOS and Android:
A layered .psd file, using this template.
The app icon in .eps OR .ai format.
Important! Please make sure your .eps or .ai files use vector-based art and not raster images. This is an Android requirement for the app icon file.
App header (iOS only)
The static, colored bar at the top of the app.
Android devices automatically program your primary color to be the app header color paired with white text- so no images, logo or effects- so keep that in mind as you design your iOS app header.
Foreground: you may add a branded logo image, which will display on one of your main tabs (typically the Home tab), as well as when visiting a page that is linked to outside content, such as a button within the app that is linked to a website. The rest of the pages will be labelled by name.
BEST PRACTICE use a short, wide foreground logo for readability.
Background: the app header background color should be your brand’s primary color, but you may add a gradient, pattern, or glow effect.
BEST PRACTICE keep the iOS app header your primary color for the sake of continuity with Android devices, and keep any additional effects on the subtle side.
Use this template and return as a layered .psd file.
Launch screen
The launch screen appears while the app loads. It contains your brand logo, a background image, the FanThreeSixty logo, and an optional sponsored logo.
Important! The background image will inevitably be cropped on different device screen sizes. The background and foreground graphics must be in different layers in the .psd file- otherwise your logo could be stretched, skewed, or not centered properly on unusual device sizes.
BEST PRACTICE Keep it simple! Don’t let your background distract from your logo and don’t include any words in the background.
Use this template and return as a layered .psd file.
Onboarding intro slides
The four intro slides are displayed the first time a user logs in after downloading the app.
In the foreground an image is accompanied by text. The background is automatically your brand’s primary color. Here you’ll provide the foreground images.
Use these Onboarding-slide templates to see how the foreground image works with the background color. Please return as a layered .psd file, or simply attach the square (1080 x 1080 px) foreground image as .pngs. Include the corresponding copy in the comments section in Coordinate.
Event placeholder photo
This will display for upcoming feature events or news stories that weren’t designated an image, or if there is low connectivity. Recommended subjects: a photo of team in action, team flag, venue, etc.
Please attach a .png or .jpg image with dimensions of 960 x 540 px.
Additional photography
We’ll use these as background images (often edited to be blurred or monochromatic) in a few places in the app, such as:
Behind a user’s profile photo
Sign-in reminder banners
Download page
App store screenshots
Recommended subjects: candid fan photos, team in action, team flag, venue, etc.
Please attach 2-4 .png or .jpg images.
Optional: Custom tab icon
A graphic used for the tab icon.
An FTS designer can create a simple one for you, or you can provide a single-color graphic. Black or gray works fine, as FTS will program it to convert to your primary color when the tab is selected.
BEST PRACTICE use a simple icon as the image is very small, and too much detail can get lost.
Please return an .eps, .ai, or .svg no smaller than 500 x 500 px, or verify with a comment in Coordinate that FTS can create one for you.
Venue image (if applicable)
This image is used with the venue widget.
Please return a .png or .jpg of your venue at 621 x 414 px
App store image with screenshots
Note: This part cannot be completed until the app is ready to launch, as the app screenshots must resemble the final product.
You have a few options for the Apple and the Google Play app store submissions:
Most Common: a FanThreeSixty designer will create them (see examples attached)
-
Have some creative control by providing any or all of:
A high-res photo of an athlete/player (see LSU example)
A file of your brand’s font
Copy for each screen
A background image
-
Create your own
-
You’ll need to make three sets of four images (must be .jpg)
iPhone 5.5: 1242x2208 px (must include app screenshots from an iPhone)
iPhone 6.5: 1242x2688 px (must include app screenshots from an iPhone)
Android: 1242x2208 px (must include app screenshots from an Android device)
-