The “Rules” of the Game

Graphic, Web and Media Design Principles, Tips, and Good Habits

Organize Your Thinking

Understand your message and your audience.

• Start by understanding the communication goals and objectives and/or communication problems to be solved by your design.
• Do research and ask questions to understand your client, their culture, their audience, and their industry.
• You will never be able to achieve your objectives if you do not understand them.

Design with Purpose

Communicate. Don't decorate.

• Design is a problem solving activity. It always involves communicating a message to an audience.
• Design is not about decorating, but communicating. This doesn't mean that your design should be boring or ugly (these probably aren't among your communication objectives). It does mean that you should focus on what you want your design to accomplish.
• Design has purpose. If you have no concept, no message, no idea, no story, no problem to solve or useful experience to share, you are not creating design. If you have nothing to express, emote, enable, or encourage, then your design is an empty (though perhaps beautiful) shell.
• Each of your design elements and choices should facilitate understanding of or contribute meaning to your message(s).
• Form carries meaning. Make sure your design communicates the messages you intend.

Hierarchy

Feature what's important.

• Consider the power relationships in your design. What should be dominant and what should be submissive?
• The more important a thing, the more prominent it should be; the less important a thing, the less prominent it should be.
• Give your design a meaningful order. Establishing the hierarchy of your information will help to determine the logical organization and presentation of that information.
• Structure information so that the user's eye progresses across the screen in the manner that you intend. Ask yourself how your eye moves across the screen. Where does it start, where does it stop, where does it stay the longest? Does your eye start, stop, and/or stay in places that are important?
• Information competes for a user's attention. Enable the user to easily focus on the content that is most important or relevant for them.
• Designs with a focal point (or focal points) are more visually interesting and easier to understand than designs lacking anything of emphasis.

Clarity is King

Make sure your audience gets the point. Will they be able to articulate the idea or feeling or objective(s) or call to action that you intended in the design?

• Avoid ambiguity and communicate with clarity.
• Be clear about your purpose.
• Ask yourself whether or not your design elements (or the whole design) are facilitating the user's experience (and understanding of the point to that experience).
• Do you have design elements that are conflicting, distracting, and/or detracting from that experience?

Make It Easy

Unless you're designing a mystery game, you should not challenge the user to figure things out.

• Create an interface and navigational scheme that is intuitive, easy to use and understand.
• Use imagery and symbols that are easily understood by your entire audience.
• Use names and labels for buttons and headers that are descriptive and representative of the content that they introduce.
• Don't frustrate your audience by making things difficult to get to, interpret, or find. Don't allow them to get lost or be unable to "get back" to where they were. Don't force them to use the "Back" button on the browser.

Cleanliness is Godliness

Avoid clutter.

• Beware of information overload. Don't overwhelm your user with so much visual or textual information that it becomes difficult to digest.
• Don't be afraid of negative space. You do not have to fill every inch of the page with content. Rather, use blank space or sparse content to your advantage. Such space gives the user room to breathe, allows the eye to rest and focus on important information, and provides visual contrast and interest.
• Organize and group your information into bite-sized chunks.
• Allow information to unfold. Consider layering your information so that not all of it is presented up front, but rather unfolds so as to be presented when the user wants it.
• Visual pollution is not a solution. Are there elements on the page that are simply extraneous? Delete them.

Consistently Be Consistent

Maintain a consistent visual, conceptual, and mechanical style.

• Keep a coherent and coordinated look and feel.
• Help the human brain in its quest for patterns, groupings, and categories by creating logical and consistent patterns, groupings, and categories.
• Similar things or things performing similar functions should be presented similarly. Likewise, the same thing should look and do the same thing, even if presented in a different place.

Contrast and Differentiation

Contrast differing elements to add visual interest and aid organization.

• As opposed to the rule of consistency wherein similar things should be presented similarly, different things should be presented differently.
• Use contrasting typefaces, sizes, colors, spatial relationships, lines, imagery, media types, etc. in order to differentiate between design elements.
• If something is different from something else, make it very different. Things that are somewhat similar (not the same, not different), conflict. Things that are very different, contrast.
• There is perhaps nothing more visually interesting than contrast. Without it, things are drab, boring, passive, and unorganized.

Proximity

Use proximity to group related information. This increases the overall organization of your design and eliminates scatter and clutter.

• Relationships are implied by proximity and distance. Things in close proximity become a single, united visual unit or cohesive group.
• Group related information by placing that information in close proximity.
• Don't create relationships between elements that don't belong together. Separate unrelated information by not placing that information in close proximity.

Alignment

Establish visual connections through alignment.

• Items on a page or screen should not appear as if they were placed there randomly or arbitrarily.
• Align every element on the page with another element on the page (or according to a specified grid or structure).
• Like proximity, alignment can be use to create visual groups or units.
• Strong alignments can be broken to create contrast.
• Avoid center alignments. The center is the least interesting place you can put a piece of information. Large blocks of centered text are difficult to read.

Balance

Arrange design elements to achieve a sense of harmony.

• Objects on the screen or page that are not balanced create a sense of tension or allow certain objects to overpower others.
• Like a balance beam, balance is achieved by having elements of equal weight on each side. Weight is not just determined by size, but also by value, color, shape, spacing, proportion, texture, etc.
• There are three kinds of balance: formal or symmetrical balance, informal or asymmetrical balance, and radial balance. Symmetrical balance is achieved by having design elements on one side of an axis being mirrored by the same (or very similar) elements on the other side. Asymmetrical balance occurs when contrasting elements are put in counterpoint to one another to achieve a sense of balance without mirroring, such as when one large item is balanced by several small items. Radial balance is achieved when items are equally weighted around a center point.
• Symmetrical balance, while common in nature, tends to be more static and less visually interesting than asymmetrical balance.

Repetition, Repetition

Create visual interest and unity through repetition.

• Repeat and reuse design elements again and again throughout your design.
• Repetition provides a sense of unity, consistency and cohesiveness.
• Repetition can create a sense of rhythm and movement.
• Repetition with variation is interesting. Repetition without any variation can become monotonous.

Metaphorically Speaking

Think about how your design might function metaphorically and use this to help accomplish your communication objectives.

• Pictures, colors, words, music, composition, animations, etc. have implicit connotations and connections that you can use to your design advantage.
• Imply what you intend.

Theme

Identify a theme to drive your design.

• A theme is a central, organizing and recurring motif or message. It is the emotional or conceptual essence of what your want to convey.
• Use theme to dictate style. Design concepts should consistently support and convey the theme(s).

Design with Emotion

How something “feels” may be as important as what it “does.”

• Your audience is human. Humans feel. Humans react from their gut. Can your design relate to people on a human level?
• After making something functional and usable, can you also make it pleasurable? Can your design not only work, but be a joy to use? Can the meal not only be edible but also delicious?
• Advertisers often use emotional appeals because they connect with people in ways that are powerful, memorable, and viral.
• Reward with emotion, but make sure the emotions are positive and appropriate to the context.

Borrow from the Dramatic and Cinematic Arts

Apply the lessons and principles of cinema and drama to your media design work.

• Use your design to tell a story.
• Have a beginning, a middle, and an end. Engage your audience, deliver the content that they want, and have a payoff or call to action in the end.
• Think about how your multimedia piece can create and/or enhance moods of anticipation, intrigue, conflict, climax, and resolution.

History Favors the Bold!

Strong, visually interesting design requires bold choices.