The importance of sketching in web design

Is that doodle in the corner of your notebook the beginning of a great web design? It could be.

Sketching is an important and often overlooked gem of the UI design process (even for non-designers). Starting your designs offline and with pen and paper can help teams better visualize the project’s potential early in the process. At this stage, it’s often hard to articulate what your mind is conjuring up … and the good news is that you don’t have to be an artist to brain vomit an idea onto paper. All you need is an idea and a degree of comfort with the concept.

Sketch to convey ideas

A sketch should be one of the initial steps in the brainstorming process of any web design project. Visualizing a project together from the start can help your team get a clear idea of what might happen with a design. Sketching can be used as the design progresses to help clarify ideas, provide meaningful feedback and keep the project moving forward.

Still not sure where to start? Use sketches or doodles to:

• Create wireframes, or simple layout ideas that help you see where major components in the website design will live (full drawn sketch, often created by someone on the design team).
• Mark edits or changes in different design concepts or versions (combination of boxes and text markings).
  Show actions or movement; draw the motion the design should create (these sketches might look like flowcharts).
• Create notes or reminders to help you recall information about design discussions (draw them in advance to talk about with the design team or make changes and give them to the designer as a reminder of the conversation).
• Communicate those hard-to-articulate and crazy ideas (communication can get lost in an email and even in normal discussion but a sketch can help everyone quickly see a suggestion).

Sketch to jumpstart creativity

Many great designs originated from accidents while playing around in a notebook.

Whether or not you’re planning to do the design work, sketching will almost always jumpstart your creativity and help you better imagine possibilities for a number of different types of projects. Just like receiving your best ah-ha moments in the shower, allowing yourself to doodle freely could help you solve an obscure problem.

The adult coloring book craze is just one example of how and why this type of activity is important. Coloring and doodling allows you to free your thought process by pushing ideas onto paper. By focusing on the movement of the pen on paper, you can  relax and let ideas flow.

Participating in a creative activity also stimulates different parts of the brain and can help you become a better problem solver throughout life. Just a few minutes at a time can help you refresh, recharge and become more productive  at work.

Sketch to refine ideas

Sketching helps you shape ideas quickly. There’s no software to install or learn; just a pencil and a sheet of paper.

A sketching exercise can be a good way to help get multiple thoughts down at one time so that everyone on the project can get their ideas out in the open.

Sketching can also foster rapid concept development and change. The team can map out ideas on paper and allow designers and developers to go back to the code and figure out how to turn those ideas into viable solutions. This is much quicker — and less frustrating for the rest of the team — than perching over one person’s computer and watching as incremental changes are made.

At the end of the day, sketching can save a lot of time. There aren’t any barriers to sketching as long as you have something to write with and something to write on. The process is quick. The results don’t have to be masterpieces — although some sketchbooks look more like art than random doodles and lines. And it embodies one of the tenets of good design: Show, don’t tell.

Sketches don’t have to be ‘good’ … in fact they shouldn’t be

It is worth repeating: Sketches don’t have to be good. Often they are just blobs, doodles or squiggles.

Sketching is for extracting creativity. Pull out your pencil to explore ideas and work out thoughts that make sense in your head but are hard to articulate. In sketching, remember the journey is the goal, unlike in art, where it’s the first step in a longer process that becomes more refined into a final piece.

Sketches can contain marks or text or instructions. Arrows, circles and underlines are common notations that often appear in design markups and become an unofficial language for the team.

When one person starts sketching it often catches on. Because of the speed and ease of communication, more members of the team often start sketching … and just like that, you’ve created a culture where sketching is an important part of the design process.

Sketching levels the playing field between designers and the rest of the team. Anyone involved with a project can express ideas visually and help shape the look of a project.

The value of this concept is far-reaching. With so many different people involved in website design projects — designers, developers, copywriters or storytellers — sketching allows everyone to participate in each step of a project, from the early stage all the way through revisions.

Bonus

Although a pencil and paper is all you need to get you started, here are a few UI notepads to give you more structure for your sketches:

• UI Stencils
• App Sketchbook
• DotGrid
• Back Pocket