TGJ2O_graphic_design_principles

include component="page" page="course_tabs_header" include component="page" page="menu_tgj2o_graphic_design"

What is graphic design?

 The term graphic design can refer to a number of artistic and professional disciplines which focus on visual communication and presentation. Various methods are used to create and combine symbols, images and/or words to create a visual representation of ideas and messages. A graphic designer may use [|typography], [|visual arts] and [|page layout] techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

 Common uses of graphic design include magazines, advertisements and product packaging. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece. (taken from Wikipedia)

1. Contrast

 * 1) The principle of contrast states that if two items are not exactly the same, then make them different. In order for contrast to be effective, it must be strong.
 * 2) Strong contrast adds visual interest to a page and makes it more attractive to the reader's eye. [[image:graphic_design_contrast.jpg width="555" height="361" align="right"]]
 * 3) Contrast helps to organize your information. Use contrast in your titles, heads, and subheads and page segments to make it easier for the reader to glance at the page and understand what is going on.
 * 4) The easiest way to add interesting contrast is with typeface. But you can also add contrast with rules, colors, spacing between elements, textures, shapes, etc.
 * 5) Use contrast to help create a focal point for a page. In addition to contrast, also use strong alignment and the use of proximity to reinforce your focal point.
 * 6) Don't be afraid to make some items small to create a contrast with the larger items and to allow blank space. Once you pull the reader in with your focal point, they will read the smaller print if they are interested.
 * 7) Avoid using typefaces, colors, rules, images, graphics that are too similar. Make them different to add contrast and visual interest to your page.

2. Repetition

 * 1) The principle of repetition states that you repeat some aspect of the design throughout the entire piece.
 * 2) Repetitive elements may be a bold font, a thick rule (line), a certain bullet, color, design elements, particular format, shapes, spatial relationships, etc. [[image:graphic_design_repetition.jpg width="515" height="342" align="right"]]
 * 3) Repetition works to unify all parts of a design. Repeating elements across pages creates consistency and visual unity. Because of repetition, you know you are still on the same website.
 * 4) Repeating certain elements in a page is a visual trick designers use to control a reader's eye and how the reader's attention moves down or across the page.
 * 5) Strong, repetitive elements help to organize the page into visual units.
 * 6) Repetition helps to organize, unify, and add visual interest to a page. If a piece looks interesting, it is more likely to be read.

3. Alignment

 * 1) Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.
 * 2) Be conscious of where you place the elements on a page. Always find something else on the page to align with, even if the two objects are physically far away from each other.[[image:http://www.davidduchemin.com/WP/wp-content/uploads/2008/04/cardsalign.jpg align="right"]]
 * 3) Align elements along "hard vertical edges." If instead of centering your text, you align the text 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.
 * 4) A centered alignment creates a more formal look, a more sedate look, a more ordinary and oftentimes dull look.
 * 5) Combine a strong flush left or right with good use of of proximity and you will be amazed at how strong your work looks.
 * 6) Don't combine a flush left and flush right alignment on the same page. Try to do one or the other.
 * 7) Don't center or justify lines of text. Centering and justifying lines of text creates ragged vertical edges, which makes it harder to read the text.
 * 8) Never center headlines over flush left body copy or text that has an indent.
 * 9) Find a strong alignment and stick to it. If the text is flush left, set the heads, subheads, and paragraphs flush left.
 * 10) If there are photographs or graphic images, align them with a text edge and/or baseline.
 * 11) Align image caption stories with the strong line of the photograph, which makes each stronger because of the stronger vertical edges this creates.
 * 12) Lack of alignments is probably the biggest cause of unpleasant-looking documents. Our eyes like to see order; it creates a calm, secure feeling.
 * 13) Alignment helps create unity on the page. Alignment helps connect and unify all the elements on a page, which creates an ordered, clean look.
 * 14) Breaking the principle of alignment can be a nice design trick by breaking the reader's expectations.

4. Proximity

 * 1) Group related items together so that related items are seen as one cohesive group rather than a bunch of unrelated elements.
 * 2) Items or elements that are not related to each other should not be in close proximity to each other. [[image:http://sitepointstatic.com/graphics/layout-and-composition_proximity.png align="right"]]
 * 3) How do you know if a group of elements are related to each other?
 * 4) By grouping non-related elements you either confuse or intrigue the reader.
 * 5) By grouping several elements in close proximity to each other they become one visual unit.
 * 6) If there are more than three to five items on the page, see which of the separate elements can be grouped together into close proximity to become one visual unit.
 * 7) Try to avoid too many separate elements on a page. And don't stick elements in the corners and in the middle. Try to group elements together.
 * 8) You can tell whether a page has too many separate elements by being conscious of where your eye is going as it reads down the page. Does your eye have to jump around the page to read it.
 * 9) Once you have grouped elements into visual units make sure that you have sufficient white space between these groups. White space helps separate and announce each of these visual units.
 * 10) Violating the principle of proximity can be a design tool.


 * 1) Don't be afraid to create your Design with plenty of blank space. Also make sure you have plenty of white space between elements and visual units.
 * 2) Don't be afraid to make words very large or very small. Don't be afraid to speak loudly or to whisper. Contrast is an essential element of good design.
 * 3) Don't be afraid to be asymmetrical, to un-center your format--it often makes the effect stronger. It's okay to do the unexpected. Try to break out of the box.
 * 4) Don't be afraid to make your graphics very bold or very minimal, as long as the result complements and reinforces your design.
 * 5) Vary the space between the elements on a page to indicate the closeness or importance of the relationship between elements. Proximity is a central tool in design.
 * 6) To keep an entire page unified, align every object with an edge of some other object.
 * 7) Avoid using all Capitals in your titles, heads, and subheads. Also avoid using italics, which are harder to read on the web.
 * 8) Remember the Computer is not a Typewriter. Don't use two spaces after periods, or underline a lot of text, or just use open quotation marks. Use both open and closed quotation marks to look professional.
 * 9) Remember that horizontal alignment is as important as vertical alignment. So make sure your text and images are both horizontally and vertically aligned.
 * 10) It takes a very self-assured designer to recognize and act on the power of simplicity. Many great websites are created simply, quietly, and with grace.
 * 11) Good design doesn't have to shout. Beware of getting too fancy and colorful. Try for restraint and simplicity in your designs.
 * 12) Any good design must have a strong focal point. You can create focal points using contrast and visual hierarchy.
 * 13) Make your message as easy to understand as possible. Organize and chunk your information into segments and sections introduced with catchy headings and subheadings.
 * 14) Try to develop a consistent, unified design that has a focal point and creates visual interest

=Assignment #X - CRAP =

The student will develop a 8 page presentation (for my consumption only) on the 4 principles of design. Each of the 8 individual psd's (Photoshop's proprietary file suffix) will illustrate examples one of the four principles and all pictures placed on the psd will reflect either a good or bad form of that principle. For example, your first page will have a series of photos that encompass __**good**__ use of Contrast in web/print media, the next psd will represent a series of photos that encompass the **__bad__** use of Contrast in web/print media. So on and so forth for the other 3 principles.

 Some notes:


 * You can capture screen images of websites by pressing the (print-screen) button located on the top right of your keyboard.
 * Put these pictures together in photoshop (you will use only the simple crash-course tools you’re taught in class for cutting/pasting object within photoshop) and represent them in an artistically pleasing fashion.
 *  The project will be evaluated as follows:

shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well during most class periods (as shown by observation by teacher, and documentation of progress in journal) with no reminders. || Used time well (as shown by observation by teacher and documentation of progress in journal), but required reminders on one or more occasions to do so. || Used time poorly (as shown by observation by teacher and/or documentation of progress in journal) in spite of several reminders to do so. ||
 * **CATEGORY** || **4** || **3** || **2** || **1** ||
 * **Content** || Superb stylistic choices in capturing the pictures that best illustrate the chosen topics. || Good choices in capturing the pictures that best illustrate the chosen topics. || All the pictures are present for the chosen topics. || Most of the pictures are present for the chosen topics. ||
 * **Presentation of choices** || The use of PS to enhance the pictures or showcase elements of the topic is exemplary || The presentation of the topics is adequate, but some care is needed to fully showcase the picture and/or topic || All elements of the topics chosen are present, though presentation leaves something to be desired || Elements from the topics chosen are missing, or have serious flaws in presentation ||
 * **Use of Time** || Used time well during each class period (as
 * **Filetype and size** ||  || Filesize for each image is 200KB or less (except for the psd). 2 images should be in jpg format, another in png, and another in psd || One element missing from the file submission either filesize exceeded, or one file type missing || Only a few of the requirements have been met ||

NEXT: Graphic Design Process