Sketchboard before you wireframe

At Future of Web Design this week, Aarron Walter has been talking a lot about Sketchboarding. This is a process that Adaptive Path pioneered. In this post I’ll quickly explain the idea and how it will help you.

Photo of a sketchboard for Channel 4

Adaptive Path’s definition of Sketchboarding: “The sketchboard is a low-fi technique that makes it possible for designers to explore and evaluate a range of interaction concepts while involving both business and technology partners. Unlike the process that results from wireframe-based design, the sketchboard quickly performs iterations on many possible solutions and then singles out the best user experience to document and build upon.”

Sketchboarding allows you to think through larger UX concepts before committing to wireframes. This is important because it allows you to nail down what’s really important in your app before proceeding to the user interface.

How to get started

  1. Get out a big sheet of paper (2-3 meters) and stick it to the wall
  2. Use sticky notes to divide the sketchboard into broad topics like Design/User Personas or steps that your users will take (signup, log in, edit details, close account, etc).
  3. Use paper or the UX Sketchbook to start roughing out ideas or thoughts
  4. Stick them to the board
  5. Move things around

The best thing about Sketchboarding is that you can take it off the wall and carry it to another room or location. This means that you can formulate your ideas and then bring the sketchboard to your manager or client. It’s a mobile blackboard.

This short video will help explain the idea visually …

How are you all using Sketchboarding (or similar concepts) to explore the UX in your projects?

[Thanks for the photo b0xman]

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

22 comments on “Sketchboard before you wireframe

  1.  We sketchboard using a thick sharpie and these http://www.uxstickynotes.com/ . The detail is kept to a minimum – just enough fidelity to encourage discussion and encourage idea generation rather than firming up and tidying up of design.

  2.  We sketchboard using a thick sharpie and these http://www.uxstickynotes.com/ . The detail is kept to a minimum – just enough fidelity to encourage discussion and encourage idea generation rather than firming up and tidying up of design.

  3. Great post! Very valid points- “sketchboarding” really seems interesting.

  4. Great post! Very valid points- “sketchboarding” really seems interesting.

  5. Hey, I totally like the idea of sketchboarding. Especially in a project’s design phase there’s often the need to outline things quickly, so we used this paper wall many times!!
    One problem: It was difficult to reuse the contents after this phase (besides the sketches, there are important hints and comments, too). So the question was: How do I get this analog stuff into my project system?
    What we did was quitting our old jobs and founding a startup: http://conceptboard.com – now we try to provide a place for brainstorming, concepting and sketchboarding, which can be used as easily as the cool analog sketchboard. It’s a nice challenge ;)

  6. Hey, I totally like the idea of sketchboarding. Especially in a project’s design phase there’s often the need to outline things quickly, so we used this paper wall many times!!
    One problem: It was difficult to reuse the contents after this phase (besides the sketches, there are important hints and comments, too). So the question was: How do I get this analog stuff into my project system?
    What we did was quitting our old jobs and founding a startup: http://conceptboard.com – now we try to provide a place for brainstorming, concepting and sketchboarding, which can be used as easily as the cool analog sketchboard. It’s a nice challenge ;)

  7. “Sketchboarding” and wireframing are very valuable to us, having a bunch of developers and no dedicated graphic designers in our team. 

  8. “Sketchboarding” and wireframing are very valuable to us, having a bunch of developers and no dedicated graphic designers in our team. 

  9. Nice post, thanks for sharing your process!
    I’m gonna need more walls at my office now =)

  10. Using analog methods on a project start is totally worth extra effort (hypothetical but in most cases not real). Unless you’re great at sketching – paper or whiteboard have more visual restrictions and that’s the best thing that can meet designer. It lets you focus on the logic behind shiny layout. 

    Thinking about that we’ve created tool for paper prototyping completely made out of sticky notes. Easily operated generic elements let designers create and re-create design on the spot. You can check us on: http://www.uxpin.comPersonally, as a UX designer I’m trying to step even further and start design without even thinking about concrete user interface. What I’m thinking about than? I’m thinking about people who will use the design trying to figure out what they need (also diving deep into researches). 

  11. Using analog methods on a project start is totally worth extra effort (hypothetical but in most cases not real). Unless you’re great at sketching – paper or whiteboard have more visual restrictions and that’s the best thing that can meet designer. It lets you focus on the logic behind shiny layout. 

    Thinking about that we’ve created tool for paper prototyping completely made out of sticky notes. Easily operated generic elements let designers create and re-create design on the spot. You can check us on: http://www.uxpin.comPersonally, as a UX designer I’m trying to step even further and start design without even thinking about concrete user interface. What I’m thinking about than? I’m thinking about people who will use the design trying to figure out what they need (also diving deep into researches). 

  12. This is fantastic. Thank you fir the detailed video. I’m sure my partner and I will learn from it as we approach web projects.

  13. This is fantastic. Thank you fir the detailed video. I’m sure my partner and I will learn from it as we approach web projects.

  14. There are a bunch of new apps popping up for doing this digitally – I particularly liked http://corkboard.me — however there will always be the invaluable advantage of doing this person to person, though. The concepts/ideas/brainstorming will almost always generate better results. Great post.. Great practice.

  15. Cool article, we’ve been doing something like this but “unmovable” on out magnetic whiteboard. I like the idea of using paper and rolling it up. (and no chance the cleaner cleaning your board over the week end LOL)