How Prototyping Works
When building a new product, it’s important that before a single line of code is written you have a clear understanding of what you’re building and most importantly, why you’re building it. Prototyping at the very beginning of a project can help clarify your overall vision and best of all, help identify early on what doesn’t work.
What is a Prototype?
Prototypes are preliminary plans, similar to storyboarding for film, or blueprints for a building, but for apps and software. It breaks your ideas down into bite sized, individual parts. The results help you plan and see what each part of your idea looks like and identify any areas of confusion or gaps in the product early on.
Low Fidelity Prototyping
Sketching
Sometimes simple is better – like the KISS principle – and low fi prototyping is no different. Low Fidelity prototypes start with pen and paper and they can be just as effective as something created with more sophisticated tools. The other benefits are that they are fast, cheap and anyone can do them. You don’t have to be an artist to create layouts and you don’t have to pay big bucks to start designing. All you need is a few sheets of paper, some time and patience with yourself throughout the inevitable trial and error process. The result is improved clarity, and resolutions to problems you didn’t even know you had. It does this by bringing to the foreground assumptions you had around your idea and how certain things would work, that weren’t fully thought out until you confront them in prototyping.
Wireframes
Wireframes are the next step in the prototyping process. While pen and paper is the best place to start, wireframes are the critical next step in the progression to higher fidelity. It moves your design into the digital realm but avoids specifics such as copy and images. Placeholder text and images are used in place of real content for the sake of getting the user’s journey visualized. It might help to think of sketching as akin to drawing up a rough outline, whereas wireframes are like a draft copy of your digital product. This stage often brings in more specific details regarding organization and functionality, in ways that sketching doesn’t do as effectively.
High Fidelity Prototyping
High Fidelity mockups are the final stage in the design process, and should be left until the higher level details of the apps features and user journey have all been ironed out. Here is where designers can place specific images, text, typography, spacing, icons and more. There is an emphasis on pixel perfection in this stage, as what is designed and laid out in this stage is what will be replicated as closely as possible by the development team.
Common tools for creating high fidelity mockups include the old faithful greats like Photoshop and Illustrator, but new, vector based tools have begun to break onto the scene like Sketch, Axure, Omnigraffle, Balsamiq and more recently, Adobe XD beta.
Clickable Prototyping
Once the mockups have been designed (and most likely sooner), you can create a clickable prototype. Clickable prototypes create hot spots on your wireframes or mockups that link to other screens or create some other kind interaction such a dropdown menu, popup modal, submit action, etc. They are designed to replicate an apps functionality so closely as to be comparable to the real deal. This is extremely valuable when presenting to stakeholders, while seeking funding or when testing your app prior to development. Using these clickable prototypes for testing can help identify any problematic aspects of your product or areas of confusion that might arise.
There are quite a few tools available to create these prototpes, such as Flinto, Proto.io, Invision or Pop. Any of these can be used to create a clickable, realistic in-app experience.
Interested in making your own Prototype? Our Roadmap Workshops take you through this process and more.
