From the SVC workshop, Design for Mobile Devices, this presentation by Jim Heising, CEO of Red Foundry, covers ways mobile app designers can work effectively with developers.
Text of Working with mobile developers
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
• 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
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
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 [email protected] that contains the version that will be displayed on the higher res screen.