• Save

How to Design Your Web Content to Make It Look Beautiful

When you hear of designing your web content to make it beautiful, what comes to your mind? Flashy images, nice typography, and consistent flow through the content that makes it readable?

WordPress Blog posting interface
  • Save

What we are going to see in this post covering the idea of beautifying your content is a continuation of what we did about choosing a theme that appealed to you and building a logo for your brand.

How Do You Organize Your Website Content To Make It Look More Professional?

This time we are going to focus on the design of your content and more importantly how to make it visually appealing. In this wise we will cover overall layout, proper spacing, proper image inclusion, and the creation of headers within your content.

Editor’s note: This blog post is based on Wealthy Affiliate Super Affiliate Challenge (SAC), Second Month, Focus 3: Content Design (Making it Beautiful).

Did you know that each of us interprets and absorbs content differently?

Of course.

While some of us may like a compact block of text, others prefer short blocks (Twitter sort of texts), and more others will be hooked on texts interspersed with images.

But did you also know that there are some ways that you can “display” your content on your website? Ways that can make it easy to be absorbed, readable, and lead to overall experience of your audience?

Instead of catering to that sometimes you easily get lost in the process of content creation. So you forget that those going to search for your type of content in Google and read it on your website are REAL people.

Yes, even if Google is to be pleased, you are building your website for people. So content design should be your primary focus with every post you publish on your site.

What is Kyle’s take on this?

“For me personally, content design is making your content readable and relevant,” he says. “If you saw some of my highest converting content over the years, you would be surprised to know that these pages focused on the actual delivery of the content, the readability, and the relevance of the imagery. Nothing more.”

Did you hear that? Please read it again.

Now, let’s hear Kyle once more.

“Conversions don’t happen as the result of some fancy slider or widget you have on your posts,” he says. “Conversions are not the result of the bells and whistles.”

So, what are, or bring, conversions?

Kyle says, “Conversions take place because people are engaged in your content, it is designed in a way that makes it readable and easy to absorb, and it blends in naturally to any promotion or recommend that you are making.”

Four Factors to Focus On While Developing Content and Settling On a Design

For clarity, Kyle focuses on FOUR major things when developing content and settling on any design to make his content beautiful.

They are:

  • Relevant imagery
  • Font styles and backgrounds
  • Showing and not telling people what you are talking about
  • Clean content layouts

Let’s look at each of these points in some detail.

  1. Relevant Imagery: Most of us are visual in nature. And children are particularly so. Thus the popularity of picture books with them. I was able to transition from such books to solid block novels simply because Ian Fleming is a powerful writer. So even if we’re no longer reading picture books as adults this doesn’t mean we’ve lost the appreciation for them. Any content creator is in essence a storyteller. So “to get your big picture across to all audiences you should be using proper imagery, relevant imagery, and if you are using banners and promotional images, they should be very relevant,” says Kyle. Let’s look at places of your content where you can place your imagery:
    1. Imagery Should Be Visible in the First Fold of the Post Header: People come to your site with an expectation of something relevant to their need. A good headline usually does the job to draw them in. Which means that not always. That is why all newspapers and major blogs online resort to a relevant image within the first viewable fold (area) of the post. Not only is it eye-catching but also it creates immediate relevance. As such it leads to much higher reader rates (and time on page). Here is an example from Kyle’s blog.
    2. Imagery uploaded into a web content should be visible in the first fold of the content as How to Design Your Web Content to Make It Look Beautiful
      • Save
    1. Within the Content: When I first started blogging back in 2013, I added images (widgets and banners) to brighten up my content like a circus. Don’t be like I was and add images for the sake of adding images. “If an image is not specifically relevant to exactly what you are talking about, then don’t use it,” Kyle advises. “You want to use relevant imagery at key points in your content where the topic will make more sense or evoke more emotion if you utilize an image.” And that is what I try to do now. See an example below:
      Example of an appropriate imagery inserted into a blog post
      • Save
    1. Promotional Widgets and Pitches: If you are inserting banners or widgets into your content, do so in a way that is highly relevant to the context of the content. For, as Kyle observes, “Random banners or promotional graphics will not be relevant or useful to the end user, thus detracting from their overall experience.”
  1. Font Styles and Backgrounds: Did you know that although simple sounding, font styles and background colours can have a huge impact on your content design? Yes, they do and can make people read your content, or click out of your site. Let’s look at some dos and don’ts of these:

    1. Black Text plus White Background: “Black text on a white background has been proven over and over again to be the most readable,” Kyle says, what you yourself have remarked over and over again. It’s therefore in your interest to adopt it. For the more people that are able to read your content efficiently, the more conversions that will result for you. Can’t any other combination do? That “will simply have an adverse impact on your business.”
    2. Don’t Make a Circus of Your Content with Lots of Colors and Different Font Styles: One of the biggest mistakes people make in content design is using all sorts of different colors within their content. Black characters on a white background is what is recommended here. But in some cases, to point out a word or a phrase, you can make it red or give it a yellow background. Besides, DON’T use different font styles within your content. Use ONE typeface and keep it consistent all over your website.
    3. Refrain From Using Background Images: Kyle describes
      background images as “a huge distraction”. As a shiny object, they divert your users away from your content itself. Besides, they don’t add any value to your content. On the contrary, they will actually lead to a much lower quality user experience.
  2. Showing and Not Telling People What You Are Talking About: Contrary to a novel for adults, in a blog post you can use imagery to show people what you are saying. People really need a visual accompaniment to understand what you are driving at. When you use images to show people what you are saying as opposed to just telling them, your content instantly becomes much more interesting to them. What are the ways in which you can implement graphics to show people what you are talking about? Here are a few good ones to consider:
    1. Screen captures: One good way to show people what you are talking about is to use screen captures to accompany your text. “This works really well for product/service reviews as well,” Kyle claims, “as you can give people an inside look as to what you are talking about (think about your WA review.).”
    2. Charts and Graphs: When something is complex by nature, charts and graphs can break it down into a simplicity that enables a user to understand it easily and quickly. Thus charts and graphs “can amplify readability, trust, and conversions drastically when integrated within your content,” Kyle assures. But just see the example below:

  1. Clean Content Layouts: Did you know that the actual visual flow of your content has a critical impact on your overall content design? It may sound simple, but proper spacing, proper use of bullets and being able to actually see your content all contribute largely to your overall user experience. Let’s see four ways to assure that:
    1. Content Should Be Visible in the First Fold: This was the case of this theme. And everybody told me to avoid the massive (website and post) headers on my website that bury my content because visitors should not have to scroll down to see it. I had to contact support who showed me a very simple way to reduce the headers. “You want people to be able to see at least the first paragraph of your content upon landing on your page,” Kyle advises.
    2. Use Bullets: This blog post uses bullets, as you see. They are a good way to separate lists or groupings of items to make them easy to absorb. Therefore try to use at least one bulleted list within every post you write. But of course, where it makes sense to do so. In other words, don’t force bullets into your posts. But should you be explaining something as a list, definitely you should have either an ordered (numbered) or unordered list in it. See an example below:

    1. Use Proper Spacing within the Content: White space, although a good thing, can also be bad. Used properly, it enhances readability. But too much of it can obstruct proper flow and make your content difficult to read. Kyle recommends to have a space in between paragraphs, but not double spacing.
    2. Use Smaller Paragraphs: Convention and education has taught us to use big paragraphs. Twitter has killed that by getting people used to reading 140 characters. So, our attention spans have diminished in the process. More importantly, large paragraphs are not reader-friendly on mobile devices. As they are difficult to read and follow visually, large blocks of content lead to a lot less readability. There are no specific “word limits”, but Kyle says he usually tries to avoid more than 4 line paragraphs.* A popular influencer blogger advised not to go beyond 2 paragraphs. He even uses one line paragraphs. Something Kyle says he doesn’t “have a problem with having single line paragraphs.”

User experience plays a significant role in Google’s ranking algorithms. And, as time goes on, this is only going to continue to be a bigger and bigger ranking factor. You can differentiate your content and push your website up the authority ladder by focusing on your overall content design.

Top that off with people actually wanting to be on your site, you are going to experience people spending more time on page, more trusting, more people taking advantage of your recommendations and as a result, more revenue.

* If up to this point the paragraphs are long, it is because of the many details in the bullet points. See how short they are in the beginning paragraphs.

Adding Images to Your Content – Use SiteContent

To design your website content to make it look beautiful, images are an essential addition.

Do you remember how difficult it has been for you to find images for your website content? And when through Google Image search you found a good one that you loved, didn’t you reluctantly leave it because the image was “copyrighted” or “protected”?

Another thing. When you got images from sites like pixabay.com where they were free to use, you saw later that they were not optimized. Thus, they slowed down your pages and website generally.

To save you these headaches, Wealthy Affiliate offers Premium members a selection of over 1,000,000 CC0 (Creative Commons Zero) images directly within SiteContent. They are free to use. You can even take ownership of them, manipulate and modify them, short, use them in any way you think fit.

How do you add images within SiteContent?

After opening up the SiteContent Images section within the editor, you can either upload your own images or you can choose from the million plus images in SiteContent

Here is how the editor looks like:

Click below for some training on how to use the SiteContent Images platform.

As we saw earlier, you can also create your own images with screen capture programs (including the one in your computer: Start ® All programs ® Accessories ® Screenshot).

N.B.: I’m not taking a screen capture to show you this because my system is in French and will be different from yours).

Kyle further recommends a few of the training resources at WA for this.

And here are some more free tools you can use for this:

How to Put a Featured Image in a Blog Post to Make It Eye-Catching

If you’ve been blogging for some time, you know that every post you add to your website is added chronologically to your blog roll. If you check this blog’s homepage, you will find that each post has a featured image. You will agree that this feature also contributes to make your content attractive.

You will need to manually add this within the WordPress editor, that is, your website back office.

Inside the editor of each post, down the right hand side you will see the Feature Image tool to add such an image.

Here is some training, a walkthrough on how to add a featured image to a post.


 

Here is What You Learnt in This Post

  • How to organize your content to make it more professional
  • Four factors to focus on while developing content and deciding on a design
  • How to add images to your content using Wealthy Affiliate’s SiteContent
  • How to put a featured image in a blog post

Now I hand over to you to let us know what you think about how to design your web content to make it look beautiful. Thank you.

Akoli

Your personal guide to securing your future online

 

14 thoughts on “How to Design Your Web Content to Make It Look Beautiful”

  1. I am on the process of developing my 3rd website and this is just what I needed. It’s a good read with so many important points you have mentioned. I have taken down notes some of the main points here to apply on my website. 

    I believe that simplicity is still the best so as not to distract the readers attention as you have said. So yeah, clarity and readability of blog contents are important factors to make readers engage on the website.

    Reply
    • Congrats on working on your 3rd website. I hope the other 2 are already doing well. I started a second website on the heels of the first one and had to abandon the idea for the moment as the work was too arduous.

      I’m happy to have helped you with ideas for your website.

      Yes, Gillian, nothing beats simplicity in everything. People’s attention spans are short these days. Time also. As soon as they feel you “complicating” their lives, they move elsewhere.

      Thanks for stopping by and I hope to see you soon.

      Reply
  2. Thanks for this informative article! I agree that so much of your website’s ability to attract visitors is in the visuals. 

    One problem I have had consistently has to do with my images being a little too close to the text. I don’t know if it is the images I am using or where I am getting them from, but they usually look great while editing them in WordPress, but then squished when I view them on the site. Do you have any advice for this?

    Would adding the pictures in from SiteContent fix this problem?

    Thanks for any help you could give!

    Reply
    • Yes, visuals atract visitors but too many of them could also distract them. You must always struck a happy medium. What pleases you on other sites can be a good standard, although people are different.

      I think some themes are made to make the images be close to the text. I was worried about it until I saw Kyle’s latest website and realized it wasn’t maybe such a big issue. See https://rawdealaffiliate.com

      Do you publish with SiteContent? It gives you great images. This is available free for all premium members. I think you must give it a try. In the beginning you may find it a bit “strang” but after 3 posts, you would never want to publish your content directly on your blog.

      If you add images from SiteContent and find them too large (while on the SiteContent platform,simply click on it. It will be highlighted. Check the lower right hand corner. Then you can drag to resize it.

      Thanks for stopping by and I hope to see you again soon here.

      Reply
  3. I recently got some negative feedback about the design and layout of my content and I need to fix it…

    My main problems were the images (didn’t use enough) as well as the fact that my fonts were unreadable.I changed the fonts and my website is indeed much more readable now.

    As far as the images are concerned, I’ll take your tips and start applying them to see how it goes!

    Thanks for the help!

    Reply
    • Negative feedback on your site design and layout? You’re not alone. I also had one not long ago and this obliged me to work to improve my site. I think there’s nothing like constructive negative comments to help you improve things.

      Sometime ago, somebody told me I didn’t have enough images on my sites. That the rule of thumb was, as you scroll down the page, as one image is disappearing another must be showing up.

      I followed this and overloaded my site with images. Be careful about using too many images. They may slow down your site. Wealthy Affiliate members are lucky to have all sorts of platforms, SiteContent optimized images and now Kraken Image optimizer to help avoid this problem.

      Yes, font types and sizes also affect the reader’s overall experience. I’m happy for the changes you’ve made to your site.

      Thanks for stopping by. I hope to see you come back again soon.

      Reply
  4. Your recommendations are right on the money. I’ve been a graphic designer for over 30 years. I’ve watched the internet blossom into what it is today. Let’s just say it’s not always pretty.

    There are so many options for fonts, colors and backgrounds it can be hard to resist but keeping it simple and classy always looks good. I remember when animated GIFs were first introduced and everyone wanted their logo to flame and spin on their website – just because they could. 

    I’m a firm believer in the adage, “just because you can, doesn’t mean you should.” Just because you can may your text green, doesn’t mean you should – just because you can put an image in the background, doesn’t mean you should.

    Black text on white background with tasteful, visually similar images will be much more effectively engage your audience.

    You’ve got some great advice in this article  – I only wish more people would read and abide by it.

    Reply
    • Yeah, Dave, the internet has become more “democratic” and that comes with some problems. Everybody can work online and most don’t realize they’re dealing with real people.

      There’s a French proverb which in English could go like: everything is good, but not everything is useful. No fonts, colors or backgrounds are bad. But not all of them are useful. I genrally prefer to remain mainstream instead of resorting to fancy fonts, etc.

      I wholeheartedly agree with you. Everyone can steal but one mustn’t do it because it will get you into trouble.

      Yeah black text on a white background. Mainstream. That’s the way I go.

      Thanks for stopping by and for appreciating this article. I hope to see you back soon.

      Reply
  5. Hello Akoli,

    Thank You for writing this article. I have been struggling with the idea of making my website more appealing to visitors. I am still learning the ropes and this has helped to clear up many misunderstandings for me. I was using images that were not relevant and thinking that the bells and whistles would help me convert visitors into customers.My site was looking like a circus, and now I can see how any visitors may have seen it as too much.

    I really appreciate you teaching me how to organize my website content to make it look more professional. This will change the entire layout of my site, and hopefully I will see a significant increase in conversions very soon. I have the visitors, just not the conversions. Now, I’m positive that my site is not professional looking, but I’m going to change that now.

    Thanks again so much,
    Darren

    Reply
    • Hi Darren, struggling with websites to make them more appealing to visitors is every website owner’s problem. Eventually you’d find a way to do it. Just trust the training or ask when in doubt.

      Thinking an abundance of shiny images with winking lights will attract visitors and turn them into customers is every new blogger’s dilemma. Rather, nothing turns them off so fast. People are looking for value. Try to help your website visitors solve problems. When satisfied, they will freely give you their custom. Check this blog post: Whose Perspective Will Bring You Success In Your Online Business – Yours or Your Prospects’?

      Great that you have visitors. Change your website experience for them and conver them into happy customers ready to beg to do business with you.

      Thanks for stopping by and I hope to see you back soon.

      Reply
  6. Hi Akoli,

    Thank you for such an informative article. You had me taking notes. You were answering questions I have been holding onto until I can find training on them. I will have to back to the article to figure out how to get pictures from inside site content.

    I will say you were right on with everything. Did you mention pixabay photos were not being optimized, does the optimized plugin, in WordPress, take care of that issue? I have gotten a lot of pics from there because I came across problems finding decent pictures anywhere else.

    Thanks again for an excellent article!

    Cheers, and take care of yourself!

    John

    Reply
    • Hi John, I’m happy to have been of use to you. Is that not what blogging is all about?

      Getting pictures in SiteContent is a breeze. Just click the green tab reading image and the window will open. Now, type in a search term like “content”. The platform will load images for you. You click on the one you like and it will load it. You write the alt attribute and then click add. Finish!

      Pixabay pictures are not optimized. I had used them all the time and they slowed down my site. You’d find that the over 1,000,000 optimized images in SiteContent are mainly from pixabay. So, what is the use going there?

      Plugins are not so good optimizing images. I used one which reduced the physical sizes of my images, making them too small within my content. SiteContent highly optimized images remain as such.

      Fortunately WA is moving away from WWW Image optimizer to the Kraken one. This will be available to all premium members and is going to optimize our images going forward.

      Thanks for stopping by and I hope to see you here again one of these days. Hopefully soon.

      Reply
  7. More often I see many blogs that never do what you’ve explained within your post. Some overusing Images,some never using Images. I am agree that we should create blog for pleasing users not just pleasing google.
    I will always keep in mind these 4 factors that you’ve mentioned above:

    1) Relevant imagery
    2) Font styles and backgrounds
    3) Showing and not telling people what you are talking about
    4) Clean content layouts
    Thanks for your

    Thanks for your comprehensive post about web design.

    Reply
    • Shirian, yes, overusing and underusing images  do not serve the blogger’s interests. One must strive to strike a happy medium.

      Google is only a robot. It does a good job but too much regards for it may ruin people’s experience with your site.

      Relevant imagery: You don’t just add an image. It must mesh with your content. I would say, it must contribute to a better and greater understanding of your topic or a section of it.

      Font styles and background: Search engine bots and your website visitors try to read and understand your content. Why should you spoil their experience with fancy fonts and circus-like backgrounds?

      Clean content layouts: Which would please you, a well-laid out room/house or a clouded one? Your answer is as good as mine.

      Thanks for stopping by and commenting. I hope to see you here again soon one day.

      Reply

Leave a Comment

Share via
Copy link
Powered by Social Snap