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.
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.
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 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.
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.
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
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
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.
Create Blog Logo
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.
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 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.
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).
If you’re more tech-savvy, you also can build a pattern library for your website following the Atomic Web Design principles.
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:
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).
Setting up the website is the easy part. Now, we move along to the featured images that will promote your posts and podcasts.
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:
There are different ways to create featured post images:
- Stock photos
- Original photos
- Art compositions
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:
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.
But a much easier way to make stock photos your own is a simple colour overlay.
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.
To take a look at some premium photo filters, check out CreativeMarket’s Actions Category.
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:
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:
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
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.
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.
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.
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.
So yes, you really do need to use the right social media image sizes. Here are two resources that will help you do that:
- Regularly updated cheat sheet on social media image sizes
- Here’s an amazingly-designed tool that will automatically crop and resize your photos
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
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.
List of Top Design Books of 2018
Want to learn design in 2018? Here's a free hand-picked list of best design books to read.