3

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.

4
  • 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, 2013 at 15:40
  • Thanks! :) Any reccommendation on choice of software for design of the final buttons, backgrounds, etc.? (Photoshop, Illustrator, etc.) Apr 1, 2013 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, 2013 at 16:29
  • Thanks :) I've tried Sketch for OS X and it works pretty well. Apr 1, 2013 at 16:38

3 Answers 3

3

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.'

3

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.
1

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.

3
  • Thanks! :) Any reccommendation on choice of software for design of the final buttons, backgrounds, etc.? (Photoshop, Illustrator, etc.) Apr 1, 2013 at 15:55
  • 1
    Photoshop/Illustrator are probably best bet for professional quality design. Also check out balsamiq.com for a good wireframing tool. Apr 1, 2013 at 16:12
  • Nice... It looks awesome! :) Apr 1, 2013 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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