Digital Marketing Design: 8 Things You Need to Know

1. Color

“Color is where a lot of people get hung up,” says Charlie Cooper, Senior Design Manager at Mailchimp. “They wonder, how many colors do I need? Do I have too many, not enough?”

As a rule, select a dominant color and 3 or 4 more for a secondary palette that ensures your visual assets don’t become monotonous. Try not to go beyond that. “Repetition of the same colors across channels strengthens brand awareness,” says Mailchimp Senior Product Designer Sarah Dunn. “The fewer colors you use, the cleaner your design will look, which means people won’t be distracted from your message.”

Your colors should reflect your brand's personality. There are several things to consider when choosing colors.

• What a color conveys also depends on the context it’s used in. Brown, for example, may seem rugged in an outdoorsy setting, but warm and inviting when associated with autumn.
• Look at the competitive landscape. “Do research on what other people in your space are doing,” Charlie says. “If you’re a garden tool company and everyone else is using green, maybe you’ll want to stand out and go with a bright yellow.”
• Your secondary palette should play well with the main color you choose, and offer variety and flexibility. If all your colors are of a similar intensity, you’ll find it difficult to highlight calls to action, new products or features, or other messaging that you want to stand out.

2. Shapes

Shapes help define the visual tone of your messages and allow you to emphasize certain elements such as your call to action (CTA).

“Shapes come into play when you want to break up pieces of information,” Charlie explains. “For example, you want to tell people that there’s a 50% off sale, and you also want to tell them that you offer free shipping on orders over $50. Using shapes can help you break these two pieces into equal levels of information.” By putting each message in its own circle or square, and placing those shapes side by side, you ensure that neither gets lost.

Different shapes also convey different meanings.

• Rectangles are perceived as businesslike, practical, and no-nonsense.
• Circles and other curvy shapes are viewed as friendlier, which is why some brands place their CTAs in boxes with rounded corners or set navigation icons within circles.
• Irregular, curvaceous, organic shapes have become popular in conveying a more natural sense of movement. They can be a welcome contrast to severe lines and angles—but, don't overuse this trendy element, as they could make your website look dated.

3. Composition

The layout, or placement, of the visual elements on your page will guide your audience through your materials so they can absorb your message. This is an important consideration, since successful composition means that you’ve arranged your design in a way that not only looks good, but is also functional and effective.

Once you’ve prioritized the information you want to convey, organize your layout to support it, Charlie says. “If your main, secondary, and supporting messages are all catching your eye at the same time, or the secondary or supporting messaging is coming through more loudly, reconsider the balance of the composition.”

Generally speaking, your primary message should be at the top of the page, larger and bolder than the secondary and tertiary messaging, which should appear below in descending order of importance. Headers, eyebrows (small type over your main headline), and text set within shapes as mentioned above help frame each message. Again, you can emphasize particular messages by using larger fonts and imagery.

In cultures that read from left to right, website visitors often begin viewing a page on the upper left corner and, for the most part, continue to focus on that side of the page. Placing all your important messaging on the left, however, could lead to a lopsided page that would ultimately be off-putting. Adding imagery on the right to complement messaging on the left is one way composition can reinforce the message while maintaining viewer attention. Another is to use arrows or triangular shapes to create an eye path to take readers around the website and draw their attention to what you want them to see.

When composing a layout, a grid is your friend. A grid consists of invisible "lines" that your content can be placed on and acts as a skeleton for your website. “Grids give order to designs and help you decide where components should be placed,” Sarah says. They’ll ensure that visuals don’t seem to be floating unrelated to other layout elements.

4. Typography

Text on your website is much more than words. The font or typeface you use to tell your story is an important design element. “Typography and color palette work together to ensure the brand is recognizable wherever it appears,” says Sarah. “Typically, a brand has a primary font that expresses your brand identity and a secondary typeface typically used for titles, paragraph text, or descriptions.” Too many fonts, like too many colors, can generate visual clutter than distracts from your message.

In print design, serif fonts were long believed to be more legible than sans serif options. Online and in email, however, sans serif typefaces are usually preferred for longer blocks of text, as they render cleanly even on low-resolution screens. Beyond the choice of font, kerning (the spacing between letters), leading (the spacing between lines), size, color, and line length are other typographic elements that affect readability.

Above all, your text needs to be readable. A simple way to test readability is to ask several people of different ages to look at your website and print materials and tell you if they can easily read it without trouble. Your “reviewers” can be friends, family, or peers.

5. Alignment

The careful placement of text and images helps guide visitors' eyes where you want them to look on your website. “Composition is a well-crafted design system that caters to the components that live inside it,” Sarah says. “Alignment is the placement of those components.”

As with composition in general, using grids ensures a clean, logical, visually-pleasing alignment. Charlie suggests beginning by determining if you want your text to be left-aligned, right-aligned, or centered. While centered copy can command attention, making it popular for headlines, left-aligned text is the easiest to read, especially in email.

Once you’ve determined your text alignment, align your images and other graphic elements to complement the copy placement. “A left-aligned text box may need a right-aligned image to keep balance on your page. If you chose a center alignment for your copy, you’ll want the image to be centered above, below, or possibly even behind your text box,” Charlie says.

6. Balance

As indicated above, balance works hand in hand with alignment. “A well-balanced composition feels stable and aesthetically pleasing,” Sarah says. “While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t focus on other areas.” While your primary message should be the first and most dominant focal point, it shouldn’t be the only one. Balance helps guide viewers beyond the upper left corner where their eyes are likely to first land.

Two principles can ensure a well-balanced layout. The simplest is symmetry, particularly horizontally. The desire for symmetry is innate in humans.

The other principle, which may at first seem to contradict symmetry, is the rule of thirds. This states that a composition should be divided into thirds, both horizontally and vertically, to create maximal visual interest while still maintaining a pleasing sense of order. This is why in landscape photography the horizon usually appears either one-third or two-thirds from the top of the image, rather than in the center. Grids can help you achieve an optimal balance when it comes to placement.

Beyond the placement of elements within the layout, balance considers the distribution of color and the size of elements on the page. Having nothing but bold colors on one side of a composition and only pastels on the other will feel off-balance, even if the positioning of the elements is perfectly symmetrical.

“Balance in hierarchy, composition, and layout all allow the user to process your information,” Charlie says. “It means that the design is not overwhelming the content, and the content isn’t so overwhelming that it loses meaning.”

7. Negative space

Sometimes called white space, this is the empty space around an image or text. “Negative space is at the heart of everything we’ve been talking about,” says Charlie. “Giving balance to a page requires you to give your customer a moment to breath while taking in your content.”

A layout with insufficient negative space will feel cramped, and even cheap. This goes back to the days of print, when brands on a budget would force as much information onto a page as possible to avoid having to spend money on additional paper. What’s more, particularly on mobile devices, insufficient negative space around CTAs and other click targets can make navigation frustrating. You need to ensure there’s enough room for the finger to click a button without inadvertently hitting another target.

Conversely, too much negative space can suggest that the brand lacks substance. Then again, think of Google’s home page, which is overwhelmingly white space. This proves that there are no hard-and-fast rules when it comes to how much negative space is enough, and the same holds true regarding most other design elements as well.

8. Mobile vs. desktop design

As you create your email template and website designs, remember that your audience will view them on both mobile and desktop devices. It’s important to make design “responsive,” which means it’ll look good and appear as you planned on different devices, browsers, and screen types.

At the heart of responsive web design is a flexible or fluid grid, which is created with Cascading Style Sheets (CSS). CSS is a computer language that indicates how things will look on screened devices and even when printed. A flexible grid enables the layout to resize to accommodate devices’ varying widths while maintaining legibility. Graphic elements will be repositioned in the layout as needed to ensure that the text remains legible. Along with the layout, the graphic elements themselves can change with the size of the display screen.

One additional aspect to keep in mind regarding web design is compliance with the Americans with Disabilities Act (ADA). Among the requirements are text that can be resized up to 200%, maintaining a color contrast ratio of at least 4.5 to one between text and background, and ensuring that graphics do not flash more than 3 times per second.

Find what works for you

All of this may seem daunting, but many—if not most—of these principles are somewhat instinctive. “Don’t overthink it,” Charlie advises. “Less is more. Keep it simple, and share your designs and thoughts with people who aren’t too close to your project. Input can be helpful, but also go with your gut. You’ll know what feels right for your brand.”