Visual Notation for UI Design

Kelly Dern
Sep 6, 2017 · 6 min read

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

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

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

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

Life.io 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

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

Illustrations for Life.io using ScannerPro
Logo concepts for a client project using ScannerPro

Improving Your Sketching

Practice daily

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

Take some classes

Some of my favorite classes include:

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

Kelly Dern

Written by

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator