Mock ups for non-designers

Good, concise and clear communication between designer, systems analyst, software developer and the “customer” is crucial for any system that is being conjured out of thin air.  If asked to imagine what the end product will look like, each stakeholder will have a different vision; and the problems start there and only escalate.  To minimize this problem, designers and analysts tend (and should) use rapid prototyping, mock-up, and wire-framing tools.

Many of these tools are now so straightforward and easy to use, that I think that they should not be used solely by the designers and developers.  Many times, it is faster and more effective for the visionary – the originator of the idea – to use these tools to help communicate their ideas more quickly and completely to the designers.  So if you are a marketing manager and want to better communicate with the designers you work with, you should really give these tools a try.

One such tool is an iPad app called iMockups (but if you want to try a desktop/web-based approach, then Balsamiq is also quite good).

In this post, I’m going to walk you through the process of mocking up and wire-framing a little news site — all on the iPad and all using iMockups.

1.  Create a Mockup Project

mockups-1-new-project

Just click on the “New Project” button.. and you will see a blank canvas created with an “Untitled 03/03/2013” (or your current date).  Simply tap on the project name and you can rename it.. I called mine “Demo for Blog”.

mockups-2-project-name

 

2. Create the First Page

When you create a new project, iMockups automatically creates a default page/canvas for you.  It may not be the size or shape you want.. so the first thing we should do is make sure we get the dimensions right.

Tap on the blank page.

mockups-3-blank-page

On the left hand panel, you can see the current “pages” that we have in our project — currently just one.  To change the dimensions (size, shape – portrait/landscape) – simply tap once on the image of the page in that left panel.

mockups-5-canvas-size

Then tap on the “Canvas Size” option

mockups-4-canvas-options

And we can change the dimensions to something more useful. There are three defaults of small, medium or large – but I think that the iMockups team could do better here to provide more standard layour sizes.. e.g. iPad, iPad Retina Display, 1024×768, 1280×1024, etc.

For our demo, we will use the default “small” portrait size – 968×1338.

 

3. Add design elements to your First Page

We’re going to add a few “header” settings to our web page and then make copies / duplicate this main page so that we can wire frame it all together.

We’ve added an image for the logo, a few lines and some text for the page headers..

mockups-6-duplicate-headers

mockups-7-page-one

 

4. Design the sub pages

No we just need to layout the sub page.. to access them, click on the left panel to expand it.. and then on page 2 and then page 3.  Here’s what my Page 2 and Page 3 mock-ups look like for our example:

mockups-8-page-two

 mockups-9-page-three

 

 

5. Link the pages up into a wire-frame demo.

Now, to make it so that when you tap on specific areas – boxes, menus, links etc – you simply do this:

  • Tap on an item you want to link
  • Select “Info”
  • Move the scroller next to the “Link to Page” option to the page in your iMockups project that you want to link to

mockups-10-link-one

mockups-11-link-two

 

 

6. Run the wireframe demo

Now simply press the play button at the top right to run your demo with all the links connected.

mockups-12-play-button

 

That’s it – your done.  Now you can more easily and quickly communicate with your designer or developer what you want for your next web / mobile project.

Good luck.

Leave a Reply

Your email address will not be published. Required fields are marked *