Whether you’ve heard of mockups but don’t fully understand what they’re for, have some basic understanding you want to reinforce or you’re just looking into the app development process and are completely new to the term, this article is for you. I’m going to keep it short and sweet and use my knowledge and experience of mockups to outline for you what they are and how to make them.
What are mockups?
A mockup is a very basic visualisation of your project or even a part of the project. A picture that shows the way you imagine your app or site will look and therefore helps to understand how it will work.
Why are they needed?
A mockup is simply the most practical way to clearly communicate your ideas to your developer.
Imagine you have a website and you want to add a new page to it. You could try and explain verbally to the developer what needs to be on the page, where it links to and from and so on, but given that websites (and apps) are a visual medium, it’s much clearer to explain with the help of a picture. This is especially important, if you later on want someone to design this new page or section or feature.
One nice thing about mockups is that you don’t need to worry about their quality. They’re done purely for your personal benefit and that of a few more people who need to understand what you have in mind before the more formal plans get drawn up. They can be as basic as a pencil sketch on a piece of paper, or even the classic ‘back of a napkin’ plan. Alternatively you could get a little more advanced and use a specialised online tool for creating mockups. It doesn’t really matter though, as long as they fulfil their goal – to communicate the end result that you want to create.
What should they include?
Keep in mind that mockups don’t even need to be very well thought through. This stage is all about making a broad strokes plan. The details typically get filled out during the wireframing stage. Essentially, what you need to show are what blocks of content or functionality you would want to see on the screen and where. If we are talking about app mockups, you may want to create a few screens with key features that the app would have.
How do I make my mockups?
Please, don’t go over the top with your mockups – there’s no need to create them in Photoshop for instance, or any other complex software. They’re only going to be used as a reference point to begin the planning process, so pouring excessive effort into them would be a waste of your time. You can find a number of easy to pick up and use online systems for mockup creation, like balsamiq or invisionapp.
Personally, I’d recommend the simplest, fastest, cheapest solution – grab a piece of A4 paper, draw a browser window or phone’s screen, and put sections or blocks of content within it. Take a picture of that with your phone, and email it to your developer or designer to start the conversation.
More about the app development process
If you want to read more about the app development process, check out my last article on comparing estimates or my intro. to the topic of developing apps which contains a list of the topics I’ve written on and links to the relevant articles.