Tips, tricks, workflow, and how not to get bogged down by it all.

OneNote for Interaction Designers, Part 2: Nuts and Bolts

In a prior post I explained how Cooper uses OneNote as a tool for Design Meetings. In this post I’m going to presume you’re a designer and eager to get a quick primer to the tool. Then I’ll share some best practices we’ve developed at Cooper.

A quick primer: Five tools

OneNote is a rich program, meant for a number of different scenarios. Here I’m only going to introduce the most basic concepts you need to get going on using OneNote as a quick design sketching tool.

1. The infinite canvas

You write on a canvas that is for all practical purposes, infinite. You can simply use the touch screen to slide to empty paper. That canvas can have a grid-paper like background, or it can be white. For most of the time I leave that grid on, to help keep lines straight and aesthetically pleasing.

2. Drawing tools

There are drawing tools, for straight lines, squares, perfect circles, etc., but they’re too “fussy” for this purpose. We want speed, so I discourage their use. Instead, designers get familiar with the pen tools, which let you select between ball-point pen, felt-tip pens, and highlighters. It’s also important to get to know the color and line-weight selectors, but I’d say once you know those things, you’re good to go.

3. Selection tools

To modify your sketches, you need to become fast with selection tools. There is a selection tool, but if you have a stylus with a button, when you’re in the pen tool you can just hold that button down and select stuff. It’s much, much faster and a great habit to get into for speed. The math for selection is pretty complicated, and I’ve never seen it be super fast even on the most powerful slates we have in the office, but with a little practice and a lot of patience you can master this.

4. Contextual menu

This button-down mode is where you can also summon a contextual menu for copying, pasting, and scaling drawings, which is much faster in pen mode than looking around for the tool buttons.

5. Snag-It

Often if we’re working within a framework, we’ll want to define changes across similar backgrounds. You can just cut-and-paste lines for that, but eventually it’ll start to slow down the page and make selecting particular lines difficult. Instead, we often screen grab the background drawing, and copy and paste that to draw on top of.

Additionally, OneNote doesn’t have a great built-in way to create a solid white rectangle for pop-up windows and menus, etc., so having a graphic allows us to easily occlude stuff that’s “underneath.” To make these graphics, having a super-simple, stylus-aware tool lets us do that, and Snag-It fits the bill nicely for us.

Getting to know these five basic tools in OneNote will get you a long way to becoming a proficient OneNote user.

Best practices for your drawings

Though each designer has his or her own style and each sketch has its own needs, some best practices have evolved by watching what works. Firstly this style is about the principles that guide the drawings.

[FYI, the following text is the voiceover from the above video, included to make the page easier for search engines and people who'd rather read.]

  • Always contextualize drawings in maps or under questions
  • Connect drawings with arrows so it’s clear how they’re related
  • Draw important persona thoughts or moments
  • Document the team’s thinking in the margins
  • Don’t erase anything, just cross it out (to capture what was rejected and why)

Secondly it’s about sticking to a color code so it’s easy to visually scan a page with your eyes for particular kinds of content.

  • We use black lines for most of what’s on a screen.
  • Gray lines are for less-important things on the screen, like “text goes here”
  • Blue lines are for user input
  • The gray highlighter is useful for all sorts of things, like delineating menus or showing floating palettes and windows
  • The yellow highlighter is useful for showing a highlighted state
  • Red is reserved for “meta-content”, that is, anything that isn’t on the screen or in the world: designer thoughts, persona thoughts, arrows that connect drawings, and cross-outs.
  • Green lines are for client comments during review

And finally it’s about aesthetics that make them pleasant enough to be considered part of our professional work.

  • Straight-enough lines: They don’t need to be perfect, but work at getting them straighter than curvier
  • Avoid open corners: It’s better to have lines cross than to weigh down the eye with the opening
  • Large linesto define the outside of the screen
  • Thin linesto describe things on the screen
  • Thick red lines to connect screens, starting at the point of interaction

OneNote is a complex tool, and there’s much more to it than these five tools and sticking to a style, but this should get you started if you’re eager to start using it for wireframe and framework drawings today. For the last in this short series, I’m going to discuss the ways we use OneNote in research, in presentations, and some unfortunate things you have to overcome in order to make it work really smoothly for interaction design.

Join the Conversation