• Client knows his users and business. Ask him about it.
• Client should like the web site.
• Confrontation to collaboration.
• Client searches for problems, designer finds the solutions.
• Do have a strong methodology.
• Include client early and often.
• Educate the client why do you work in such a way.

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!

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.

Step 3: Ideas

Organize a strictly moderated idea session or try one of these 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.

Tools

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

Resources

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

• Book Communicating Design: Developing Web Site Documentation for Design and Planning describes the deliverables.
• The Process Toolbox is a transcript of Simon Collison’s talk at @media 2009 conference.
• Mark Boulton’s book called A Practical Guide to Designing for the Web describes number of techniques mentioned.
• Interaction Design Association, a network dedicated interaction design.
• Getting Real, a book by 37signals focused on building Web applications.
• delicious.com/ondrejvalka/UI shelters bunch of another links related to the topic.