The fear designers experience when confronted with a blank canvas probably comes from being overwhelmed by the plethora of aesthetic and interface design decisions to be made. With too many simultaneous, difficult problems to solve in a design, it can make one freeze up, not knowing which problem to tackle first. It doesn’t help that the design process is often perceived as entirely subjective, as this can also create pressure of having to come up with unique ideas, or identify a compelling style. The perceived subjectivity of design puts the spotlight on the designer. If something is not right with the design, it’s seen as a negative reflection upon the designer personally. It all adds up to a lot of pressure that can keep you from doing your best work, or in some cases, just getting the job done.
The way to overcome the pressure is by breaking the process into smaller parts, and defining a step by step strategy that allows you to address each issue of the design separately rather than as a daunting whole. Instead of one monolithic problem, you have lots of small, more manageable problems. Breaking each problem out will also help you arrive at better design results as you will have given close consideration to all aspects of the problem.
1) What Are Your Goals?
Design is inherently connected to specific goals, which are often, but not always, business focused. Clearly define what you are trying to achieve with your design. Are you trying to increase sales of a product, establish brand credibility, or build a community? Be specific, be clear, be concise. You can not evaluate the success of a design without first knowing what your goals are. It is also not very logical to start a design without knowing what you are trying to achieve. If you do, you can bank on the results being off their mark.
2) Conceptualization, What is the Message?
The central focus of any type of design work, whether it’s architecture, print, web design, or industrial design, is the message. The goal of design is to lead the viewer to a predefined message. Always start with the question “What am I trying to say?”. Once you have established clarity on this issue, you can define how you want to say it.
The how part of the design is the concept, and concept is king. Think about the designs that you find most inspiring and memorable. Chances are that it was a strong concept that made the impact upon you.
“A good concept poorly executed is better than a bad concept well executed.”
- Curt Cloninger
Concepts vary broadly from overt metaphors that are immediately recognizable, to subtle allusions to design history that establish authority in the message. A concept can provide an interesting hook into your message, or simply provide needed support. Either way, defining the message and concept of your design should always be priority number one and should be completed before you start wrestling with aesthetics.
3) Define the User Experience
A list of keywords that sum up the experience users might have helps keep you focused on the big picture. You might include concrete words such as “usable”, and “intuitive”, or more abstract words such as “environmental”, and “trustworthy”. Think about what design techniques could invoke such experiences. Sticking to navigation conventions may help you build the first two experiences, while a natural color palette, photography, and classic serif typefaces may help achieve the second two. No matter how abstract your keywords might be, visual design can communicate your message.
4) List All Elements and Assign Hierarchy
Identify all of the elements that need to be included in your interface. Include the exact labels for the navigation, headings and subheadings, logos, local navigation, utility navigation, content areas (promo spaces, call outs, etc.), and anything else that needs to be included. With your detailed inventory compiled, rank each item according to importance considering your business goals. Now you are ready to position them on the page.
5) Solve the Interface With Wireframes
A wireframe is a simple drawing of a web page that focuses on optimal placement to achieve goals. It is a visualization of the above content inventory, but it does not address aesthetics at all. Don’t get caught up in color, typography, form, and shape. Stick to grayscale and simply position the elements on the page according to their importance. Do consider scale and proportion, though, as you don’t want to have less significant elements occupying an inordinate amount of space. You may want to check out Jakob Nielsen’s research on common eye paths in web pages to determine where the important elements need to be placed. Jason Santa Maria has a great article on wireframes, and shares a helpful case study of a client project.
Here’s what a wireframe might look like: Daniel Richards Home Wireframe | Daniel Richards Interior Wireframe. You can compare it to the completed design mockups: Daniel Richards Home Page | Daniel Richards Interior Page, and the final web site.
I find the wireframe process the most valuable part of the design process as it allows me to really solve the interface design issues without getting bogged down in type, color, and other aesthetic decisions. You can make significant progress fast. It’s also a great time to check in with a client to ensure that you are still addressing their needs correctly before gettings tarted with teh design mockups.
6) Isolate Aesthetic Decisions
With a solid set of wireframes, you are ready to tackle the aesthetics. Start by considering the grid system you want to use. A 12 unit grid is exceptionally flexible, allowing you to create 2 columns of 6, 3 columns of 4, or 4 columns of 3. If you have a number of different content display scenarios in your site, a flexible grid system like this can be exceptionally valuable. Define your grid unit scale in the preferences of Photoshop, Illustrator, or your favorite design software. As a quick example, if you have a 1000 pixel wide canvas, the individual grid units of a 12 column grid would be approximately 83 pixels. For more on how to use grids in your design, see the Khoi Vinh and Mark Boulton presentation on the topic at South By Southwest, or read Josef Muller’s Grid Systems in Graphic Design.
With your grid system solved, next consider the most appropriate typography. The first consideration would be what typeface best relates to the content. If your content is humorous, informal faces may work best. If your content is authoritative, a classic face like Trajan or Garamond convey tradition, and credibility. Knowing a bit about the history of typography is extremely useful in this endeavor. Consider typographic contrast as well. Rather than setting all of the type in the same face, use a complimentary pair or a family if possible (remember that font availability is still a problem on the Web, but we can use CSS font-family lists for ideal preferences). Make sure that heading, subheading, and general copy have unique treatments that effectively communicate the information hierarchy. The type and treatment of copy text needs to, of course, maintain legibility if your readers are going to stick around. When you are setting type, be sure to provide generous margins with a limited line length (around 70 words is ideal) so the content is legible, and feels comfortable to read. Daunting blocks of copy with narrow margins is a sure way to keep your audience from reading a single line.
Next, consider a color system for the design. Color has many powerful, psychological associations to be considered. The color system you choose should relate very closely to your user experience keywords, and your design concept. Also consider how your color system can help communicate information hierarchy, or tell the viewer where to look. If you use a monochromatic color system, an accent color will capture the viewer’s attention quickly, as it is clearly different from the rest. Use the accent color sparingly to draw the viewer’s attention to key elements such as the logo, navigation, or an important heading.
7) Refine
As your design builds, inevitably you will have elements that at first seemed important, but soon became superfluous. Refine the design to remove all elements that are unnecessary. If you can take away an element and the design still functions well, then the element is not needed.
Revisit Your Message, Goals, and Concept
Design is an iterative process (that’s part of the fun too). You make a design, evaluate it, then make changes, and repeat. A good design is one that has been distilled down to the essentials, and functions as well as it looks. When your design appears to be complete, take another look at your goals, message, and concept. Does the design do what was intended, or does it need to be realigned with the message? It’s a good idea to continually revisit the goals along the way too, to ensure you are not being seduced by discrete design decisions rather than keeping your eye on the big picture. Pin up the goals, user experience, and concept in your work space to keep them in your periphery at all times.
Conclusion
The more you can subdivide the design process into individual problems rather than facing a Mount Everest of a problem, the less you will be intimidated by starting your design. You can tackle design in a rational manor that will help ensure that your designs are more functional, more attractive, and more memorable for your viewers.
I recently had the wonderful opportunity to speak to the folks at Macquarium, an award wining interactive design firm located in downtown Atlanta, GA. They do amazing work, and are cool people to boot. The title of my talk was Findability: the Common Thread, and it explored how Findability touches each step of the project lifecycle. With an audience filled with diverse talents in Information Architecture, development, design, copywriting, photography, Usability, Accessibility and project management, my goal was to provide everyone a relevant perspective on the topic and how it relates to the work they do everyday. Findability is the common thread in which all members of a professional web team share responsibility, and can ultimately help drive more traffic to a site, help people find what they were looking for once they’ve arrived, and bring them back again. The net result of an effective Findability initiative is increased ROI (title: return on investment) for the client, and a broader dissemination of their message.
