The Process - From Sketch to Design

Written by David Charney
Posted: May 2, 2008 (3 months, 3 weeks ago) | 0 comments

We all have our own processes when we design (Whether they are for a UI, print, animation, or whatever). This process tends to evolve through our careers as we define our skills and experience. I will be posting a series detailing my process and other processes when it comes to design and some development in the coming months. For now here is a quick sneak peek, or teaser, showing the process step of sketching your designs before entering Photoshop (or Microsoft Paint - if you are on a budget).

The reason to grab the ol’ pen and paper is because it gives you the opportunity to try out different ideas and layouts quickly. Good design, visually speaking, is a collaboration between brand, color, layout (placement), shapes, and creative ideas as it relates to usability and solving goals. The umbrella that forms from this collaboration is the user experience. But what is the first step? How do you use your time wisely? I know many designers who have found themselves with a lot of time in a design that isn’t working. They spend countless hours moving, tweaking, adjusting, crying. I have been there many times. This is where pen and paper come in handy.

There are actually several steps prior to this one and I will hit them all in time. But for now… Go find a pen, pencil, marker (Prisma anyone?), a sketchpad, sheets of paper, or a big white wall. I tend to start with shapes (squares, circles, etc.) so I can develop basic placement and understand the balance in a scene. I try to work up four or five very unique design sketches. I tend to lean towards a couple and then start detailing more and more. Keep taking steps back to think about how the user will use the design and don’t be afraid to be creative. Don’t focus on just one page either. Let’s say you are designing a website and the main object in the scene is a background shape. Rather than just filling the shape with more content on each internal page, try creating a sketch that shows how on internal pages the UI zooms into different part of that shape. This can motivate the user as they will wonder where they are headed next. It also creates a canvas for unique internal layouts. Sketch quickly. Don’t think to much at first. Start high level and then define more and more. Once you are happy with what you have, it is time to move to the next step. Depending on the project you may want to move right into your design program. You may want to draw up a few cleaner mock-ups for the client to review. After approval (or dreaded feedback), it is on to the next step - drinking a mountain dew as quickly as possible. Seriously that is the next step - look it up. Here are three original drawings and the final designs.

Check back for the continuation of this article… for now I have to run!