Visual Notation for UI Design

Sweat the small stuff, but don’t think of your sketches as precious

Visual notation is a big part of my day as a Designer. I carry a sketchbook with me everywhere (cheesy, I know, but I draw more when I have access to good paper) and am constantly drawing rough ideas for projects or side hustles. Sketching helps me quickly think through ideas and solve problems without commitment. Some may call this process “low-fidelity designs” but I find that it’s a more fluid and non-linear way of processing information. And, as kinaesthetic learner, I can more easily process and retain information as I’m uncovering solutions.

I like to encourage others around me to draw too and believe that everyone has the ability and creative ownership to illustrate their thoughts. Whenever I hear someone say, “Oh, I can’t draw” I want them to stop there and think back to when they were in elementary school when kids were encouraged to draw everyday. It’s a very natural and freeing method to release ideas and everyone has the ability and capacity to do it.

Everyone Can Draw

I’m a big believer in the 100,000 hours concept that you can become an expert in anything if you put in the time. For this reason, I practice sketching everyday and I encourage my clients, coworkers or students to draw as well. I think this approach is especially important if it seems that a coworker or client has a specific idea for a problem. When a client starts describing a path for a problem, using specific and thoughtful details, I always ask, “Could you sketch that for me?” because their creative expression will always be infinitely better than my interpretation of their idea.

Designers don’t own sketching, and it shouldn’t always be in their domain.
You can see I’m a little obsessed. Collection of sketchbook from the past ~1.5 years

Over the past several years, I’ve taught classes and workshops to people of all ages and drawing abilities. By encouraging everyone to put pen to paper, we can increase the level of engagement and ownership of projects.

(From left): Sketch from client workshop, sketch from client workshop, sketches by my Girls Who Code students

Sketching Tools

I use Leuchtturn dotted notebooks religiously to help keep my line work organized and (somewhat) consistent (see my recent collection above). I also use Dot Grid books if I know I’m going through a lot of sketches or need to dedicate an entire notebook to a project. For pencils and pens, I tend to geek out a little bit. My favorites are Pentel or Staedtler drafting pencils. I use 0.5mm lead and whatever eraser I have to clean up the lines. To add visual interest, I use Copic Markers which unfortunately can be very expensive and I could probably achieve the same effect with any colorful marker. Art stores (where I usually get my supplies) often have sales on these items.

However, one of my illustration teachers once said that you only need something that makes a mark in order to draw. Just use what works best for your process.

Pens I carry around in my purse

Digital Design Tools

Since I work on a remote team, quickly scanning and sending my designs is essential for rapid feedback. I also find that sharing sketches increases team collaboration and allows for more frequent and informal design critiques. I use Scanner Pro to quickly scan my sketches, which adds a lot of strength and contrast to the lines.

I’ve recently tried out InVision’s Freehand tool which I LOVE. The ability to quickly create low-fidelity designs to share with my team is invaluable.

Snapseed is another app I’ve been using to quickly edit and send sketches. I would recommend this app for more intricate sketches.

Freehand by InVision. Sketched in about 5 minues
Quick mobile sketches for a financial planning app

Active Listening

I was always the kid in class drawing on my notebook, a test, my hand, a friend — and getting in trouble for it. Now, I always draw during meetings and it helps me keep engaged, focused and helps contribute to the discussion if I can produce sketches quickly to discuss. mobile app annotation
Mobile dashboard concepts

Whenever I’m in a meeting, I sketch out the ideas that we’re discussing to refer to later when I work on that project.

These drawings are very rough and are intended to show the ideas rather than a formal execution. I’ll share them in a group chat afterwords or keep them stored in the project ticket to help inform a future thought process.

(Left) Collection of sketches for different types or projects. (Right) User journey thought process

Sketching Components instead of Features

The main reason I think of these sketches as visual notations instead of low-fidelity wireframing is that usually I think through components instead of a screen or feature.

I sketch my components in a similar way to creating a UI style guide. I try to exhaust the list of possible states and edge cases in the drawing phase, which allows me to speed up the wireframing and high-fidelity design stages since I’ve already taken detailed notes.

Graph components for a web app project

Organizing Sketches by Components

  • Disabled state
  • Active state
  • Selected state
  • Empty state
  • Longer content area
  • Larger numerical value
  • Error messages
  • Additional helper text or explanatory content
  • Primary and secondary colors

Focus on Line Work

Most of the time I keep my drawings to myself, but if I’m including them in a proposal or sharing with my team, I’ll clean up the line work and scan them with the ScannerPro app.

Illustrations for using ScannerPro
Logo concepts for a client project using ScannerPro

Improving Your Sketching

Practice daily

Draw a little bit everyday and see how you improve over time. If you’re not sure where to start, practice drawing straight lines and circles. I oftentimes warm up by sketching quick circles and straight lines. Rulers would obviously improve the design significantly, but unless I’m working on an illustration project for a client where perfectly perpendicular lines are necessary, I tend to freehand my sketches.

Left: doodling while on the phone; Right: line work

Take some classes

I find it’s helpful to take classes in anything that will improve your line work and help you think creatively about problems.

Some of my favorite classes include:

*As always, I would love to hear any feedback or thoughts on improving quick sketching.