In this article we will look at how to create quick prototypes for getting initial feedback using Sketch and Marvel.
You have created and shared your wireframes with Balsamiq. You have gathered feedback and incorporated into your wireframes. You think you have a pretty good definition of the different screens. Now it’s time to bring life to your wireframes. And we will do it without writing a single line of code!
By bringing life to our wireframes I mean that we will be creating an interactive prototype that will simulate the real application.
Before you start any work you should select what makes sense to include in the prototype. Building prototypes is more complex than building wireframes. Depending on the size of your product or feature, it would make sense to narrow down the scope. If you have to do that, make sure you focus on the main value proposition, that is, the main problem you are trying to address so that you can test and validate that you are providing a great solution to that problem.
During the wireframing phase, you should have created a user journey through the product or feature which will help you identify the screens and interactions you should absolutely include in the prototype.
We will build the prototype in 2 steps.
Step 1: Create the Visual Design
Since we want to build a prototype, we need to create a visual design for the different screens so that it looks reasonably close to what you expect the final user interface will be. The design for the different screens is usually called mockups – yes, I know Balsamiq’s wireframing tool is called Mockups but the term is generally used for a closer to final UI, not sketches.
You will need one mockup for each screen and each different screen state.
I understand you may not have UI design skills and you may not have been working in collaboration with a designer when designing the structure of the different screens. In that case, now it is a good time to get some help from one of them. Your product vision or feature description and the wireframes are a perfect starting point for a designer to start building a real UI.
If you have design skills or want to give it a try, I would recommend you use Sketch (Mac only). Sketch only costs $99 and it will allow you to create good looking mockups for your product very efficiently for mobile, tablet and desktop.
I am not a designer by any means but I nevertheless tried to use Photoshop (an expensive traditionally popular tool among designers) in the past with no success. When I tried Sketch, in a couple of days I was able to produce very decent mockups.
If for some reason you are not able to create mockups, you could at least refine your wireframes, remove all the notes you have added to them and use that instead. With Balsamiq you can export your wireframes as png files.
Step 2: Add Interactivity
Now that you have all the screens designed in their different states to reproduce the user journey through your application, you can connect the screens using a tool like Marvel. It is extremely simple to use and it works like a charm:
- Add all your images to a project. If you use Sketch you can use this plugin to send your mockups directly to Marvel.
- Select an area in the image (a hotspot) and associate to it an action (like click), a transition (like fade) and a target image, that is the image that will be displayed when the user performs the action on the hotspot.
You can create prototypes for mobile, tablet and desktop. The actions that you can associate to an image include touch gestures like swiping.
Marvel comes with other great features like the ability to share a url to your prototype and get feedback through its commenting feature.
There is a free plan that should meet your needs until you get more sophisticated and need to run multiple projects in parallel. And when you sign up there is mobile app sample project for you to learn how to use it.
In the last article of these series we will see how to perform a usability test to collect feedback.