Step Away from the Machine


Been doing an intense amount of hi-fi site design of late. Nothing wrong with that, I enjoy the creativity.

Being challenged to find the design, to produce a professional product within the bounds of the clients specifications. However moving through the process rapidly does allow you to focus on how you achieve your final outcome.

One thing I have learn over the years is to never jump right into photoshop. Regardless as to whether you have used mood boards or not, generally I don’t start the design process in photoshop or the like. I take it back old school, get out the sketch pad and paper. Walk away from the workstation, often outside and go design the site with pencils and paper.

So how do I move from paper to photoshop:

  1. Leveraging off the base wireframe (if I have one), I set about drawing about ten or so different design thumbnails of the pages. I use these to generate ideas very quickly, to just to see if they balance and work generally on the grid and in terms of spacial placement.
  2. From here I select the designs that are going to work. These are then expanded into half page lead pencil sketches, again nothing intense, just seeing if the design works in this low-fi version.
  3. Finally a few designs are drawn up in detail with aqualia coloured pencils. Again not in fine detail, just concepts, and block of colour to see if the design works.
  4. After all this the design is manually rebuild for client sign off in photoshop. In some cases I do this via a rough tablet trace or a simple scan, or just by eye, all depends on the design.

There is something freeing about working with paper. Don’t get me wrong I don’t work in a vacuum of ideas, I have my reference books and library at hand and will often go looking for inspiration. But of late the inspiration has not come from the online world, but the offline.

So what is your design process? How do you start the process? Straight onto the computer or do you go old school?

Tags: , ,


  1. Pens and paper FTW!

    I’m similar – I start with rough sketches in pen and paper (done as far from the computer as possible).

    Once I’ve got the ideas worked out, I then head off to build the short list of designs in Inkscape – usually only two or three. I find that by actually seeing how a few of the competing designs work I have more time to find and refine the bits that really help to present the information clearly.

    At that stage, I have SVG and PNG images that I can take to the client, refine with feedback, and eventually implement in HTML/CSS.

  2. We’re analogue relics mate, probably comes from our older roots. I’m a butchers / sketchbook person myself, and i’ve been known to use scrap book style ‘litteral’ cut and paste techniques to comp up designs. on a real life light board even. I’ve usedeverything from printouts to magazine snippets, photos, texture materials and so on.

    I usually find that by using different mediums allows me to be free of the constraints of a computer / screen only design. Really liberating exercise.

    Plus …utterly fantastic at beating designers block.

  3. @Jason – exactly, there is something quick and disposable about using a pen and paper

    @Ben Cutting and pasting, scrap book style is a little like the traditional old mood boards. These used to be great for getting the emotion and feeling of the site across and setting a base line for the design to grow from.

  4. I tend to look at other sites first, for general ideas (but not copying!), do a couple of very quick loose sketches and mock up one or two in Photoshop from there. Sometimes I get in too quickly and skip straight to Photoshop, but those designs never turn out as well and take far longer to work through, so I try to make myself plan things through properly.

  5. @Chisa – I find the same thing. Without spend a bit of time to think about what I’m doing, any time spent going straight into a full-blown design ends up a waste.

    Reminds me of a development “rule” that if you don’t build a prototype, v1.0 of your software will work as poorly as a prototype and you’ll need to rebuild it anyway. Guess the same thing applies with designs too!

  6. Definitely start with pen and paper, then colour swatches and rough style guide (ie what colours map to what design elements) – that’s just from a visual point of view; although a lot of my UX/IxD work starts on paper too.

  7. The standard process in the agency where I work is pushing pixels form day one. I’ve rebelled against this over the last year, to the point where I now refuse to even sit in front of a monitor until I’ve scribbled for a day or two. I usually start with a flipchart and rough markers (I find the standing and moving around with big gestures really helps get the creative juices flowing) and get finer with pen & paper afterwards. And if I’ve done this, the photoshopping always flows better than without.

Comments are now closed, move along, nothing to see here.