VISUAL DESIGN GUIDE

1. VISUAL DESIGN GUIDE Fall 2007 Ling

2. Theories Contents • Principles • Vocabulary Visual Design Guide • Elements • References Click the title and check details

3. Visual Effects and Variable Factors Theories

4. Visual Effects and Variable Factors • Definition: “A number of design components affect or modify what we see, but are not constant because they represent changeable relationships between the viewer and the scene. These relationships are called variable factors.” • Important factors which the designer should be aware of and which may be used effectively in proposed designs: • Scale • Proportion • Distance • Observer position • Atmospheric conditions • Light • Seasons • Motion Resources from the following website: http://www.fhwa.dot.gov/environment/visql/visql03.htm

5. Scale • Definition: scale is the relationship between two or more objects being compared in terms of apparent size. • Objects that are in scale appear to belong together. Objects that are out of scale exhibit a visual imbalance; one or more objects appear to be extremely dominant, even overpowering. • Scale is often considered to be the relationship between the human figure and other objects'. The size of a human is roughly constant; objects that fit well with human size and physical capabilities tend to be in scale. • Example: “belong together” Dominant structure Resources from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

6. Proportion • Definition: proportion is the relationship between components of a single object or composition, such as the ratio between height and width or the relative size of a part in relation to the whole. • Components are in proportion to one another when they exhibit a visually balanced attitude; objects not in proportion do not appear to be compatible. • Some ratios, when applied to design, create a visually pleasing, balanced composition, such as Golden Ratio. Resources from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

7. Distance • Effects: Objects at close range tend to be examined by the observer, and subtle differences become apparent. At greater distance, finite differences in detail become lost. • Outlines of objects become the main form of identification at great distances. Objects which the designer wishes to be seen at a distance should be of bold texture, contrasting in color to their surroundings, and unique in form. • Objects which need to blend with their surroundings at a distance should be similar to their environment in texture, form, and color. My picture Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

8. Observer position • Definition: observer position determines how much of a total object is seen at one time. • Objects are most visible from a position above the object. Most detail may be seen at a position near to eye level. Objects that are above the observer tend to be dominant; however, we can see less of an object, and it becomes difficult to accurately determine the shape or proportions of the object being viewed. Above object Near to eye level Object above Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

9. Atmospheric conditions • Definition: Atmospheric conditions affect our perception of objects by increasing or decreasing visibility. • Bright, sunny days maximize color variations that help us to distinguish between objects in the landscape. • Cloudy days tend to reduce the contrast of objects, thereby helping to blend one with another; thus colors appear less vivid, somewhat darker. Rain, fog, smog, and falling snow also reduce our visibility and blend colors. • When choosing colors for a proposed design, consideration should be given to the prevailing atmospheric conditions regardless of whether the design is intended to blend with or contrast with the surroundings. Smog day/ blur shape of the mountain Bright, sunny day/ Clear shape of the mountain Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

10. Light • Effects: Bright light aids in color reflection and general visibility. The direction in which the light source strikes the object in relation to the observer determines what we see. • Directions: • Objects that are back lighted are distinguished by their form - details of the object are lost; the silhouette becomes the major feature. • Objects which are front lighted reflect the most light; therefore, colors become the most obvious feature. Front lighted objects tend to appear two-dimensional or flat, because little shadow exists under these conditions. • Side lighted objects benefit from the shadows created, and textures are more apparent. Objects appear three dimensional; the viewer can distinguish depth at greater distance. Side lighting conditions create dramatic effects in nature in late afternoon. back front side Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

11. Seasons • Seasons affect our visual perception due to the wide variation in color of the surrounding environment. • Spring flowers and fall leaf colors tend to dominate in the environment and negate other features. In summer, green or brown colors predominate in the landscape; In winter, predominant colors tend to be browns or shades of gray and white in snow country. • colors which do not harmonize well with these colors tend to become more apparent. • Objects which have little visual impact for most of the year become major landscape features due to the heightened contrast and increased awareness of line and form. Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

12. Motion • Motion affects our perception of detail. • When the observer is in motion, fine detail or subtle differences in texture are lost; the observer relies on color and form as an aid to identification of objects. • When the observer is stationary, motion attracts interest. Slow motion attracts attention to detail in the composition of objects rather than in the objects themselves. Attracting interest Line of the sight follows the motion Resource from: http://www.fhwa.dot.gov/environment/visql/visql03.htm

13. Principles of Design: • Alignment • Balance • Emphasis • Harmony • Opposition (contrast) • Repetition • Variety • White space Principles • Principles of Art Composition: • Percy Principles of Art and Composition • http://www.goshen.edu/art/ed/percy1.html

14. Alignment: • Definition: the way different objects within a composition are spaced to each other.(http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design#Alignment) • Effect: alignment brings order to chaos. How you align type and graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design. (http://desktoppub.about.com/od/designprinciples/l/aa_pod1.htm) Divide content with patterns Divide content with columns Sign indicates reading order

15. Balance: • Definition: Balance is the consideration of visual weight and importance. It is a way to compare the right and left side of a composition. •  (http://www.goshen.edu/art/ed/Compose.htm) A landscape takes on a formal look when it has a centrally located focal point, such as this tree. Elements on either side of the focal point are placed symmetrically. The gazebo balances the much larger tree on the right. Although it is smaller in size, the gazebo's stiff, solid form carries as much visual weight as the tree's spreading canopy. When a focal point is positioned off-center, a design is asymmetrical and therefore informal. In this case, the horizontal feature (shrubs) balances the vertical feature (tree). Not only is this landscape unbalanced, it also has too many competing focal points. The result is a "busy" picture that is visually ambiguous and unsatisfying. http://www.homedecorresource.com/html/garden/balanceindesign.htm • 3 types of Balance: • Symmetrical or formal balance • Asymmetrical balance or informal balance • Radical balance

16. Symmetrical or formal balance • Definition: Both sides are similar in visual weight and almost mirrored. Because symmetrical balance often looks more stiff and formal, sometimes it is called formal balance. • See examples below: http://www.usask.ca/education/coursework/skaalid/theory/cgdt/balance.htm http://www.goshen.edu/art/ed/Compose.htm

17. Asymmetrical balance or informal balance: • Definition: above both sides are similar in visual weight but not mirrored. It is more casual, dynamic, and relaxed feeling so it is often called informal balance. • Examples: http://www.uwm.edu/Dept/CUTS/noise/noiseb.htm http://www.tpub.com/content/photography/14209/css/14209_120.htm

18. Radial balance: • Definition: ratio balance is not very common in artist's compositions, but it is like a daisy or sunflower with everything arranged around a center. http://photografr.com/tag/repetition/ http://www.hope.edu/academic/art/past/VanderBurgh/window%20pop.htm

19. Emphasis: • Definition: making a specific element stand out or draw the eye. • Can be achieved by placing elements on the page in positions where the eye is naturally drawn, by using other principles such as contrast, repetition, or movement. Bold and italic type provides emphasis for text. Graphic elements gain emphasis through size, visualweight, color, complexity, uniqueness, placement on the page, and other features. • (http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design#Emphasis) • Examples: • By Contrast • By Color • By Placement • (http://www.usask.ca/education/coursework/skaalid/theory/cgdt/emphasis.htm) • (http://www.bluemoonwebdesign.com/art-lessons-4.asp)

20. By contrast

21. By color:

22. By placement:

23. Harmony: • Definition: graphical elements can be said to be working in harmony - the individual parts come together as visually compelling and a meaningful whole. Harmony pulls the pieces of a visual image together. • Harmony can be fostered by: Similar fonts and colors/pictures which match the topic/ • graphics which are similar in tone. • Disharmony can also be used to enhance the emotional complexity, to challenge the viewer, and to provide a contrast within the overall composition. Repetition to achieve harmony Individual parts come together Harmony by similar colors http://www.usask.ca/education/coursework/skaalid/page/design/harmony.htm http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design#Emphasis http://www.educ.kent.edu/community/VLO/design/principles/index.html

24. Opposition or contrast • Definition: distinguishing by comparing/creating differences. • Contrast may be used to advantage by the designer when it is desired to have objects easily seen. For example, road signs and pavement markings employ contrasting colors for safety reasons. High contrast can be detrimental if it causes unnecessary distraction away from a desired view. • Some ways of creating contrast among elements in the design include using contrasting colors, sizes, shapes, locations, or relationships. • Some opposition: curved and straight, high and low, dark and light (low key - high key), open and closed, positive and negative, soft and hard, smooth and rough, parallel and branching, spiral and concentric, and so on. By color By size By color

25. Repetition: • Definition: repeating a sequence; having it occur more than a few times. • If things are repeated without any change they can quickly get boring. However, repetition with variation can be both interesting and comfortably familiar. http://www.goshen.edu/art/ed/Compose.htm • Repetition gives motion. • In design, repetition creates visual consistency in page designs, such as using the same style of headlines, the same style of initial capitals, or repeating the same basic layout from one page to another. • http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design http://photografr.com/tag/repetition/ http://jimdavies.blogspot.com/2007_03_01_archive.html http://photografr.com/tag/repetition/

26. Variety • Definition: you create variety when elements are changed. • Variety provides contrast to harmony and unity. • Repeating a similar shape but changing the size can give variety and unity at the same time. Keeping the same size, but changing the color can also give variety and unity at the same time. In visual composition, there are many ways you can change something while simultaneously keeping it the same. http://www.goshen.edu/art/ed/Compose.htm http://www.educ.kent.edu/community/VLO/design/principles/variety/index.html

27. White space • Definition: Areas of a design devoid of text or graphics. White space includes margins, gutters, space between lines of type (leading), off-set of text from images (text wraps) and any other part of the page that is empty. • White space is also analogous to "negative space" where "positive space" is defined as images, blocks of text, and other graphical elements. (same as link above) • White space can add to or detract from the balance, unity, harmony, rhythm, and overall success of a design. White space can provide emphasis, contrast, and movement. • http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design Which one is more high fashion? Less whitespace More whitespace www.designenterprise.com/tag/ala

28. Color • Line • Shape • Texture • Volume or Form Elements

29. Color: • Color saturation, sometimes called "color intensity" or brightness can give a feeling of depth and space.  • Color affects us emotionally, with different colors evoking different emotions. In short color has the capacity to affect the human nervous system. (Warm and cool colors) • Colors that occur most frequently in nature are greens, blues, and browns in varying shades. • Colors that harmonize well seem to belong together and produce pleasing visual effects. Colors that do not harmonize are disturbing to the viewer. • The vocabulary of color includes: • Hue: refers to the names of the primary colors, red, green and blue.Value: lightness and darkness of the color - the amount of white or black added. Intensity: the purity or saturation of the color Monochromatic color: use of one color where only the value of the color changes Analogous colors:colors that are adjacent to each other on the color wheel, e.g. yellow and green. • Complementary colors : colors opposite to each other on the color wheel. • Resources: http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.html

30. Analogous colors: colors that are adjacent to each other on the color wheel, e.g. yellow and green. Analogous colors next to each other on the color wheel "get along" and are referred to as being harmonious. Analogous colors are often used in visual design and have a soothing affect. http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.html

31. Complementary colors: colors opposite to each other on the color wheel, e.g. Blue-violet and yellow, represent colors positioned across from each other on the color wheel. Complimentary colors exhibit more contrast when positioned adjacent to each other -for example yellow appears more intense when positioned on or beside blue or violet (see picture below). http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.html

32. Warm colors include: yellows, red and orange we associate these with blood, sun and fire. http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.html

33. Cool colors include: violet, blue and green because of our association with snow and ice. http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.html

34. Line • Line is the path of a moving point. Lines define the edges of shapes and forms.   • Types of lines: Horizontal lines Vertical lines Horizontal and vertical lines used in combination Diagonal lines The curve of a line

35. Horizontal lines suggest a feeling of rest or repose because objects parallel to the earth are at rest. In this landscape, horizontal lines also help give a sense of space. The lines delineate sections of the landscape, which recede into space. They also imply continuation of the landscape beyond the picture plane to the left and right. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

36. Vertical lines often communicate a sense of height because they are perpendicular to the earth, extending upwards toward the sky. In this church interior, vertical lines suggest spirituality, rising beyond human reach toward the heavens. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

37. Horizontal and vertical lines used in combination communicate stability and solidity. Rectilinear forms with 90-degree angles are structurally stable. This stability suggests permanence and reliability. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

38. Diagonal lines convey a feeling of movement. Objects in a diagonal position are unstable. Because they are neither vertical nor horizontal, they are either about to fall or are already in motion. The angles of the ship and the rocks on the shore convey a feeling of movement or speed in this stormy harbor scene. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

39. The curve of a line can convey energy. Soft, shallow curves recall the curves of the human body and often have a pleasing, sensual quality and a softening effect on the composition. The edge of the pool in this photograph gently leads the eye to the sculptures on the horizon. Sharply curved or twisted lines can convey turmoil, chaos, and even violence. In this sculpture, the lines of the contorting bodies and the serpent help convey the intensity of the struggle against the snake's stranglehold. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

40. Shape • Shape is an area enclosed by line. It is 2 dimensional and can be geometric or organic. • Types of shape: Geometric shapes and forms Organic shapes and forms Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

41. Geometric shapes and forms include mathematical, named shapes such as squares, rectangles, circles, cubes, spheres, and cones. Geometric shapes and forms are often man-made. However, many natural forms also have geometric shapes. This cabinet is decorated with designs of geometric shapes. Organic shapes and forms are typically irregular or asymmetrical. Organic shapes are often found in nature, but man-made shapes can also imitate organic forms. This wreath uses organic forms to simulate leaves and berries. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

42. Texture Texture is the actual surface feel of an area or the simulated appearance of roughness, smoothness or many others. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

43. Form Forms are 3-Dimensional. They occupy space or give the illusion that they occupy the space. Resources: http://www.getty.edu/education/for_teachers/building_lessons/elements.html

44. Design principles • Golden Ratio • Six Visual elements or Art elements • Subject Matter Vocabulary

45. Vocabulary • Design principles: • We think of the principles as ways to work with and arrange the elements. • Golden Ratio: • In mathematics and the arts, two quantities are in the golden ratio if the ratio between the sum of those quantities and the larger one is the same as the ratio between the larger one and the smaller. The golden ratio is approximately 1.6180339887. • Resource from: http://en.wikipedia.org/wiki/Golden_ratio • Art elements: • We think of the elements as the basic visual material with which to make art. Is hard to imagine anything visual without the use of one or more of these elements. 

46. Subject Matter: • “Subject matter" is similar to "topic" or "content" when teaching art. "Content" may also include interpretations that go beyond the obvious subject matter used by the artist. Content generally includes "symbolic" meanings implied by the work.  • Resource from: http://www.goshen.edu/art/ed/Compose.htm

47. The Principles of Good Design • http://www.bluemoonwebdesign.com/art-lessons.asp • Visual Literacy • http://www.educ.kent.edu/community/VLO/design/principles/index.html • Percy Principles of Art and Composition • http://www.goshen.edu/art/ed/percy1.html • COMPOSITION & the ELEMENTS of VISUAL DESIGN • http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm • Creating contrast: how to draw the eye? • http://www.metatoggle.com/design_crs/contrast.html • The Elements of Art • http://www.getty.edu/education/for_teachers/building_lessons/elements.html References

48. Composition and Design Elements, Principles, and Visual Effects http://www.goshen.edu/art/ed/Compose.htm Graphic Design/Principles of Design http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design U.S. Department of Transportation http://www.fhwa.dot.gov/environment/visql/visql03.htm Defining the Principles of Design Through Metaphor or Allegory http://desktoppub.about.com/od/designprinciples/l/aa_pod1.htm Design Notes https://learn.vt.edu/courses/1/EDCI_5564_92231_200709/content/_786691_1/visual_design_guide.htm