Have you ever had an idea for a product or application you want, but you couldn’t quite picture it? Have you ever seen a demo of a product only to want to re-arrange where different elements are placed? Mockups can save time and headaches by simplifying the design process of an application and ensuring all the elements are where you want them before work on the product gets started.
What is a Mockup?
A mockup is a non-functional representation of a final product. They’re used to design the layout of a web page or application before any work is done. This allows clients and developers to make sure they’re on the same page about how a product should look. Additionally, mockups help demonstrate the user experience of moving between screens and interacting with the basic parts of the application.
How do Mockups help?
Taking the time to make a mockup of a product before beginning development saves a lot of time and effort for both clients and developers. By planning out how a product will look before development begins, clients and developers both get a better understanding of what will be delivered when the project is complete. This helps clients make sure they will get what they want, while developers have a more definite reference for the scope of the product. Mockups can also serve as a quick-reference for estimating how much of a product has been developed and how much remains.
Furthermore, mockups can be a big help regarding the cost of a project. As a refined, visual example of a product, mockups give clients something to show stakeholders and decision-makers when trying to get approval for funding. For developers, having an approved design and interface before development begins removes the complications of trying to design a product while it’s being developed. In mockups, it is easy to re-position elements or change the overall design of a product. Once everything is settled on, developers can start creating a product and write functionality for elements without having to rework how they interact as things change. This reduces time rewriting the same functionality. It makes writing efficient code easier, and results in a product that is easier to maintain in the long term. Additionally, this helps keep the project development timeline on-track.
Mockup Examples
Below are some examples of a mockup for a fictional property management application. These images show how a user might get the information about a property after they have selected it. On the left-hand image, we see how the property a user selects is highlighted on the map. The screen on the right follows and shows the view for the property details. As a static example, developers don’t have to worry about getting all the data about a property from a rest endpoint or filling out dynamic elements to present the layout for the data to the client.
Mockup Design Tips
Some tips for designing your own mockups:
- Look at other applications – If similar applications exist, look at them to see what works or doesn’t. If this application will exist in a suite of software, look at the other parts that have been developed to ensure consistency for the users.
- Look at the requirements – Make sure the mockup represents a product that will address the needs of the client.
- Recycle – Part of the time-saving perks of designing mockups includes the ability to copy individual elements, groups of related elements, or even entire screens.
- Context – When presenting the mockup to the client, explain it in the context of their needs.
- Link mockups – Basalmiq allows designers to link elements in one mockup to another mockup, providing a pseudo-navigation to help represent how users will move through an application.
If you have a widget or application you’ve been thinking about, feel free to reach out to us at connect@geo-jobe.com. We’ll be happy to work with you to design and develop a project that fits your needs.
