How do you sketch out your iPhone App designs and ideas?

Question

How do you sketch out your iPhone App designs and ideas? I am currently about to start my next project and want to find a way to get my ideas on screen instead of good old fashioned paper.

Answer 1

Balsamiq has an excellent tool for doing mockups of interface designs. They also have some iPhone components. There is an online demo that I have started using (after seeing the answer to another SO question) and have really enjoyed the experience so far.

Answer 2

MockApp looks great!

Answer 3

I just create my designs in Adobe Fireworks using this mockup toolkit: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

Answer 4

Omnigraffle works well

Answer 5

For the first stage, nothing is going to beat paper. Whatever tool you use will be (hopefully) more accurate, sure. But you're trading time for that accuracy, and in the initial stage of UI design you need speed more than accuracy.

I do my designs with a few different pencils on index cards. When I'm satisfied I'm going in the right direction, I tape the card to a ruler and use my iMac's camera to take a picture of them. I then convert it to B&W and do a simple brightness/contrast to try to get them looking as good as possible, and I've got something reasonable to digitally store.

The great thing about this is that I can draw a rough card in not much more time than it takes Save As to open up if your Time Machine drive has gone to sleep. :) I can do a nice card in a little more time. And if I ever want something nicer looking, I can edit the scan or use it as a tracer in some other program.

(And I toss the cards in ziplock bags by project.)

Answer 6

I also create my designs in Adobe Fireworks using mockups toolkits you can find everywhere. If you're a Fireworks fan you really should take a look at a very nice Fireworks Extension which allows you to preview your designed app in a iPhone simulator which is AIR based. The transition effects which are the trademark of the mobile device are also built in the extension and can be applied to the designs.

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1786031#

if you're already familiar with fireworks mockups you will love this extension.

best

Answer 7

Rob Rhyne's Briefs is great for mocking up the user experience. You can play your briefs on the phone.

Answer 8

OmniGraffle. ( http://www.omnigroup.com/products/OmniGraffle/ ) When combined with various iPhone Stencils like: ( http://graffletopia.com/stencils/413 and http://graffletopia.com/search/iphone ), OmniGraffle makes a great toolset.

Answer 9

I use these Photoshop templates from Teehan and Lax...

http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

or for a whole list of iPhone and iPad stencils: http://emilychang.com/2010/03/ipad-templates-and-stencils/

Answer 10

Software is attractive, but you'll end up spending more time playing around with colors and moving things than getting the design/functionality down. What you need is speed. With speed you can move onto the programming sooner than later. I'll admit if you ultimately want to share the design with someone else MockApp is probably a good choice.

Here's what you need: (In order of preference)

http://technabob.com/blog/2009/09/28/notepod-paper-iphone-notepads/

or

http://appsketchbook.com/

or

http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden-forms-ink-brush/

Answer 11

Thanks everyone for you quick responses!

After testing both Balsamiq and MockApp I have come to the conclusion that MockApp gives me exactly the sort thing I want for design my Apps as you can see exactly how it will look and the sort of space each UI Element will take up. Also with the use of Keynote or Powerpoint you could go a stage further and link all the buttons up to create an effective demo presentation of your ideas if you required to present such a thing, though this is a little more time consuming and for myself I don't require this, but nice to know its there!

Balsamiq is a slightly quicker and easier tool to use but has less stock UI components and gives a sketchy look to the design which appears cool if you wanted to create quick story board images of your app idea but for actual design MockApp creates a much more realistic appearance which I believe is better. Also Balsamiq costs $79 if you want more then just the demo.

The reason I would choose MockApp over all the other solutions is that I would assume most already have either powerpoint or keynote on their computer compared to Photoshop or Fireworks, though I'm sure if you have those applications on your computer it may be better to use those. Also MockApp is free / tweet-ware, see the MockApp website for more details.

Hope this helps

Dan

P.S. I have yet to try OmniGraffle, thats next on my list!

Answer 12

Software is useful and may be more efficient but sometimes getting away from the screen is a good way to increase concentration on design rather than implementation. And nothing draws quite as many "cool!" comments as my stainless steel iPhone stencil:

Design Commission Stainless Steel iPhone UI Template

I don't use the print image they provide but made my own with a reduced-alpha screen capture from the simulator.

Answer 13

I would have to say mockapp or omnigraffle at the moment.

Answer 14

Don't miss out on this one by Less Code: http://lesscode.co.nz/interface

It lets you design right on the iPhone with iOS native components.