Product Design Lessons

Interface Design Sketching  |   Lesson #61

Keep on the Same Page With a Sketching Language

Learn to keep standards in your lo-fi and opportunity sketches for faster, more efficient communication.

That we love sketching is no secret. Sketching is a great way to work through ideas before committing them to code, or even wireframes. They help us think through problems by putting them on paper. They're great for sharing ideas. That last part is crucial. ZURB designers don't just sketch — we communicate. To explain ideas at a glance, we sketch the same familiar elements. Here's how to make and use a sketching language.

Why make a language?

We've found that clients "get" our style after looking at a few ideas. After that they don't have to guess what certain elements are. We can iterate over ideas quickly when we don't have to explain "this is text" and "this is a graphic."

Making your own language

It doesn't take much. Sketching isn't about the aesthetics, but the ideas on a website or app. Just think about common elements in HTML. For example:

  • Text — headings, paragraphs and lists
  • Graphics and photos
  • Navigation links and bars
  • Form elements like input fields, select lists, buttons, radio buttons, checkboxes

That's the minimum you need to sketch out on a page. Getting into more specific details — like text and imagery — should come later in the process, when you've settled on what each page is about.

Choose your tools

Pens or markers? iPad or paper? Each has its advantages.

  • Sharpies: Fat markers prevents fine detail — which keeps us focused on the big picture.
  • iPad sketches: Digital files are sharable, undo-able, easy to duplicate. That makes it work well with some people's workflow, but everyone's different.
  • Paper sketches: Quick and more intuitive than tablet apps (at least for today), paper offers fewer chances to "fix" things when you're brainstorming. There's no temptation to undo because, frankly, there's no undo.

Try them all for a week to see what works best for you. Give it time, and keep sketching until your work carries a consistent lingo that others recognize at a glance.

Here's how we communicate on paper

Our methods are well-defined. For a start, we use Sharpies because they discourage detail when we want to focus on ideas. Also, everyone here knows the basic ZURB sketching language because we use it so often. It looks like this:

Sample sketch with standard elements

About the instructor


Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.