Sketching as Critical Thinking

Save time and make better decisions with pencil and paper

January 5, 2018 • 4 min read

Front end designers and developers can all relate with the excitement that comes when hearing a pitch or starting a new project. The desire to jump right in, download the latest versions of our favorite frameworks, and start on a mockup or prototype. The urge to begin in the browser or in our favorite design app.

But there’s an advantage to stepping back, taking a deep breath, and thinking critically before offering up our precious time. I think all of us front end-ers would benefit by stripping our toolset down to pencil and paper when working on a new idea. This thought is by no means a new or novel concept — if anything it is a reminder to get the big ideas right before diving into the details.

Drawing out an interface before “designing” it in an app allows us to:

  • quickly visualize new ideas: two common examples: 1) we can compare how a range of layouts might fit our content; 2) find a balance to the visual weight of a page by re-drawing components without the need to re-write style code
  • prioritize important elements: it’s so easy to spend our time and energy on something trivial like finding the right gradients for a low-traffic button while we ignore the readability of the header text that hooks a viewer into the page
  • be flexible: we can show the gist of a concept without the need to polish it with colors and transitions, or go detailed on an idea that needs fleshing out

These benefits don’t apply only to you, the designer or developer, but they extend to those you’re working with. Especially at the beginning stages, sketching can cut out unnecessary time spent polishing the parts of an idea that are often thrown out.

Let’s say we’re sitting down at the beginning of a project to start creating a webpage. Here’s a typical workflow we might go through:

  1. Design a polished, ready-for-the-client page in Sketch
  2. Make it interactive in Invision
  3. Review with the team/client and repeat steps 1-2, either building upon the work done, but often scrapping good portions of it
  4. Prototype in the browser

So much time is wasted in that first step because of a common but unspoken expectation on the designer to present a complete and shiny piece of work. However in step 3, discussion usually revolves around a few elements that really matter (e.g. layout), and less so on what took the bulk of time to make (e.g. elements that work only in the context of that layout).

If during the meeting, the layout is scrapped, the work that went into specific components of that layout is lost. And because steps 2 and 3 always follow the first, there’s a cascading effect of time lost when we value eye candy over critical thinking.

Front end-ers, good presentation of your design is not a polished mockup, it’s an ability to show the consideration behind your design decisions.

An improvement to the above workflow could look like this:

  1. Sketch out the possible variations of major sections and components on the page
  2. Review early and often with stakeholders to immediately cross out ideas that aren’t worth pursuing. Repeat steps 1 and 2, increasing in detail and toolset (including using Sketch or Invision) as the core ideas are formed and the page comes together
  3. Prototype in the browser

Sure, we don’t necessarily reduce the types of work we do, but we sure save a lot of time. Instead of wasting time polishing version 1, version 2, and version 3 of a design, we can iteratively work through simplified versions of ideas until we end up with that beautiful, final version.

You may need to adopt a hybrid of these approaches to fit the culture at your work. Just remember to use each front end tool for its intended purpose. Drawing out on paper is for working through ideas and getting early feedback on those ideas without the unnecessary cruft. Using a design app like Sketch is often better for getting into the details once the big ideas are sound. (Although using a tool you’re familiar with — like a design app — to play with styles, typefaces, shapes, etc. can be useful in experimenting to find a visual direction.)

Here’s a misconception: clients view sketches as unprofessional. In my experience, especially in the early stages of a project, showing sketches and drawings to clients actually elevates their view of your craftsmanship. It shows real thought behind your work and is in a form they can easily interact with.

Depending on the project and client, you may be getting paid to present fully polished designs even in the early stages of the process. That’s okay. You can still implement sketching and the quick, efficient discussions it allows for with your team.

We spend enough time in front of our screens. Sketching helps us to quickly visualize new ideas, prioritize the important elements, and be flexible. What if when starting new projects, we practiced picking up a pencil before opening up Sketch?