parallax background

A showcase of great blog design to inspire you

The best software websites to inspire yourself from
March 11, 2019
How to design mobile app websites: 23 best app websites
March 13, 2019
 

Even the most fantastic content can be thwarted by an underwhelming blog design. As your organization turns into a blogging machine, it’s not difficult for content to become your sole point of focus, thus ignoring crucial elements of blog design that would help boost your organization’s traffic and leads.

Of course, the best way to determine the topic and personality of a blog is through its imagery, color palette, style, and logo placement. This allows you to entice users into headlines, encourage reading and interactions, create lasting impressions, and optimize everything for conversions.

 

The question is: where should you begin? How should everything be organized in order to boost subscribers and conversion rates while maintaining a visually pleasing appearance? What is the best blog design that looks good, boosts your conversions and credibility, and gives your visitors a sense of feeling right at home?

In order to help you learn how to design a blog, we’ve put together a list of the most crucial elements to designing your blog and how each of these elements will help boost your numbers and optimize your blog.

Make Design Decisions That Are Goal-Driven

Make-Design-Decisions
 

The primary intention of blog website design is to get your website to adapt towards your purpose of design is to get your website to convert towards your objectives. Everything else falls into second place. How can this be achieved?

This requires having a visual chain of command that will lead towards a call to action. To put it simply, include a headline or series of headlines with a call to action coming at the end. This combination should then be placed in the most viewed parts of your website (i.e. above the homepage or sidebar, below the posts etc.).

This is perhaps one of the more powerful ways to turn your blog into a lead generation machine with a great design.

belearn
 
 

Your Home Page Is the Place to Start

Your-Home-Page
 

The core of your blog is your homepage. Its three main objectives are:

  • Attracting and captivating visitors
  • Educating visitors on your brand
  • Encouraging readers to visit other pages listed on your website

When considering what should be included on your homepage, make sure your desired content fits within these listed objectives. Your homepage is used by visitors as a starting point for getting to know your content, products, and projects, which is why simple navigation is crucial.

Once you realize that your blog’s homepage isn’t limited just to your most recent posts, you open yourself up to so many possibilities for elements that could be included.

Your-Home-Page2
 

Your choice will depend on your organization and the industry you operate, but here are some blog page examples that could be included on your homepage:

  • Categories
  • Recent posts
  • Information about you
  • Featured posts
  • Navigation
  • Social media links
  • Most recent YouTube videos
  • Instagram feed
  • Twitter feed
  • Email list sign up
  • Digital products
  • Resources

This doesn’t mean that every example listed needs to be included. Your homepage is basically a taster of the various types of content offer, but don’t try to include too much content.

Bediet
 
 

Enforce Grid-Based Alignment

grid
 

Are you looking to create designs that are balanced and quick? Understanding grid layouts is the key to this. Grid layouts are important because they provide your blog design with structure. An absence of a grid leads to mismatched and unorganized content that lacks continuity.

Grid layouts utilize margins, rows, and columns to create a proportional and harmonious design. It acts as an invisible guideline to help you determine where to place elements such as logos, images, text, and even white space.

There are numerous theories regarding grid setup and countless options, so what matters most is that you go for whatever choice functions best for you and your project.

bepets
 
 

Create your own: Blank documents can be divided mathematically into odd or even numbers of columns. A helpful tip is to take gutters –the space found between columns – into consideration and include them in your grid system.

Utilizing a Blog Card Layout

 

We all put out a large amount of content. Depending on whether you update your blog twice a day or once a week, you could end your year with more than 600 blog posts.

Since you have a lot of posts, you’re going to have to come up with a blog post layout that enables users to see how varied your content is without overwhelming them with an abundance of information.

be-phildreme
 
 

A card-based design is one of the most UX friendly blog layouts out there. Your blog cards should remain simple and should include the following elements (the ones in bold are the most important ones to be included):

  • Blog Title
  • Featured Image
  • Blog Excerpt
  • Blog Author (and image if there's space)
  • Category
  • Post Date
  • Read More Button
  • Social Share Links

Be Familiar With Your Scroll Rate:

Be-Familiar-With
 

Scroll rate refers to the amount of your page seen by users. Users will scroll for as long as they find the content interesting. If the content becomes more and more irrelevant to them as they scroll, they’ll end up aborting their session.

It’s nobody’s wish for their content to die simply because they have a bad blog layout. Designers focusa loton the above the fold area – it’s where visitors get their first impressions of your website and usually keeps them moving and collects purchases.

While that section is important, you shouldn’t neglect everything beneath it – the below the fold section. That’s the area that will keep users scrolling, thus additional posts get viewed, read and shared all over.

code
 
 

Sliders Are A Risk:

Sliders-Are-A-Risk
 

Sliders are a feature that will cycle through your posts. Practically every blog design template has sliders built into it. This is despite the fact that statistics prove that sliders shouldn’t be a part of blog design.

Take the University of Notre Dame’s website, for example. During a six-month period, the website pulled in 3.7 million visits, but only 1 % of them viewed ANY of their slider images.

There’s simply no reason to irritate users with a moving feature that’s not easy to follow. Instead, provide them with a single feature to select since most people click on the first item they see.If you use sliders, you’re just asking for the odds to be stacked against you.

marina
 
 

Highlight Blog Material That Performs the Best:

Highlight-Blog-Material
 

If you’ve been blogging for anywhere from 2 to over 6 years, you might discover that certain blog posts will drastically outperform the majority of your content. These blog posts may be ranking well thanks to certain keywords and bringing in a large amount of traffic, their conversion rate might be above average, or they might be shared on other platforms on a regular basis.

Your most popular blog articles should have their own card and be placed either in a sidebar or at the top of the blog home page. There’s a reason why these articles have generated so much traffic. New visitors should have instant access to your finest work. This section can be titled something like “Best of the Blog” or “Most Popular Articles”, with each post being tagged as such.

Avoid Serif Font for Body Text:

Avoid-Serif-Font
 

Any qualified designer can vouch for the fact that serif fonts (whose letters have small tails on their tops and bottoms) are the most readable option for print text, because it’s easier for the eye to carry between letters. However, they’re not the best option for website texts, but they’re still really popular. Why is that so?

The thing is that computer screen pixels will break up the serifs, so when fonts like Times New Roman and Georgia are at a small, body-text size, they end up looking fuzzy. On the other hand, with sans serifs such as Tahoma and Arial you’ll get a clean and crisp look.

Highlight Blog Authors:

author
 

If you end each blog article with a brief author bio and an image, blog visitors will get a sense of expertise provided by your organization. Authored blog articles help your organizations brand, and users can look up their authors of preference.

bewallet
 
 

Lead Magnets That Are Strategically Placed

leadmagnet
 

Plenty of us will have a good amount of traffic, but we still struggle to gain our desired amount of conversions or subscribers.

This is where it comes in really handy to make good use of a lead magnet that is enticing and easy on the eye.

A lead magnet is an enticement offered to prospective users in exchange for their contact details such as their name, phone number, email etc. There are various kinds of lead magnets, but they’re mostly content that can be downloaded, e.g. white paper, checklists, eBooks, video series, or any other kind of strategy guide useful to users.

Once you know what your audience responds to the most, you now need to turn it into something visually convincing that will convert visitors into users.

This technique is used in two different ways. The first way is on the blog listing page; as the CTA found halfway across your page. The second way is a popup that will appear on a daily basis to those who have yet to become subscribers.

Other Design Tips

Other-Design-Tips
 

Featured Images: One ofthe most popular trends at the moment is adding large hero images with a non-stocky feel to each inner blog post and blog card. A compelling image should be part of every blog post. Steer clear of stock photos that have a staged or canned look.

Color Usage: Your blog should consist of a primary color, a call to action color, and a shade of grey. The primary color is the first color that should be seen and the last color that should be remembered by users. The call to action color should be used sparsely as it’s the color that users should look for as they’re making their next decision. The shade of grey helps subtly emphasize and de-emphasize particular elements of your design.

Embrace-White-Space
 

Embrace White Space: Cluttered pages are anything but user-friendly, especially when viewed on mobile devices. If your page contains too many elements, users will be distracted. Create the best experience possible for them by using a good amount of white space.

Blog Design Suitable for Mobile Devices: Blog design should be made suitable for mobile devices because that’s the location of most users. Most Google searches originate from mobile devices. This is why mobile-friendly blog designs are of crucial importance.

Having a blog design that’s easy to use and functions well along with quality content is the secret to having a successful blog. Sure, pretty blogs are loved by everyone, but the most popular blogs place for emphasis on usability and functionality than they do on how pretty their blog is. Focus first on the tips listed in this article, and then go and look for a new header image.

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 157,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.