Mockup Mania – Translating an idea into product requires a starting point. First time entrepreneurs or wannabe entrepreneurs find it difficult to translate their ideas into that end product. That’s not their fault – it’s a lack of education that is available for people who want to do something that belongs vaguely in the online space. The mockup is an ideal tool to get your idea into the heads of others – and the good thing is this: creating a mockup doesn’t need to be difficult. In fact with the right mockup tool, your mockup could even look like your real product.
The Internet has evolved so much that it’s now possible for anyone with a bit of drive, time and some intellectual horsepower. Creating the due process of a business plan is useful, but a step that I would always recommend. There’s only one person who can review the market in the way that you want it reviewed and that is yourself. You can pay people to help – but there will ultimately be one owner of that plan – you.
And within that plan comes the product that you want to build. And this is a critical part in translating what you believe your product is to something someone else understands. There are three potential parties that you need to convince of your product – and within this context and within the confines of time, you need to them to “get it”. These are the investor, the customer and the developer.
How do you get them to get it? Using a pretty picture, of course. In more formal terminology, this is called the mockup and will show your intended audience what your product is. It also has a hidden benefit – it actually forces you to think through what is most important for your product. In the area of tech, this means that the mockup will make you think through what the key functions are and what is most important to display to the user. It will also force you to think through the user experience especially if someone is consuming your site from the confines of a mobile phone.
So, you have got the idea in your head. What next? Well, there’s two extremes. If you have the ninja design skills required to operate Adobe Photoshop, then get down to it. There a heap of Photohop mockup PSD files available on the net. However, if you are reading this article, then you’re probably very similar to me. So, get a pencil, preferably HB (because that’s what they used to tell me at school) and one that has an eraser, a ruler and lovely piece of white paper. Start sketching. This is the first formative step in a mockup – and will get your creative juices flowing. After all, if you are serious about your idea, then you need to be able to articulate your ideas in a way that people will understand
If you get past this stage, then it’s time to take your mockup to the next level and turn your sketch into an early design. Anyone can do this – and it cements further your commitment to the project. Block out an hour and create your basic template. Here are the tools that you can use to show what is important and show your ideas through proper mockups:
The Best Mockup Tools
- Powerpoint – most people know how to use it. Don’t be embarrassed that this is your mockup tool of choice
- Balsamiq – this is the traditional wireframe tool of choice for designers and usability experts. It’s probably too complicated for an initial mockup, but wanted to make sure it was highlighted. There’s also an integration with another product called Mockgen which allows you to base your site on someone else’s. If your site is a fast follower of another, then there may not be a need to mockup everything when you just want to stamp a brand on it to get the idea across.
- Pencil Project – this is a gui prototyping tool that’s open source and provides a great way to demonstrate the flow of a user journey. Downloadable, so you will need to do this multiple times for multiple access – and unbelievable that a product this good is free.
- Mockingbird – a great tool if you are collaborating with others to create your mockup, and there is a free trial version available
- Mockflow – incredibly easy to use, Mockflow is our mock up tool of choice. It start off as a free version at the entry level which is pictched with just the right amount of functionality to promote scale
- Mockabilly – if you are creating mockups of an app, this is a great product to test viability with potential consumers. It’s available on the app store (iOS) – and you can work through a product in the exact way that it might look on your iphone screen
- Mockapp – this is a relatively expensive product for the iPad. If your whole business and potentially livelihood is going to revolve around an iPad app, it’s worth investing the $100, because your mockups will be an on-going process.
- Hotgloo – More than just a mockup tool, Hotgloo allows you to create wireframes and prototypes. Ingenious.
- Mockup Builder – Mockup Builder makes it easy to prototype and is especially good for teams.
- Axure – allows you to create mock ups and wireframes for all platforms and types. You can create significantly in depth prototypes which are interactive and in HTML. Although the end result is a mockup, you’ll get something that actually looks like an end product.
Having created your mockup, you will have your vision of your product in a form that someone else can work with or understand. The cliché that a picture is worth a thousand words is true here, especially if your concept is complex. Mockflow is our mockup tool of choice. But any of the mockup tools listed could work for you, depending on your skill level, commitment and time commitment. The one piece of advice is this – just remember who the audience for your mockup is. Creating a mockup with low level detail for someone who wants it all will get you negative feedback, so make sure you frame your mockup concept effectively, before your big reveal.
Editor’s Note: This post has first been published on Rahim’s personal blog medeleon.
Picture “Why I click this link’s mockup” by snck, Some Rights Reserved