1. Six Principles of Good Design
This presentation will feature some very important principles to consider when designing things such as websites, documents, graphics, or other professional materials. There will be a list of very helpful website links about design at the end of this presentation.

2. Principles of Good Design
Proximity
Alignment
Principles of Good Design
Repetition
Contrast
This graph shows the six major principles of design. They are proximity, alignment, repetition, contrast, color, and typography. This presentation is interactive. You can click on the design principle that you would like more information about and it will take you to that slide. In the bottom right corner of all the informational slides, you will see a “back to graph” box. Simply click that box to return to the graph.
Color
Typography

3. The Principle of Proximity
Objects near each other are seen as a unit.
Group items that have something in common, and separate those that don’t.
Resist the temptation to throw everything on the page and fill up every inch of space with type and images.
The principle of proximity is the idea that items that relate to one another should be grouped close together. When people view things, they generally see objects that are near each other as a unit. This means that they have things in common. If items do not have characteristics in common, they should be separated. You should always remember to resist the temptation of throwing information on the page without creating groups for similar items. Take a look at the two graphs on the slide. In the list on the left, what do you assume about all of those flowers? You would probably guess that they all have something in common. Now look at the chart on the right. What would you assume? It appears that the last four flowers are somehow different from the others. You understand this instantly. And you understand it without even being conscious of it. You know the last four flowers are somehow different because they are physically separated from the rest of the list. You can follow the Examples hyperlink for many more examples of proximity.
Back to Graph
Examples

4. The Principle of Alignment
The basic purpose of alignment is to unify and organize the page.
Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.
This creates a strong cohesive unit.
The principle of alignment is very important to design. Its basic purpose is to unify and organize the page so that the information is easier to read. You should be sure to never place something on the page arbitrarily. It is important that every item have a visual connection with something else on the page. By using the principle of alignment, you are creating a strong cohesive unit. Take a look at the two business cards that we will use as an example. Which card do you think fits with the principle of alignment the most? Well, the business card on the right is the correct anwser. A centered alignment often appears a bit weak. If text is aligned, instead, on the left or the right, the invisible line that connects the text is much stronger because it has a hard vertical edge to follow. This gives left- and right-aligned text a cleaner and more dramatic look.
Examples

5. The Principle of Repetition
"Repeat some aspect of the design throughout the entire piece.“
It is the repetition of certain elements, their consistency, that makes each page, slide, etc. appear to belong together.
The Principle of Repetition states, "Repeat some aspect of the design throughout the entire piece." The repetitive element may be a bold font, a thick rule (line), a certain bullet, color, design element, particular format, the spatial relationships, etc. It can be anything that a reader will visually recognize. It is the repetition of certain elements, their consistency, that makes each page, slide, etc. appear to belong together. Now, lets take a look at the resume example on the slide. What do you notice? The repetitions used in this resume are bold typeface for heading, light typeface for information, square bullets throughout, aligned indents, and the same spacing alignments. Even on a one-page document, repetitive elements establish a sophisticated continuity and can "tie the whole thing together." If you are creating several one-page documents that are part of a comprehensive package, it is critical that you employ repetition.
Example

6. The Principle of Contrast
Contrast is created when two elements are different.
Adds visual interest.
For contrast to be effective, it must be strong.
"If two items are not exactly the same, then make them different. Really different.“
The principle of contrast is used to add visual interest to the page. It is when two elements are different. If the two items are not exactly the same, then make them different, really different. But, in order for it to be effective, it must be strong! Take a look at the two mini-posters featured on this slide. Which one of these would you say has the stronger contrast? Is the one you chose the one that is more ascetically pleasing to you? The mini-poster on the right seems to have a stronger contrast because of the bold typeface and the large rule lines. Rule lines are the drawn lines separating the information.
Example

7. Examples of Contrast Graceful font vs. Bold font
Small Type vs. Large Type
Thin vs Thick
Contrast can be created in many ways. You can contrast large type with small type; a graceful oldstyle font with a bold sans serif font; a thin line with a thick line; a cool color with a warm color; a smooth texture with a rough texture; a horizontal element (such as a long line of text) with a vertical element (such as a tall, narrow column of text); widely spaced lines with closely packed lines; a small graphic with a large graphic.
Horizontal Element Horizontal Element Horizontal Element
VS.
Cool Color
Warm Color
Vertical Element
VS.

8. Color The color wheel is a good place to get started.
Primary Colors: Red, Blue, Yellow
Secondary Colors: Orange, Purple, Green
Try and consider the mood, audience, and type of presentation you are using when choosing color.
In advertising and design, color is used to grab attention and stimulate interest in ways that would be difficult to create by any other means. When choosing colors for your documents or pages, you should use the color wheel to get started. The three traditional primary colors are red, blue and yellow. When you combine these you get the three secondary colors: orange, purple and green. When you combine each secondary color with its neighboring primary, you get the six tertiary colors: yellow-orange, yellow-green, blue-green, blue-purple, red-purple, red-orange. That’s where the color wheel comes from. Be sure to consider the mood, audience, and type of presentation when you are choosing color. You can follow the hyper link on the word color wheel to learn even more!

9. Designing with Type
Typography is the art and process of arranging type on a page.
Five Basic Principles:
Font Choice
Size
Letter Spacing and Line Height
Alignment and Proximity
Readability
Typography is the art and process of arranging type on a page. There are five basic principles that go along with typography. Font choice, size, letter spacing and line height, alignment and proximity, and readability.

10. Typography: Font Choice
Serif font: have extra bits on the ends of the letters
Used for print
Sans serif font: do not have extra bits
Used for the web
Script fonts: less used, imitate handwriting
Sometimes used in headlines and logos
Monospaced fonts: fixed width, each character is equal width.
Serif fonts are the ones with the extra bits on the end of the letters (these extra bits are actually called serifs) and sans serif fonts are the ones without the extra bits. A couple of other, less widely-used font types that you should be aware of are Script fonts and Monospaced fonts. Script fonts are those that imitate handwriting and Monospaced fonts are fixed width, with each character being of equal width. So when should you use these font types? Studies have suggested that, in terms of body text, serif fonts are more readable when it comes to print, but become less readable on the web due to low screen resolutions. Therefore the general rule of thumb is to use serif fonts for print and sans serif fonts on the web, although this often depends on the context of the design. Always use either serif or sans serif fonts for body text – there is pretty much no room for negotiation on this point. Headlines and logos are a lot less restrictive in terms of acceptable font types; fewer words reduce the need to follow the same rules as you would with body text. Serif, sans serif and sometimes script fonts can be extremely effective in headlines and logos.

11. Typography: Size Consider the purpose.
For audiences that are children or elderly, it would not be smart to use small fonts.
More important elements should be in a larger font size.
When determining the font size of pieces in your article, think about the purpose. If the text is intended to be easily scanned, the text should be large so that it is less effort for the eyes. If the audience is aimed at young children or the elderly, a larger font size should be used. Also, remember to keep the more important elements in a larger font size. If you look at the example on this slide, there is a clear hierarchy of importance. The more important the text, the larger the font.

12. Typography: Letter Spacing and Line Height
General Rule: The larger the text, the lower the letter-spacing value.
Reduced line heights can cause problems with readability.
The general rule of thumb for letter-spacing is the larger the text, the lower the letter-spacing value. For example, if you had negative letter-spacing on your body text, it would appear all crunched up and be very difficult to read, whereas, the effect would be lessened on a headline or a logo with a much larger font-size. Line heights can affect readability and the smooth scanning of the text. If lines are too close together, you may have trouble when reading from line to line. Take a look at the two examples featured. Can you see the differences between the acceptable examples and the bad examples?

13. Typography: Alignment and Proximity
Alignment is key to organize and connect information.
Use a grid system to help you.
Proximity is the space between the text and other elements.
Be sure that items are not too close together.
Alignment and proximity were focused on in detail earlier in the presentation. Remember, alignment is the key to organizing and connecting information. When trying to align items, use a grid system to help you. Proximity is the space between the text and other elements. You do not want to have words too close together because it will make the document harder to read. The example on this slide shows a good and bad document in relation to alignment and proximity.

14. Typography: Readability
Ask yourself: Do you think people will want to read this text?
Use images to break up text if possible.
Make the reading as effortless as possible.
The final principle of typography is readability. To begin, ask yourself, do you think people will want to read this text? Be sure that the reading or graphic is as effortless as possible for the readers. If you feel that there is too much text, use images to break it up.

15. Resources That May Be Helpful
Web Design
reviewing-a-design
tips-for-new-websites/#.VKw9vyvF_zg
Document Design
most-important-rules-of-document-design-color-crayon-tip- method/
processes/format/112-principles-of-design
Check out these websites for even more information about design for the web and documents. Be sure to look back at the hyperlinks in the presentation!