I’ve been getting asked this by clients more and more recently. What’s a prototype? Why is it called a prototype? Can you stop being so pretentious with all your “design terms”?! All great questions 😉 The term gets flung around so much in the UX/UI world I’m not sure enough clients know exactly what we’re talking about so, I thought it worth while to write about the nuts and bolts process here. There are many ways to accomplish each step but I’ll just go over the “stack” (set of prototyping tools) I currently use.
1. Build it – Sketch
We’re going to start with the build, for this I use a program called Sketch. Let’s assume you’ve got your wireframes squared away and we’re ready to create the high-fidelity version of our product. Website, mobile app, ipad, or android device – all formats and layouts are suitable to build in Sketch. Organization is key when building digital products ESPECIALLY if you’re doing this across a large team. This isn’t glamorous but take time to properly name and order all your assets, elements, and symbols – it’ll pay dividends later. So, before you start it’s wise to identify any elements that will be repeated and build them out first, separately. I personally like to build out a base UI kit before I dig into the rest of the project. You can always add and adjust things like buttons, text, and headers but it’s nice to give yourself (or your team) a starting point to work from.
2. Export your Work – Craft
Alright, we’ve got all our screens looking great! Everything is organized and looks ready to be tested in it’s actual environment – whether that’s on the web or an app on a specific device. Currently Sketch, for better or worse, has TONS of plugins. This makes sketch powerful but it also allows a high degree of variation between users because it can be so heavily customized. Craft is one of these powerful plugins. Craft is specifically for exporting your comp and works in tandem with a web application called InVision, which we’ll talk about in the next step. Craft gives you the ability to export or update your work while still in Sketch. Invision uses static images as a base and overlays interactivity onto the images. So, rather than exporting images (pages) and uploading them into Invision, Craft has taken care of that process with a single click.
3. An Interactive Prototype – InVision
Because Invision uses static jpegs/png to show us a rendering of our site we still have two problems:
1. The pages are not interactive. We will need to build in links with the Invision application to simulate hyperlinks or in the case of app design gestures and touch points.
2. The web expands and contracts and our comps are static. Remember as we move from design to development that we’re only see one small instance of what this will actually look like in a browser – this single immovable screen size (oh if only the web were that simple). Anticipate that there will still be some things to work out as browsers move and resize from user to user.
Now that we’ve got a working comp we can share and comment back and forth with our team or even clients and iterate quickly and easily. This is an extremely powerful and efficient way build digital products. Good luck!
