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

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

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 3

MockApp looks great!

Answer 4

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 5

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 6

I am developing WireframeSketcher wireframing tool that lets you create iPhone mockups using an external stencil. You can also link screens together to simulate interactivity.

Answer 7

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/

_{(source: emilychang.com)}

Answer 8

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 9

Omnigraffle works well

Answer 10

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 11

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

Answer 12

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 13

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 14

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

Answer 15

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.