Lanyon Mobile ios Artwork Specification for iphone, itouch & ipad

Transcription

1 Lanyon Mobile ios Artwork Specification for iphone, itouch & ipad

2 What s new... 2 Purpose... 2 File Formats... 2 App Icon... 3 App Icon Recommendations... 4 App Icon Requirements... 4 App Icon Sizes... 4 Default News Thumbnail... 4 App Icons on Multi-Event Apps... 5 Loading Screen... 6 Loading Screen Recommendations... 6 Loading Screen Requirements... 7 Loading Screen Sizes... 7 Loading Screens on Multi-Event Apps... 7 Home Screen... 8 Choosing the Right Style... 8 Home Screen Style Elements... 9 Home Screen Sizes and Recommendations Home Screen Background (Optional) Home Screen Background Upper Home Screen Background Lower Promotional Banner Article Images Home Screens on Multi-Event Apps Lanyon Mobile Migration Plan 1

3 What s new Master image size per artwork asset has been added where relevant when user wishes to benefit from the automatic generation of assets. Sizes for Home Screen Background (optional) and Home Screen Background (lower) have been updated with two options: Size without a banner and Size with a banner. Image sizes for iphone 6 and iphone 6+ have also been added where relevant. Purpose This document provides the full range of artwork options and requirements for Lanyon Mobile apps on ios devices. File Formats All ios artwork should be supplied as 24-bit PNG files. All sizes provided are in pixels. We recommend creating a master Photoshop file for each artwork asset. This will be used for: o Creating the various ios assets at the required sizes o Creating artwork for other mobile platforms * Note that there will be a new size added per artwork type called Master or Master Portrait or Master Landscape. This spec should be considered when a user wishes to benefit from the feature Artwork Efficiencies One Asset rules them all. Only one master image per artwork asset needs to be uploaded (size corresponds to Master spec in pixels) and the system will automatically generate all required sizes for all platforms (ios, Android and Windows). Lanyon Mobile Migration Plan 2

4 App Icon The app icon appears on the users handset they tap it to launch the app. Lanyon Mobile Migration Plan 3

5 App Icon Recommendations Ordinarily the icon is the event or organization logo Avoid text where possible as it will be hard to read on the phone App Icon Requirements The icon should be produced as a flat square (as illustrated above) - The round corners and gloss effect are applied by Apple upon submission to the App Store for approval The app icon is required for submission to the App Store - Following submission, any changes to the app icon require a resubmission (and re-approval by Apple) The text underneath the icon is controlled separately and should not form part of the icon imagery App Icon Sizes App Store & all relevant sizes 1024 x 1024 pixels Master* 1024 x 1024 pixels Note: Specifically for the App Icon artwork, the 1024x1024 icon needs to be added to the iphone slot in the CMS. When (and if) uploading a Master* file, all the required sizes for the ios platform will be auto-generated except the iphone slot, which will appear empty - thus the need for adding it manually. Default News Thumbnail The app icon is normally used as the default news thumbnail icon. Therefore it is also required in the following sizes: Master* 200 x 200 pixels iphone x 150 pixels iphone x 100 pixels iphone 4/5 100 x 100 pixels ipad Retina not required uses the iphone 4/5 asset ipad not required uses the iphone 3 asset Lanyon Mobile Migration Plan 4

6 App Icons on Multi-Event Apps The app icon displayed on the home screen of the users phone is the icon of the parent (container) app Child apps (those within the container) can have different app icons, but only the iphone 4 size is required Lanyon Mobile Migration Plan 5

7 Loading Screen The loading screen is a simple placeholder image that displays when the app opens. It s solely intended to enhance the user s perception of your app, quick to launch and immediately ready for use. Loading Screen Recommendations Design a launch image that is identical to the first/home screen of the app, apart from: Text. The launch image is static, so any text you display in it won t be localized. UI elements that might change. If you include elements that might look different when the app finishes launching, users can experience an unpleasant flash between the launch image and the first app screen. Lanyon Mobile Migration Plan 6

8 Loading Screen Requirements The loading screen is not an opportunity to provide the following: An app entry experience, such as a splash screen An About window Branding elements, unless they are a static part of your app s first screen Because users are likely to switch among apps frequently, you should design a launch image that downplays the experience rather than drawing attention to it. Loading Screen Sizes Master Portrait* 1280 x 2208 pixels Master Landscape* 2732 x 2048 pixels ipad Landscape (Retina) 2048 x 1536 pixels ipad Landscape 1024 x 768 pixels ipad Portrait (Retina) 1536 x 2048 pixels ipad Portrait 768 x 1024 pixels iphone x 2208 pixels iphone x 1332 pixels iphone x 1136 pixels iphone x 960 pixels Loading Screens on Multi-Event Apps Only the parent (container) app has a loading screen therefore: Branding is ordinarily generic to represent the organisation or series of events Text is ordinarily generic to represent the organisation or series of events Lanyon Mobile Migration Plan 7

9 Home Screen Once an app has loaded, the home screen displays. There are 4 styles of home screen. From the left these are: News Style Grid + Message Grid Split Grid Blended Choosing the Right Style The News style is most frequently used for association/member apps or outside of the event period The Message style is best for when organiser or networking message prominence is important The Split and Blended styles give more prominence to the event name/branding Lanyon Mobile Migration Plan 8

10 Home Screen Style Elements The elements used for each style are listed below. The size information for each element is provided later in the document. News Style Artwork Elements Navigation Bar logo Article images Promotional banner (doesn t appear on the home screen, but can do elsewhere in the app) Grid + Message Artwork Elements Navigation bar logo Home screen background (optional) Promotional banner Grid Split Artwork Elements Home screen background upper Home screen background lower Promotional banner Grid Blended Artwork Elements Home screen background upper Home screen background lower Promotional banner Lanyon Mobile Migration Plan 9

11 Home Screen Sizes and Recommendations Navigation Bar Logo Recommendations/Requirements Ordinarily this is the event logo or wording in the event style/typeface The background colour cannot be white (or pale) The image should be provided on a transparent background (indicated by the checkered background above) There should be sufficient room for buttons to appear either side of the image Sizes iphone x 132 pixels iphone x 88 pixels iphone 4/5 640 x 88 pixels ipad Retina not required uses the middle 600 pixels from the iphone 4/5 asset ipad not required uses the middle 300 pixels from the iphone 3 asset (iphone 3 asset: 320 x 44 pixels) Lanyon Mobile Migration Plan 10

12 Home Screen Background (Optional) Recommendations/Requirements Repeating textured backgrounds work best Use a very pale (watermark) background with dark coloured home screen icons Use a very dark background with light coloured home screen icons Try to avoid logos and text as the home screen icons and labels normally clash affecting legibility of both Sizes Master* (no banner) 1280 x 2016 pixels Master* (with banner) 1280 x 1902 pixels iphone 6+ (no banner) 1242 x 2016 pixels iphone 6+ (with banner) 1242 x 1845 pixels iphone 6 (no banner) 750 x 1204 pixels iphone 6 (with banner) 750 x 1101 pixels iphone 5 (no banner) 640 x 1008 pixels iphone 5 (with banner) 640 x 920 pixels Lanyon Mobile Migration Plan 11

13 iphone 4 (no banner) 640 x 832 pixels iphone 4 (with banner) 640 x 744 pixels ipad Retina 1448 x 1408 pixels ipad 724 x 704 pixels Lanyon Mobile Migration Plan 12

14 Home Screen Background Upper Sizes Master* 1280 x 350 pixels iphone x 350 pixels iphone x 211 pixels iphone 5 not required uses the iphone 4 asset iphone x 180 pixels ipad Retina not applicable will need to provide an iphone Nav Bar Logo instead ipad not applicable will need to provide an iphone Nav Bar Logo instead Lanyon Mobile Migration Plan 13

15 Home Screen Background Lower Recommendations/Requirements Repeating textured backgrounds work best Use a very pale (watermark) background with dark coloured home screen icons Use a very dark background with light coloured home screen icons Try to avoid logos and text as the home screen icons and labels normally clash affecting legibility of both Sizes Master* (no banner) 1280 x 1696 pixels Master* (with banner) 1280 x 1572 pixels iphone 6+ (no banner) 1242 x 1696 pixels iphone 6+ (with banner) 1242 x 1525 pixels iphone 6 (no banner) 750 x 1013 pixels iphone 6 (with banner) 750 x 910 pixels iphone 5 (no banner) 640 x 848 pixels iphone 5 (with banner) 640 x 760 pixels Lanyon Mobile Migration Plan 14

16 iphone 4 (no banner) 640 x 672 pixels iphone 4 (with banner) 640 x 584 pixels ipad Retina not applicable on ipad ipad not applicable on ipad Lanyon Mobile Migration Plan 15

17 Promotional Banner Recommendations/Requirements Promotional banners normally have click-thru actions, so a small arrow indicating to tap it is helpful Sizes iphone (App) 640 x 88 pixels ipad 515 x 71 pixels ipad Retina 1030 x 142 pixels Portal 120 x 600 pixels Lanyon Mobile Migration Plan 16

18 Article Images Recommendations/Requirements Be mindful of the overlay (indicated by the arrow) It is normally best to have the main imagery/text appearing toward the top. Sizes All ios 612 x 212 pixels iphone x 418 pixels iphone x 250 pixels iphone 4/5 612 x 212 pixels ipad Retina 1420 x 500 pixels ipad 710 x 250 pixels Home Screens on Multi-Event Apps The parent app and every child app can have their own individually styled home screen Lanyon Mobile Migration Plan 17