Elements & Principles


Published on

Published in: Technology, Art & Photos
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Is there a large, bold typeface, an attractive graphic or photo, is there a repetitive element somewhere? Is the message inviting, calming, exciting, fun? Or, is the information placed haphazardly and gives you a nervous frustrating feeling?
  • As in just about any field of endeavor, it helps to have a common language to describe things with. If I say 'dohickey' and you say 'doodad', we may not know we're talking about the same thing. Vocabulary is vital for correct principles to be taught in any discipline.
  • Alignment ties items together on a page. Proximity gives meaning and purpose to clipart, graphics, and illustrations & photos.
  • Repetition builds unity between multiple pages of a document. Contrast draws your interest and gives focus to the most important item on the page.
  • Primary colors are made up of yellow, blue, and red. These colors cannot be made from mixing any other colors. Secondary colors are made from mixing any two primary colors. Yellow & blue will make green, blue and red will make purple, and red & yellow make orange. Secondary colors are orange, green and violet. They are also known as complementary. Tertiary colors are made by mixing one or two primary colors with a secondary color. For instance, Orange and yellow make an orange-yellow mix. Green and yellow make a lime green color.
  • Complementary colors are opposite each other on the color wheel. Red and green, yellow and violet, blue and orange are the three simple pairs of complementary colors. These colors always go well with each other, hence the term complimentary.   One sees the use of complementary color schemes in every aspect of our lives. During Christmas, red and green become inseparable, proving the simplicity and ease of complementary color schemes. The use of gold on a rich blue background was a favorite of renaissance painters. Early evening or seasonal paintings utilizing the yellow and violet color scheme was common among impressionist painters like Monet and Serrat. Contrasting schemes use shades from opposite segments on the color wheel . Contrasting bold primary and secondary colors - red and green, yellow and violet, or blue and orange - will create a very dramatic look. Contrasting colors can also be created using pastel shades, also found as opposites on the color wheel.
  • Warm colors invite excitement and fun.
  • Cool colors are calming.
  • Shape is used to create unity in this picture. All items seem to go together.
  • Elements & Principles

    1. 1. E lements & P rinciples of D esign C reated by L aura M cKee
    2. 2. Magazine Questions <ul><li>What attracts you to the cover? </li></ul><ul><li>What do you think the message is? </li></ul>
    3. 3. Vocabulary As in just about any field of endeavor, it helps to have a common language to describe things. If I say 'dohickey' and you say 'doodad', we may not know we're talking about the same thing. Vocabulary is vital for correct principles to be taught in any discipline.
    4. 4. Design Concepts <ul><li>Alignment </li></ul><ul><ul><li>Left, right, center, justified </li></ul></ul><ul><li>Proximity </li></ul><ul><ul><li>Placement of graphic/pictures to related text </li></ul></ul>
    5. 5. Design Concepts (continued) <ul><li>Repetition </li></ul><ul><ul><li>Use of bullets, numbers, symbols, graphics, or pictures used more than once. Creates unity. </li></ul></ul><ul><li>Contrast </li></ul><ul><ul><li>Large vs. small </li></ul></ul><ul><ul><li>Dark vs. light </li></ul></ul><ul><ul><li>Thick vs. thin </li></ul></ul>
    6. 6. Elements of Design <ul><li>Line </li></ul><ul><li>Shape </li></ul><ul><li>Form </li></ul><ul><li>Space </li></ul><ul><li>Color </li></ul><ul><li>Texture </li></ul><ul><li>Value </li></ul>
    7. 7. Line <ul><li>A straight or curved mark connecting any two points. </li></ul><ul><li>Most obvious lines are rules, boxes, and borders. Less obvious-but more powerful-are lines that direct your eye or define the mood. </li></ul>
    8. 8. Identify which line represents Formality, romance, excitement, mystery, tranquility, or anger 1 2 3 4 5 6
    9. 9. Mood Definition <ul><li>Formality —Used for professional, conservative or structured documents. Recognized by straight lines and even patterns. </li></ul><ul><li>Excitement— Represented by straight lines, sharp angles, and irregular patterns. </li></ul><ul><li>Tranquility or Romance— Used in fashion ads, movie promotions and travel brochures because the lines are made with soft curves & regular patterns. </li></ul>
    10. 10. Mood Definition (continued) <ul><li>Mystery is used if you need to entice your audience to figure out a puzzle. Made with unusual lines & patterns—especially those with optical illusions. </li></ul><ul><li>Anger is seen as highs & lows with sharp peaks & valleys—and incites action. </li></ul>
    11. 11. <ul><li>Do you want to make any changes to your choices? </li></ul>
    12. 12. Answers
    13. 13. Shapes <ul><li>Shapes define objects, attract attention, provide identity and communicate ideas. </li></ul>Geometric shapes Organic shapes look like things from nature.
    14. 14. Forms <ul><li>Forms are 3-dimensional. Where shapes are flat, forms have height, width and thickness. </li></ul>
    15. 15. Space <ul><li>The absence of elements or the area between or around elements. </li></ul><ul><li>Space is used to rest the eye, to visually organize, and to make text more readable. </li></ul>
    16. 16. Color <ul><li>The most critical design element on the page. </li></ul><ul><li>It is the most difficult to work with and the most effective in achieving the results you want. </li></ul>
    17. 17. Primary Colors Secondary Colors Tertiary Colors 12-Step Color Wheel
    18. 18. Primary & Complementary Colors
    19. 19. Warm Colors <ul><li>Reds, oranges, and yellows are considered warm colors. Warm colors are said to come towards you. </li></ul>
    20. 20. Cool Colors <ul><li>Blues, greens, and purples are considered cool colors. Cool colors are said to move away from you, or appear more distant. </li></ul>
    21. 21. Texture <ul><li>The structure or grain of a surface gives added dimension to a layout. </li></ul><ul><ul><li>Design is FUN </li></ul></ul>
    22. 22. Value <ul><li>Relative darkness or lightness of a color. </li></ul><ul><li>Adds contrast and texture to a page and can set the mood—great for web page backgrounds. </li></ul>
    23. 23. Principles of Design <ul><li>Balance </li></ul><ul><li>Unity </li></ul><ul><li>Emphasis </li></ul><ul><li>Rhythm </li></ul><ul><li>Pattern </li></ul><ul><li>Contrast </li></ul><ul><li>Movement </li></ul>
    24. 24. Balance <ul><li>The distribution of weight; may be either symmetrical or asymmetrical. If you see something hanging crooked it makes you feel uneasy until it is balanced. </li></ul>Asymmetrical (informal) balance means each side of an imaginary line are different yet equal. Symmetrical (formal) balance means both sides of an imaginary line are the same.
    25. 25. Pattern/Rhythm <ul><li>Artists create pattern by repeating a line , shape or color over and over again. </li></ul>
    26. 26. Rhythm <ul><li>A regular or harmonious pattern created by the alternation of contrasting elements. </li></ul><ul><li>This can be music, speech, poetry, and dance. On the printed page, repetition of elements at regular intervals communicates calmness & stability. </li></ul><ul><li>Variations or abrupt changes in size, color or spacing of repeated elements can add a sense of liveliness and excitement. </li></ul>
    27. 27. Proportion <ul><li>Describes the size, location or amount of one thing compared to another. </li></ul>
    28. 28. Emphasis <ul><li>Special weight or importance placed upon something. </li></ul><ul><ul><li>In speech we talk louder or whisper. In appearance we dress or style our hair differently from the norm. With objects, we paint them bold colors, build them enormous or make them noisy. We make them different! </li></ul></ul><ul><li>Use contrast </li></ul><ul><li>Add texture </li></ul><ul><li>Color headings & graphics or backgrounds </li></ul><ul><li>Lead the reader to the most important thing on the page </li></ul>
    29. 29. Unity <ul><li>Each element in a layout should have a visual connection with something else in the layout to establish unity. Even elements that are unrelated and separate can be aligned to make them look as if they all belong together. </li></ul>