Building a mock user interface for your app is a critical step towards creating effective software of any kind. Yet, it can seem overwhelming to actually go about creating sketches of how our finished products will look.
These are the factors that you should take into consideration when creating your mock UI. We have also listed some great tools for getting the job done in a way that will best suit your app development process.
Who are you developing for?
This first consideration is an important one, and it’s also one that developers forget to think about a lot of the time. Before you create your mockup, it’s critical that you are aware of your audience.
If you’re making sketches for your own personal benefit, then that’s fine; you don’t need to think about anything other than what will create the most efficient and effective user interface. Accordingly, you can make the sketches as primitive or detailed as you like.
On the other hand, if you’re putting it together for someone else, then you have some other factors to account for.
If you’re going to be showing off your mockup to people who aren’t particularly IT-minded, it's worth remembering that some people can confuse designs with finished products. For this reason, it might be worth not creating something that looks just like an app, but instead more a rough sketch. Sticking to basic lines and shapes, black and white as opposed to full color, and so on is a good idea. Leave no ambiguity as to the current stage of development.
If someone who doesn’t know much about development was to see your mockup - which looks dangerously close to a finished product - they might confuse it for a nearly-finished product without understanding that the entire engine needs to be coded first. I have heard stories of app developers being called “lazy” by clients because they didn’t manage to turn their designs into working products in a few weeks!
What you need to include in your mock user interface
Whether you are creating the mockup for yourself or someone else, there are certain elements that should always be included:
Once you have the basic design down, you can then start to elaborate a bit with other processes:
What you don’t need to include in your mockup
You don’t need to worry about going all-out in your mockup. Like stated above, if you’re creating it for a client who doesn’t really have a firm understanding of app development, it’s good to keep things as “blueprint-ish” as possible.
Likewise, it’s probably not necessary to include every single graphic and detail in these images, even if it is just for your own eyes. The purpose of this design stage is to have a grasp of how the app will work, and not particularly of how it will look.
Methods for prototyping your app
There are dozens - if not hundreds - of processes you can use to create your mockup.
Firstly, you might wish to use pen and paper. This is a great way to cut out any distracting features you might encounter with fancy design software, so that you can get the most basic understanding of how your app will work. Whenever I’m coding, I always revert back to my trusty notebook and a biro for my first design sketches. Then, if necessary, I’ll create a more detailed version in Photoshop or Illustrator.
Using pen and paper also makes re-drafting and adding or removing components incredibly easy. An even easier way to re-draft your work is to present it on a whiteboard. That way, you can just rub out the part that you don’t want and add in the new one in a matter of seconds.
In terms of software, you might opt to use any of the following tools to complete your mockup:
Likewise, there are options out there that will allow you to create electronic, interactive mockups more intuitively. A basic Wacom tablet can be purchased for under $100 these days, and will let you produce designs easily once you get used to the feel of an electronic tablet. Likewise, there are various iOS and Android apps dedicated to creating vector-based sketches.
Go Forth And Create Thy Mockups
There are hopefully enough options (and pieces of advice) here, that you now feel slightly more confident in creating your sketches.
Remember: the happier you are with your product in the initial design stages, the less likelihood there is of needing to revamp your product when it’s already on the assembly line - or, in this case, when you’ve already written thousands of lines of code.