Go back to the Notes

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!