But first: why prototyping?
Popularized by Design Thinking and Lean Startup, prototyping is a commonly used method for testing and evaluating ideas in a very early stage of development. Mostly known for prototyping user interfaces, prototyping can also be used to make customer journeys, visualize ideas or just to have some fun. People say a picture is worth a thousand words. If that’s true, a prototype is worth a thousand pictures.
Prototypes force you to think a bit harder about your idea so that you really understand your assumptions and your possible solution. It creates a tangible product for you to get out and test ideas at a very early stage of your process. Get valuable customer reactions and feedback in just a few days.
If these words haven’t got you drooling yet, we’ll give it one more shot: prototyping will make you fail fast and hopefully fail a lot so that in the end, you avoid failing big. You might even say that prototyping is based on failing. It wouldn’t be there if there weren’t any mistakes to make. As Reshma Saujani once said, “Fail fast, fail hard, fail often.”
After all, the very first step to create an innovative product is not to invent a mind-blowing idea. Instead, you need to start from an idea and iterate on it along the way. Typically, corporates are ready to invest a lot of time and money on unvalidated ideas, instead of taking a moment to quickly prototype them and validate the related assumptions, often resulting in failed concepts or products with a bad user experience.
On this page, we will share a collection of the tools and methods we use internally and with our clients.
A marker and a sheet of paper
Let’s start with the very basics: a marker and a sheet of paper. There will never be (at least for a while) a better/quicker/faster/cheaper solution for prototyping. Paper prototyping is a fast, easy and fun way to get a first impression on your concept. Don’t worry about not being a designer, paper prototyping is very accessible for people of all backgrounds. It is even so that the lack of details in paper prototypes will make people focus more on the idea and the flow of your product instead of the way the interface looks like. Nobody wants an “Oh, I don’t like that kind of pink” when they are doing an interview to test their first assumptions: colors and layouts are just not relevant at this stage of development.
Price: Already on your desk
PowerPoint / Keynote
Yes, you can create a digital prototype with Microsoft Office PowerPoint or Keynote. And if you’re not a designer, you should really start from the software that you have already mastered and have on your desktop, rather than venturing into the perilous lands of Photoshop or other new professional services.
Price: Already on your (digital) desk
Smartphone sketch templates
Do you need to develop ideas for apps and other digital services? Smartphone sketches are a great way to start. Sneakpeekit created these useful templates with or without a precision grid to get you started. Translate your app ideas into real screen designs, perfect to test product assumptions with your customers.
Price: Free
Explainer video generators
The easiest way to explain your solution is by telling a story. Explainer videos give you the opportunity to share your concept with hundreds of potential customers via social media and to get instant quantitative and qualitative feedback. While this used to be slow and expensive you can get it done in no time and for almost no money with tools like Lumen5 or Moovly.
Price: Freemium
POP-app by Marvel
The very popular Marvel’s POP (Prototype On Paper) App bridges the gap between paper and digital prototype by helping you make on-screen links between several paper prototype sketches. It’s an easy, simple app with an extremely short learning curve! Just take some pictures of your sketches, upload them into POP and just a few clicks later you get an interactive prototype ready to take to the streets. Read our review of this app to get additional tips & tricks!
Price: Free
Proto.io
The very popular Marvel’s POP (Prototype On Paper) App bridges the gap between paper and digital prototype by helping you make on-screen links between several paper prototype sketches. It’s an easy, simple app with an extremely short learning curve! Just take some pictures of your sketches, upload them into POP and just a few clicks later you get an interactive prototype ready to take to the streets. Read our review of this app to get additional tips & tricks!
Price: Free
Invision
“Méh, finally my screens look nice, but how can I really test them with my customers?” That’s why Invision joins the battle. The straightforward easy user experience makes it the perfect tool to get started with! The intuitive program gives you the ability to upload screens and create hotspots to link them to one another. Sounds a bit like POP-app? Yes, it does. But Invision has a lot more to offer. Creating shared prototypes, where you and your coworkers could work together to share comments and suggestions. Seamless synchronize with other programs and so much more! Apart from its functionalities it also has a great blog, that could give you the tips and tricks you’d need for your next prototype!
Price: Freemium
Craft
When using Invision, the Craft plugin is a must-have. Easily sync with Invision with Sketch and Photoshop, create styles and even expand possibilities of the programs.
Price: Free
Sketch
My personal favorite. Convert your wireframes into slick designs using one of the easiest user interface programs on the market. Sketch is made solely for turning your wireframes into great looking designs. Although Photoshop may conclude the same options, the focus and usability of sketch make it stand out. Sketch also has an abundance of templates to make your prototyping just that bit faster. Having an immense library of resources to use in your designs is just one of the vast benefits of using Sketch. Not only is it extremely functional, but it also has an amazing community of like-minded people, sharing their designs and opening up their recourses to help you get better at what you do or to accelerate your design process. Take a look at www.sketchappsources.com to get a glimpse of the resources. Things this perfect don’t exist you say? True, the only downfall of this gem is that it’s only available on Apple computers.
Price: Starting from $99.00/year
Photoshop
As one of the most versatile programs on the market, Photoshop is a great tool to transform your wireframes into beautiful designs. The options of Photoshop are endless. It’s not made for prototyping, but it does a great job of using it for that purpose. It’s first on this list because some of you might already know their way around Photoshop, which makes it a definite go-to program if you’re one of those people! Tip: Make your static designs pop out even more by using mock-ups of devices. It gives your designs just that bit more flair! You can find a lot of great resources online by googling ‘Photoshop Mockup (insert subject)’.
Price: Starting from $280.00/year