Working the Canvas, Reworking our Process

When I was in art school, one of the most important ideas I learned was called “working the canvas.” It meant never spending too much time on one area, but continually moving from one part to the next, so you are slowly building up a complete picture. You can see it in the movie below taken from the nifty ipad app Brushes, that lets you make a film of your painting creation process.




Untitled When you do not work the canvas, you make mistakes. If you draw a person, you might start with the head and face, then add a body, and legs… but that leads to mistakes, not leaving room for their feet (though I knew a girl who did that because she didn’t like drawing feet.)

In the case of Amelie’s picture of the prince, she draws one foot, then the next, leaving them uneven. If she had lightly laid out proportion, then filled in details, she would have gotten more believable results.*


So here I sketch an idea– Amelie’s prince handing a rose to a princess. I start with the head, put in his collar and torso, then try to draw arms… and not only do I not have room for his feet, I don’t have room for the princess (and what is he doing with his left hand?)

Untitled

Here I sketch out everything I want in the picture, moving around from place to place lightly– and I can focus on things like body language, proportion, etc. I can try things like different wing shapes. I have much more control of the final picture.

Untitled

BTW, these were both five-minute sketches, for illustration only. But I think that even with a quick sketch that you can see that you get much of an effective image if you work the whole picture instead of drawing it piece by piece. Working the canvas becomes even more important with complicated pictures with multiple characters, backgrounds, props, etc. Everything must fit together.

Often when we teach web design, we break things down to a process: Step A, Step B, Step C. First you make the site map, then the wireframes, then the visual design.

But the best design teams really work the canvas. Most game designers I’ve watched do this; they are working on character sketches the same time they are working out the core loop the same time they are laying out the narratives or themes.

Let’s pretend we are designing a game. Let’s say we have a character– a story-teller– and a vague notion of a theme (middle ages) and maybe Rock/Paper/Scissors as a potential core loop. Then as we sketch out some characters (a bard, a priest and a fair maiden walk into a bar), we then narrow the theme to Canterbury tales. Then it becomes a Rock/Paper/Scissors game with cards you throw down to make stories. But not maybe the core loop doesn’t make as much sense because stories are subjectively judged: does tragedy beats farce but farce beats romance but romance beat farce? And is it fun?

The drawings suggest new mechanics, and those lead to economies which demand new characters… moreover, you may find yourself erasing big sections that don’t fit into the canvas as a whole, and cutting them. Engineering time is less precious than making the game fun. You want to make your game fit together in a way that inconsistencies don’t break the magic of the illusion.

So let’s say you are making a website, and the researcher does their job, and hands to the IA, who makes all the wireframes and hands to the visual designer, and it blows. By blows I mean it sucks in testing, or it sucks for the CEO. Worse, let’s say the team hated it and showed it to the CEO anyway because they had a project manager breathing down their neck.

Now you need to go back and redo all of it.

Now let’s imagine the designer doing some mood boards at the same time the researcher does some collage with potential users, while the IA does some participatory design sessions using feature modules with the users too… and it seems some colors and metaphors and features make sense together for users.

What if next the IA does a quick light sketch– not a wireframe in visio, but a sketch. Then the designer moves some elements around a bit in the sketch and passes it back. Then and the IA messes with it some more and they agree that it feels about right. Then they start to fill in the colors and details, just as you do as you paint.

Imagine when you talk to the CEO, you have a unified story with quotes from users supporting your decision.

Another potential applications; design your privacy settings and profiles the same time you design the homepage and key object page… sketch them all out, then tighten and finalize all basic layouts, then move from screen to screen as you add color and language. Never work on the same page more than one day. Try it! You might get a coherent system.

Just spitballing, you know. A five minute sketch of a process you might enjoy.

Working the Canvas is not intrinsic to game design, nor alien to web design (I know some great web design teams who “work the canvas.”) But I’ve seen way too many folks drunk on process inventing a design waterfall… and I thought I’d write this up to remind you that you can do something different.

* It’s actually a bad example for me to choose in some ways, as it’s an excellent drawing for a six year old. She got the whole prince on the page, and the proportions are right. Elves are typically 3-5 heads high, similar to children, while adults are 7 heads high, and superheros are nine heads high. This is a decent explanation: Measuring Human Proportion. These are the kinds of discussions we have while lying on the living room floor drawing.
P.S. He’s not wearing a dress, it’s a long t-shirt.

2 Comments

Add Yours
  1. 1
    Austin Govella

    There’s this whole “big upfront design” strawman agilstas use to scare designers into falling in line. The problem in that discussion has always been that they’re right: big upfront design is bad, precisely for the reasons you outline above.

    But the reason big upfront design is a strawman argument is that most designers don’t do big upfront design. They sketch in just enough to get the proportions right. “Working the canvas” is a great metaphor for the kind of upfront design you need because it assumes you go back later to iterate, over and over again.

    (Thanks for the video. The kiddo and I watched it, mesmerized.)

Comments are closed.