So I am fairly new to UI/UX design (pretty much learning on the go). I am building a native iOS app and need to deliver the designs to the developer. I have built an interactive prototype using Proto.io, but my question is basically where do I design the app and what exactly do I have to give to the developer to code it? I know how to use Photoshop and Illustrator. My gut tells me that I can just design the screens in Illustrator and send the developer an organized library of all of the elements on the screen as png files? And the other question is how do I build the interation part of it in?

  • Welcome to the site, @Kj_Singh! You have a lot of questions here and answering them all could fill several books. Please pick one question per post and describe concretely what you have done to solve it and what you still need to know. – Graham Herrli Feb 1 '14 at 22:51
  • 1
    This is a question only your developer(s) can answer. – DA01 Feb 2 '14 at 2:20
  • @DA01 very bad idea. This will only create confusion and deteriorate your leadership. – Knu Feb 2 '14 at 14:14
  • @Knu UX does not 'lead' development. UX should be working 'along side' of development. That doesn't mean you give into to all of dev's demands, but rather, that you maintain open communication and agree on what the deliverables should be. – DA01 Feb 2 '14 at 16:54
  • I would say a better way to view it is that UX feeds development. In agile terms UX provides stories and supplements (and informs) the backlog. If working correctly developers will have input into the UX process, just as visual design does. – Stewart Dean Feb 12 '14 at 8:40

In my experience of working with iOS developers, this is normally been my deliverables to them.

  1. An interactive prototype which shows the different interactions between the screens and the interactions in the screens itself

  2. Visual assets of all the elements in the screen (e.g Backgrounds,buttons,icons,indicators etc) - Do note if you are designing for Iphone 3s and Above, you will need to provide two sets of assets i.e. one with the retina sizes and one without retina sizes (so x and 2x sizes)

  3. I specify details such as fonts used and the sizing of the fonts

I also recommend looking at this excellent article which talks about how to design for iOS apps. To quote the article about how to deliver content

  1. Organize. Each screen should have it’s own folder with the screen’s name. Each folder should have a screenshot of the whole screen so I will understand how the final result should look like. The rest of the files in this folder are the elements cut into pieces: buttons, cells, borders, whatever, each separately in its own file.
  2. Be consistent. All graphic files must be PNGs.
  3. Understand iOS graphics. Each graphic file must have two versions: an high-res version and a low-res version. The first version will be used for iPhones with retina display (iPhone 4 and later) and the second version for non-retina display devices (older iPhones and iPads).
  4. Name Clearly. The low-res version should have a good descriptive name such as BigBlueButtonNormalState.PNG and the high-res version should have the same name with a @2x suffix: BigBlueButtonNormalState@2x.PNG - The @2x suffix is read by the iPhone and used if retina display is available.
  5. Size correctly. The high-res version must be double the size of the low-res version. If the low-res version is 100x150 pixels then the high-res must be 200x300 pixels. Now I know you create the high-res version first and then downscale it, so just make sure your high-res version is even (width has even number of pixels and so does the height).
  • If your app is using standard iOS interface elements do you still expect all the assets as PNGs and different resolutions? More generally: how is the process different if using standard iOS interface elements? – Drew Beck Feb 11 '14 at 23:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.