Example of a good user interface sketch.
When sketching a new user interface there’s a few things to watch out for.
Here’s 4 common pitfalls:
People have a tendency to try and squeeze every little detail and feature into their sketch. This is not the purpose of your sketch and will distract you from getting the big things right. So focus on the big picture, the layout of things, instead of drawing every little detail.
When you start writing actual text, you’ll easily get stuck thinking about the wording or making elements such as buttons much larger than they will actually be, since it’s impossible to write as tiny as most text is on screens. In general, you should refrain from writing any text in your sketch.
Should the sidebar be 35% or 40% of the total width? The important thing here is not to get all the proportions absolutely perfect but rather that you show the relationship between the different elements on the page and the intention of sizes.
Since everything in a sketch typically consist of boxes and lines, visually dominant elements like pictures are easily misrepresented. Images in sketches usually aren’t nearly as visually dominant as they are in the final product because they’re just a simple box, whereas in the final product they are suddenly a block of complex colors and compositions.
Give all visual elements, such as pictures, a big black shadow so their visual dominance is properly represented in your sketch too.
Post a comment with your personal UI sketching pitfalls or any UI sketching tips.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or e-mail:
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Get full access to Baymard’s 78,000+ hours of research and empower your UX team and decisions.
Get Baymard to audit your site’s UX performance, compare it to competitors, and identify 40 areas of improvements.
Jack M.June 29, 2010
Hi Jamie, thanks for the tips. My UI sketching techniques could certainly use a little improvement.
Jack
Jamie, Baymard InstituteJuly 5, 2010
Hello Jack,
Glad to hear that. I’m thinking about writing a few follow-up posts that go into detail about the different UI sketching techniques and pitfalls.
Kris GösserNovember 22, 2011
In regard to #2, what do you recommend for labeling or identifying certain elements when sketching? For example, this button is the “submit” button while this one is the “cancel and go back” button. I tend to shy away from iconography and actual text, as you say, but I do find value in using some text to identify the action or role of an object in the sketch. Do you find this ok, or do you recommend other techniques, such as different colors and a legend?