White Board Modeling (and User Interface Mock-ups)

Posted on Thursday 17 May 2007

WhiteboardRecently, Tomi Malia blogged about user interfaces and how to use hand-drawn paper mock-ups as a tool for quickly developing, iterating, and proving user interface concepts before committing them to code. This is a great technique and I highly advocate the practice. But, my personal favorite is a whiteboard with dry-erase markers.

Dry-Erase MarkersA white board provides a huge drawing canvas and is great for doing team-based user interface brainstorming. And, when your done with a concept, you can snap a digital photo and save it to your project’s meeting notes folder (and commit it to your subversion repository, of course).

You can go one step further and use whiteboard photo software to clean up your digital photo, removing background, distortion, and glare as well as reducing image file size (I’ve tried it and it works great!).

with whiteboard software you can quickly turn this…


into this…


coffeeOf course, paper mock-ups are still easier for those times when you are sitting in your favorite cafe, having an espresso (or your coffee drink of choice), as we so often like to do. ;)

4 Comments for 'White Board Modeling (and User Interface Mock-ups)'

    May 17, 2007 | 10:07 am

    Jim, nice article. White boards are excellent for team work design process. I also notice you have an excellent coffee taste ;)

    May 17, 2007 | 2:40 pm

    Great article… heck, great blog in general.

    I typically use the paper method. I am a lone developer and whiteboarding, as Tomi pointed out, is excellent for teams. I will keep this in mind when I convince my manager that we need more help.

    May 17, 2007 | 8:16 pm

    Tomi and Matt: I’m really lucky that I get to do a lot of my design work with a great team. And, the white board has become a valued member :-)

    Tomi: I haven’t tried that coffee, but I hear that it is very good ;)

    Ton Plomp
    May 21, 2007 | 12:37 pm

    Nice ideas (I like the photo enhancement tool)
    Our new office has floor to top glass walls (3 meters or something), and is great for Instant Messaging (and a more permanent memory when using the wrong markers). I never thought about creating a GUI that way, and I think the photo will fail.
    Only need to remember to clean it when we get company.


Leave a comment



Information for comment users
Line and paragraph breaks are implemented automatically. Your e-mail address is never displayed. Please consider what you're posting.

Use the buttons below to customise your comment.

RSS feed for comments on this post |


Bad Behavior has blocked 782 access attempts in the last 7 days.