Blog Design: The Absolute Guide to Creating Graphics for Your New Blog

Design Books for Entrepreneurs

Save time and learn design in weeks with these carefully selected books on design.

What happens when you follow a random link, only to be met with ugly blog design?

Chances are, you become very suspicious of the content on the website.

There have been many studies made on this, showing that design and overall usability of your website immediately affect how first-time visitors view you and your brand. For example, design is the most important credibility criteria for 46.1% of the participants in this study.

Your blog design crucial for your readers’ first impression and how they perceive you as a source of information. Before they start reading any of your writing, they’ll judge you by your design.

Want to market your blog by reaching out to guest post on other blogs? Tough luck! With an ugly blog design, you don’t stand a chance of getting a reply. Other blog owners will see just what you are — a total blogging noob. How can they trust you?

Many beginner bloggers and website owners put off design saying that it’s expensive, or that they haven’t got time for it. Well, that’s all over!

In this monster-sized guide (it has over 2000 words!) on blog design, I will guide you through the essential graphics you will need when launching a brand new blog or podcast website.

I will teach you how you can save time and money and do all of it yourself. I’ll share the tools and resources I use, and throw in a few free downloads as well.

Templates

As a blogger or a content website owner, you’re super-busy with just regularly creating good content. Not to mention networking, marketing, site updates, managing freelancers, and research. You really don’t have the time to spend hours thinking about blog design each time you post a new article.

That’s why throughout this guide, I will encourage you to develop your own design templates.

Templates will help you create consistent graphics, in much less time. Later on when your site grows, they will help you outsource graphic design effectively and more cheaply.

How exactly?

Well, instead of hiring a professional designer to create each graphic from scratch, you’ll be able to get someone from Fiverr to simply follow your template and crank out a bunch of them.

Creating a template is simple. just pick a tool you will be using for graphic design and create a sample graphic to be used for a specific task, using your fonts and colours. Then, every time you need a new blog post image, simply open up the template, customise it, and then export the gorgeous end result in minutes.

blog design templates

Blog Design Tools

Speaking of tools, let’s first talk about the software you can use to keep and create your graphics. When you’re starting out, it may be overwhelming to try to evaluate thousands of design tools, so here are 4 that I recommend.

Sketch

I like Sketch. It’s far from flawless, but it’s a very well thought-out app, perfect for designers with a DRY (don’t repeat yourself) approach.

It’s great for style guides, designing a logo, creating blog post images, but it can’t do photo manipulation so I still have to supplement it with Photoshop.

Paid, Mac-only

Canva

Canva is a free online tool that works surprisingly well for social media images and such. While you won’t be able to create a logo with it, it’s definitely worth taking a look at. They also offer templates and photos you can buy within the app.

I don’t personally use Canva at this moment, but I can see how it can be a great tool to create templates with and share them with your freelancers or team members.

Free / paid upgrades, online

PicMonkey

It has a stupid name, but it’s a quite serious design app. It gives you a lot of freedom to create; from filters to brushes to fonts to stickers, it’s all there. It seems like this app is more geared towards more experienced designers.

Free and paid plans, online

Want to compare more design tools? Here’s a post on 13 Most Entrepreneur-Friendly Design Tools I Know

Buffer’s Pablo

If you don’t want to be too creative and just want something that would help you create clean graphics, look into Pablo. It gives you very few options, but at least you’ll be sure you won’t over-clutter the design. It’s perfect for quick Facebook and Instagram quotes.

Free, online

First things first. After you’ve decided on a topic, your blog will need a name, a domain name, and create blog’s logo.

Logos can cost up to $2000 and more. For a new blog, obviously investing this much doesn’t make sense. Regardless of what your “get rich blogging” guide told you, this new blog may never make you money — so it’s better to stick to a small budget.

I’ve written a great guide on how to design a simple logo. Don’t worry, you don’t need much skills. In fact, you don’t even need an idea. Just follow the tutorial and you’ll end up with a decent logo.

blog design logo

Typically, designing a logo takes a long time. You have a million different fonts and styles at your disposal, and it’s easy to get caught up into the nitty gritty of logo meaning and the overall design.

Try to move along from this step as quickly as you can. In the end, it won’t be the logo that will make or break your blog — it will be the content and your ability to market it.

But of course, good (and consistent) design will help make that happen. Which brings us to:

Style Guides

Style guides are a tool that large companies like Microsoft and Apple have been using forever. It’s a handy little document that keeps everyone who has to do with visual look of the company (journalists, graphic designers, UI designers, CEO) on the same page.

Firebrand's style guidelines.
Firebrand’s style guidelines.

Bloggers can use a similar, but a much more simplified tool to keep their blog’s branding in check. Typically, you’ll only need to specify your logo, your brand’s colours, and fonts.

For blogs, I recommend you also paste in the templates for blog post and social media images (we’ll talk about those in a moment).

Here’s a free style guides template you can build upon.

If you’re more tech-savvy, you also can build a pattern library for your website following the Atomic Web Design principles.

buffer style guides
Buffer uses a style guide with reusable components to accommodate their speedy growth.

Customise WordPress Template

After you’re done with the style guide, it’s time to set up the website. There are many tutorials out there on how to set up a new blog with WordPress, so I won’t go into that.

If you have a good idea of what kind of layout you want on your site, you can use ThemeBro to find the perfect WordPress theme for you. (Disclaimer: I’m the owner of ThemeBro.)

Most good-quality, but non-free WP themes come with a tool to modify colours, fonts, upload a logo, and much more. Here’s an example of what the backend of a theme from MyThemeShop looks like:

blog design wordpress

At this point, it’s time to use your style guides and simply follow it to customise your WordPress theme. Try to be consistent with the use of colours (for example, make all clickable objects a certain colour) and fonts (use 1 or 2, but not more).

Here’s a tool that will let you draw your favicon and export it

Setting up the website is the easy part. Now, we move along to the featured images that will promote your posts and podcasts.

Featured Images

67% of consumers consider detailed images to carry even more weight than customer ratings, reviews, and product descriptions. Articles with relevant featured images get 94% more page views than those without.

Featured images are like book covers. They help drive more traffic and make each post more noticeable.

They are also an important part of branding — sometimes, a quick look at the post image will tell you which blog it’s from. Like this example from CopyBlogger:

copywriting-tip

There are different ways to create featured post images:

  • Stock photos
  • Original photos
  • Illustrations
  • Art compositions
  • Graphs

Customising stock photos

I use free stock photos for the blog you’re reading right now. It’s convenient, but there’s a thing with free stock photos — you start noticing them everywhere. Everyone uses them.

This doesn’t look too professional, does it? It’s as if 20 other blogs used the same logo as you. No bueno.

Well, you don’t have to skip stock photos altogether. But you should learn to customise them so that they look completely different from the original.

CoSchedule has published this great infographic featuring different layouts you can use for your featured images by using just stock photos and some creativity:

coschedule-infographic

As always in design, details matter.

For example, you can work some Photoshop magic to make the stock photo your own. Actually, I used the same technique (replacing the laptop’s screen) in this post right here.

This website is using a common stock photo from Pixabay, but with a twist.
This website is using a common stock photo from Pixabay, but with a twist.

But a much easier way to make stock photos your own is a simple colour overlay.

featured image
Internet Business Mastery blog uses colour overlay to better marry photos and text.

To move it up a notch, you can use a Photoshop filter. It will give all your photos a similar feel. Trying to stay consistent will help build a brand when your post gets shared around the web.

Here’s a HUGE list of free stock photos you can use for your blog.

To take a look at some premium photo filters, check out CreativeMarket’s Actions Category.

photoshop action blog featured image
I created these photos in a few clicks using this free Photoshop action.

Illustrations without paying a fortune

Paying an illustrator to draw a custom blog post image for every post is going to add up. Luckily, there is a trick to still get that awesome laid-back illustration style for your blog design.

For one of my blogs (that I sold a while ago), I had used a free icons pack to create the post images. To carry a common style throughout the blog, I applied the same displaced contour trick that was used to create the logo:
icons as featured image

Simply using one single icon pack to create all your post images is a quick and easy way to clean and gorgeous post images.

And don’t think that icons can be only black and white! Here’s a good example of how a blogger uses icons to create great blog graphics:

A Better Lemonade Stand's founder uses icons to create fun and colourful blog post images.
A Better Lemonade Stand‘s founder uses icons to create fun and colourful blog post images.

The point is, you don’t need to create all your graphics from scratch. A lot of illustrations, icons, photos, and templates are already out there, and for the cost of a few dollars, you can end up saving yourself hours of work.

Social Media Graphics

In the age of short attention span, social media graphics are gaining in popularity. People are much more likely to engage with posts that include a graphic of some sort.

most-shared-posts-photos-1-
Source of the infographic

A research done on Google+ posts showed that posts containing an image were much more successful in terms of re-sharing and virality.

Posts containing an image are 3 times more likely to have a high number of resharers than text-only posts.

I think I made the case for social share images. Let’s find out how to create them.

Social media images break down into profile and share graphics. Profile graphics are an attempt at making your Facebook and Twitter profile match your website, to make your readers feel at home even when they’re away from your site.

Shareable images build your brand and help bring people back to the site. Let’s look at how you can create them.

Profile images

Use the colours and fonts of your brand and include your logo somewhere — ideally in the profile picture.

Facebook and Twitter covers often steer away from the branding slightly, becoming an advertising space for the newest call-outs.

blog social media graphics design
Tom Tailor uses a Facebook cover and profile pictures that are consistent with their overall branding.

Share images

If you intend to share quotes, infographics, and gifs, it’s a good idea to create a template for each and simply swap the text and underlying photo every time you want to make a new post.

Even though you can add them, logo watermarks aren’t absolutely necessary for a good brand recognition. Make sure to create and post image updates that look similar — this will be enough for your followers to visually connect them with your brand. It may even encourage them to share the post.

Samsonite's posts are recognisable even without any visible branding.
Samsonite’s posts are quite recognisable even without any visible branding.

Social media image sizes

Every social media has a specific size that will look best. On Instagram, only square images will look right. On Pinterest, long images get shared the most, while Facebook would only display a portion of that same image.

social media graphic sizes blog design

So yes, you really do need to use the right social media image sizes. Here are two resources that will help you do that:

Next Steps in Blog Design

I mentioned templates as a way to save time and money on creating graphics for your blog. You can use the same method to streamline design process for many more marketing materials, like:

  • ebooks, checklists
  • video call-outs and thumbnails
  • pop-ups, forms
  • landing pages
  • infographics
video thumbnail image for blog design
WPBeginner’s Youtube channel is a good example of consistent use of templates for video thumbnails.

It may seem like you don’t have the time to invest into producing blog design templates and style guides. But keep in mind that productivity doesn’t mean to be just busy.

From the very beginning of starting your blog you need to think carefully where you invest your time and energy. Into writing great content or mulling over a unique new blog post graphic design?

The sooner you create your guidelines and templates, the more time you’ll be able to save.

Design Books for Entrepreneurs

Save time and learn design in weeks with these carefully selected books on design.

Download