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
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.
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
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...
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
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.
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
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?
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.