Half a million members creating, sharing and exploring great visual content. Join us!

Header

Transcript

iOS App Designer Guide to Developer Love

IOS APP DESIGNER GUIDE TO COOL DESIGN & DEVELOPER LOVE



DEVELOPERS ARE NOT PHOTOSHOP GURUS &

DESIGNERS HATE TO REMAKE THEIR WORK SO

THIS IS A GUIDE FOR DESIGNERS TO MAKE GREAT

IOS APP DESIGNS AND SHIP CORRECT FILES TO

THE DEVELOPER.



SIZES

SELECT SCREEN SIZE



iPhone 3 4 1/2 New iPad



Resolution for retina display

640X960 / 326PPI



Resolution for 3G & 3GS display

320X480 / 163PPI



Resolution for iPad 1/2 display

1024X768/132PPI



Resolution for New Ipad display

2048X1536/264PPI



WHEN YOU START DESIGNING ELEMENTS REMEMBER THE FOLLOWING



44X44

As Apple recommends, all control buttons have to be 44X44 or bigger.



280X340

281X343

Sizes of design elements, that will be cut out separately, need to be even, i.e. 280X340, not 281x343. It usually applies to control buttons.



If you make flexible table rows, they need to be re-sizable/stretchable.



VERY LONG TITLE

For all text elements, remember that those will be dynamic within the app.



You don't want all the names to be 'Lorem ipsum'.



ABLE

DISABLE

NOTE- if an element has a disabled mode, it needs to have a design for that as well.



ICON



512X512

Ultimate size of the app icon is 512x512.



1024x1024 is recommended for retina display.



No round-corners perfect square.



Icon is what user sees first - make it relevant and stylish.



Be attentive - if you hit the top on the AppStore, your icon has to look good and be recognisable in varioys dimensions. Check Apple's recommended sizes and design every placement separately (don't make the developer to simply resize it).



NOTE:app icon should reflect the core function of the app at a glance.



TIPS

When you start designing think clear and simple, use tricks of those who made this device desirable.



Think screens and functions first, not overall picture - that is how user sees it.



If you want to be inventive- imagine the design on the phone screen rather than a static computer (it always helps!)



Test your design- just put it in the phone as a screen shot to get the look and feel. Ask those not involved to comment on it they might be your first users!



SHIP

When the design is done-ship it to developer in a easy to use after way.



PSD

Files to developers need to be provided in PSD.



BUTTON

BACKGROUND



Keep every element in separate layers and name them accordingly (not Picture 1, Picture 2 you'll save tones of emails).



PHOTOSHOP

Remember developers do not have hardcore Photoshop skills, so do rasterize all the masks.



BUTTON

Even buttons-make it easy to cut them out.



THE END



With this guide become

BFF



DESIGNER

Print this and always have it on your desk.



DEVELOPER

Save this and always send it out to designers you work with.



lemon labs

Shipped by lemonlabs.It

@lemonlabs_

iOS App Designer Guide to Developer Love

shared by LemonLabs on Apr 25, 2012 in Technology

8K views

13 faves

7 comments

Developers are not photoshop gurus & designers hate to remake their own work so we made a guide for designers to make great iOS app designs and ship correct files to the developer.
Source: Unknown. Add a source
Rank: 81 of 6362 in Technology

Published by
Lemon Labs

Designed By

Unknown (Claim it!)

Embed Code

Switch to Wordpress Code
Click below to copy
Customize size

Tell your story visually before December 31st and get a free iPad Air!*

The holidays are a great time to tell your brand story. From Black Friday trends and Mobile Shopping guides to the Best and Worst Times to Book Travel and Thanksgiving etiquette, the Visually team will help you craft your brand's unique stories and raise your social profile during the noisy holiday season.


*Requires $10k minimum purchase
Infographic
Video
Interactive
Presentation

60 characters minimum (0)

X
Credits
Publisher
Designer
Developer
Animator
Journalist
+ Add More Credits
Make Private

This is the final step