How to Draw a Wireframe (Even if You Can’t Draw)

Summary: Even people with limited drawing abilities can learn to sketch a wireframe if they learn a few common conventions used to represent various design elements.

Wireframes visualize a user path or flow, as well as page layouts, information hierarchy, and even interactions. Depending on their purpose, they can vary in fidelity — from quick sketches to detailed representations of the final design.

For people with limited or no drawing abilities, wireframing can be daunting. Elsewhere we shared ideas for helping stakeholders get comfortable with sketching. The general principles hold true for everyone: Messy is completely fine and expected (especially for low-fidelity wireframes). Use physical constraints to prevent obsessing over tiny aesthetic details:

There are some common components that are used in wireframes time and again. If you know how to sketch these basic pieces, you can focus on getting your idea right rather than on how to draw. Here is a step-by-step guide to get you sketching quickly.