iOS Design Workflow

Posted October 29, 2012

Before

Design at @2x. Export everything, then scale using Resizer or Prepo. Problem is …

• Design kinda looks different.
• Everything need to be even from margin to export size.
• Effects and strokes need to be double to appear sharp.
• Resizing @2x images after export sometime looks pixelated.

Now

Design for @1x. Scale 200% using Bjango actions, export it using Cut and Slice, then back to 100% again. This allows me to …

• Get around the even problem.
• Have the same pixels grid as on iphone.
• Build everything to be scalable even textures.
• The file size is a lot smaller and performance is a lot snappier when working on a big UI sheet.

Workflow

1. Find inspiration, collect it, and stick with it till you finish the design.
2. Always sketch first, draw simple architecture for the app. Throw as much ideas as you can, I go with 5 alternatives for everything.
3. Create a document at 1x scale of iPhone 5 (320x568)
4. Vector is your friends all the time.
5. Smart Object are not efficient in working with scalable document, as you will need to scale the smart object as you scale the main document.
6. Don’t use slices for export, use Cut & Slice. It will force you to organize your layers and export everything for you in @1x and @2x scale.
7. Export as soon as you can. And make sure everything is pixel perfect.
8. For the icon, work on 512 then scale using Bjango actions to support iPhone, iPad, iTunes sizes.

Folder Organization

• project_name/_assets/ Contains exported png’s @1x @2x. Never put your images in sub-folders — having @1x and @2x folder is the exception.
• project_name/_ui_sheet.psd Contains the main elements for the application for exporting
• project_name/screen_name.psd Contains a specific screen design to illustrate how the UI works, much like a mockup. Not used for exporting

Naming Convention

• parent-child: always name the images in a parent child structure, ex: nav-bkg.png, nav-home-btn.png
• -btn-: for buttons, ex: action-btn.png, action-btn-pressed.png, action-btn-active.png
• tabbar-: for tabbar images, ex: tabbar-home.png
• -bkg: for background images, ex: home-bkg.png
• @2x: for all retina display graphics, ex: home@2x.png

Remember, if your exported elements aren’t grouped by naming, your doing it wrong. Every object with its relative images should be couple of clicks away.

Tools

• Cut & Slice — PS extension for exporting iOS and Android design.
• Bjango Actions — Set of PS actions to automate repetitive tasks.
• Skala — App that allows me preview the design live from PS to iPhone directly without even hitting save

First version always sucks, learn from your mistakes, fix the current version instead of rebuilding it.

Have something to say? Lets discuss it on Twitter, I’m @seifsallam.
I’d love to hear your thoughts.

Originally published at seifsallam.com.