A Sketch in Time

A Sketch in Time Saves Nine

All Designers have been there. Staring at a blank screen wondering what to do. All the options and potential for our design to be this awesome, eye-catching award winning site. Thinking about every cool feature and style we jump in, lost in the world of pixels. Pushing here. Gradients or flat design there. Crafting our masterpiece to precision. Once we are done and deliver our work of feverishly inspired genius, the hammer falls. We have not addressed a core need from a brief and now that feature must be ham-fisted into our ecosystem of visual glory.

Time has been wasted and now we are under the gun to stick to deadlines. No matter how lovely we think our design is, the bottom line here is that it failed and we have to start over.

MYTH: Layouts are quicker to produce on a computer.

While it might seem odd to not use a computer for designing a web site, that statement is not actually what happens. What you ought to do is start with a sheet of paper and begin cranking out thumbnails. These are necessary to ensure that you have a path to follow on your creative journey. Home builders do not just show up with wood, nails and hammers to build your house. They start with a blue print. This allows them to construct your new home and not have to think on the fly where the bathroom should go or how long a wall ought to be. Designing your site, or anything really, should include the same preparation.


These are not highly rendered drawings. These are just quick and dirty layout ideas to get your head thinking about where elements could go. The precise width and location is not your goal here. Instead, you are imagining what the final outcome could be. You also should be looking at the structure and thinking about interior pages or user interactions / experience, but this is not tackled until the wireframe.

PRO TIP: Use a pen. Pencil tempts you to erase and make perfect. Pen allows you to let it stand as a representation.

Page Sketches

These are more considered blueprints. At this point, you have selected a thumbnail best suiting your end goal and are settling into details which will drive your design. A home page layout can be more design and style heavy, but does it carry through to the interiors? If not, how are you going to make the interior pages feel cohesive? A menu system might look great in a tight corner, but what about flyout menus or if they have a particularly long menu link title?

TIP: Wireframes will get done on the computer and you can start playing with actual numbers. Until then, keep the creative high and save the technical until later.

Again, the goal here is to punch out ideas as quickly as you can. Maybe a minute or two per thumbnail. As you get more used to creating these, you start to problem solve in your head. You begin to see the strengths and weaknesses in your plan and can address them sooner rather than later. Your next step of wire framing is easier to transition into and at this point you are trying to lock down the sizes and locations, and how the elements will behave in the user interaction / experience aspects of your site.

ROOKIE MISTAKE: Getting lost down the rabbit hole of pixel perfection while chasing the wrong rabbit.

Taking this approach will save you time and keep your project moving forward. Even if you are intending on using a template, this will help you make sure your selection fills all client requirements. Sketching is a skill which will make your final product better, and that keeps clients happy. As a bonus, if the client does not like what you presented, you already have ideas you can go back through to try and find the perfect solution to their pain.

What do you think? Is this a waste of time to your process? Or maybe you use a digital sketching application and a tablet. Let us know your approach and thoughts!