A Design Method
Reasons to have a Method
When you’re working on a deadline, it can be helpful to have a methodology: A set of steps that you can refer to, without having to recreate the path from start to finished product. Having this in your back pocket 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, where consistent means that you can 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.
Now the Real Reason
Then 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 you’re 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 using a particular method elsewise 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 of a May Day festival? Adjust those levels and curves to your heart’s desire. And will somebody please crop and rotate that tower?
There’s a dark side to this freedom. As Hemingway told us, the most frightening thing in the world is a blank sheet of paper (Google). The worst prison I can imagine would be a blank world: no walls, no obstacles, no paths trodden or untrodden. Design is much easier when you have something to start with. Digital 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
Focus The Concept:
It’s easy to forget this. We dive right into a project with no real clear idea of what we’re trying to say. Or do. Or give. The most focused vision you can have 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 let your project get bogged down for the lack of a set-in-stone focus. You’re better off declaring some focus that you can live with for ... 6 days? 6 months?, to get started. Later on, you can come back to it once you’ve found out what you’re really trying to do.
Gather Supporting Materials:
What do you have at your disposal to communicate, educate, inform or perform? Survey all the materials that you can get from your client. Then pressure them for more. Find out what their competitors are doing, what graphics and colors they use. Get text, Word documents, PDFs and magazine clippings, newspaper articles and press releases. 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 players in other markets, suppliers and customers. Get Everything. Did you ask the client what more they would like to have?
Keep all of this in a box or a satchel or on a tray or 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. Have a folder in your mail client of all the e-mails they’ve sent you, and a subdirectory or folder for all the digital materials they’ve sent you.
Now review 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
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 in and on. 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
When you’re working on a project have a visual brainstorming session that will 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 brainstorm session is easy and 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 faster paced music with lots of energy.) and get yourself in a mood that sparks your imagination, allows you to make connections between thoughts and concepts that are strange, indirect 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 just drew, then draw the inverse. Don’t worry about colors or straight lines. What’s you’re doing is creating visual vomit. You’re dumping your ethereal thoughts onto material paper. I find that the ideas come in clusters, one after another. Find blank piece of paper, put your pen to it and just draw. Don’t stop until you’ve covered the page. Have lots of paper and don’t stop until you’ve run out of time. Or don’t stop until you’ve fallen asleep, your head hitting the paper, nearly poking your eye out with your pen.
Don’t stop to critique. Feel free to review what you’ve done and riff off of it, but don’t stop and criticize. Rotate the paper upside down and look at it from a fresh perspective. 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.
Develop Rough Sketches
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. This is the point were you can note colors and typefaces. Some people may want to jump on the computer at this stage. I like to stay with pen and paper for this step. I’m still blasting through lots of concepts, so I stick with pen and paper.
Don’t worry about straight lines and proper punctuation. This step is about exploring the thumbnails of your thoughts in a larger format, roughing out 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.
If you’re working with a team, share these inital sketches to one or two people who are close to the end users, or perhaps some of the end users themselves. If you can get usability feedback at this stage it can save headaches that pop up down the road.
Produce the Mockups
Now follow through on the two or three best sketches. This is when I start using my computer, recreating the sketches and getting the ideas into a digital form. You may want to scan the sketches or put the artwork under the tracing plastic on a graphics tablet and work on it in Photoshop. I generally work the art from scratch in 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?!?!")
In a team environment you may get a set of wireframes from an information / interaction / interface architect who will provide you a base framework for your designs to integrate with. Come as far as you can with your own design concepts, then integrate them with the wireframes.
The Mockups should be life size, but they are not the final versions. They need to let the reviewers know where the buttons will go, where the photos will sit in the background, and how your oversized swoosh, arch or spiral will play off of the logo. The mockups need color, photos, straight lines and actual drop shadows and highlights. Make sure that everything you learned in the previous steps 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.
These mockups are great for reviewing with your team, but they aren’t for the client to review. Show them around internally in wider and wider circles. Show them to your admin staff and maybe your kids or your friends. Keep your mind open to critisizms, as tough as they are. Get feedback from people that fit the profile of the users that will be using your work. These off-the-cuff surveys can help you understand if your design is still meeting the needs of the users.
Output a Final
Now add highlights and dimensionality to the image or mockup. Generally, vector based graphics tools don’t allow you to do great edge highlights and shadows. 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.
Invest in some good color printouts to show off the work and bring some black and white copies to the presentation as well. Letting the client draw, doodle and annotate on your black and whites can help you capture their real thoughts and directions. Having your mockups in a professional and well thought-out presentation is essential to capturing the trust that they need to have in you. Having that trust means they won’t second guess you and 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
Forget 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. Design and creativity emerges in a different manner for everyone. This is what works for me. Maybe you’ll steal this one and become successful. Or perhaps you’ll build your own method, write it down and then share it.
Building some walls just might liberate you.
This article was originally published at A List Apart.
[ Read and write comments ]