How to Create Visually Amazing Content, Even if Your Last Name Isn’t Van Gogh

Author 
Jay   18

Updated on December 22, 2019

Be honest.

How often have you backed out of an article because it looks like a cluttered mess?

You know, when you face a huge wall of text or a page that looks unprofessional, arduous to read or just plain boring?

Then you bounce back to Facebook or whatever tab you were browsing before.

It’s understandable - nobody wants to trudge through a swamp of ugly content.

But here’s the real scary part: what if your readers feel the same when they browse YOUR content?

Great visual design is imperative to keep today's attention deficit users interested.

Luckily, you don’t need to be an artist or have a team of designers at your disposal to create beautiful web content quickly and consistently.

Let's talk about that...

More...

How to Design Visually Amazing Web Content - Rule of Good Design

The #1 Rule of Good Visual Design

​If you’re like me, you went through your school years writing text in rigid blocks with 3-4 sentences in each paragraph. Including introductory sentence and a closing sentence.

Such formatting works for text books because you have your reader’s complete attention.

On the internet though, it’s different - you’re competing against a dozen other browser tabs and distractions.

It’s difficult to digest huge blocks of text, but with simple, bite size blocks of information, surrounded by plenty of white space, images and other visual elements, reading becomes light and airy.

When it's easy to keep reading, you don’t get that compelling urge to jump around to other distractions.

Making content easy to read is the #1 rule of good visual design.

How to Design Visually Amazing Web Content - Why Bother Dressing it Up?

Why Bother Dressing it Up?

You're already providing high quality, practical advice and valuable information. Why should you put an additional effort into presenting it with a top notch visual design?

Well, the obvious benefit is looking cool. But there's a few surprising reasons you might have not thought of:

1. Get People Reading in The First Place

It doesn't matter how brilliant your content is. If it looks boring, tiresome or hard to read, it will push readers away like a foul stench.

Which would you rather read?

Your content must be designed to grab the interest of all three types of visitors:

  • Thorough reader - This person will read everything from beginning to end. Very rare and almost nobody does this.
  • Skimmer - This person will quickly scroll through your article and see if they’re interested. This is the most common visitor.
  • Extreme skimmer - This is a cold traffic visitor. They make only the bare minimum investment to know if they want to spend more time.

Smart visual design gives even the most extreme skimmer a chance to fall in love with your content.

2. Give Your Content a Chance to Go Viral

How do you think you can quickly improve your content’s shareability and chances to go viral?

Better information? More jokes? Increased promotion?

All good ideas and recommendations, but unless you get one key element sorted, they're completely useless.

That key element is easy readability.

Nobody wants to send a wall of text or a 1990s-style site to their friends or followers.

Ling's Cars, a prime example of ... busy design.

Doing so would require an additional qualification on their part saying, “Sure the design is awful, but…”

In other words, nobody wants to share ugly stuff. (Unless you want to share stuff like Ling's Cars as a cruel prank.)

You need to make sharing a complete no brainer with visually appealing content.​

3. Turn Visitors Into Revisitors and Loyal Fans

​Visually appealing content is a great way to turn one time visitors into recurring readers.

The friendlier and more pleasing your site is, the more likely people are to stick around and return later to see more of your amazing content. Recurring visitors are more likely to share your site with others, and more likely to refer to your site as an authority.

4. Increase Your Authority

​We naturally tend to regard well dressed people as authorities.

In the exact same way, content with an effortless flow and beautiful design practically radiates with professionalism and trust. Just dress up your article in a fancy suit and you’ve gained extra credibility in the eyes of your reader.

Visually appealing content is an important step towards becoming an authority in your field.

How to Design Visually Amazing Web Content - How the Experts do Good Design

How the Experts Do Beautiful Content

Hanne already covered the basics of improving the readability of your article, but let’s see what tricks the pros use for visual design.

Narrow Width Content to Reduce Eye Strain

The biggest strain on your eyes is moving from side to side. Ideally, you’ll be able to focus on one or two points and scroll through content without moving your eyes.

The CoSchedule blog uses a narrow width article template to keep text clean and compact.

Their articles are jam packed with massive amounts of information, but using this technique helps to keep the reader's journey light and stress free.

Showing a limited amount of information at one time keeps the reader advancing through the page rapidly. This creates a feeling of progression and achievement - important elements to fight reader's fatigue and distraction.

Logical Headings to Help Skimmers

Besides being great for SEO, a logical heading structure is a great way to keep a consistent visual design throughout your content.

A single H1-heading for the title, and H2, H3 and H4 for subheadings will make for a pleasurable browsing experience for skimmers and thorough readers alike.

Many blogs, including us at Thrive Themes, don’t go deeper than H4-headings, even in articles with complex section structure. For good reason.

Using H5-headings and beyond makes your content look messy and keeping track of sections becomes near impossible.

Note: Remember to use clear and informative subheadings! A skimmer should be able to rapidly scroll through your article and still get a clear idea of the content.

Plenty of White Space to Reduce Reader Fatigue

To break up the monotony of continuous text within sections, use short paragraphs with plenty of line breaks.

You can also use divider lines, different color backgrounds, different fonts, or images to break up a section or emphasize a particular part.

Yesware keeps sections tight and clean with green highlight text, bolded subheadings and extremely short paragraphs.

Simple tricks that result in lots of white space and make for an effortless read.

How to Design Visually Amazing Web Content - What if You're Not an Expert?

What if You’re Not a Seasoned Expert?

You might be thinking - sure, it’s easy when you have a massive design team and a budget for actual design work.

And yeah, you can create some awesome content if you have the design budget for it.​

While Neil Patel's infographic-style ultimate guide is verging on overkill, you can't deny the impressive results. (3.5k shares at the time of writing this.)

But is it necessary? Absolutely not.

Sure, if you have a massive budget, you can turn the design-dial up to eleven with an infographic-based multi-chaptered ultimate guide.

But if you’re like the rest of us, you can get an aesthetic edge by doing very little, using the tools we all have available.

Here’s a couple of solopreneur bloggers with minimal design budgets showing us how it’s done.

Mi Nueva Dieta

Here’s Mi Nueva Dieta, a diet and health blog by Maricarmen Grisolía. Even if you don’t speak the language, you immediately get a sense that this blog is professional and trustworthy.

Oyekunle Damola

Here’s Oyekunle Damola’s article about monetizing your blog. A classic topic turned into a skyscraper post.

You can find the same expert visual elements in both blogs:

  • Narrow article width
  • Plenty of white space
  • Clearly marked sections
  • Important bits are highlighted or turned into “Click-to-tweet” buttons
  • Table of contents
  • Numbered lists
  • Content containers

Same expert style with minimal design budget.

Let's take a look at some tools you can use to create this level of design.​

How to Design Visually Amazing Web Content - Visual Design Tools for the Solopreneur

Visual Design Tools for The Solopreneur

So now that we’ve looked at some beautiful, but simple sites, you must be aching to know how you can recreate this stuff.

You can do basic text editor stuff with the standard WordPress editor:

  • Headings
  • Fonts, font styles
  • Bullet point lists
  • Video, images
  • Shortcodes

But… that’s about it. This is pretty much as far as you'll get using standard editor, unless you want to become intimately familiar with HTML and CSS.

If you are taking your content seriously and don't want to learn to code, you will outgrow this level of functionality from day one.

That’s why we need the help of some (free) plugins.

Content Containers

Containers are great ways to make a particular bit of information jump out of the text, like a key takeaway or an expert quote.

I recommend Colorbox Panels, a content container plugin with a drag & drop editor. Use content containers for:

  • Code snippets
  • Image galleries
  • Expert quotes
  • Notes and section summaries

Tables

Tables are great for presenting accurate data points, like spreadsheet data or feature comparisons.

I know, sounds boring. But tables don’t have to be the bulky eyesores that we’re used to seeing in Excel or outdated websites.

TablePress lets you create neat, reader-friendly tables and integrate them into your website.

You’ll still need to use your best judgment for the amount and type of data that you put on the table. Try not to exceed the maximum width of your content, otherwise your user will have a lot of horizontal scrolling to do.

Columns

Columns are a great way to chunk information into a horizontal rather than vertical orientation.

It's possible to make columns using the standard WordPress editor, but I suggest going for a plugin like Column Shortcodes.

Not exactly a painless way to add columns, but it works.

You can use columns to:

  • Easily compare multiple items
  • Create a pros / cons list
  • Use the horizontal space more effectively

A Tip for Using Tables

Use tables, not columns, when you need to list items horizontally AND vertically. Check out this comparison page for example. Notice how the table keeps small items consistently sorted horizontally and vertically, while the columns only sort horizontally.

Click to Tweet

What if you offered your reader an added incentive to share your content on Twitter?

The Click to Tweet is a content container specially designed to emphasize something you’ve written, with an integrated click to share-function.

There are quite a few different plugins which can handle the task of integrating Twitter quotes into your content, but I suggest Better Click to Tweet. Fully customizable … if you know CSS.

Hidden Content

“Hidden” or click-to-show content is a great way to hide extra information that might not be relevant to every reader.

Instead of blasting every reader with volumes of detailed data, you can present a clean and simple bit of content, with extra information available for those who choose to see it.

Less clutter. More engagement.

Hidden content works best when each click reveals a short snippet and provides the reader with a direction to go in if they’re looking for more than the snippet offers.

If you want to introduce hidden content to your site, check out the Accordions plugin.

The Problem With Plugins

As you see, there's tons of free WordPress plugins out there you can use to create amazing blog posts.

But ... how many do you want to install?

After going through only a handful of design elements, we've installed half a dozen different plugins. You may need many more.

How to Design Visually Amazing Web Content - The Problem with Plugins

The leaning tower of WordPress plugins...when will it collapse?

Imagine installing a new one for every single design element you want to use in your content. Your website slowly turns into a leaning tower of unconnected pieces, just waiting to collapse into a sad pile of rubble.

And what about updates? Update one, the other breaks. Update the other, you can't because the developer has moved on. What do you do then? Learn CSS and fix it yourself?

Worst of all, loading a huge amount of plugins will slow down your site and you'll start losing visitors because of increased loading times.

If you own a self-hosted WordPress website, you're at least semi-serious about scaling and turning your website into a real business. Otherwise you'd still be writing articles at Blogger.com.

Constant fighting to keep your website up and running is no way to run a business.

There's got to be a better way!

There's got to be a better way!

Thankfully, there's a better option. Something that lets you focus on creating content, rather than struggling with different plugins.

The One Visual Editor to Rule Them All

Remember those solopreneur sites we looked at earlier? They were created using the same single visual editor-plugin. Yes, you heard correctly.

One single plugin that includes every visual design element you could ever need.​

None of that cobbled together plugin monstrosity nonsense, worrying about updates and compatibility. This is one single bit of kit that integrates with WordPress perfectly.

Yeah, it’s Thrive Architect

Just as a reminder, here are just a few of the design elements the editor includes:

  • Content containers
  • Click to tweets
  • Column layouts (Automatic or manual)
  • Tables, spreadsheets
  • Icons, symbols, star ratings
  • Hidden content (also with timers)
  • Styled lists
  • Tabbed content
  • Feature grids
  • Dividers

Best of all, the Thrive Architect workspace is on the front end of your page or article. A true drag and drop editor, creating exactly what the end user will see on their browser.

Oh, did I mention it comes loaded with 443 landing page templates as well?

You can get your own copy here.

Over to You

In today's content marketing environment, you must publish stuff that looks amazing. Just remember that you don't need a design team to do it!

Just get yourself a copy of Thrive Architect and never worry about visual design again.

Or go the tougher route and get yourself a bunch of free plugins.

Whatever you choose to do, use it to create more amazing content for our (at the time of writing) free internet.

by Jay  June 1, 2017

18

Enjoyed this article ?

You might also like:

Leave a Comment

  • I was confused and couldn’t decide whether I use the full page template or template with a sidebar for my long money articles. From this article, I get a clear instruction.

    Thanks

  • On my sites I’m always afraid to make my fonts too big, but then I see that I end up having them too small and hard to read – I’m going to have to fix that as well as make my content narrower. Fantastic advice – thank you!

    • Hi Samantha,

      You can use WordPress’ theme customizer: In your WordPress admin dashboard, go to “Appearance” and “Customize” to open the theme customizer with a live preview of your site. Here you can set the size of the font.

  • Today with so much competition is very difficult to get a person to read your post until the end and make her come back to your blog again becomes almost impossible … very good considerations and I will apply these tips in my blog … thank you very much I already liked your facebook page

  • Apart part quality content, visual design is the only other significant differentiator in the digital world.

    While I am not professionally trained designer, but with the help of thrive architect, I manage to product visually appealing content on my website.

    I have also tested Wp bakery visual editor but thrive architect shines when it comes to true visual editing on wordpress.

  • Love your regular content and Thrive Architect. Sometimes I wonder how you guys came out with such practical tips/topics for website users. It’s time for me to revamp my site.

    • Thank you! We are lucky enough to have a great community of readers who ask questions, make suggestions and leave thoughtful comments. We’re never in danger of running out of content ideas. 🙂

  • You guys are just amazing. I always learn something new from your posts. Keep the good job up.

  • This post is really explainable if what bloggers really need. I was amazed while reading and about to apply in my blogging career as a starter. If I can have read this before, maybe I already build a better website with the good quality content attraction. I never think this way before but now things will changed for me.. I will follow you and subscribe to get more tips in the future.

    Thank you very much for sharing this.

  • Great take aways to implement right away. I’ve been wondering how to put some CTA boxes like the yellow area in the section labelled “Logical Headings to Help Skimmers”
    I would want such say to ask people to sign up for a class or a lead magnet.
    Is the feature part of Thrive Architect?

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >