Digital Marketing Design: Learn how to make informed decisions that promote your online brand.
Whether you want to look more professional, increase your visibility, or convince someone to reach out to your business for the first time, design can play a role in achieving your goals.
“Good” design is subjective, of course. But by making informed choices based on basic design principles, you can create consistent, compelling online marketing resources that will attract your audience and increase your credibility.
The right design can be simple. Here are easy-to-follow guidelines for 8 design elements that anyone can use.
1. Color
“Color is something a lot of people get hung up on,” says Charlie Cooper, senior design manager at Mailchimp. “They wonder, ‘How many colors do I need? Is it too much, is it too little?”
As a rule of thumb, pick a dominant color and 3-4 more colors for a secondary palette so your visual assets don’t become monotonous. Try to stay within these limits. “Repeating the same colors across all channels reinforces 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 by your message.
Your colors should reflect the personality of your brand. There are several things to consider when choosing colors.
- What a color conveys also depends on the context in which it is used. For example, brown may seem harsh in an outdoor setting, but warm and inviting when associated with fall.
- Research the competitive environment. “Do your research on what other people in your area are doing,” Charlie says. “If you’re in the garden tool business and everyone else is using green, you might want to stand out and choose bright yellow.”
- Your secondary palette should blend well with the primary color you’ve chosen and offer variety and flexibility. If all colors are the same intensity, you’ll have a hard time highlighting calls to action, new products or features, or other messages you want to highlight.
2. Shapes
Forms help define the visual tone of your messages and allow you to emphasize certain elements, such as a call to action (CTA).
“Forms are used when you want to separate pieces of information,” Charlie explains. “For example, you want to let people know about a 50% off sale and that you’re offering free shipping on orders over $50. Using shapes will help you break up the two pieces into equal levels of information.” If you put each message in a separate circle or square and place these shapes side by side, none of them will get lost.
Different shapes also convey different meanings.
- Rectangles are perceived as businesslike, practical and non-serious.
- Circles and other curved shapes are perceived as friendlier, so some brands place their CTAs in boxes with rounded corners or install navigation icons in circles.
- Irregular, curved, organic shapes have become popular to convey a more natural sense of movement. They can be a nice contrast to stern lines and corners, but don’t overuse this trendy element, as it can make your site look outdated.
This example uses shapes and color to differentiate themes.
3. Composition
The composition, or arrangement, of the visual elements on your page will guide your audience through your content so they can assimilate your message. This is an important consideration because successful composition means that you’ve positioned your design so that it not only looks good, but is functional and effective.
Once you’ve prioritized the information you want to convey, organize your layout to support it, Charlie says. “If your primary, secondary and supporting message gets attention at the same time, or the secondary or supporting message sounds louder, reconsider the balance of the composition.”
In general, your main message should be at the top of the page, larger and bolder than the secondary and tertiary messages, which should be placed lower in descending order of importance. Headlines, eyebrows (fine print above the main headline), and text enclosed in shapes, as mentioned above, help frame each message. Again, you can emphasize specific messages using larger fonts and images.
In left-to-right reading cultures, website visitors often start browsing from the top left corner and, for the most part, continue to focus on that side of the page. However, placing all of the important messages on the left can make the page look one-sided, which will ultimately be repulsive. Adding images on the right in addition to the messages on the left is one way to enhance the composition to keep the viewer’s attention. Another way is to use arrows or triangular shapes to create a visual path to guide readers through the site and draw their attention to what you want them to see.
When putting together a layout, a grid is your friend. A grid consists of invisible “lines” on which your content can be placed and serves as a skeleton for your site. “Grids bring order to the design and help you decide where components should be placed,” Sarah says. “They ensure that visual elements don’t appear to be floating, unrelated to other elements in the layout.
This layout uses a grid-based composition.
4. Typography.
The text on your site is much more than just words. The typeface you use to tell your story is an important design element. “Typography and color palette work together to make sure the brand is recognizable wherever it appears,” Sarah says. “Typically, a brand has a primary font, which expresses the brand’s personality, and a secondary font, which is usually used for headlines, paragraph text or descriptions.” Too many fonts, like too many colors, can create visual clutter that detracts from your message.
In print design, sans serif fonts have long been thought to be more legible than the sans serif versions. However, on the Internet and in email, sans serif fonts are usually preferred for long blocks of text because they are readable even on low-resolution screens. In addition to font choice, kerning (letter spacing), leading (line spacing), size, color, and line length are other elements of typography that affect readability.
Above all, your text must be readable. A simple way to test readability is to ask several people of different ages to look at your website and printed material and tell them if they can read it without problems. Your “reviewers” can be friends, family members, or peers.
5. Alignment
Careful placement of text and images helps direct visitors’ eyes to where you want them to look on your site. “Composition is a well-thought-out design system that matches the components within it,” Sarah says. “Alignment is the arrangement of those components.”
As with composition in general, the use of grids provides a clean, logical, visually pleasing alignment. Charlie’s advice is to start by determining what the text should be: left-aligned, right-aligned, or center-aligned. While center-aligned text can be eye-catching, which makes it popular for headlines, left-aligned text is easiest to read, especially in email.
Once you’ve decided on text alignment, align images and other graphics so that they complement the location of the text. “To maintain balance on the page, a text box aligned at the left edge may require an image aligned at the right edge. If you choose to center the text, the image should be center-aligned above, below, or perhaps even behind the text box,” says Charlie.
In this example, left alignment provides clean, easy-to-read text that blends well with the images.”
6. Balance
As mentioned above, balance works hand in hand with alignment. “A well-balanced composition seems stable and aesthetically pleasing,” Sarah says. “While some of its elements may be focal points and draw the eye, no one area of the composition draws the eye so much that you can’t focus on other areas.” While your main message should be the first and most dominant focal point, it should not be the only one. Balance helps to direct the viewer beyond the upper left corner, where his or her gaze is likely to go first.
Two principles can provide a well-balanced layout. The simplest is symmetry, especially horizontally. The desire for symmetry is innate to man.
The other principle, which at first glance may seem at odds with symmetry, is the rule of thirds. It states that a composition should be divided into thirds, both horizontally and vertically, in order to create maximum visual interest while maintaining a pleasing sense of order. This is why in landscape photography the horizon is usually one-third or two-thirds from the top, rather than in the center. Grids can help you achieve the best balance when placing elements.
In addition to the placement of elements in the layout, balance takes into account the distribution of color and the size of the elements on the page. If there is nothing but bold colors on one side of the composition and only pastel colors on the other, you will feel imbalanced, even if the arrangement of elements is perfectly symmetrical.
“Balance in hierarchy, composition and layout all allow the user to process your information,” Charlie says. “That means the design doesn’t overwhelm the content, and the content isn’t so overwhelming that it loses meaning.”
This image uses symmetry and the rule of thirds to create balance on the page.
7. Negative space.
Sometimes called white space, this is the empty space around an image or text. “Negative space is the basis of everything we’ve talked about,” Charlie says. “To give the page balance, you have to give the customer a chance to catch their breath while they perceive your content.”
A layout with insufficient negative space will seem cramped and even cheap. This goes back to the days of print, when brands with tight budgets squeezed as much information as possible onto the page to avoid spending money on extra paper. What’s more, especially on mobile devices, insufficient negative space around CTAs and other click targets can make navigation awkward. You need to provide enough space for your finger to click without accidentally hitting another target.
Conversely, too much negative space can lead to the idea that the brand lacks substance. Think of the Google homepage, which has a lot of white space. This proves that there are no hard rules when it comes to how much negative space is enough, and the same is true of most other design elements.
This image demonstrates a creative, signature use of negative space.
8. Design for mobile devices and desktops
When creating your email template and website design, keep in mind that your audience will view them on both mobile and desktop devices. It’s important to make the design “responsive,” which means that it will look and display well the way you planned on different devices, browsers and screen types.
At the heart of responsive web design is a flexible or fluid grid that is created using cascading style sheets (CSS). CSS is a computer language that specifies how things will look on screened devices and even when printed. A flexible grid allows the layout to be resized to fit different device widths while still being readable. Graphic elements will be rearranged in the layout as needed to keep the text readable. Along with the layout, the graphic elements themselves can change based on screen size.
Another aspect to keep in mind when designing a web design is compliance with the Americans with Disabilities Act (ADA). Requirements include being able to resize text up to 200%, maintaining a color contrast ratio between text and background of at least 4.5 to one, and ensuring that graphics don’t blink more than 3 times per second.
Find what works for you
All of this may seem complicated, but many – if not most – of these principles are somewhat instinctive. “Don’t think too much,” Charlie advises. “Less is more. Keep it simple and share your ideas and thoughts with people who are not too close to your project. Their opinions can be helpful, but don’t forget your intuition. You’ll know for yourself what suits your brand.”
