Creating Digital Mockups For Your Apps

While conceptualizing your App, the first things you need to create is a flow chart of how your App will behave and some reference templates and images that will show you how each screen will look in your App.

The first step to doing this is to get hold of a pencil and paper and make some rough sketches. Start by making a list of all the possible screens your app will have and then actually listing the functionality each screen will have. Once you have that, you can proceed to make some dummy mockup sketches. At this point you should focus on the “placement” elements of each screen… that is decide, what goes where. Next you can start to imagine the design elements and look and feel of each screen – and how they will all look similar and connect to one another. A flow chart showing how the connect up – will help. I suggest you get hold of a spiral bound sketch book and not lose sheets of paper, that can easily get misplaced. Any writing pad will also do.

To help you make your hard copy and soft copy drawings, these downloadable documents and plans will help you. They will be useful when you are brainstorming or trying to find the perfect flow for your app and putting the visual elements together.

  • Mock App – Templates for Keynote and Powerpoint
  • Yahoo Design Stencils – Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG)

Download each of the above packs and files as they are all must have tools when you or your graphic artist are planning the User Interface or graphic design of your Apps.

Leave a Comment:

3 comments
Baskaran says May 25, 2010

Dapp does code generation too apart from the ‘mocking’ of the functions

Reply
Ocham says May 28, 2010

Interesting article, thanks! I’m seeing more ‘how to create your own iphone apps’ article that i’m finding useful for my designs 🙂

@ Baskaran. Thanks for the tip. I just had a look at Dapp..then purchased it! I’m still playing around with it but I can see how I can mock an iPhone design.. i’m not a developer but I’m sure the iphone developers will appreciate the export to code functions.

Reply
Mike Young says June 9, 2010

I’ve been greatly disappointed in the iPad-specific mockup apps. For me, only OmniGraffle with stencils fills the bill for creating realistic designs.

Reply
Add Your Reply