Improving the transition from paper to Photoshop

Written by Verne on March 8th, 2009

Improving the leap from pen to PhotoshopPaper prototyping is a method used by many web designers (including myself) to help plan and conceptualize new site designs or features. Simply put, it’s creating website prototypes on paper. By removing distractions like code and syntax and any technical elements, the designer can focus in isolation on the form, structure and design of the piece he’s working on.

Many web designers use paper prototypes because they have artistic backgrounds and likely got started in this field through their love of a 2B pencil and sketchpad. Others use it simply because it’s the fastest way to give an idea some shape. Everybody’s got a pen and paper within arm’s reach – not everyone can whip open Photoshop every time a new idea sparks.

Still, I’ve been hearing lately that it’s not uncommon for web designers to struggle a bit with translating their paper prototypes to the Photoshop canvas. I think we’ve all been there – a perfectly drawn sketch of the most amazing website (in the whole wide world, mind you) that, once brought to the screen, garners the same reaction that Picasso probably had after every painting: Crap, that’s totally not what I had in mind.

In response to some of these struggles, I’ve decided to share a few pointers that I think have helped me convert a greater percentage of sketches into actual websites. Enjoy!

4 ways to improve the transition from paper to Photoshop

1. Try to visualize it in your head first

While most of the creative concept is developed on paper, I’ve found it incredibly difficult to start from scratch on paper. That is, an empty box (representing the browser window) and nothing else except the end goal of creating the world’s finest website (design-wise, anyway). This probably seems somewhat contradictory at first, but if you think about it, all great ideas typically begin with a vision before it even gets a drop of ink. I know, it sucks to start this list with such an almost-philosophical tip, but truth be told, you need to see it before you create it.

Paper Prototyping2. Remember proportions

The biggest obstacle for me when I first started was maintaining proper proportions of elements on paper with those on the screen. I’ve found that the smaller the size of your sketch, the greater the tendency to draw elements larger than they really are (navigations, text, buttons, etc). The closer the size of the sketch to the “actual size” on screen, the more accurate you generally are. But that’s not to say that every prototype you draw needs to be a full 8.5×11 – it just means that you need to be mindful of proportions. Over time you’ll get the hang of it, so don’t beat yourself up when certain elements don’t line up the way you thought they would.

3. Don’t worry about the fine details (yet)

Your paper prototype is meant for you to plan out layouts, structures, shapes and forms. Leave the fine details of how a button will be shaded or the pixel structure of an icon to when you get on Photoshop. While you’re working on paper, focus on the bigger picture of how things will fit together. And to add to the previous point – don’t worry about being exact with your proportions either. The more you worry about recreating the web experience pixel-for-pixel on paper, the more you’re missing the point of paper prototyping.

4. Consider technical limitations

You never want to put a cap on your creativity, but if you don’t want to waste too much time designing a unicorn of a website, it’s good to keep certain technical limitations in mind. [Valid] HTML/CSS can only do so much sometimes and occasionally programming languages and database structures can have you thinking twice about whether you can actually pull off what you’re thinking. It’s true that if there’s a will, there’s a way, but chances are, if there’s a client, there’s also a budget. If not, then feel free to go wild!

A few paper prototypes…

While writing this post I started looking back at some of my notebooks to see some of my own paper prototypes. In many cases I see myself making the same mistakes I’m trying to help you avoid. Nonetheless, I wanted to share a few sketches and the final products that resulted. Hope you like them!

LIVE Conference 2008

LIVE Conference 2009

This was the third year my agency had worked on LIVE Conference’s site, so I had a fairly good idea of the requirements already. It was just a matter of mapping out a structure that would work. My main focus was on how to organize the main and sub navigations, as that had been an issue with the previous year’s site. I got a bit carried away with the doodling on the bottom left sketch, but it illustrates the dark theme that I was going for and that we eventually went with.

Burlington Sports Therapy

Burlington Sports Therapy

There were so many ways to approach this site, so more than a dozen different prototypes were created initially. There were 5 different blocks of content/information/goodies that we wanted to fit onto each page, so it was important to create a structure that would allow that to happen without everything looking like a mess. The top two sketches are the concepts we ended up using to produce the PSD mock-ups and inevitably the final site.

Michelle Lu-Do

Michelle Lu-Do

I woke up at 3 am one night with the vision for this site (ahem… see first tip above!). I got up, grabbed my notebook and started sketching. This happens rarely, but I went with the first sketch, created the mock-up, showed the client, and she loved it! It was my one single-prototype-mockup for the year (everybody gets one). :)

Tagged in: , , ,

This entry was posted on Sunday, March 8th, 2009 at 10:22 pm and is filed under creative briefings. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

38 Responses

Leave a Reply