Design best practices for creating visuals

Design principles fill entire textbooks and four-year college degrees. Safe to say the subject is ripe with intrigue and value, yet it is fraught with trouble spots. Strong design for all content is a key requirement for marketing content, such as website pages, blog images, and social media posts.

Visuals of any kind, such as images in blogs or social posts, garner attention and keep people engaged. Visuals can boost:

• follow-through and time spent on blog pages
• information retention and engagement
• social post clicks
• general website traffic and platform performance

Because blogs and social media are often created in-house, it’s necessary to nurture the skills needed to build professional visuals for your marketing content, whether it be an infographic, a blog image, a thumbnail image, a social media visual, a header for email campaigns, or anything. But if you or your team is not trained in graphic design, how do you achieve this? Sticking to design best practices is a good first step, and below we will share a handful to start you on the right path.

Have a clear goal and know your context

First and foremost, as with any content you create, you need to have a defined goal you wish to achieve with the visual you are creating. What do you want to accomplish with this visual? Do you want to convey information in a clear way? Detail a step-by-step process? Simply grab the audience’s attention?

Whatever your goal, it is determined by the content surrounding it—otherwise known as the context. Is this a stand-alone visual, like an infographic? Will it accompany a social media post? Will it be the thumbnail for a blog post or sit within the blog page itself? And considering the content of the visual itself and any surrounding context – what is the tone your visual should convey? How can your visual align tonally with the context?

Each visual is unique and its goal must be determined on an individual basis, but consider these questions as you begin your design—the goal and context, as they will influence everything you do.

Employ an effective color palette

The colors of your visual will pull a lot of weight to attract attention to your work, and you want to be strategic about those colors. In many cases, using colors that are built around your brand is a strong move—this adds a cohesive quality to your blog post and the rest of your website. Think also about what the colors say. For instance, warm colors (reds, oranges, yellows) are associated with the sun and warmth, while cool colors (blues, greens, purples) are associated with the sky and are calming. Further, red is associated with strong emotions—like passion and love—while it also encourages appetite (go count the restaurants and food labels with red on them!). This contrasts with blue, which is associated with productivity and professionalism and are often used in by companies that try to instill trust in them (like tech-companies and health associations). This is another consideration to make: what does your color mean within your own industry?

It’s best to stick to 2-3 colors within your design, or you run the risk of the visual looking chaotic or messy.

Whenever designing a document, you want to be mindful of accessibility, as well. This is always a concern, but when creating images, you have a distinct opportunity to increase accessibility. The first way is to ensure that you include alternative text if this visual is being placed on your website, such as in a blog post. To aid viewers who struggle to see distinctions in color (1 in 12 men and 1 in 200 women have some level of color blindness), you want to avoid placing colors similar colors next to each other, as well as increase the contrast between elements in a design (like background and text). Red and green, blue and purple, blue and green, and red and brown are a few color combinations that can be hard to see distinctions between.

Figure out fonts

Fonts do, indeed, matter. Use Comic Sans these days and many people won’t take that design seriously. So what font do you use? There are so many to choose from, there is no all-encompassing suggestion. What you need to do is assess the goal and context of your image, as well as any industry standards and company requirements.

But overall, we suggest you do not mix more than 2-3 fonts in a document or visual for the same reason as we suggest this same amount of colors – to avoid chaos. The goal of any sort of font is not just to look good on the page (though of course we want it to), but the font must be readable, without exerting much effort.

So, though the goal of visuals is visual intrigue, you also want to beware the highly decorative cursive fonts or the big block or bubble lettering or other novelty fonts.

Let’s dig into a suggestion you might have heard of (and that may be antiquated): Use serif fonts for items intended to be read in print and sans serif fonts for items you anticipate will be viewed online or you have little space. What’s the reason behind this rule? It has to do with readability. Serifs are the small, decorative strokes at the top or bottom of letters, which sometimes look like little feet (see the everyday Times New Roman font). Sans Serif simply means these feet are missing, leading to a cleaner letter (see the infamous Helvetica font). The origin of this rule may arise from the urge to make digital text as easy as possible to read on screens. Serif fonts do tend to help the eye move forward in the sentence, which is helpful for small lines of print in a book, for instance.

In the digital age, where print is still alive but by no means the main form of consumption, there’s much less of this argument, and we see serif fonts working with sans serif in design more and more often. But here are a few takeaways of how these two types of fonts feel:

Serif: classic, fancy, eloquent, institutional, sometimes warm.

Sans Serif: modern, cutting-edge, technology and commerce, clean.

Pick a font type that matches the tone of your image or the text surrounding it, and you won’t likely go wrong.

Remember that less text is more

When creating visuals with text, it’s important to consider that less is more. Visuals are not meant to convey the whole rich meaning of your content (whether it be a social media post, a blog, etc.). Visuals should grab attention, convey something brief, and be visually engaging. But, just like when too many colors cause chaos, too much text can, too.

Depending on the visual in question, you could use:

• a poignant quote
• a few brief phrases or takeaways
• the headline of the article
• a question that you answer in the blog/social post

And the list goes on.

Consider the visual hierarchy

The visual hierarchy is the technical term for what draws our eye where and when. You can test this theory by asking many people to view an example visual and record what drew their attention from first to last. The color of a design element, as well as the size and spacing of that item holds a lot of sway in the visual hierarchy, but it’s also a matter of natural eye movement; typically, our eyes want to move from top to bottom and from left to right, just like reading a book. You often will want to capitalize on this by placing elements on the page aligning with that flow, but it can also be disrupted purposefully. Think about how you can guide your reader from one place to the next intentionally as they view your visual.

Grid your visual

When designing a visual, it’s helpful to use gridlines. They act as a frame of reference for aligning objects both vertically and horizontally on the visual, create any margins if you need/want them, and see the approximate size comparison between items on the visual. You’ll be glad you have a guide when creating your visuals.

Use plenty of whitespace

Whitespace isn’t really space that is white on the page, not always. The term refers to open space, like margins on the top, bottom, and sides of a design element, as well as between elements. Lots of whitespace makes a clean, uncluttered design, one that looks professional, like it knows what it’s doing (you can do your own research on this – head to any website and assess how clean and professional is looks, then look at how much white space you see). Whitespace helps the visual hierarchy become clearer and works well with the idea of less is more. Use margins and make sure that items are not too close unless there’s a very specific design purpose to that closeness.

Final Note

Are you using already-created images? It’s a fine idea to use something that has already been made, especially stock photography, as a way to increase value of whatever document you’re creating without putting too much effort in.

But beware! You do not want to get sued. Ensure images you use are royalty free or covered under the Creative Commons license. If they aren’t you need to either go through the process of purchasing their right to use…or find another (free!) image to use (or…make your own!).

Dynamics 365 Marketing

Whether you’re creating visuals for emails, campaigns, social media posts, landing pages, or any other marketing tasks, the way you organize, store, and distribute that content is paramount to your success as a business. A strong customer relationship management (CRM) tool makes the effort you and your team put into marketing go further while simplifying, streamlining, and often automating them, too. So it’s safe to say that implementing a CRM into the marketing tech stack can bump ROI and can become elemental to your success.

Digital marketing solutions like Microsoft Dynamics 365 Marketing include built-in features and fields that encourage design best practices, so your landing pages, emails, and social posts always look their best and you are prompted to consider things like accessibility, white space, your brand aesthetic, and more.