Principles of Design If you can memorize the following four principles you have what it takes to be a good designer. You can create layouts that are visually pleasing, easy to read, and memorable—as long as you stick to the following four basic principles. Proximity Alignment Repetition Contrast

Principles of Design Proximity The principle of proximity states that you group related items together. Use spacing to convey visually what information is related. Bits of information that are not alike should not be in close proximity to other bits on the page.

When you look at the business card below, how many times does your eye stop? Proximity By grouping related items together, the design is more visually appealing. How many times does your eye stop now? Generally, you should never center everything. Principles of Design

The list on the right is way easier to read than the list on the left because of the bolded headings. Proximity Principles of Design

The principle of alignment says that nothing should be placed arbitrarily on a page. Alignment Principles of Design Just because there’s white space doesn’t mean you should put something there. Alignment creates a visual connection for the reader.

Each item on the page should have a visual connection with another item on the page. Alignment Principles of Design The alignment edge forms an invisible line that connects the text, making it stronger, cleaner, and more dramatic.

Apply a right alignment to the information that's related: Alignment The edge forms an invisible line that connects the text. Principles of Design

Alignment Principles of Design Unity is an important concept in design. To make all the elements on the page appear to be unified, there needs to be some visual tie between the separate elements.

Alignment Even if the separate elements are not physically close on the page, they can appear connected, related, unified with the other information simply by their placement. Principles of Design Alignment also helps with organization of the elements on a page.

Below, you'll see that everything is smashed together and it's all centered. It's a truly uninspiring ad thus far. Alignment Grouping items (proximity) and apply the rules of alignment creates a much improved design. Principles of Design

The principal of repetition says that you should repeat some aspect of the design throughout the entire piece. Repetition Pick one of the of the elements already on the page and turn it into a repetitive symbol, like the big G in the business card example. Principles of Design

Repetition Repeating a design element throughout the entire piece creates consistency. Principles of Design

Contrast Contrast is created when two elements are sort of different (but not really). Contrast is the differences between two elements. If the difference between elements is too extreme or not complimentary, it creates CONFLICT, not contrast. Principles of Design

Contrast Difference in contrast creates visual interest and draws the reader’s eye. Principles of Design

When the 4 principles elements of design are consciously applied, an attractive, impressive publication can be produced. Proximity Alignment Repetition Contrast Principles of Design

Typography The primary task of graphic design is to create a strong, consistent visual hierarchy… important elements are emphasized Choose typographic styles and sizes that are appropriate to the meaning content is organized logically and predictably serve the text’s relative importance in the hierarchy

Font Types Types of fonts to remember… Serif Marked with little “feet” that extend from the stem of the letters Reflect “traditional, elegance, formal” Enable reading of large blocks of printed text, (books, magazines, newspapers)

Serif Fonts Times New Roman Garamond Palatino Baskerville Bodoni Clarendon Albertus Rockwell Wide Latin Georgia Caslon Minion Felix

Font Types Types of fonts to remember… Sans Serif Do NOT have the little “feet” at the ends of the letters Best for reading items on a computer screen (compared to serif fonts for printed documents) Contemporary & becoming more popular in graphic design

Sans Serif Fonts Verdana Myriad Pro Showcard Hobo Comic Sans Gill Sans Impact Avant Garde Tahoma Franklin Gothic Candara Berlin Sans Arial Calibri

Font Types Types of fonts to remember… Script Fonts that appear to have been written with a calligraphy pen or in cursive handwriting Use these sparingly & never in long blocks of text or in all caps. Stunning when set very large

Font Types Types of fonts to remember… Decorative Fonts that are just plain fun… distinctive… whimsical Like scripts, NEVER use these in an entire block of text… best used for headlines or emphasis

Scripts & Decorative Fonts Forte Vivaldi Magneto Kristen Wolfpack Freestyle Script Brush Script Algerian chiller Bradley Hand Stencil jokerman

Type Contrasts A reader should never have to figure out what’s happening on the page. Your type should be both eye catching & for communicating. Focus on these type elements: Size Weight Direction Color Structure

Font Size big versus little type… Make the font sizes OBVIOUS – don’t make people think it is a mistake. Which typographic element is the focus? Emphasize it with contrast.

Examples continued… Font Size Some elements need to be made smaller because they aren’t really that important to the general reading public.

Examples continued… Font Size If you use an item of unusual size, try to repeat that concept elsewhere in the publication to create an attractive and useful repetition. These large repeated numbers are a great design element.

Font Weight thickness of the strokes… Contrast weight is one of the easiest and most effective ways to add visual interest to a page without redesigning a thing. Arial Narrow Arial Arial Black Don’t contrast the Arial Narrow with Arial … be daring & make it obvious. Contrast Arial Narrow with Arial Black

Font Weight bolding words organizes information… This is already used with headlines & subheads in a newsletter. Try using this with an index as well. Chapter headings bolder & more space above each heading helps with principle of proximity.

Font Structure how is the font built… If you are combining type from 2 different font families, use 2 families with different structures. The above slogan has 2 serifs together… but each has a different structure.

Font Structure more structure examples… The above slogan has 2 sans serifs together… another contrast is using all caps, larger size, bold.

Font Structure more structure examples… The above slogan has 3 sans serifs together… all from the same font family – Universe: Ultra Condensed, Bold and Extra Black.

Font Structure mixing scripts… BAD IDEA!!! NEVER combine 2 different italic fonts, 2 different scripts OR an italic with a script. Doing this will create a too many similarities.

Font Direction Don’t use slanted type. Type slanting upward creates positive energy, but slanting downward creates negative energy. *NEVER fill the corners with angled type. A strong re-direction of type creates a dramatic impact or a unique format.

Font Direction Horizontal or vertical direction of the type… A line of type has a horizontal direction. A tall, thin column of type has a vertical direction. Notice the contrast with the vertical type.

Font Color Using color to draw the reader’s attention… Warm colors (reds, oranges) come forward & command our attention. Our eyes are attracted to warm colors, so it takes very little red to create a contrast. Cool colors (blues, greens) recede from our eyes. You will need MORE of a cool color to create an effective contrast.

Font Color More examples with color… Scarlett FLORENCE When“Scarlett” is light blue, notice how the cool color almost disappears. Scarlett FLORENCE Now “Florence” is in light blue. To contrast with a cool color effective, you generally need to use more of it.

Hints about Type… All caps are HARD TO READ. Rule of Two – use no more than 2 font families on a project. Remember to use fonts that REALLY CONTRAST… not fonts that are too similar. Color makes elements stand out… use it wisely.

"Graphic Design Principles." Process for Web Design--Design Principles. Michigan State University, n.d. Web. 28 Aug Snider, Lesa. "Basics of Design, The." Graphic Reporter, The. N.p., 02/13/2007. Web. 28 Aug Williams, Robin. Non-Designer's Design Book, The. 2nd ed. Berkley, CA: Peachpit Press, Print. Works Cited