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!

January 3rd, 2010

Visibility of system status

Filed under: Essays — Ondřej Válka @ 10:52

Original post Everyday Usability Heuristics: Visibility Of System Status was published at Usability post. Thanks Dmitry!

Two weeks ago, I was watching my 45-year old father browsing the Internet. Every time I watch him I learn a lesson in usability. I’m sure you know with situations like this one – valuable opportunities to learn from the ordinary users for whom we design.

As he is using Windows XP the very first thing he did was that he ran Firefox clicking an icon on the desktop. No response. Nothing happened so after a few seconds he clicked the icon one more time. With his eyes focused on the Firefox icon he clicked the icon again. Everything he got was three Firefox windows opened. Sounds familiar?

The moment I saw this process I realized how applications are launched at my Mac OS X. Being clicked, the Firefox icon starts jumping in the dock. It’s not just a fancy effect, but a really useful feature. Clicking an icon user gets apparent immediate response. Moreover realize what you do: anytime you want to click an element, your eyes sticks to it. You are not watching the pointer, you just use a mouse and click. The same did my father.

Mac OS X Dock

Is a small flickering sand-glass beside the pointer more apparent than a big jumping Firefox icon that user’s eyes are sticked to? Keep this in mind and try to design thoughtful user interfaces. It’s not just about applying the Nielsen’s rules.

Of course it doesn’t matter what, but it also matters how.

January 2nd, 2010

Web site design process techniques

Filed under: Essays — Ondřej Válka @ 22:10

Working on my bachelor thesis—redesign of a community Web site signaly.cz—I have collected a bunch of methods and techniques I should learn, apply and finally mention in my work. Here are some “mind maps” describing what every Web designer should know.

Be aware of the fact, that this is just a list of Web site design process techniques. It could serve as a springboard for intermediate Web site designers. Try to:

  • Read it.
  • Check the Resources section in the end of the article.
  • Study all the books and articles—I drew on just these resources.

Step 1: Briefs

Get a client brief from you business partner. Than form a creative brief and technical brief. Finally, try to figure out idea brief(s).


Step 2: Research

Here is a huddle of methods that can be performed during the design part of process.

Reserarch methods and techniques

Step 3: Ideas

Organize a strictly moderated idea session or try one of these utilities.

Ideas part utilities

Step 4: Deliverables

Having collected all the necessary pieces of information, start creating deliverables—documents, that are useful in some way and describe the final design process product.



This utilities could be applied in any part of the design process. Try to figure out, if they are useful to you.

Web site design process tools


All the books and articles mentioned down there are stuffed with knowledge, describe techniques mentioned above and will help you with understanding them.