Prototyping is a must. No matter what business you deal with, prototyping should be a welcome guest that helps you figure out the right decisions in quick-and-dirty way. Today I’d like to reveal my prototyping techniques, related not only to Web sites.
Wearable mockup
Designing a T-shirt for signály.cz I have to find out which size of the illustration would fit best. A paper cutout (based on a quick sketch) together with an old blue T-shirt allowed me to show the final product to the client without touching a mouse/keyboard.
All the equipment I used was a pen, a paper, a scissors, a T-shirt and a half-assed mobile phone camera. Having finished the phone call with the client I was able to create an almost final design solution in half an hour.
From paper to computer screen
The text was originally published at Wireframes magazine. Thanks Jakub!
A part of a school project was to create a paper mockup. Having considered all the problems I’m going to resolve I’ve made a list of proper goals:
- I have to create a paper prototype of an audio/video manager app. I already have the creative brief and the technical brief.
- The prototype should contain all the screens and dialogue boxes of the app. It should be compact, easy to store, portable all-in-one solution.
- It should provide quick and fancy user testing.
I wanted to have the whole app in a single notebook. Because the app would have a single window interface, the solution had crossed my mind immediately.
The result with all its benefits you can see below.
See all the cutouts photos at Flickr.
- A page = a screen. Using such solution provides you with a lot of space around every screen. Put down some thoughts, notes and explanations.
- The main frame of the app can serve as a stencil when drawing new screens. Speeds ups the drawing process and keeps the notebook full of drawings clean and consistent.
- In addition, the space around every screen serves as a place for pop-up windows, dialog boxes and other elements made from post-it papers.
- The main frame stencil can hide all the stuff around a screen and turns a set of described wireframes into a testable prototype in a moment.
Take such prototype anywhere, create new screens in a bus or train, test with your mates during a coffee break and finally archive it next to your past prototypes. Worth trying, isn’t it?
Keep your eyes on I ♥ wireframes—a popular wireframes showcase.
Off the wall prototype
Since signály.cz is a Christian organization, we wanted to have our very own cross. We’re a non-profit organization, so the design solution has to be low-cost and easy to produce.
Using 2 moodboards I’ve suggested a solution, but it would have been complicated to be produced and also quite different from our corporate design too.
Together with a couple of friends we’ve designed a cross that perfectly goes along with our design style. A few sketches came in handy.
Final production process included a paper prototype of the cross. In 15 minutes we joined some blank papers to show the final shape.
The cross was hand-crafted together with a few skillful friends of mine. Thank you, guys—the result was amazing.
The good, the bad and the ugly sketchbook
I can’t remember how many times a day a open one of my sketchbooks to draw a design concept or put down an inspiring idea.
Actually, I have 3 sketchbooks. The fat one is A4 format where I put every single possible sketch: wireframes, banner proposals, sketches etc.
The big one is A4 format too, suitable for text notes. While reading books or articles I put down notes, diagrams etc.
Don’t miss great Flickr group User Experience Sketches.
The little one is a pocket-size notebook that I try to take with me everywhere. The ideas and concepts I’d like to remember but I haven’t time to carry out now I keep here. Such notebook could one serve as a springboard when searching for ideas.
Show must go on
Now it’s your turn. Show off your projects!
