Resources & Tools for Digital Prototyping
Our 10 favorites
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. To 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 didn’t get you drooling yet we 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 mindblowing 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 not-validated 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.
1. 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 Desktop
2. 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 already master and have on your desktop, rather than adventuring yourself in the perilous lands of Photoshop or other new professional services. So, open PowerPoint and read this guide (for Keynote) or this guide (for PowerPoint) to get started.
Price: already on your (digital) Desktop
3. Smartphone sketch templates
Do you need to develop ideas for Apps and other digital services? Smartphone sketches are a great way to start. We use this templates during our workshops to translate App ideas into real screen designs, perfect to test product assumptions with your customers.
- Download template iPhone A4
- Download template iPhone A3
- Download template iPad A4
- Download template iPad A3
4. UI Stencils
Oh yes, they exist, phone stencils! Since I ordered them, I can’t stop using them. UI Stencils provide more than just phones, they also have stencils for websites, tablets,…
They’re not cheap, but a great help! Definitely, if you are scared that you can’t reach the level of detail you wanted to put in your paper prototype. Of course, real makers make their own stencils with just some cardboard and cutters. But don’t try to do everything at once, using the tools out there is already an amazing start!
5. 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!
Not too far away from Invision, you’ll find Proto.io. Just like Invision, Proto.io lets you create high-fidelity prototypes of Apps within hours, with libraries of ready-to-use graphic and functional elements such as onboarding carousels, menus, buttons, maps, videos and more.
Price: starting from $24.00/month
“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!
Go to website
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
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