Visual Design Basics and Why You Need to Use Them

Did you know that understanding the basics of visual design could mean the difference between getting a new customer or not, closing an important deal or not, even saving a life or not?

Visual design is part of our everyday lives, whether or not we consciously take notice. Our ability to use good visual design to communicate effectively is often more important than we think it is.

As visual beings our brains are wired to recognize concepts and meaning through images faster than through words. A good combination of words and images can be incredibly powerful.

Imagine for a moment…

One evening, you are at a restaurant with a close friend and they begin chocking.

In that moment, if you had to remind yourself how to do the Heimlich Maneuver, which option would you want to have available? The first one as a visual or the second as a numbered list of text?

Option One

Image from John Hopkins Medicine: https://www.hopkinsmedicine.org/health/wellness-and-prevention/choking-and-the-heimlich-maneuver

Option Two

Yes, You Can Use Visual Design

You may think that you can’t communicate visually because you are not creative or artistic.

Keep in mind visual design is not art. Each are important but serve a different purpose.

Knowing the basics of visual design is step in the right direction to help you communicate more effectively with your audience.

What is Visual Design?

  • Is user focused
  • Uses images, colors, fonts, shapes, and other elements
  • Engages the user
  • Builds trust and interest

Basic Elements of Visual Design

Use these basic elements in combination to create a visual design:

  • Lines connect two points and can be used to help define shapes, make divisions, and create textures. All lines, if they’re straight, have a length, width, and direction.
  • Shapes are self-contained areas. To define the area, the graphic artist uses lines, differences in value, color, and/or texture. Every object is composed of shapes.
  • Color palette choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information. Color theory examines how various choices psychologically impact users.
  • Texture refers to how a surface feels or is perceived to feel. By repeating an element, a texture will be created and a pattern formed. Depending on how a texture is applied, it may be used strategically to attract or deter attention.
  • Typography refers to which fonts are chosen, their size, alignment, color, and spacing.
  • Form applies to three-dimensional objects and describes their volume and mass. Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.

Principles for Creating a Visual Design

Know the elements of visual design is a start. A successful visual design needs to apply several design principles to ensure effective communication.

  • Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
  • Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements. If the design elements are arranged properly, the Gestalt of the overall design will be very clear.
  • Space is “defined when something is placed in it”, according to Alex White in his book, The Elements of Graphic Design. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
  • Hierarchy shows the difference in significance between items. Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
  • Balance creates the perception that there is equal distribution. This does not always imply that there is symmetry.
  • Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
  • Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
  • Dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size, color, position, shape, etc.
  • Similarity refers to creating continuity throughout a design without direct duplication. Similarity is used to make pieces work together over an interface and help users learn the interface quicker.

Example: Using the Elements and Principles

Utilizing the elements and principles in a design can seem overwhelming at first. Looking at examples, practice, and testing will make it easier. Below is an example webpage with some of the elements and principles highlighted. Can you find more in use on the page?

  1. Color contrast was applied to the logo making the word “stop” stand out
  2. Text spacing and size creates a visual hierarchy
  3. Featured image at the top of the page dominates to create a focal point
  4. Empty space is used around text to allow the content to breath
  5. Color backgrounds create shapes and lines to clearly divide sections on the page
  6. Icons in the same shape and color creates similarity and quickly conveys content purpose

Additional Resources

  • Visual Design Overview by John Lovett
  • Alex White’s The Elements of Graphic Design (2nd Edition)
  • Jim Krause’s Design Basics Index
  • Poppy Evans and Mark Thomas’ Exploring the Elements of Design (3rd Edition)

Jennifer

Jennifer Sharkey has experience creating and designing online learning, video, images, slide decks, handouts, conference posters, and infographics.