Learn

During the ideation process, it can be helpful to create visual representations of our ideas. One go-to method for creating these visuals is to sketch them.

Like brainstorming, sketching is a general method that is used in many contexts — you might have applied it in other projects. In design, sketching is the process of quickly drafting a rough visual that serves as a thinking or communication tool.

We can think of sketching as a go-to method because it doesn’t require significant time or resources. Additionally, there are no rules about the format or content of a sketch. The goal is to generate an image that supports our thinking, such as clarifying a concept, mapping a process, or documenting a thought.

Let’s return to our example problem statement about adults who want to find people with shared hobbies. After brainstorming, let’s say that one solution felt especially intriguing: an app that connects users to events based on their hobbies.

At this point, we could elaborate on the idea:

With the hobby app, the user can create a profile that lists their hobbies. They can search for groups related to their hobbies. By joining a hobby group, the user gains access to events and community resources. The user can sign up to receive notifications about events they are interested in.

To support our thinking process, we could also create some sketches:

A sketch depicting three pages of a mobile app. Features of the app are explained in the margins. Annotations have been added to describe certain elements.

These sketches are pretty vague! However, even a rough visual can be a useful starting point. As we contemplate an idea or communicate with a team, sketches can help us move from ambiguity to clarity.

Sketch vs. Wireframe

At a glance, a sketch might resemble a low-fidelity wireframe. After all, both sketches and could depict a digital interface.

A notable difference between sketches and wireframes is how we approach them. We should spend less time and effort on sketches than wireframes. When sketching, we establish a general picture without including too much detail. Sketches are always low-fidelity whereas wireframes can be rendered in various fidelities. As long as we get the idea across, we have created a successful sketch!

While wireframes are usually created in the “prototyping” stage, we can sketch any time we want to explore an idea. Because we can sketch when the need arises, there’s no limit to what we might sketch. In the ideation stage, we might sketch a digital interface, product feature, storyboard, diagrams, or charts. By contrast, wireframes always depict digital interfaces.

When and How to Sketch

Like brainstorming, sketching is not confined to a specific stage in the design thinking process. We can sketch whenever it aids our work. That being said, sketching can be especially useful during the “ideate” stage.

In some cases, we may sketch as a way to generate new ideas. Some thoughts come to us as images rather than words! Alternatively, after brainstorming in a written or verbal format, we may expand on these ideas by sketching them. Translating an idea into a visual format guides us to think about the idea more concretely. As a result, sketching can reveal the possibilities and challenges that our ideas entail.

When we decide what to sketch, we should create images that succinctly convey our ideas. At the ideation stage, we could start to sketch the digital interface or product features. For example, we could imagine possible design elements and general layouts for pages of a mobile app:

Four sketches of the digital interface of a mobile app. Each sketch shows the general layout of elements on a page of the app.

Alternatively, our sketch could resemble a storyboard. With a storyboard-style sketch, we depict how our design fits into the user’s life. By referring to details from user research, we can imagine how the user might move through a scenario that involves our design. Sketching factors beyond the screen (like the user’s environment, life events, routines, and emotions) can reveal important context that shapes our design.

For example, this storyboard-style sketch depicts how a new user might interact with the hobby app. First, the user is painting by themselves and feeling lonely. The desire to befriend other painters prompts the user to create a profile in the hobby app. Then, they search for relevant groups and find one called Paint Pals. After receiving an alert about a Paint Pals event, the user is shown happily painting with the group.

A storyboard-style sketch that shows how one user becomes motivated to try an app that connects them with local people who share their love of painting.

As far as how to sketch, the most important advice is to move quickly and avoid minute details. Our sketches are flexible outputs that may be changed, combined, or scrapped, so we don’t want to invest too much time drawing out all the complexities. Instead, we should focus on capturing the big picture.

Because sketches do not include much detail, we can add context with annotations. We can use pen and paper or digital tools, but it can be easier to render low-fidelity sketches with pen and paper. Experiment with both methods and use the one that suits your style.

And lastly, remember that you will get better at sketching with practice! Strengthening our sketching skills does not mean we become award-winning visual artists. Rather, we become adept at leveraging sketches to support our design process.

Instructions

Setup: If it isn’t already embedded, follow the instructions in the website to the right to embed the Miro board.

Task: Review your favorite ideas from the Four Categories chart. Pick one idea (or more!) to sketch. You can sketch the digital interface, specific features, or something that resembles a storyboard.

Miro frame: Sketch

  1. Decide which idea you want to sketch. (Refer to your ideas from the Four Categories chart).
  2. Write this idea on a sticky note. This will keep you focused, so you know what to sketch!
  3. Decide if you will sketch on paper or in Miro. For paper sketches, gather paper and sketching utensils. You can work from a blank page, or fold the page into sections to create some structure. For digital sketches, locate the toolbar on the left side of the Miro board, and test out tools like the pen, shapes, arrow, and text.
  4. Set a timer for 10 or 15 minutes.
  5. Sketch!
  6. Stop when the timer buzzes. Pause to review your work or keep sketching if you feel inspired.
  7. Document your sketches. Add the date, labels, or any annotations that may help you make sense of the sketches later on.
  8. If you sketched on paper, you have the option to take a photo of your sketches and upload it to the Miro frame. That way, all of your work is in one place.
  9. Optional: Pick a different idea and make more sketches.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?