Sketching

Q: Do you need to know how to draw to do sketching?

No, far from it. Sketching is similar to rough drawing, and what matters is not aesthetics but the clarity of the idea being communicated. We use basic shapes (squares for images, lines for text), which are more than enough to represent a readable interface. A successful sketch is a rough draft that gets the message across so it can be discussed and decisions can be made.

Q: What is the difference between a sketch and a wireframe?

It is much the same as the difference between a wireframe and a high-fidelity mockup. Sketches are often drawn freehand and on paper. They are used to rough out the main structural elements and support discussion within a project team. A wireframe, meanwhile, is created in software and produces a cleaner, more precise result.

Q: How do you use sketching in a co-design workshop?

Co-design provides a mindset for designing a response to a problem. Sketching is one of the many formats in the co-design toolbox. We use sketching to let all participants shape their ideas and explain them more easily, even if they only use squares and arrows.

Q: What are some examples of sketching methods?

Among the ones we usually work with, there is Crazy 8, which consists of proposing variations on a solution in 8 minutes. We rely on the sketching produced, individually or in a small group, before it is presented to the others to get constructive feedback. It is also a good way for participants who are less comfortable speaking to express their ideas. We can also have two groups work on an interface. After a set amount of time, they swap sheets and each group must respond to and build on the other group’s idea.

Design deliverable

Sketching interface concepts on paper (sketching)

Sketching is the practice of creating user interfaces as drawings, most often freehand. The designer draws the structure of the screens and shapes their design ideas while accounting for user needs and project goals. These sketches then act as a collaborative working base with the project team, and let you validate the content before moving on to wireframes. It is a real time-saver in an iterative workflow, letting you share the first directions quickly. Quantity takes priority over quality here.

What is sketching for?

Saving time: shaping the first directions
Supporting iteration: the ideal format for changing and reworking concepts at low cost
Stepping away from constraints: forgetting the technical side and staying focused on ideas
Prioritising and validating the content quickly
Engagement: supporting an overall understanding of the project
Saving money: this is the time to iterate, exchange and suggest
Testing quickly: a useful base for gathering initial feedback

Why use sketching?

Putting your ideas straight onto paper to make them concrete
Sketching out an overview of the user journey
Stepping back and thinking about interfaces differently
Acting as a basis for thinking and supporting iterative work
Adjusting and reworking the concepts at low cost

In individual ideation sketching, the designer works alone to put ideas directly onto paper or sketch an overview of the user journey. It is a good way to step back and picture the whole.

A co-sketching workshop is a collaborative approach within co-design. Sketching is used in workshops to let non-designers contribute through simple drawings, an excellent way to give workshop participants a voice. You can start from a blank sheet of paper or draw ideas over an initial interface base.

Structuring the sketches

Define the overall interface structure with a black marker. For details, switch to a thinner pen, and underline the important elements (buttons, features and so on) with a coloured marker or a highlighter.

Spelling out ideas

Use the areas outside the screen to describe certain components, pointing to them with arrows. For a journey, explain the links between the steps, the actions to take, the products and services affected, and even how users feel.

Detailing interactions

To complete your sketches, explain possible interactions by drawing the step before and/or after, such as a popup opening when you click a button.

Do you need to know how to draw to do sketching?

What is the difference between a sketch and a wireframe?

How do you use sketching in a co-design workshop?

What are some examples of sketching methods?

Related methods

Wireframe

A wireframe is a mockup describing the zones and essential components an interface should contain.

Storyboard

Just as in film or animation, the storyboard gives designers an overview of the process and surfaces potential problems or areas for improvement.

Prototype

More or less advanced animation of the screens to present a dynamic journey to users and gather feedback.

Design sprint

The design sprint is a format, not a method, that condenses the steps from design thinking into 5 days to solve a given problem with a group.

Co-design

Drawing on collective intelligence, these workshops help align stakeholders and surface solutions with the project team and/or the end users.

Zoning

Zoning is the visual representation of an interface through the placement of its simple content blocks, without detail: no text, no images.

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk