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 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 Resolution for 3G & 3GS display 320X480 / 163PPI iPad Resolution for iPad 1/2 display iPhone 1024X768/132PPI 1/2 New Resolution for Resolution for New 640X960 / 326PPI 2048X1536/264PPI retina display iPad display WHEN YOU START DESIGNING ELEMENTS REMEMBER THE FOLLOWING Sizes of design elements, that will be cut out As Apple recom- mends, all control 44X44 buttons have to be 44x44 or bigger. 280X340 separately, need to be even, i.e. 280x340, not 281X343 281x343. It usu- ally applies to control buttons. For all text ele- If you make flexible table VERY LONG TIT ments, remem- ber that those will be dynamic within the app. VERY rows, they need to be LONG re-sizable/ stretchable. You don't want all the names to TITLE be 'Lorem ipsum'. ABLE NOTE - if an element has a disabled mode, it needs to have DISABLE a design for that as well. ICON Ultimate size of the app icon is 512x512. No round-corners, 512X5 12 perfect square. 1024x1024 is recommended for retina display. 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 Think screens and functions first, not who made this overall picture - that is how user sees it. device desirable. If you want to be inventive - imag- ine the design on the phone Test your design - just put it in the phone as a screen shot to get the look and screen rather than a static feel. Ask those not involved to computer (it always helps!) comment on it - they might be your first users! • SHIP When the design is done - ship it to de- veloper in a easy to use after way. 000 Files to developers need to be provided in PSD. BUTTON BACKGROUND Keep every element in separate layers and name them accord- ingly (not Picture 1, Picture 2 - you'll save tones of emails). PSD Remember, developers BUTTON do not have hardcore Photoshop skills, so do Even buttons - make rasterize all PHOTOSHOP it easy to cut them out. the masks. THE END With this guide become BFF Print this and Save this and always have it on your always send it out to designers you desk. work with. DESIGNER DEVELOPER lemon labs Shipped by lemonlabs.lt @lemonlabs_