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 24,000+ readers and get Baymard’s research articles by RSS feed or
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
Hi Jamie, thanks for the tips. My UI sketching techniques could certainly use a little improvement.
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.
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?
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 firstname.lastname@example.org