A Design Method

When working in an environment that requires lots of creative production in a short time schedule (ie., when working on the web), it can be helpful to have a design method.

A method is simply a set of steps that you can refer to, without having to constantly recreate the path from start to finished product. This tool can be liberating in four ways:

1. It removes the need to constantly make sure that every step is covered. (Just follow along and you too can be a chef in no time!)
2. It allows you to be consistent in your creative process, enabling you to make your deadlines and keep your clients happy.
3. Having a documented process lets your clients know that you’ve actually given thought to how you go about making what they’ve entrusted you to create. And …

Now the Real Reason#section2

Finally there’s the most important way that a design method can be liberating: it gives you rules to break.

This digital arena has way too few rules for most designers. In the old days of print, you had to work out the intricacies of the CMYK four color printing process with its trapping and layering and spot colors and paper bonds. When dealing with physical tools there are rules of engagement: There’s no ‘undo’ on an airbrush. You can’t save a copy of that granite sculpture you’re working on. In the physical world you have to do things in a certain way, following a particular method,  else you’re not going to be able to attain your vision.

But in the digital realm, these limitations are gone. DaVinci wants Mona to face the other direction? ‘Flip Horizontal!’ Your Starry Night seems a bit out of focus? Run an ‘Unsharp Mask’ on it. That Night Watch is actually a scene from a May Day festival? Adjust those levels and curves to your heart’s desire. And will somebody please crop and rotate that leaning tower!

But there’s a darker side to this freedom. As Papa told us, the most frightening thing in the world is a blank sheet of paper (Google). That place where limitations have not been set can be stifling! The worst prison I can imagine would be a blank world. No walls, no obstacles, no paths trodden or untrodden. It’s a hell of a lot easier to have something to grab. Rules are often arbitrary walls of our own construction. Where would Pink Floyd be without The Wall?

So here are my walls, my method, my guidelines, and my target.

Step by step, In depth#section3

Focus The Concept:#section4

I often forget to do this. I dive right into a project with no real clear idea of what the hell I’m trying to say. Or do. Or give. The most focused vision you can give to a project is a noun and a verb. What is the thing and what should it do?

A simple sentence of subject and predicate applied to a project can really set things off in the right direction. But don’t get hung up on this. Don’t let your project get bogged down for the lack of a set-in-stone focus. You’re better off declaring a focus that you can live with for (… 6 days? 6 months?) a certain time period. As the project continues, you can always revisit and refine this focus.

Gather Supporting Materials:#section5

What do you have at your disposal to communicate, educate, inform, or perform? Conduct a survey of all the materials you can get from you client. Get more materials. Find out what the competitors are doing, what graphics and colors they use.

Get text, Word documents, PDFs and magazine clippings, newspaper articles and press release archives. Watch the videos and the TV commercials, listen to the radio commercials. Look at the business cards, the stationary, the envelopes of your client and their competitors, similar tier distributors in other markets, suppliers, and customers.

Get Everything. Find out what more the client would like to have.

Keep all of this in a box or a satchel or on a tray, in a stack. The pile of stuff should be large and have all sorts of different sized and shaped media; the more varied the media, the better job you’ve done. Keep a folder in your mail program containing all the e-mails they’ve sent you, and a folder or subdirectory for all the digital materials they’ve sent you.

Now look at it all. Go through each piece. Highlight stuff that’s good and put it at the top. Look at the stuff that’s bad and describe to yourself why it’s bad. Learn from others’ mistakes and then cast the piece aside, roundfile it, or put it at the bottom of the pile. Sort out what you can work with from the fluff. You are surveying the media and exposing your brain to all sorts of imagery and design and wording and ideas.

Now get to work.

Establish the Style#section6

A style is a tool, it’s the thing you’re using to hit the target. Think about the colors you want to use and what those colors mean. Think about the imagery that supports your focus, the pace that attracts your audience, the words that communicate to them. Think about the cultural references and landmarks that establish a common frame of reference between you and your audience.

Get a single sheet of paper or a text file to note these thoughts and decisions. Let everyone on your team know about the direction they should be headed. Even tell the engineers and developers so that they have a flavor for the project. You might be surprised at the gaps and holes that they fill in when you’re working on a project. Letting them in on the style decisions will help them approach their work in a way that will support the overall style, even if it’s behind the scenes.

Create Many Thumbnails#section7

When you’re working on a project, brainstorming sessions allow you to get your thoughts down in a tangible form. Thumbnails are like icons for thoughts, visual markers that allow you to think through a design. But instead of having to draw out a full-fledged version and get lost in the details, you only have to jot down the thumbnail sketch to serve as a reminder of the original concept.

Getting through a thumbnail storm session is a lot easier and more effective if you can get yourself into a creative frame of mind. Read a good chapter from your favorite book. Watch some clips from some great films. Flip through design-oriented magazine. Especially the annuals that highlight lots of different designs. Read a comic book.

Have the best music playing (I recommend Information Society’s Peace and Love, Inc.) and get yourself into a mood that sparks your imagination, allows you to make connections between thoughts and concepts that are strange and new. Creativity doesn’t exist in a vacuum. It’s a mindset that you can put yourself into.

Then grab a real piece of paper and an actual pen or pencil and begin scribbling, doodling, and sketching. Look at what you’ve just drawn, then draw the inverse.

Don’t worry about colors or straight lines. What’s you’re creating is visual vomit. You’re dumping your ethereal thoughts onto material paper. I find that the ideas come in clusters, one after another.

Find that scary blank piece of paper, put your pen onto it, and draw. Don’t stop until you’ve covered the page. Or have lots of paper and don’t stop until you’ve run out of time. Or don’t stop until you’ve fallen asleep at your desk, your head hitting the paper, nearly poking your eye out with your pen. Each of these stopping points are valid and highly personal.

Whatever you do, don’t stop to critique. Feel free to review what you’ve done and learn from it, but don’t stop and criticize. Rotate the paper upside down and look at it from the bottom, up. Look at it from the side, and at an angle. Look at the areas between the thumbnails and see what hidden messages you’ve left yourself. They’re there, you’ve just got to look. But don’t stop until you’re through.

Develop Some Sketches#section8

Now take a few – four or five – of the best thumbnails and make some larger sketches from them. Make them the size of a note card or a full sheet of paper. But limit yourself to just a few. Don’t try this with all of your thumbnails, just the ones that show promise.

Some people may feel that they can go to the computer a this stage. More power to them. I like to stay with the paper for this step. I’m still blasting through lots of concepts on dead wood and until I get a graphics tablet that has a built-in 600 dpi LCD display, I just don’t think I’m going to be happy with anything else. This is the point were you can start designating some colors and values to the ideas.

You still shouldn’t be worrying about straight lines and proper punctuation. This step is about exploring the thumbnails of your thoughts in a larger format, roughing out some more detail in order to get a feel for the overall balance and visual appeal of the layout. Save the details for the next step.

Produce the Mockups#section9

Now follow through on the best one or two of the sketches. This is the point where I start recreating the sketches and getting the ideas into a digital form. Many artists like to scan in the sketches through a scanner or put the artwork under the tracing plastic on a graphics tablet.

I generally work the art into a vector based program like Illustrator. That way I don’t have to worry about sizes or rotation and image degradation unlike a bitmap oriented program like Photoshop. (It also makes me look like a superstar when the client comes back and says “Can we make high-res large posters out of our front page?!?!”)

The Mockups should be life-size. They ought to let the viewer know where the buttons will go, where the photo will sit in the background, and how your oversized swoosh, arch, or spiral will play off of the logo. The mockups need color, real photos, straight lines and actual drop shadows and highlights.

Make sure that everything you learned in the steps where you surveyed the materials and decided on a style is reflected in these mockups. Go back and look at what changes you made, what contrary directions were taken. Check to see if it still makes sense.

Output a Final#section10

This step is in here as a stop-gap to add highlights and dimensionality to an image or a mockup. Generally, vector-based graphics tools don’t allow you to do great edge highlights and shadows. Both Freehand and Illustrator are getting there, but this is where Photoshop shines. Balance your image colors, smooth out the pixels from your collaged images, give the whole thing a nice thick 3 pixel black border and you’re done.

Invest in some good color printouts if you are presenting in person. Some people have written things like, “Don’t show a web site on a piece of paper… It’s a different medium! Don’t soil the digital perfection you’ve created by relegating it to a flat sheet of paper.”

I don’t know about you, but I prefer my clients to use a felt pen on my paper mockups, not on my monitor. Having your mockups in a professional and well thought-out presentation is essential to capturing the trust that they need to have in you. That trust means they won’t second guess you; they’ll respect your decisions and authority in this digital domain. After all, who’s doing this full-time: you, or their VP of Handshakes and Winking?

Steal This Page / Ignore This Method#section11

Forget about everything you just read. Ignore it, click away and read some other web page. Don’t give a second thought to the steps I presented here. This is my method. It has not been approved by the FDA for human consumption. It doesn’t spell some fancy catch phrase if you take the first letter of each step. (“FGECDPO”… Erm, gotta work on that.)

Design and creativity emerges in a different manner for everyone. This is what works for me. Perhaps you’ll build your own method, write it down and then share it. Maybe you’ll steal this one and become successful.

Finding some walls might just liberate you.