1. Introduction to Visual Design
Digital Multimedia
Introduction to Visual Design

2. Elements of Visual Design
Visual design is the process of
Planning, arranging, and integrating visual elements of art to accomplish or address a particular purpose.
Visual design is important when designing printable documents, presentations for viewing, or other elements which need to attract and retain interest.

3. Elements of Visual Design
Visual design and layout can be as important as the actual content of the multimedia presentation
Image: Letterhead, business card, and mailing card with similar design and layout

4. It’s not just about the visuals, but conveying
YOUR INFORMATION.

5. Elements of Visual Design
Some of the most basic elements of visual design are
Lines
Shapes
Forms
Space
Color
Texture
Image: Magazine advertisement for NYC School of Visual Arts

6. Elements of Visual Design
A line is a continuous mark made on some surface by a moving point.
There are five main types of lines
Horizontal
Vertical
Diagonal (also known as slanted)
Curved Lines
Zigzag Lines
Image: Examples of images formed by a combination of solid, curved, and filled lines

7. Elements of Visual Design
Horizontal lines simply flow from left to right or from any fixed point to another in the opposite direction
Note – A horizontal line may not always
be a “straight line”
Left Image: Imperfect, or flawed horizontal lines.
Right Image: Horizontal lines in varying widths, patterns, and distance equity

8. Elements of Visual Design
Vertical Lines
Vertical lines simply flow from any fixed point to another in the opposite direction vertically
Left Image: Vertical lines
Right Image: Vertical lines in varying heights used to simulate depth

9. Elements of Visual Design
Diagonal lines, also known as slanted lines, flow vertically and horizontally.
Diagonal lines can be useful for
Adding an effect of direction
Drawing eyes towards or away from a focal point
Creating a sense of movement within a space
Image: Diagonal lines with a downward vertical flow from left to right. In this example, the white lines create an illusion of a “white line”

10. Elements of Visual Design
Curved Lines are non-fixed lines which flow with or without pattern away from a fixed point
Curved lines create flow, relax harsh forms or shapes, or provide a change in focal point
Left Image: Curved lines with connecting lines
Right Image: Curved lines with fixed centers

11. Elements of Visual Design
Zigzag Lines change direction from one fixed point to another
Image: Vertical and Horizontal ZigZag

12. Elements of Visual Design
Shapes are two-dimensional objects. A 2-d object has height and width, yet no depth. Shapes fall into two categories
Geometric Shapes
Organic, or free form shapes
Left Image: Geometric shapes formed by lines
Right Image: Shapes formed by free form drawing

13. Elements of Visual Design
Geometric Shapes look as though they were made with a ruler or drawing tool. Circles, Squares, and triangles are examples of geometric shapes
Image: Geometric shapes formed by lines

14. Elements of Visual Design
Organic shapes are not regular or even. Clouds, flower petals, and other free form shapes are formed by connecting or overlapping lines
Image: Free form shapes drawn by digital artist

15. Elements of Visual Design
Forms are objects with three dimensions.
Forms have height, width, and depth.
Some examples of forms are
Sculptures
Boxes
Cans
Cups
Image: Cast recreation of the popular sculpture Bird Girl

16. Elements of Visual Design
Forms can be 3-d renderings of two-dimensional objects.
Image: 3d renderings of two-dimensions geometric shapes

17. Elements of Visual Design
Space refers to the real or implied distance between, around, above, below, and within objects.
Spacing of elements is important so that viewers have visual breaks between items, objects, or data
White space helps draw attention to content
Image: Inefficient use of white space / open space

18. Elements of Visual Design
Efficient use of space separates visuals and allows viewers to focus on individual items
Image: Collage with defined borders / white space

19. Elements of Visual Design
Inefficient use of space runs visuals together and can be confusing
Image: Collage with no space used for borders / separation

20. Elements of Visual Design
Lack of space in a web element can cause confusion to users
Image: Web content with questionable use of spacing / white space

21. Elements of Visual Design
Space is the area we have as creators of content to work within

22. Elements of Visual Design
Space is the area we have as creators of content to work within

23. Elements of Visual Design
Space can be “real” when defined by units of measure
Examples
3 miles
3 feet
3 yards
8.5 x 11 inches (standard paper)

24. Elements of Visual Design
Space can be implied by representations of measurement
In this example, space in miles is
represented as a certain range of
distance on the screen
Image: Web Content: Map

25. Elements of Visual Design
Space can also be referred to in abstract terms that refer to general areas or zones rather than specific coordinates or locations
Examples
Bottom of Page
Other side of the room
Top left
Bottom Right
Centered Vertically
Image: Place that chair “to the left of the fire place” implies a general area, not a specific, measurable location

26. Elements of Visual Design
Focal Point refers to the element that you want to first attract the attention of the viewer
Image: Landing page for a professional references web element. Can you identify the focal point on this page?

27. Elements of Visual Design
Focal Point refers to the element that you want to first attract the attention of the viewer
Image: Which of these layouts uses the proper focal point?

28. Elements of Visual Design
Perspective is a technique that creates an illusion of depth and volume on a two-dimensional surface
Perspective can be attained by
Overlapping
Size Variation
Placement
Converging Lines
Image: Depth of field created by decreasing size of patterned lines.

29. Elements of Visual Design
Perspective by overlapping
Laying one image over another creates perspective through the illusion of optical order
Image: Which image seems “closer” due to overlapping?

30. Elements of Visual Design
Perspective by size variation
Changing the size of geometric or freeform shapes can create perspective
Image: The smaller ship to the left and the tower in the distance are examples of perspective via size. The size of each item identifies its distance from the focal point

31. Elements of Visual Design
Perspective by placement
Changing the placement of geometric or freeform shapes can create perspective
The walls of these blocks are reduced
in size to produce a 3-D effect
Shadowing also adds effect
Image: Which cube seems closest to you?

32. Elements of Visual Design
Perspective by converging lines
Creating a flow or effect by reduction or increase in lines or patterns
Image: This is a great example of converging lines and size variation

33. Elements of Visual Design
Perspective by converging lines
Creating a flow or effect by reduction or increase in lines or patterns
Image: Path and flow can be created in images and in freehand drawing

34. Elements of Visual Design
Texture refers to the surface characteristic or quality that you see or feel.
Common textures are
Rough
Smooth
Dull
Shiny
Soft
Sandy
Image: The color breaks in this image are an example of visual texture

35. Elements of Visual Design
Texture can
Be recreated through color and pattern
Imply movement or rhythm
Add energy to a multimedia design
Image: The patterns shown allow a viewer to visualize how a texture looks / feels

36. Elements of Visual Design
Balance is the arrangement of elements so that no one part of the work overpowers or seems heavier than any other part.
Balance creates a feeling of equal importance across a project
Unbalanced amounts of a certain media can disengage viewers
The most common balance issue is having too much of one element as compared to the rest of the multimedia project
Image: The patterns shown allow a viewer to visualize how a texture looks / feels

37. Elements of Visual Design
Balance allows viewers to take in all of the information in a timely manner
Image: The image above has excellent balance horizontally and vertically
Notice the short / tall / short / tall / short pattern in the product placement

38. Elements of Visual Design
Symmetry is an exact mirror reflection. Whatever appears on one side of the design is mirrored on the other.
Symmetrical balance is formal, ordered, and stable
Image: The images above show perfect and approximate symmetry.

39. Elements of Visual Design
Harmony occurs when the visual design elements have similarities.
Developers use color, pattern, or
common shapes to create harmony.
Image: News websites are commonly referred to as “anti-harmony” due to the overcrowding and constant change of their respective web content

40. Elements of Visual Design
Harmony occurs when the visual design elements have similarities.
Image: Simple, uncluttered layouts contribute to harmonious web content

41. Elements of Visual Design
Emphasis is a point of interest that the user sees first
Emphasizing content creates a focal point and can make an element or object in a work stand out
Image: Emphasizing through color is an easy way to bring focus to an element

42. Elements of Visual Design
Proportion refers to the size relationships of certain elements to the whole and to each other
Image: Emphasizing through size variation is an easy way to focus viewers on a certain object

43. Elements of Visual Design
Pattern is a two-dimensional decorative effect achieved through the repetition of colors, lines, shapes, or textures.
Patterns add visual interest
and can carry a theme
throughout a presentation
Image: The famous tartan pattern used by Burberry

44. Elements of Visual Design
Color Theory is a standard set of guidelines about using color
Applying color theory can enhance multimedia
Image: Example of a Color theory reference chart provided to design students at the Savannah College of Art and Design

45. Elements of Visual Design
The RGB Color model is designed specifically to display color on screen.
RGB is called so because it uses Red, Green, and Blue to create a variety of colors.
Computer monitors and televisions emit color as RGB.
Image: The RGB Colorspace shown in complete wheel format.

46. Elements of Visual Design
The CMYK Color model is generally used for printed deliverables, such as textbooks, brochures, or simple printed documents.
CMYK uses cyan, magenta, yellow, and black dyes to create color when light shines on paper
The ink subtracts color from white, so it is the opposite of the RBG model.
Image: The CMYK Colorspace shown above is simulated. By nature, the CMYK cannot be completely accurate as shown as digital throughput.

48. Elements of Visual Design
Color is derived from light and has three distinct properties
Hue
Value
Intensity
Image: Chromatic color table

49. Elements of Visual Design
Hue is the name of a color. Red, yellow, and blue are types of hues.
Image: Color in theory may not always match color in application

50. Elements of Visual Design
Value refers to the lightness or darkness of a color. For example, the lightest value of red is pink, and its darkest value is maroon. You can make the hue of Red lighter by adding white, and darker by adding black
Image: Red will lighten in value with the addition of white

51. Elements of Visual Design
Intensity refers to the brightness or dullness of a color.
A strong and bright hue, such as red, has high intensity, and tends to stand out.
A dull hue has intensity.
Image: Intensity is considered by some artists to be a subjective value.

52. Thank you for viewing
What’s Your Message?