Here is a cool idea of combining multi layered interfaces in the physical world. Ondřej has created a paper cutout for this sketches that allows him to reuse parts of his interface by means of overlapping screens. Real world masters? :) In his own words:

As a part of a school project of mine I created such prototype. Having considered all the problems I’m going to resolve I’ve made a list of proper goals:

1. I have to create a paper prototype of an audio/video manager app. I already have the creative brief and the technical brief.
2. 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.
3. 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 above.

1. A page = a screen. Using such solution provides you with a lot of space around every screen. Put down some thoughts, notes and explanations.
2. 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.
3. 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.
4. 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?

Credits: Ondřej Válka

Tags: annotation, prototype, sketch
Posted in Samples | 6 Comments »