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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Start Drawing: Techniques for Pencil Portraits
- Expressive Illustration: From Ideas to Execution
- Visual Thinking: Drawing Data to Communicate Ideas
*As always, I would love to hear any feedback or thoughts on improving quick sketching.
