January 18th, 2010

Everyday prototyping

Filed under: Know-how — Ondřej Válka @ 01:38

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

T-shirt 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.

Audio/video manager app mockup

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!


  1. Michal

    Love your posts! Really great how you emphasize how important it is to do prototyping before starting the design work… saves so much time and energy in the end!

    Have you ever heard of balsamiq.com, magneticprototyping.com and mockupmagnets.com? All really great ways to help with the prototyping process…


    January 20th, 2010 at 21:41
  2. Ondřej Válka

    Thanks for the tips, Michael. Mockup Magnets looks nice and innovative.

    I’ve tried Balsamiq and it was fine, but I’ve switched to OmniGraffle, simply because it’s more powerful. Anyway, I think Balsamiq is a handy tool for creating quick-and-dirty mockups.

    These days I’m trying to abandon digital wireframes and start directly creating HTML mockups, that can be both tested and used by my colleagues programmers.

    I draw a wireframe with a pen and paper and than start creating an HTML prototype. Despite it’s more laborious to create such mockup than use Balsamiq, this lets me think about the concept, make some adjustments and in the end I have a viable well-considered prototype.

    January 21st, 2010 at 09:55
  3. Jan Stawarczyk

    This is really cool! The hard cartoon template is usefull, I especially like the concept with white space around borders for explanations. I have to reuse your idea :)

    January 21st, 2010 at 23:28
  4. Ondřej Válka

    I’m glad you find it useful Jan. Anyway, how are you these days?

    January 21st, 2010 at 23:44