Six Principles of Good Design

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. 1The Principle of ProximityObjects near each other are seen as a unit.Group items that have something in common, and separate those that dont.Resist the temptation to throw everything on the page and fill up every inch of space with type and images.

Examples

Back to Graph

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. 3ColorThe color wheel is a good place to get started.Primary Colors: Red, Blue, YellowSecondary Colors: Orange, Purple, GreenTry 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. Thats 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!

8Principles of Good DesignColor

TypographyProximityAlignmentRepetitionContrast

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. 2Examples of ContrastSmall Type vs. Large TypeGraceful font vs. Bold fontThin vs Thick

Cool ColorWarm Color

Horizontal Element Horizontal Element Horizontal ElementVertical ElementVertical ElementVertical ElementVS.VS.

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.7The 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.

Example

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.5The Principle of ContrastContrast 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.

Example

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. 6Typography: Font ChoiceSerif font: have extra bits on the ends of the lettersUsed for print

Sans serif font: do not have extra bitsUsed for the webScript fonts: less used, imitate handwritingSometimes 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.

10Typography: SizeConsider 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. 11Typography: Letter Spacing and Line HeightGeneral 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?12Typography: Alignment and ProximityAlignment 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. 13Typography: ReadabilityAsk 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. 14Resources That May Be HelpfulWeb Designhttps://signalvnoise.com/posts/3024-questions-i-ask-when-reviewing-a-design http://webfieldmanual.com/#styleguides http://www.addthis.com/blog/2014/10/24/8-basic-design-tips-for-new-websites/#.VKw9vyvF_zg Document Designhttp://thevisualcommunicationguy.com/2014/10/23/the-50-most-important-rules-of-document-design-color-crayon-tip-method/ http://writingcommons.org/open-text/writing-processes/format/112-principles-of-design http://textmatters.com/resources/pdfs/businessdocs.pdf

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!15