It’s important to understand the relationship between content and design. Content, whether good or bad, paves the way for design, and a graphic designer’s job is to understand and respond to the content given to them. They need to be able to see the patterns within the materials and find a way to create a bridge to the audience.
A while back, Patti Shank wrote a very good series on the four overarching principles of visual design—contrast, repetition, alignment, and proximity (CRAP). Beyond those principles, here are six more guidelines you should consider when creating your next design, whether it is for the small screen on a phone or tablet, a big screen on a desktop monitor, or a stand-alone image such as an infographic:
- Focal point
- White space
Organization helps the users understand the priorities of the information and ideas you present to them. Bullets on a PowerPoint slide do that, but they’re boring and so old-fashioned (see the bullet list above). You can do much better than that! Create a hierarchy by arranging your content points from the most important to the least important. If everything is important, then nothing is important. Hierarchy determines movement through design. By guiding the eye through the information in a specific order, you make the content easier to scan and digest. In smaller screens, hierarchy may be more difficult to convey, as these screens can display only small portions of content at any given time. Taking a content-first approach in your organization will bring your designs closer to being mobile-friendly.
Ways to achieve hierarchy:
- Organize the elements from the most important to the least important
- Consider the placement, size, style, and order of the information on the screen
- Use color, weight, and scale to help emphasize the important elements
- Avoid having more than three levels of hierarchy in a single page, as it leads to confusion
Figure 1 illustrates all of these ways.
Figure 1: Achieving hierarchy through design
A bold image or phrase creates a gateway into the design for the learner to navigate the materials, and it helps the learner quickly understand the main purpose of the lesson. Keep the focal point visually appealing but also topical, or you risk confusing your audience. As you get to smaller screens, consider utilizing other methods of bringing in secondary information such as hover-overs or pop-ups. Remember, a focal point doesn’t always have to be an illustrated element; it can be something such as strong typography. If sizing up your element is a challenge in limited space, consider using other characteristics such as shape, color, texture, or depth (Figure 2).
Things to keep in mind to create a focal point:
- Contrast: Make the focal point different (e.g., size, color, shape) from all other elements
- Isolation: Locate the focal point away from all other elements
- Placement: Put the focal point in an obvious and significant location
Figure 2: Creating a focal point through design
Include only the elements that are necessary for understanding the materials. It is much easier to pile everything in to ensure your learner gets every ounce of information, but harder to keep it succinct. Simplicity forces you to have good reasons for everything you add.
Tips on achieving simplicity:
- Reduction: Scrutinize each element on the screen; if you find anything that doesn’t add meaning to the overall piece, then remove it. Even if you think it may be essential, try removing it to see if your design falls apart.
- Regularity: Repeat design elements like font, color, shape, and size. Viewers can inadvertently infer significance from elements that stand out.
- Combining elements: Allow a single element of your design to serve multiple purposes. Group similar parts together to eliminate complexity.
This keeps the design focused and easy to read, so the viewer looks at the overall design as opposed to one specific area. Balance is measured through mass (the quantity of space each element takes up) and extent (the area covered by those elements). As elements are added, the “weights” of the elements need to be continually balanced, so that one area of the design does not completely overwhelm another. White space (see below) is an excellent method to create a harmonious balance in your design. As you move to a smaller screen, balance (especially when it comes to columns) may be harder to maintain due to limited widths, and elements will no longer be equal in height as you may have intended. Don’t try to maintain the same column layout if the screen does not permit it (Figure 3).
Types of balance:
- Symmetrical balance: Elements mirror one another, either horizontally or vertically.
- Asymmetrical balance: Elements are off-center. Asymmetrical design gives the elements movement to help guide the viewer through the overall piece.
- Radial balance: Elements are arranged in a circular pattern or expand from a central point.
Figure 3: Three types of balance—choose the one that is the best match to the content
White space is the term for blank areas of the design between the visual elements. White space helps the viewer understand the relationship between each item on the screen by separating groups and elements, adding emphasis, or allowing our imaginations to fill in the gaps. Too little white space creates a crowded design, while too much white space can look incomplete and create a lack of interest. Ensuring that you build in proper margins and padding for mobile screens is important, as crowded elements make it more difficult for users to pinpoint where to click on the screen.
Types of white space:
- Active white space: Space intentionally left blank for better structure and layout
- Passive white space: Naturally occurring empty space around the screen margins or blank areas inside the content
This is the hallmark of good design—the ability to bring together a variety of elements to create a cohesive design. The whole becomes greater than the sum of its parts. The elements on the page do not compete, but rather complement one another. A unified design will give a sense of wholeness or completion to the entire project. Unity can be as simple (and difficult) as using the same complementary color schemes, the same icon library, or stock photography with similar lighting and mood.
Tips to achieve unity:
- Proximity: Group related items together to make a cohesive element rather than a variety of separate bits.
- Alignment: Arrange related items along the same axis so that one element will lead to another.
- Continuity: Create a bridge between different elements by giving them the same design treatment. Be consistent in applying your styles.
- Repetition: Repeat elements such as colors, shapes, rules, or graphics throughout the design to create visual rhythm, consistency, and completeness.
Figure 4: Comparison of how to achieve unity with icon sets and photographic approach.
Before you wrap up your next project, circle back to some of these principles and see what you can do to elevate your design, engage your learner, and effectively communicate your message.