10 years of sketching

Last weekend, buried and long forgotten at the back of a very dusty drawer, I found a piece of my design history. A collection of sketches from my first job, including the sketches from the first project I ever worked on. I'm not sure how they've managed to survive this long (10 years seems like a long time for an ultimately highly disposable stack of layout paper) but looking through them I was struck by how much the way I work has changed since my first job. Every project still starts off with pen and paper, but there the similarity almost stops.

2000-2010 10 years of sketching

2000

Still wet behind the ears from graduating, my first web project was an auction site called Poultryfirst.com. (Please suspend your disbelief – these were the heady days of the dot com boom. Anything seemed possible, including selling industrial quantities of chicken over the internet. And if the name is still making you laugh, would it help if you knew that I still have a baseball hat with the Poultryfirst logo on the front and "Think Poultry, Act Globally" on the back?)

A way of exploring look and feel

Poultryfirst look and feel sketches

10 year's ago sketches were my go-to-guy for exploring look and feel. (If you look carefully you can see where I've written the letters L&F in the middle of the page.)

Of course, as a junior designer I didn't start from scratch. The project's art director gave me a half-finished (or perhaps half-started) design for the home page. The first page of sketches shows me trying to sweat some of the of the details of her design. However, the more that I worked on the design, the more problems I ran into. So I started experimenting with other ways of laying out the home page using shapes, colours and textures.

Looking back, I find it fascinating that I was trying to solve a content problem using visual design alone. Now I would approach the problem by trying to understand more about the content: how can the content inherently be used to divide the space, rather than trying to rely on presentation alone.

Reverse sketching

Client sketches

At the time I can remember how innovative it felt presenting sketches to the client. Looking back (and compared to how we work at Made by Many) it seems like a bit of a con. That half-started PSD from the art director? Early on in the project I had to print it out and then trace over it to present to the client as a 'work in progress'. The focus was entirely on the look and feel of the page, rather than how design, content and functionality came together into one service.

Using sketches to work through problems

Working through problems using sketches

Looking through the twelve pages of sketches I've held onto, you can almost smell the frustration of a very young designer trying to find solutions. I'd like to say that I don't repeatedly write and highlight the word CONFLICT on my sketch pads now, but I still use them to work through problems in the same way.

Removing yourself from Photoshop and going back to pen and paper can be restorative, if only to re-order your thoughts and priorities. And who knows, when you're stressed sometimes writing CONFLICT in big red letters over and over again really might work...

2010

The re-launch of the Telegraph's Fashion and Beauty channel is one of the most recent projects that I've worked on. From chickens to haute couture in ten short years. And with that leap the way I use sketching has changed too.

Sketch early. Learn fast

Quick brainstorm sketch

Ten years ago the first time I would have picked up pen and paper on a project was well after a site’s proposition had been decided and agreed (usually expressed through a hefty functional decomposition that no-one read). Sketches were a way to help develop a site’s look and feel and nothing more.

Today, the right time to start sketching seems to be getting earlier and earlier in the project (much to the project’s benefit). The page above is from a rapid-fire sketching session for the Telegraph. 4-6 people (often including the client) sit with a stack of pads in front of them, generating service ideas through sketching. The sketch can be as simple or as complex as needed – as long as there’s enough detail to show the idea.

Service design

Sketch wireframe

Whilst the proposition is coming together, rather than use Visio or other traditional wireframing tools to start locking down the site, I prefer to use sketches to keep things as open as possible for as long as possible.

I feel confident when I show someone a sketch that the idea is being tested rather than the execution. (For example, there’s a danger in presenting an idea as a final polished PSD – the design can get in the way of the idea, the client becoming hooked on a particular font choice or colour rather than the thinking).

These A3 sized sketches are recognisable enough to be web pages, have enough detail to start showing how the core components of a site come together and yet reassuringly low-fidelity: they can be changed easily and quickly.

Wireframing and rapid prototyping

Using Keynote and sketching to rapid prototyping

The biggest change in the way that I sketch is how I’ve started to combine sketches with other tools to powerful effect. In the example above I wanted to demonstrate how some of the idea’s behind I•SPIED would come together. This was a new section for the fashion and beauty site, showcasing products that have been hand picked by the Telegraph’s experts. To test the thinking behind the idea and to show the concept to the client I created a small prototype using sketches and Keynote.

A sketch is the quickest way to express an idea and yet I didn’t want to spend too long creating it or drawing too many pictures of products. At the same time I also wanted to show how users would interact with the page and flow through the experience. Combining a hand drawn sketch with a layer of Keynote interaction seemed like the perfect match. It’s a great (and very simple) way of creating a rapid-fire prototype.

But what about the look and feel?

Look and feel simple sketching

I still use sketching to try out different elements of look and feel. But as I get more experienced (okay, older) nearly all of this development work is done in Photoshop. But I’m never too far from a pad – even if only to capture those vital moments when you go ‘oh, what about…’

I think these new ways of working have meant that my sketches have lost some of their beauty and their colour. Certainly, it’s difficult to imagine keeping some of my functional sketches of today for another ten years to come, but as a tool sketching continues to grow in usefulness every year.

8 comments

Author:  charlesriccardi

I think that this is a fantastic post. I don’t feel like I have ever encountered a professional designer like yourself, go into so much depth about process. It’s really great to see how the pros do it, and am excited to develop my design process even more. It is also a great tip to use Keynote to do some quick prototyping. Have you guys ever used Flash Catalyst before. I am currently trying it out, and it seems great, but might not be as efficient.

Anyways, the post was great, and I can’t wait to see any future work that you guys come up with.

Thanks Isaac!

Tweet this
Author: ianfitzpatrick ianfitzpatrick

Love the novel post – well thought-out and articulated. I’d love to see a more block & tackle post on your process for combining sketches with Keynote for workable prototypes.

Until then, thanks for taking the time to demonstrate this evolution.

Tweet this
Author:  Djonckheere

You mention ‘frustrations’ crept into your sketching as a young designer trying to find solutions to design and aesthetic problems. Why?
Sketching is essentially ideation—and ideation is the act of entertaining ideas and concepts. This process [should be] fun and creative because it’s a journey involving exploration and discovery.

The only frustration I can think of is when a project deadline encroaches on this phase and does not provide an adequate amount of time for the sketching and ideation.

I’m a little on the fence about presenting rough sketches to a client. Sure, sometimes you need to show process and design rationale, but I tend to think presentation renderings (or polished sketches) can be much easier for a client to wrap their head around rather than a series of quick thumbail explorations. Of course, I’m generalizing here—depends on the client—depends on the project/constraints. As designers we adapt and do what works for any given situation.

Great post. Thanks.

Tweet this
Author:  tkoc

Thanks for the process walk through (I would like a picture of the baseball cap, that section made me laugh). Well written and well illustrated.
@djonckheere I think there are some customers that really need rendered presentations, but there are a few that really can understand design and benefit from sketches. Wouldn’t you say we all prefer the latter ones?

Tweet this
Author:  atomcloud

I often find that clients struggle to understand how the design will work practically.

EG. I was doing a mock up for a clients online store, and (i try to be as clear with my accompanied text as possible) the first response i got back was why are all the products the same. Obviously I had just used a few product images as a guide but as there were duplicates this confused the client.

Part of the problem, i think, as the whole design was in photoshop and, for all intents and purposes, looked exactly like the real thing, the client thought it was. Perhaps using more sketchy mockups the client would “understand” that these were guides more???

Tweet this
Author: Isaac Pinnock Isaac Pinnock

@djonckhere Thanks for your comment. The frustration crept in not because of the sketching process, but because I couldn’t make the art director’s design work. Sketching out different routes was a way of trying to resolve the problems I was having. (In the end those problems seemed so insurmountable that we used a different design that I’d created from scratch.)

Tweet this
Author:  isUseful

A great insight into how your paper prototype process has evolved over the years. Paper is always a winner for rapid evolution even in this iPad age to my mind, but maybe I’m getting old {;)

Plus nice to see the old Poultry First site again. I was talking about that over beers with Jon Evans last Friday. Good memories.

Tweet this
Author: Dan Hinton Dan Hinton

This was a joy to read, particularly as you seem to have come from a more classically trained design background, into the realms of digital.

Particularly like the nod towards ‘service design’, the whole methodology works across so many areas. Thinking of the bigger picture and using our design thought processes to help tackle and solve the issues.

Do you always involve the clients with an initial scamping of ideas at the start? Seems like an excellent idea . . .

Tweet this

7 Responses

10 years of sketching | Made by Many » Web Design

[...] 10 years of sketching | Made by Many</a><a href="http://madebymany.com/blog/10-years-of-sketching" title="10 years of sketching | Made by Many" class="clickme">10 years of sketching | Made by Many</a> [...]

Spirited sketching | Emily Papp

[...] over time. Read the rest of the article <a href="http://madebymany.com/blog/10-years-of-sketching">here</a>, and start archiving your own work! [...]