1. Draw a squiggly line for the label.

We assume all fields will have a label for consistency and accessibility. This isn’t the time to decide how labels should be formatted or placed — we just need to mark that each input field will have a label, and move on.

2. Draw a slim rectangle for an input.

Do the same for text areas, but make their rectangles larger.

3. Shade the left and top edges.

We use gray Copic shaders and sometimes yellow highlighters to indicate special functionality or calls to action. Otherwise we avoid colors. Aesthetics come later. We often darken the right and bottom edges of elements as well — helps distinguish form elements from other blocks on a page.

Other elements, like radio buttons and select lists, follow a similar approach.

Deceptively Simple

We use a few techniques to make this more than just lines on a page.

• Shading inside edges is more than a bevel effect. They differentiate form elements from other elements and regions on the page.
• Labels begin with a squiggle to make them text lines, not just lines.
• Sharpies prevent second-guessing. Their bold lines are easy to read when reviewing ideas in groups — and they look decisive. Serious. Professional. Sketches aren’t a bunch of casual doodles. This is your project. Take your form sketches as seriously as you do the form itself.

---