paperprotoyping

Prototyping

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. During client projects, we love to use prototyping. It’s fast, fun and engages people in making their idea tangible. Prototyping is an important step in innovative methodologies like ‘the lean startup’ as well as ‘design thinking’. Ask the right questions, prototype and get answers. Don’t be scared to fail. Prototyping will avoid you failing big in the end. Wireframe to get feedback on the core basics. Mockup to get a reaction on some more defined and detailed elements and design your prototype in the end to get knowledge on the user experience in your product. On this page a collection of the tools and methods we use.

“The longer it takes to develop, the less likely it is to launch.”
– Jason Fried, 37 signals

“The only way to win is to learn faster than anyone else.”
– Eric Ries, The Lean Startup

Templates to print

Smartphone wireframe pages
If you want to start developing app ideas, paper is a great way to start. We use this templates during our workshops to translate app ideas in real screen designs, perfect to test product assumptions with your customers. TIP: Combine them with this DIY wire phone-holder!

User Interface Elements
Having an offline library of sample buttons, icons, screens, … to glue on your templates, makes screen design even possible with children! You can google “UI elements” to find great examples, but if you’re lazy feel free to download our own pdf. Print them on sticker paper for more awesomeness!

Customer Journeys
Sometimes you just want to tell the story. We combine these templates with pictures out of old magazines, personas, hands, images of devices, … just anything which makes visualizing your customer story more easy. Just print them out, takes some scissors and glue and start paper prototyping!

Tools to use

Paper 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. The lack of design elements in paper prototypes will make people focus on the basics, the core of your product. Which is exactly what you need when defining your product. You’ll get a lot of feedback to process and use in your next prototypes/wireframes. We’ll show you some tools that may help you getting started.

DIY Wire phone-holder
“If you can’t make it, fake it!” With this great quote in mind, I designed a holder for our iPhone wireframe templates. Just download the file and laser cut it with 3mm thick plastic sheets. Glue it together and magic! It can hold up to 10 different screen designs, so user testing becomes highly interactive!
wp-content/uploads/2013/04/iphone_laser.pdf

POP-app
POP (Prototyping On Paper), by Woomoo, is a (currently free) app to make on-screen links between several paper prototype images. It’s an easy, simple app with an extremely short learning curve! My review of this app (already 60K views), can be found on our blog, together with some great tips & tricks!
http://popapp.in

UI Stencils
Oh yes they exist, iPhone stencils! Since I ordered them, I can’t stop using them. UI Stencils also provides other ones; for websites, android phones, tablets, … They’re not cheap, but a great help! Of course, real makers make their own stencils with just some cardboard and cutters.
iPhone Stencil Kit

customervalidation

Digital Prototyping

Digital prototyping will help you taking your ideas to the next level. After lots of testing and wireframing, you are probably ready to get detailed. Digital prototyping will require a bit more skills as paper prototyping, but is definitely worth the effort. User experience and user interfaces are commonly overlooked or underrated, whilst being so important for the use and impression of your product. When using your product or service, a good interface and experience will define the end judgment. Get into digital prototyping to test behaviors and reactions. We’ll show you some tools that may help you getting started.

Sketch
Take your prototypes to the next step. Convert your wireframes into slick designs using one of the best user interface programs on the market. Sketch is made entirely for turning your wireframes into great looking designs. It’s an easy and prototype focused application for mac with a free trial. Although photoshop may conclude the same options, the focus and usability of sketch makes it stand out. Sketch also has an abundance of templates to make your prototyping just a bit faster.
Go to website

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.If you’re already known with Photoshop it might be easier to use instead of learning a new program. Photoshop has a range of effects that can give your designs that edge. The possibilities of the adobe package are truly infinite. Make your static designs pop out even more by using mock-ups of devices. It gives your designs just that bit more flair!
Go to website
Take a look at some mockups

Invision
Invision is a truly a game changer! Tools like Proto.io or adobe Experience Design will more or less do the same, but the straightforward easy user experience makes it the perfect tool to get started with!  The online app makes it so easy to share your designs, make them interactive and clickable. Share prototypes with a team, easily drop notes, manage projects, seamless synchronize with other programs and much more!
It’s a must have when you’re talking about digital prototyping.
Go to website

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.
Go to website

FID