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?
In my experience of working with iOS developers, this is normally been my deliverables to them.
An interactive prototype which shows the different interactions between the screens and the interactions in the screens itself
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)
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
- 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.
- Be consistent. All graphic files must be PNGs.
- 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).
- 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.
- 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).