• Save
Design Elements in the Instant Encore Mobile Suite
Upcoming SlideShare
Loading in...5

Design Elements in the Instant Encore Mobile Suite



Updated in March 2013. This slide presentation discusses all of the graphic and image-based elements needed when you create your mobile app with InstantEncore's mobile suite.

Updated in March 2013. This slide presentation discusses all of the graphic and image-based elements needed when you create your mobile app with InstantEncore's mobile suite.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design Elements in the Instant Encore Mobile Suite Design Elements in the Instant Encore Mobile Suite Presentation Transcript

  • Design Elements in theInstantEncore Mobile Suite Updated on March 5, 2013
  • Design Notes on the Mobile Suite • The InstantEncore mobile suite uses set templates for its mobile apps and websites. • There are particular areas within the mobile suite where you may customize the look and feel. • When possible, use PNG image files. They will load faster on mobile devices. • Branding Your Mobile App with Graphics – from the InstantEncore blog
  • App Store and Device IconsIn the Mobile>>App Settings area of the controlpanel under Permanent Settings, you will need toupload a 1024px X 1024px icon for your mobileapp. This is the icon that will appear in Apple’s appstore and Android’s marketplace.Do not round the corners for your image. The appstore will do that for you.InstantEncore will automatically resize this imageto 75px X 75px. The resulting icon is the imagethat will appear on the end user’s mobile device.It is important to bear this in mind when designingthe original app store image, particularly if youplan to include text.
  • Splash Screen or Loading ScreenA customized welcome screen displayed as the Apple or Android app loads. This is a simpleimage upload in the Mobile>>App Settings area of the control panel. The image is 1800pxX 2800px, which works great for tablet computers and will auto-scale to fit smartphones.Tips for Your Mobile App’s Splash Screen – from InstantEncore’s blog5 Awesome Mobile App Splash Screens (and Why) – from InstantEncore on Slideshare
  • Icons What’s New SlideshowHome Screen OptionsAfter the app loads, the user is presented with the home screen. There are threestandard options for the home screen.
  • IconsYou have icons associatedwith each tab listed in theMobile>>Tabs area of thecontrol panel.You may select one of theicons from our library by Iconsgoing to the Manage linkfor the desired tab.You may also upload yourown custom icons in thesame area of the controlpanel. These imagesshould be 60px X 60px.
  • The Highlight ColorThe Highlight Color may Highlight Colorbe selected using ourcolor palette or byentering the hex code forthe desired color in theMobile>>Style area ofthe control panel.
  • The Background ImageThe Background Image isuploaded in theMobile>>Style area of thecontrol panel.The recommended image Background Imagesize is 640px X 960px.Smaller images (e.g. 320px X Tips for Customizing480px) will load more Your Mobile App’squickly, but may not look as Background Image –sharp on higher resolution from the InstantEncoredevices. Larger images (e.g. blog1240px X 1920px) will looksharper on tablet devices, 9 Great Examples ofbut will take longer to load Custom Backgroundinitially. Images for Mobile Apps – fromWhen designing your InstantEncore onbackground image, Slideshareremember that white textwill appear over it.
  • What’s New ImageThe What’s New Image isassociated with thewelcome message area atthe top of the What’s Newhome screen. It is a simpleimage upload in the Home Tab ImageMobile>>Tabs>>What’sNew area of the controlpanel. The other images on the What’s New tabThe recommended size is are pulled from1024px X 1024px. various areas of the control panel and willThe image will be discussed later.automatically be scaledand cropped to theappropriate size.
  • Slideshow ImagesEach slide associated withthe Slideshow homescreen option has its ownimage. It is a simple imageuploaded in theMobile>>Tabs>>Featured Slideshow Imagearea of the control panel.• Upload an image large enough for tablet-sized devices (approx 1024 px X 768px)• Keep the main content of the image near the center as the edges may be cropped depending on the viewing device’s dimensions
  • Events List Event Details Event Images The image associated with an event in the Events List and the Event Details tabs comes from one of two places: 1. For standard InstantEncore apps, this 1024px X 1024px image is uploaded in the Events area of the control panel when the individual event is created. 2. For Tessitura-integrated apps, this image is pulled from the Small Image URL content field in the Mobile>>Tessitura>>Settings area of the control panel. The values on the Tessitura side actually point to external URLs where the images reside.
  • Music ImagesIn the Music area of the controlpanel, you may upload audiotracks to stream through yourmobile app. Audio tracks aregrouped together in albums, andeach album has an imageassociated with it.This image is a simple 1024px X1024px upload, which isautomatically scaled asappropriate.
  • Buzz ImagesThe Buzz area of the control panelsynchronizes with content feeds fromyour blog, podcast, news sources, andsocial media accounts.When you add an RSS or ATOM feed tothe Buzz area, you may upload a customimage to associate with the feed bygoing to Edit Image. Whenever contentfrom that feed appears in the Buzz tab(or on the What’s New screen,) it willhave this image associated with it.The custom image for the feed shouldbe 1024px X 1024px, which will scale asappropriate.
  • Group Member Bios The Artists tab allows you to create and group bios for individuals involved in work. To begin, go to Mobile>>Tabs and select Manage next to the Artists tab listing. You may choose an icon from our library to represent the group, or you may upload a 72px X 72px image. This could be a performance image, the poster image for a play (see left), etc. Once you create the group, you will begin adding bios and an image for each artist in the group. This image is 1024px X 1024px. This image will appear in the list of group members and on the individual’s profile.
  • Custom TabsYou have the ability to create your own tabsfor your mobile app in the Mobile>>Tabs areaof the control panel. At the bottom of thepage is an area labeled Add a Custom Tab.You may add a custom tab by connecting to anexternal URL (preferably, a mobile-optimizedone) or by using our HTML editor.The HTML editor has both a Design view andan HTML view. Using this editor, you maycreate tabs with tables, inserted images,ordered lists, scripts from third party sites,and more.There is a margin on the right and left, soeither keep images to no more than 275pxwide or set the image’s width as a percentageof the screen’s width.
  • Custom TabsFor example, the following HTML will makesure the image always fits 100% of the widthof its container.<img src="http://website.com/image.png"style=width: 100%"/>The percentage could be adjusted based onhow you would like to see the image displayedin relation to the surrounding text.If you have any questions about the useof graphics and images within theInstantEncore mobile suite, please emailsupport@instantencore.com.