It's just a sketch... Why only Sharpie?

Glad you asked! Sketching with pencils doesn’t promote creativity, it makes us cautious, we’re more likely to erase and try to make things perfect; pens aren't exempt either, there's too much opportunity to lose yourself in unnecessary details.

Are we doing hi-fi visuals at this point? The answer is “no”, we're at a low fidelity, so keep it simple! Sketches aren’t meant to be pretty. They’re a quick way to convey ideas, but at the same time its important to be consistent with your UI elements when putting them on paper. Today, we’re going to investigate how to keep consistent with some of the most used components you'll find in any UI, large, medium or small!

To follow along, you’ll need a Sharpie, a shader and a highlighter. We usually use a 40% “cool grey” shader and a Sharpie highlighter (avoid water based highlighters, they bleed).

Images:

First, draw a box, and then "x" out the box. This denotes an image. Afterwards take your shader and underline the right side as well as the bottom. This will make it stand out

Text Areas:

Draw a box, then put two dashes at an angle at the bottom right of it, then line the left and top insides with the shader. This gives the text area depth. The dashes represent where you'd be able to grab and resize it in the browser.

Text Fields:

Text fields are similar to text areas except they're confined to a single line of text, so they're drawn as a rectangle with the shader lining the top as well as the left inside of the box.

Text:

Text is fairly simple. A slight scribble can denote the start of a word, then if you add lines underneath it will show as a paragraph. The length and width is up to you!

Buttons:

Buttons start with actually writing the word for the call to action since then you have a better idea of how big to draw the rectangle after putting down the copy. Draw the rectangle around the text. After, you'll want to use the shader to outline the bottom as well as the right side of the rectangle. Since this signifies a distinct call to action, give it a little color with the highlighter.

Practice makes perfect...

Cliché, but true. When we sketch with a consistent style, it's easier to convey our ideas over series of sketches. Viewers don’t need to reassess the page in order to gain an understanding of what they're looking at anymore, which makes it a really great tool to make them not only look great, but also need a whole lot less explanation. Consistency is king!

---