The “Rules” of the Game
Web and Multimedia Design Principles, Tips, and Good Habits

Organize Your Thinking

Start by understanding the communication goals and objectives and/or communication problems to be solved by your design. You will never be able to achieve your objectives if you do not understand them.

Hierarchy

Feature what's important.

• The more important a thing, the more prominent it should be; the less important a thing, the less prominent it should be.
• 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?

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 game like Myst, 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.
• 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 being in similar shape, size, color, weight, proportion, texture, etc. to design elements on the other side. Asymmetrical balance is achieved when one large item on one side is balanced by several small items on the other. Radial balance is achieved when items are equally weighted around a center point.
• Balance is achieved not just by weight and size, but by value (light items being balanced by dark items), color (hot colors balanced by cold colors, or one color at the top being balanced by the same color at the bottom), etc.
  

Repetition of Design Elements, Repetition of Design Elements

Create visual interest and unity through repetition.

• Repeat visual or design elements again and again throughout your piece.
• Repetition is similar to consistency.

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 consistentlyt support and convey the theme(s).

Borrow from the Dramatic and Cinematic Arts

Apply the lessons and principles of cinema and drama to your multimedia 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.

Don't be a Wimp!

Strong, visually interesting design requires bold choices.