TRANSITIONING CREATIVE TO MOBILE DEV

Or “How not to piss off a mobile dev”

Presented by Jim Heising, CEO

START OFF ON THE RIGHT FOOT

•  iPhone Apps: –  640x960 (For Portrait) –  960x640 (For Landscape) –  Will be scaled down to 320x480 and 480x320 for non-iPhone 4 devices

•  iPad Apps: –  1024x1024 –  Always design for both orientations

•  Icons –  512x512 –  Make sure it is readable at 57x57 –  Decide if you want a “glossy” effect to automatically be added to the icon or if you want

it to remain untouched

•  Readability on your desktop screen doesn’t always translate well onto a device! –  Saving screens as images and viewing them in the iPhone photo viewer is a great test

GIVE US A COMPLETE PICTURE

•  Pictures are worth a billion words!

•  Let us know what devices we’re building for

•  What are we trying to accomplish?

•  Story boards, story boards, story boards!

•  Tell us what are “havetoos” and “nicetoos”

THINK IN MULTIPLE DIMENSIONS

•  Let your dev know up front, what orientations you want supported

•  If at all possible, design apps that can be easily adapted to multiple devices and multiple orientations

Designing for the iPad in both aspect ratios

SOME THINGS ARE TOUGH

•  Dynamic and intermixed typography

•  Complex text flow

•  Custom controls

•  3D

•  Complex animations

•  Think in terms of blocks. This isn’t a web browser!

Avoid complex typography and text flow

GIVE US YOUR IMAGES

•  Don’t just give us a .PSD and expect us to cut it up

•  Break all individual UI elements into stand alone transparent .PNGs –  1 set for each device and resolution

•  Clearly and concisely label each image

GIVE US YOUR MARKETING MATERIALS

•  A 512x512 png icon –  This icon will be shrunk down and used as the icon on the device home

screen as well as the icon displayed in iTunes. –  Make sure it looks good when shrunk to 57x57. If it doesn’t then give us a

separate file that does. –  Even though PNG is used, make sure it is not transparent and takes up the

entire 512x512 area. –  Tell us if you want Apple to automatically add a glossy overlay to it or not. –  Don’t add rounded corners. Apple will automatically do this. Make sure it is

still readable with rounded corners.

•  1 to 5 screenshots (for each supported device) –  Can be JPG or PNG –  Make sure they are sized for the devices you are supporting. –  May be either in landscape or portrait aspect ratios.

•  A 4000 max character description •  A 100 max character set of keywords, separated by comma

HANDOFF CHECKLIST

1.  Device IDs of all people who are going to be testing

2.  Complete storyboard

3.  Complete master .PSD files

4.  Individual images for all design elements

5.  Any custom font files

6.  All required marketing materials

APPENDIX

DESIGN ELEMENT IMAGE SPECIFICATIONS

•  Images without a need for alpha (like backgrounds) –  JPG and GIF is preferable to reduce file size

•  Images with a need for alpha –  24bit PNG with transparency

IPHONE 4 SPECIAL CONSIDERATIONS

•  The iPhone 4 has a screen that has 4x the number of pixels as the standard iPhone

•  For all intents and purposes the developer sees the screen size as a standard iPhone at 320x480

•  All text and programmatically drawn UI elements will automatically “rez up”

•  Images designed for screens of 320x480 will render correctly but will be scaled and anti-aliased resulting in a slightly blurry image

•  When the iPhone 4 loads an image, it will first look for an image that is 2x wider and 2x higher that has a suffix of @2x.png. –  For example, if the original iPhone image is named redbutton.png, you can include an

image called redbutton@2x.png that contains the version that will be displayed on the higher res screen.

•  These rules also apply for app icons

BUILT-IN DEVICE FONTS

•  AmericanTypewriter •  AmericanTypewriter-Bold •  AppleGothic •  ArialMT •  Arial-BoldMT •  Arial-BoldItalicMT •  Arial-ItalicMT •  ArialRoundedMTBold •  Courier •  Courier Bold Oblique •  Courier-Oblique •  Courier-Bold •  CourierNewPS-BoldMT •  CourierNewPS-ItalicMT •  CourierNewPS-BoldItalicMT •  CourierNewPSMT •  DBLCDTempBlack •  Georgia-Bold •  Georgia

•  Georgia-BoldItalic •  Georgia-Italic •  Helvetica-Oblique •  Helvetica-BoldOblique •  Helvetica •  Helvetica-Bold •  HelveticaNeue •  HelveticaNeue-Bold •  HiraKakuProN-W6 •  MarkerFelt-Thin •  STHeitiTC-Light •  STHeitiTC-Medium •  STHeitiSC-Medium •  STHeitiSC-Light •  STHeitiK-Medium •  STHeitiK-Light •  STHeitiJ-Medium •  STHeitiJ-Light •  TimesNewRomanPSMT

•  TimesNewRomanPS-BoldMT

•  TimesNewRomanPS-BoldItalicMT

•  TimesNewRomanPS-ItalicMT

•  TrebuchetMS-Italic •  TrebuchetMS •  Trebuchet-BoldItalic •  TrebuchetMS-Bold •  Verdana-Bold •  Verdana-BoldItalic •  Verdana •  Verdana-Italic •  Zapfino

QUESTIONS?