Systematizing the Graphic Design Process

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow.

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

1. Collect the Necessary Information

You might be tempted to jump right in and start designing, but collect the necessary information first. For most graphic designers, this information will come from the client. Even for your own projects, though, assembling the necessary information first is essential.

Most clients will probably contact a graphic designer in this kind of way:

I need a poster made for my new product X, [followed by project description]. We will be displaying them in location A and location B, and we need a talented graphic designer to make a poster that “sells.”

The client would likely go on to ask for a quote and provide contact information. All is well from the client’s perspective, but you, the graphic designer, really have nothing to go on still.

Some clients might leave you with more information, and some less. However much you get, though, will usually not be enough. Before providing an estimate and starting the project, make sure the following information is spelled out:

The Target Audience

You might be able to get a good idea of the target audience from the line, “We will be displaying them in location A and location B,” but asking the client explicitly for this information will better define the target audience for you.

Just because the posters will be put on college campuses, for example, we shouldn’t assume that the target audience will be college students in general. Does the client have a certain group or sub-population in mind? Design students? Engineering students? Faculty and staff?

Information about the target audience should include age range, geographic location, interests and needs.

Learn What the Exact Message Is

For product advertisements, “Buy Me!” obviously isn’t going to cut it. Ask the client how the product, service or message should be conveyed. Does the product need the high-end treatment, or a more personal feel?

Every kind of graphic design—logos, posters, t-shirts, etc.—needs a message. Get this out of the client before moving forward.

Technical Requirements

If it’s a poster, what are the dimensions, exact colors and number of copies needed. Would the client like to include any other elements in the design? If it’s a logo, have any colors or branding already been established? Does the client already have ideas for it? If it’s apparel, what dimensions, colors and templates are required?

With any graphic design, you have to ascertain certain fundamentals before getting started.

Forgetting something important could mean your having to redo a large part of the project… and earning less money than you had originally figured. Make sure to research and discuss all of these details before beginning the design phase.

Budget and Deadlines

You will also have to discuss the budget, deadlines and other business-related details that will go in your design proposal (discussed below). For one thing, this will weed out any misdirected clients right away: clients whose deadlines are too tight or whose budgets are ridiculously low.

Be sure to share with the client your pricing structure and reasonable deadlines, and ask if they have any other requirements to discuss. You can add a firm quote and specific deadlines to the proposal later.

Systematizing It

To systematize this initial communication with the client, use a pre-set questionnaire. This should cover most of the bases and keep you from forgetting anything important.

You can always customize the questionnaire to the project. The point is that the questionnaire is supposed to save you from having to rethink all of the basic questions for each client.

It might also help to get the client involved in some sort of collaboration tool, such as Base Camp or Google Docs. Sharing and discussing questionnaires can be much easier without email, and it can set a good precedent for managing the rest of the project.

2. Write Out a Proposal, Firm Quote, Contract and Plan

You have a lot of ground to cover at this stage, but it doesn’t have to be a lot of work if most of it is systematized. All of these things (quote, proposal, contract and even the outline or plan) can come from templates that are slightly customized to the job. Systematization can take care of this portion of the project quickly and painlessly.

If you don’t already have a system in place, you’ll have to create these documents as soon as possible. This will take quite a bit of work up front but will make your life much easier down the road.

If you are employed by a company, you may already have access to some of these templates already. Freelancers, though, will have to start on their own.

Create templates for all of these documents, perhaps even basing them on templates that you find on the web. The ideal template would require you merely to fill in the client’s name and contact information.

The Proposal

The proposal is different because it will have to be customized for each client and project. Simply filling in the client’s name won’t work here.

A graphic design proposal should tell the client what the process will be, the final deadline and budget information. It should also formalize the information from the questionnaire: target audience, objective, etc. It is the overall plan for the project.

Templates will save time here, too, if section headings and routine bits are pre-written. Just add the content to the proposal and you’re done.

A Personal Plan

Your personal plan will contain much of the proposal but will be adapted to meet your needs.

For example, while the proposal might state a certain date as being the deadline for the initial mock-up, your personal plan would include deadlines for certain milestones that you need to reach in order to meet the deadline in the proposal. This could include days for brainstorming, implementing the initial design and finalizing and organizing.

You can use a template again, as long as you customize it for each project. The template is where you systematize the processes that work best for you.

Think about the regular tasks that you do for every project, and systematize them to make them more efficient. Write out a step-by-step process that is organized and easy to follow. You’ll save time and minimize the chance of forgetting something.

3. Brainstorm, Research and Inspiration

Many designers find that going straight to work after all the business details are taken care of doesn’t yield the best results.

Rather, you might want to take time to find inspiration, research similar or competing designs and brainstorm freely.

Without this part of the graphic design process, the designer may find himself continually starting over, or revising the same parts of the design, or just being inefficient. By taking the time to get inspired and organize our thoughts, you will actually work faster in the long run.

Inspiration

Inspiration is the first step and leads to the brainstorming and research. Below are some great ways to find inspiration:

• Read a book
  Many designers look to other graphic design or art for inspiration. One of my favorite ways to find it, though, is just by reading a book. Focusing on words alone makes your imagination do the work, and then you can transfer that creativity into your work.
• Visit a museum
  This is a more visual approach to inspiration, and a fun one. But it doesn’t have to be an art museum. I find that going to any museum can bring me inspiration and help me unwind.
• Free-write (yes, write)
  Like reading a book, writing can trigger the imagination in a way that the visual arts can’t. Many writers find inspiration by free-writing, which is writing without thinking, analyzing or planning. It is a great way to get your ideas down on paper and then build on them.
• Unwind
  Unwind, take a walk, get out, have some fun. Not thinking about work is a great way to stop those old ways of thinking that were getting you nowhere. It can open your mind and help you discover new things. Once you’ve unwound, you can go back into design mode and bring your new ideas with you.

Brainstorm

Brainstorming is the process of taking inspiration and organizing it in a form that can be incorporated in a design. Ideas, styles and elements that you’d like to include in the design are all a part of the process, even if they are still a bit rough.

Sketch some layouts, experiment with color schemes and typography, and try out different ways to present graphics. Sketching is a part of this phase, as is testing one’s creativity to the limit. This is when the general idea for the design comes into focus.

Research

This is when you research the final idea and how to make it happen. I like to collect examples of elements from other projects and see what works best. You could also look up tutorials on effects that the design calls for. This is a great way to try something new and get the perfect look.

Collect resources and learn a few new things. Then you should be ready to create a draft for the client.

4. Try Different Things

Having collecting resources and researched styles, you’ve probably come upon new ideas. Try a few different things, using your original goal as your reference point. Don’t just jump in, create something and leave it at that. Not only will you learn something new, you will also have a few other ideas to show the client if they want to see variations.

5. The Revision Phase

Many designers don’t appreciate the revision phase, especially if they feel a client has poor taste and wants to ruin the design they have worked so hard on. Don’t worry. It doesn’t have to be so painful.

Share with the client your initial design or, as many graphic designers like to do, multiple options for designs. Make sure the client feels free to share what they would like changed or to mix and match features from the different options you present.

It can be difficult to understand clients who don’t know what it is they don’t like about a particular design but just want “something different.”

Keep showcases and examples for inspiration on hand for the client. So, if the client doesn’t like a font that you used for the logo, share a logo design showcase with them. Ask them to choose a few that they like, to get a better feel for their style; that might be easier than getting someone who has no background in design to explain what they mean.

This part of the graphic design process requires the most attention and is the hardest to systematize, but keeping such resources on hand can help. Don’t be afraid to ask questions and collaborate with the client when they are being vague. Taking the time to tease out their thoughts is quicker than making revisions that they might not like anyway.

Wrapping Up

In systematizing any process, the tips we’ve shared can help. But you should also identify the tasks that you do regularly and figure out how to make them more efficient.

Don’t let the process we’ve outlined stop you from asking yourself what is unique about your way of working.

With a system, the correct tools and better overall organization, taking on more clients and getting projects done faster and with better results is possible.

Businesses have to take advantage of the opportunities that systematization holds.

Visual Decision Making

User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie evidence that the presenter may be hiding a weak argument with graphic frou-frou.

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance.

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.


It happens in an instant

Thanks to the work of the early 20th Century Gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). [4, 5] These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection. [6]

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.


Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The three-stage process governed by affective and cognitive responses to visual stimuli.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.


Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” [7] Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.


Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.