Exploring, Learning and Applying Design Principles

Effective uses of Proximity, Alignment and Contrast Design Principles When Designing Documents. The three Instructional Design Principles outlined in this presentation that will enhance and improve documents are: * Proximity * Alignment * Contrast Proximity allows the designer to organize information, reduce clutter and provide clear structure for the viewer. Alignment provides visual connections, unity and groups information for clear understanding. Contrast allows the user to be creative with mixing large fonts with small fonts, inject cool colors with warm colors and place small graphics with large graphics all in an effort to design effective documents.

Principles 3 Proximity The basic purpose of proximity is to organize. Look at the two examples below. The example on the right you immediately know that the furniture groups are different and it is easy to read and understand the concept because the furniture is listed separately from the list. Grouping related elements together into closer proximity automatically creates organization. When information is organized, it is more likely to be read and more likely to be remembered. (Williams, 2008). According to Williams a designer can achieve proximity by squinting your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops. If there are more than three to five items on the page, allow yourself to decide which of the separate elements can be grouped together into closer proximity to become one visual unit rather than several. My Furniture Desk Chair Hutch Sofa End tables Coffee table My Furniture Desk Chair Hutch Sofa End tables Coffee table

Items to avoid when applying the principles of proximity are: Do not stick things on a page because there is white space otherwise known as empty space Only include a few separate elements on a page Avoid leaving equal amounts of white space between elements unless each group is part of a subset. Do not force relationships with elements that do not belong together. Avoid using all capital letters and writing sentences that appear to be lumped together..

In the example on the left notice all the clutter. Although the designer could be trying to create something fun and energetic that appeals to a younger generation, but the reality of the example is the design is confusing and the viewer will have to search to understand details about the event e.g. date, location, etc. Ineffective use of Proximity. Non-Designers textbook The example to the right clearly shows effective use of applying elements using the principle of Proximity. The information is grouped to show what will be taught in each type of dance class, where and when the event takes place is easy to locate and is also grouped together the with headline in a smaller and lighter font that allows the reader to differentiate it from the headline. Effective use of Proximity. Non-Designers textbook Proximity Examples

Example including Proximity and Alignment Principles According to Williams “Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” Compare the two business card examples below. The one on the left looks as if the elements were just thrown on the paper without any thought process other than all the information needs to be there. Notice the example on the right to see the invisible line on the right side which connects the elements and gives strength to the layout. Lori Proctor, Student(863) Grand Canyon University 555 Canyon Dr.Phoenix, AZ Grand Canyon University Lori Proctor, Student 555 Canyon Drive Phoenix, AZ (863)

Alignment Centered type versus centered type off-set to the right Centering type is easy to use and the designer can quickly fall into a rut if the alignment is used often. Centering type will begin to look boring on the page when it is over-used. Look at the two examples to the right and compare The example on the top is a fully centered document, however the one on the bottom has centered text but is placed to the right adding depth, and creating the invisible line simply by using one extra color to hide the centered element. According to Williams “if you’re going to center the text, experiment with making it more dramatic in some other way.” Changing the size of the lettering can also add a twist to its look. The key is to experiment when aligning text using the centering feature. (2008). You are warmly Invited to attend! y Y You Are Warmly Invited To Attend!

Contrast Contrast is one of the most effective ways to add visual interest to your page and it is literally the striking moment that makes a reader want to spend time on the page. It is supposed to create an organizational hierarchy among different elements. Williams states the important rule to remember is that for contrast to be effective, it must be strong. Contrast is created when two elements are different. If the two elements are sort of different, but not really, then you don‘t have contrast, you have conflict. The items need to be really different to be different. A user can create contrast by making something large and something small or with a graceful old style font with a bold sans serif font; a thin line with a thick line; a cool color e.g. blue with a warm color yellow; using both smooth and rough textures together; 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. Williams also states you cannot contrast 12-point type with 14-point type or contrast dark brown with black. Look at the following examples and decide which one actually makes the viewer stop and read: The Designers Guide Avoid a crowded page Avoid non-contrasting colors and type Avoid misalignments Experiment The Designers Guide Avoid a crowded page Avoid non-contrasting colors and type Avoid misalignments Experiment

The Designers Guide: Avoid a crowded page Avoid non-contrasting colors and type Avoid misalignments Experiment EX a The Designers Guide Avoid a crowded page Avoid non-contrasting colors and type Avoid misalignments Experiment EX b Example “a” has little to no contrast between the typefaces and between the rules. Example “b” notes common mistakes among designers is creating lines of text that are too long to read easily, non contrasting colors and misalignments. When you know the lines are going to be long, break up the sentences and utilize the principle of alignment and use proximity and use various alignments when grouping information. (Williams, 2008). Example “c” adds thickness to the rules, uses a dominate headline with a reverse type effect, utilizes alignment and spacing and incorporates proximity. The example is simple, but it works and it has an easy-to-read design all by paying closer attention to contrast and experimenting with aesthetics, alignment and proximity. T he Designers Guide Avoid a crowded page Avoid non-contrasting colors and type Avoid misalignments Experiment EX c Contrast

When designers utilize principles and place elements accordingly, the finished product will look professional, impressive, and will entice the reader to click through links to learn more about the site and stay engaged in the topic and who knows maybe the user will want to learn more about the topic in order to spend time using an enjoyable, user- friendly website. THE END

Key Vocabulary: Proximity Alignment Contrast Grouping Font Reverse Elements Differentiate Vertical Horizontal

References 3 graphic design principles for instructional design success. (2008). Retrieved December 11, 2011, from Elias T., Universal instructional design principles of moodle. (2010). Retrieved December 11, 2011, from Williams, R., (2008). The non-designer’s design & type books: Design and typographic principles for the visual novice. Berkeley, CA: Peachpit Press Burmark, L. (2002). Visual literacy: learn to see. See to learn. Alexandria, VA: ASCD publications Sorden, Stephen D., (2005). A Cognitive Approach to Instructional Design for Multimedia Learning. Retrieved December 12, 2011, from