Essential Design Elements for Effective, Beautiful Blog Posts

We’ve all heard about attention spans declining in the age of the internet. There’s always another link to click and another video to view. People online aren’t looking for a long-form novel or magazine to flip through when searching for content online. They’re looking to get information and move on as quickly as possible.

READ ON!

Essential Design Elements for Effective, Beautiful Blog Posts

We’ve all heard about attention spans declining in the age of the internet. There’s always another link to click and another video to view. People online aren’t looking for a long-form novel or magazine to flip through when searching for content online. They’re looking to get information and move on as quickly as possible.

So how do you keep visitors interested in the content on your blog?

Fifty-five percent of the average website’s traffic comes from its blog, making it one of the most important inbound marketing assets you have. Make the most of your blog with these design tips.

Break Up Your Content

I don’t know about you, but long paragraphs of text remind me of school and research papers. Not fun. Which is probably why I, like many people, quickly leave a blog post that looks like too much work.

I don’t want to have to wade through lengthy prose. I want arrows pointing to the content I need.

Use design elements to guide readers to different sections and important takeaways.

Section headers

Headings allow readers to quickly skim to the sections that are most relevant to their search.

Unless your blog post is very short, it should have several sections titled with your “Heading 2” font style and perhaps even some “Heading 3” subsections. 

When choosing your heading fonts, you should take inspiration from your brand. Is your brand soothing? Strong? Dreamy? No-nonsense? There are fonts for every style.

Keep these things in mind when considering fonts:

  • Choose legible fonts. The coolest font in the world is useless if people can’t read it.
  • Experiment with ALL CAPS. An all-caps font works best when your section headers are on the shorter side.
  • Try different font sizes. Adjust font sizes until you achieve the right look, but make sure the header hierarchy is maintained—the largest size font for “Heading 1” and the smallest for “Heading 4.”
  • Use contrasting fonts. If your main text is san serif, find a complimenting serif font for the headers. Or try pairing more stylized fonts with no-nonsense fonts, tall with short, fat with thin, etc.

Creative bullet points

Did you know that bullet points don’t have to be circles?

You can use different Unicode symbols, emojisfont awesome icons, or even images as the bullet points. You can also replace your bulleted list with colorfully-designed images that give you more control over the design of the entire list, not just the bullet symbol.

Whatever design you choose—from the standard bullet points to more unique options—using different kinds of bulleted lists is an effective way to break up your content and organize it into easily digestible nuggets of information.

Quotations 

“For a quotation is a handy thing to have about, saving one the trouble of thinking for oneself, always a laborious business.”
– A. A. Milne, If I May

All joking aside, quotations are a great way to break up your text while adding inspiration or backing up your point with someone else’s words.

Use quotes from:

Bloggers. Instead of—or in addition to—referencing a fellow bloggers’ points in your text, pull out a great quote and link the attribution back to their blog post.

Experts. If you interview people for your posts, then pulling out a thought-provoking quote or two to highlight important points can be a beautiful design feature.

Famous people. Using inspirational, funny, or famous quotes that link back to your blog topic is a very common quotation method. Just remember to double check the attribution because there are a lot of fake quotes floating around.

Most blogs have one design for quotations because they typically only use short quotes that are separate from the rest of the blog text. However, there are several kinds of quotations, and you may prefer to have multiple design options for quotations depending on whether you intend to quote long passages from others, use pull quotes, and/or simply highlight a short quotes.  

Consider what kinds of blog posts you plan to write—academic, magazine/interview style, or typical blog posts—to decide whether you need multiple quotation designs or whether one design will do.

Call Out Boxes

If you’re using your blog to convert potential customers, then you probably need a special design feature that allows you to separate one paragraph of text from the rest.

You typically see this design feature if a blog post has a pullout sentence or two with a CTA button.

Your callout boxes could be a two column design with the main text on one side and a colored or differently designed text box on the other, or it could be a text box that is in-line with the rest of the text but simply has a color background.

The design doesn’t have to be fancy. Just be sure to choose a background color that is in-line with your branding colors, but allows visitors to read the text easily.

Images

Images have great power to attract readers, keep them interested, and convey your message more strongly.

Check out these stats:

Every post should have at least one feature image at or near the top of your post. This picture is the image that shows up when someone shares your post on social media, so it should be the most closely related to the main topic of your post.

If you use other images throughout your post, they should help illustrate the points made directly before or after the image appears.

Always choose the types of images that will best make your point—whether that’s screenshots, graphs, infographics, memes, GIFs, or another stock photo.

Use Brand-Specific Colors

People judge things within 90 seconds, and up to 90% of their feelings are based on color alone. 

Most blogs have three colors: a primary color, secondary color, and CTA or call-out color. The first two colors are usually complimentary, while the CTA color may stand out more. For instance, if your site is mostly blues and greens, your CTA color may be a bright green, yellow, or orangey-red.

Choosing the right colors requires an understanding of color theory: the basics of the color wheel and color harmony, and the emotions colors provoke.  

Color Wheel

All of the colors in the world can be found on a color wheel.

Mix the three primary colors (red, yellow, blue), and you get secondary colors: orange, green, and purple. Mix the secondary colors with the primary colors, and you get tertiary colors like teal, blood orange, or lime green. 

Colors that are across from each other on the wheel are complementary colors that—you guessed it—complement each other. So if you want a high-contrast site where the colors mesh properly, you might choose purple and yellow, or teal and blood-orange. 

Colors that are next to each other are called analogous colors and will create a more soothing look because there is less contrast. If you have a serene brand, you might choose a few blues and greens that are near each other on the color wheel.

Choosing Colors

What emotions do you want to evoke? Warm colors evoke energy, action, and strength, while cooler colors soothe and calm. Consider your company’s brand when choosing which side of the color wheel to focus on.

If you like a set of colors, but they seem too loud, you can add white or black to the colors to create a lighter or darker version of the colors. Adding white to lighten the color is called a tint while adding black is a shade.

Whatever you do to one of the colors should be done to all of them to keep your colors in harmony. Having one shaded color mixed in with bright colors will look off to most viewers.

It can be difficult for people not trained in color theory to choose a color scheme by hand, but luckily, there are a bunch of online tools that can create suggestions. Have your primary brand color ready to plug into the tools, so you can easily find the colors that complement it.

Where to Use Your Colors

Every color shouldn’t be everywhere at once. Less is more. Once you choose your colors, decide where they will appear, like this:

Primary Color

  • Logo
  • Menu tabs
  • Titles and headlines
  • Buttons

Secondary Color

  • Links
  • Current page indicator
  • Scroller
  • Design elements

Tertiary Color

  • Background

CTA Color

  • CTA buttons
  • CTA callout boxes

You may only have two colors, or you may have four colors. Make a list of all the design features on your site that can have color and divide them based on how much of each color you want to see on your site.

Add Calls-to-Action

If you plan to make money from your site—sales, ads, gaining clients—then you should have calls-to-action on your site. But before you ask people to buy your product or hire you in every blog post, it’s important to know the different types of actions you can ask your readers to take.

Sales focused CTAs may not always be your best option.

CTA Types

  • Buy our product
  • Contact us for a consultation or with questions
  • Hire us
  • Download reports and whitepapers
  • Share quotations, posts, infographics on social media
  • Sign up for our newsletter
  • Follow us on social media
  • Comment on the blog post
  • Read more content like this

When possible, your CTA should connect back to the content of your post. If you’ve created an infographic or a white paper related to your post’s content, then encouraging readers to download or share those assets is the best CTA because it gives both of you something useful. When they share your infographic, it will result in more incoming traffic to your site, and by filling out the form to download a white paper, they will be added to your database.

Not everyone is ready to buy your product, but by encouraging your readers to follow you on social media or sign up for your newsletter, you can continue to cultivate them as future clients. They’ll see all of your latest content and continuously come back to your site. When they do need the services you provide, you will be the first company that comes to mind. 

Smart CTAS

Not everyone coming to your site is in the same place in your funnel. If you have a database and a plugin that enables you to identify site visitors by different characteristics—their country, the site they’re coming from, device type, or database membership—then you can offer visitors dynamic CTAs.

Your website and database will serve the CTAs you deem most appropriate based on their relationship with you or other factors. For instance, newcomers will see a CTA that encourages them to follow you, people coming from a newsletter link will see sales related CTAs, and current customers will see CTAs that ask them to review or promote your company.

CTA locations

Most people wait until the end of the blog post to link to a CTA, but what if your reader doesn’t make it to the end of your post? By using a callout box or some other highlighting design feature, you can place a CTA in the article without interfering with the user experience.

Create a Unique Design

The basic WordPress blog templates are serviceable but to truly make an impact, you should consider investing in a unique design that will allow you to stand out from the crowd.

One of the posts we created for BOOM Designs is the perfect example of many different design features. 

Right away the post has an image at the top with a bold, eye-catching title font and design that’s easy to read and allows the company to have multiple lines of text.

In-line and offset callout boxes can be seen throughout the article to highlight important information and lists, allowing the readers’ eyes to skim the article easily.

The site uses black and white as the main colors with red as a secondary color used sparsely to denote indented, two-column sections that offer more information on the topic.

There also a few smaller design features in the post that make an impression, like the yellow that’s used as highlighting color behind their callout boxes and the arrow-like bullet points that add interest to their lists. 

Other Design Elements

We’ve covered a lot of design elements in this post, but with so many options to consider there isn’t room for them all, so we thought we’d add a few more for your consideration.

Bonus design ideas:

  • Change background colors, gradients between sections
  • Add logo/gradients/overlays to stock images to brand them
  • Add drop shadows to emphasize callout boxes or other elements
  • CTA’s that are boxed or have an image background with large clickable buttons
  • Inject color and design features into titles

Remember, your blog is one of the most important features of your website. The majority of your inbound traffic will enter through your blog posts, so they have to be full of useful information and designed to help you convert readers into customers. Invest in a beautiful, user-friendly design, and you’ll see the results in no time!