1 / 26

Lesson 4: Design Principles

Lesson 4: Design Principles. This lesson will cover the four primary principles of design: Contrast Repetition Alignment Proximity. Design Principles: Contrast.

hayden
Download Presentation

Lesson 4: Design Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson 4: Design Principles • This lesson will cover the four primary principles of design: • Contrast • Repetition • Alignment • Proximity

  2. Design Principles: Contrast Contrast is a visually important aspect of design. Contrast can be “striking,” drawing the attention of the viewer to your page. Contrast must be strong. However, contrast and conflict are very different.

  3. Design Principles: Contrast Ways of creating contrast: Type (text): Large text with small text Color: a bold color with a soft color Horizontal rule/vertical rule: thin horizontal rule with a thick vertical rule Graphics: Small graphic with a large graphic

  4. Design Principles: Contrast Contrast is “critical” to organizing the information on your publication. Contrast makes the “purpose and organization of the document” clear to the audience. For examples of contrast, refer to your course book The Non-Design Design Book on pages 53-62.

  5. Design Principles: Repetition Repetition is the design principle in which visual elements are repeated throughout the page(s) of your publication.

  6. Design Principles: Repetition Incorporating repetition into your web page (publication) will “strengthen the unity” of your design and page.

  7. Design Principles: Repetition Ways to incorporate Repetition: Type (text): Use same font throughout your document, bolding particular words consistently Color: Use the same color, colors, or color patterns throughout the document Bullets: make them the same throughout the document

  8. Design Principles: Repetition Ways to incorporate Repetition continued: Design elements: horizontal rules, graphics Headlines/Subtitles: should be consistent throughout your web page (publication).

  9. Design Principles: RepetitionExercise 4.1 I have created a web page for Angelo State University’s CDJ Department. View the URL below AND the link within it entitled: “View Advertising Course Descriptions” http://webclass.angelo.edu/comm6301/stanley/lessonexercises/coursedescrip.htm (Name at least four elements of Repetition within these two web pages.)

  10. Design Principles: Alignment “Lack of alignment is probably the biggest cause of unpleasant-looking documents. Our eyes like to see order; it creates a calm, secure feeling” (p. 35).

  11. Design Principles: Alignment 1. The principle of Alignment states that “nothing should be placed on a page arbitrarily.”

  12. Design Principles: Alignment 2. A visual connection between the elements on the page is critical to creating a “clean and sophisticated look.”

  13. Design Principles: Alignment 3. There must be a “reason” and purpose for the placement of all design elements.

  14. Design Principles: Alignment Here is an example of my business card. The elements on the card look as though they were placed at random and have no connection to one another.

  15. Design Principles: Alignment The information on this business card has been aligned centered. It looks all right, but I want something that has more of an impact.

  16. Design Principles: Alignment The information on this card is right aligned (flush right). It has a strong invisible vertical line that has more of an impact than the other two cards. (Another example: Center Alley p. 40)

  17. Design Principles: Alignment Newsletter Tip: 1. Do not center headlines over body copy that is left aligned (flush left) or indented.

  18. Design Principles: Alignment Turn to page 38 in your Non-Design Design Book, and see if you can find all of the items that are not aligned correctly. Example: Ladle Rat Rotten Hut

  19. Design Principles: Alignment It tends to be the bad examples that pop out at us. Why? Probably because when the alignment is right (correct), it's invisible.

  20. Design Principles: Proximity Finally, let’s review the design principle of Proximity. Proximity means that related items are grouped together.

  21. Design Principles: Proximity When elements that have a relation are grouped together, your page will have a cohesive appearance. Let’s look at the business cards once again:

  22. Design Principles: Proximity In this example, the eye stops 5 times. It is difficult to know where to begin reading. Visually, it is confusing to look at. Thus, it will be overlooked.

  23. Design Principles: Proximity In this example, your eye knows exactly where to begin reading. Related information is grouped together, and it makes sense.

  24. Design Principles In this lesson, we have discussed the four primary design principles: Contrast Repetition Alignment Proximity

  25. Design Principles You may have noticed before now that CRAP is an acronym to remember these design principles. Consequently, if you do not incorporate contrast, repetition (consistency), alignment, and proximity into your web page designs, your pages will look like crap.

  26. Design Principles Go to Blackboard  Course Documents  Save Design Style Sheet Begin working on your design style sheet.

More Related