Home | Gaming | Programming | Play Online | Contact | Keyword Query
Games++ Games & Game Programming

Games++ Home
Games++ Gaming
Games++ Programming
Beta Testing Games
Free Online Games
Hints & Cheats

E-mail This Page
Add to Favorites


Web Games++

Cheat Codes
Trickster Wiki
Game Ratings
Gameboy Cheats
PlayStation Cheats
BlackBerry Games
Photoshop Tutorials
Illustrator Tutorials
ImageReady Tutorials



Lesson 3: Show It Again, Sam

Graphic Design for Non-Designers

Table of Contents

Repeat, Repeat, Repeat

Look at any book with multiple chapters, such as our textbook, The Non-Designer's Design Book by Robin Williams. Each chapter is visually announced or presented in the same way:

  • Every chapter title is placed in the same part of the page and in the same font and size
  • Every chapter number is a light gray placed behind the title and at the top of the introductory text
  • Introductory text is always set in a box with the same width, font, line spacing, and alignment

Repeating a particular style in this way creates a visual redundancy -- the third basic design principle, the purpose of which is to reinforce a concept.

Repetition of style doesn't apply only to chapter headings and books, though; it's everywhere. Take, for example, the IBM television commercials that aired over the past year. The advertisement is black and white with the exception of two "IBM blue" horizontal bars sitting at the top and bottom of the screen. At times, smaller blue bars race through the screen, simulating (or reinforcing ) the IBM blue striped logo.

The first time you see one of these commercials, you don't have to wait to see the IBM logo at the end. Subconsciously, you already know what company is advertising itself because of the visual repetition of color and shape. In my opinion, the ad agency that developed these commercials deserves every penny it made. They hit the nail on the head and all it takes is some good creative thinking. Visit these ad links and see what you think about them:




Take a Look at This

The point of the principle of repetition is to create an identity with visual reiteration, to let people know that they are about to read a headline, a new chapter, a cutline (caption) beneath a photograph, or an advertisement for IBM. You do this by using the same typefaces, colors, or graphics for the same kind of thing, wherever it appears throughout a single document or a series of documents. To illustrate this point, I created a book cover and a chapter heading page, shown in Figure 3-1.

Figure 3-1: This is a book cover I created to illustrate the principle of visual repetition.

What can I repeat throughout the book to reinforce the overall design? Let's make another list:

  • Set chapter heading type in an arc
  • Use the same font inside for chapter headings and page numbers
  • Repeat the mouse as a black and white icon
  • Use the mouse as background for a drop cap (when the first letter of a paragraph is set larger than the rest)
  • Repeat the cover design (without the title and other type) as a light gray background on the opening pages of chapter

I came up with these five ideas in just a couple of minutes -- any one (or combination) of them satisfies the goal of creating style repetition. Applying this principle is the most enjoyable for me because I get to use a lot of creative juice. There are so many different things you can do, so let's dig in and go for it.

We know that this information should be present on a chapter heading page.

  • Chapter number
  • Chapter title
  • Page number
  • Beginning text of chapter

Okay, we're armed with the information that needs to be conveyed and the tools to do it. Here comes the fun part.

Figure 3-2 illustrates one idea for the chapter-opening page. If you look back and forth between Figures 3-1 and 3-2, you can see where and how I maintained consistency:

  • I repeated the image of the mouse in exactly the same spot, but in a light gray, as a background texture
  • I recalled the glowing circle with the dotted circle in the upper left-hand corner
  • I used the same typeface for the chapter number (in the upper right-hand corner and as a drop cap in the text block

Figure 3-2: Here is one of many options for creating a repetition of style inside the book.

This design process is satisfying to do, as long as you keep in mind that the main purpose of the book design is to get people to read what is inside. Although this technique works well for chapter divisions in reinforcing the transition from chapter to chapter, it would not work well for regular pages of the book. In order to maintain consistency throughout the rest of the book, you can use the typeface from the cover for the page numbers or you might use a graphic from the title page as a thumbnail alongside the page number, at the bottom of a page, or at an inside-the-chapter division. :::Adobe+Photoshop:::

Do It Yourself

Now is the time to take the principles you have learned so far -- grouping, alignment, and consistency -- and use them together. Let's create a menu for a local restaurant. Ask yourself, "What information do I need to display?" (You knew that was coming, right?)

  • Name of the restaurant
  • Menu subheadings
  • Dishes
  • Prices

Next to that list, fill in the answers:

  • Yummy in the Tummy Café
  • Appetizers: names of dishes, prices
  • Entrees: names of dishes, prices
  • Desserts: names of dishes, prices

Notice how I'm using the first principle by grouping elements that need to be together. Now, the rest is simple as pie (pun intended). Figure 3-3 shows you what I came up with.

Figure 3-3: Here's my menu design using grouping, alignment, and consistency.

What did you come up with? Are you feeling more at ease with tackling a design project? Good. In the next lesson, I cover the fourth and final principle: creating contrast.

Next Lesson

Copyright © 1998-2007, Games++ All rights reserved. | Privacy Policy