Microsoft Skilled

Design is creativity with strategy

Rob Curedale

Create wireframe mockups for a new app.

A mockup is the story of your app, it entails the layout, the functionality and the flow between all the screens. The mockup will help the app makers and the stakeholders to see the intended result and quickly flag any issue before starting the build.

At times I can be old fashioned and use a simple pen and paper to put my ideas together. However, when showing my mockups to clients I like making things more “real”, I enjoy using a software called ‘MockFlow’.

MockFlow is an online wireframe software for designers planning, building and sharing work. MockFlow provides users with a large library of mockup components, icons, stickers and other shapes to quickly and efficiently build clean looking interface mockups.

Our goal is to create a design that is simple and easy to navigate.
Think about UX – User experience is the flow and function of the app, the way the end users will interact with the app. What will happen if a user clicks on a button? How will the user navigate between screens? How many screens will we need to build for users to reach the desired functionality? What order should they be in? I would recommend you to create one wireframe mockup per screen and per each task to make it super clear of the desired behavior.

Consider UI – visualize how the user interface will look, and how the desired functionality will fit in. Think about app accessibility, think about typography, colors, icons and tabs.

Be brave – test and refine the initial wireframe! It is more than ok to test your wireframe in real time. You can make your wireframe come to life by creating a PoC. You can connect the screens and create some of your actions that will simulate the user experience of the app.