Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What is the best way to design an iPhone app? What do I do first.

Is it best to do the following?...

  1. Do a paper wireframe?
  2. Do a digital wireframe (Adobe Illustrator)?
  3. Design the real thing (Adobe Illustrator or Photoshop)?
  4. Split the real thing up into individual images?

Any advice would be appreciated. I am new to iPhone apps but I have been using HTML, JS and CSS for years.

share|improve this question
    
Apple's recommendation: developer.apple.com/library/ios/#documentation/UserExperience/… - as far as the actual UX - I tend to start with rapid paper prototypes, moving to higher levels of sophistication as things get "nailed" down, but the first step(s) can be found in the link; as recommended by Apple. Otherwise, I'm not sure this question is truly suited to the format of StackExchange as it stands. –  Josh Bruce Apr 1 '13 at 15:40
    
Thanks! :) Any reccommendation on choice of software for design of the final buttons, backgrounds, etc.? (Photoshop, Illustrator, etc.) –  Jacques Blom Apr 1 '13 at 15:54
    
Use whatever tool best suits your needs, familiarity, and comfort level. Given the retina and regular displays, as well as the creation of marketing materials and various sizes, I tend to work with vector-based graphics for everything to allow easy resizing/scaling/etc. –  Josh Bruce Apr 1 '13 at 16:29
    
Thanks :) I've tried Sketch for OS X and it works pretty well. –  Jacques Blom Apr 1 '13 at 16:38
add comment

3 Answers

up vote 1 down vote accepted

I have always found, the earlier you start playing with prototypes, the more iterations you get and the better the product.

  1. Start with the background work (market analysis, competition evaluation, target audience, specs sheet, etc.)

  2. Start sketching - low fidelity mockups (paper, balsamiq, what have you)

  3. (and 4) High fidelity mocksup (near pixel perfect layout designs) - Once you have a feel of what your requirements and deliverables will be (even if its a personal project), jump into prototyping. Make simple linked pages to see if the navigation makes sense, see if you have enough real estate to fit all the elements.

  4. Make changes to the existing design, reiterate the mockups and the prototypes till you are finally confident that you have almost everything ready. Then dive into actual application development.

  5. Polishing bugs, last minute changes, etc.

Remember, 'Fail early, fail often.'

share|improve this answer
add comment

There isn't a 'best' method. There are methods that work better for different people and different situations. You need to find what works best for you.

What works best for me (most of the time) is to:

  • Start with rough paper prototypes - meaning a page, and a pencil. Sometimes it works better on a whiteboard if it's with a group. This is where I work out the shape of the pages, and the structure.
  • Move onto interactive wireframes. There are many options here. HotGloo, Photoshop, or Omnigraffle are some examples. The goal here isn't to get into design details, but work out the interaction between elements that may not seem obvious when working with paper prototypes.
  • High fidelity asset creation. This is usually Photoshop, but it can also be in Omnigraffle or any other program that results in exportable assets.
share|improve this answer
add comment

It really comes down to what you find is easiest (or who you are presenting it to). I personally find it quicker to just start sketching ideas/designs down using paper and pencil. I wouldn't suggest designing the real thing right away as the design will most likely change numerous times.

share|improve this answer
    
Thanks! :) Any reccommendation on choice of software for design of the final buttons, backgrounds, etc.? (Photoshop, Illustrator, etc.) –  Jacques Blom Apr 1 '13 at 15:55
1  
Photoshop/Illustrator are probably best bet for professional quality design. Also check out balsamiq.com for a good wireframing tool. –  IZI_Shadow_IZI Apr 1 '13 at 16:12
    
Nice... It looks awesome! :) –  Jacques Blom Apr 1 '13 at 16:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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