“It is not what you say that matters but the manner in which you say it.”
This famous quote by William Carlos William is as relevant for blogging as it is for real life.
Although whether the “what” is important or not (especially in educational blogs) is debatable, the “how” is definitely a factor you should not overlook.
It is the design of your blog that determines if a visitor stays on and starts reading.
To build a growing audience, you should definitely take care of your blog’s look and feel.
Why blog design matters.
Your blog’s visitors decide in a matter of seconds if they stay or move on. Can your blog’s first impression live up to this circumstance?
Like with every first impression, you rarely get a chance to have a second. This post will help guide you through important steps to design your blog in a way your readers will love.
Design to crave for more.
Not only should your writing make your readers crave for more and lead them through your content. Your design should also support visitors throughout your website. Provide a red line to follow.
Highlight important goals you want them to accomplish (like signing up for a freebie).
In short: ensure that your design says “Welcome, let me guide you”.
Colors are an important aspect of each website. Colors lead to emotions.
They influence the first impression you give to visitors. Additionally, they also have an impact on whether your site is comprehensible or not. Reading dark grey on semi dark grey is a big hurdle. Make it as easy as possible for visitors to start reading your post.
…and the emotions they evoke
Color emotions are highly individual. However, be aware that colors transfer feelings. Here is one possible color interpretation:
- Yellow: Innovation, Energy
- Orange: Fruity, Confidence
- Red: Bold, Aggressive
- Pink: Beauty
- Violet: Inspiration, Harmony
- Blue: Gallant, Trustworthy
- Green: Healthy, Organic
You can also ask yourself what feelings you have when viewing different websites.
Single colors are easy to choose.
However, if you want to get good combinations, you shouldn’t just rely on your guts. Combining colors and making the result look professional is no task for beginners. Therefore, I highly recommend using supportive tools to choose your advanced color combinations.
Tools support you in finding beautiful colors and combinations. However, each tool can only go so far. Experienced designers accomplish the last step in defining and refining the results without the use of tools.
paletton.com: Choose your first color and look for matching ones. Or simply hit the randomize button.
materialpalette.com: If you are just about to create your own blog and have no idea where to start.
hexcolortool.com: Useful if you have already chosen colors and need them lighter or darker (also useable for button hover colors).
Fonts also play an important role on your blog. While it may not be clearly visible, small changes in a font can have a huge impact on its readability.
There are 3 important aspect of a font: Type, Size, Colors. Let’s go into detail.
Font types determine the drawing of your font itself. You can use fonts with serifs or without. Short letter spacing or big (although you can alter that to a certain extend). Round letters or more edgy ones.
To get an idea of different font types you can browse through libraries like:
Font sizes have a critical impact on whether your blog can easily be read or not. Modern blogs stick to font sizes greater than 16px. If you want to mathematically and correctly choose your font size, I recommend using tools like Persona’s Font Size Calculator and Typescale.
The baseline of font sizes is that it’s a balance act between big enough to easily read and small enough to get through your text fast enough.
Have you ever read through a gray on gray text? That’s pretty frustrating. Avoid using colors that are not distinct enough to each other. On the other hand avoid colors that are too distinct to each other. Plain black on plain white may look cool and glossy for headlines but can get exhausting if it’s used for plain text.
The same goes for a glowing toxic green on a dark blue background. It may look cool as a first impression but it doesn’t add to your site’s usability in the long run.
Images, just like colors, are a great way to create certain emotions. Images are also the first content elements that get recognized. Even more if they have people on it, as we tend to connect faster with faces of similar beings.
Quality is an important aspect of each of your images. If you set your images in low quality or compress them too much, they look ugly and decrease your user experience. However, if you just upload them with maximum picture quality your site’s loading time may increase drastically.
No one I know likes slow websites. Slow sites just have huge problems getting visitors to stay. Your goal should be a balance between beauty and size.
Placing and Quantity
We will go over the details of placing content in your blog in the structure chapter. If you place your images, remember that they can add to the clarity of your blog.
On the other hand they can also distract if they are placed in high numbers. Like with all mighty things, the dose creates the poison.
Lightboxes are a great and simple trick to increase the usability of your site. Normally, if you click on an image in most content management systems, you will be redirected to the standalone image. The reader needs to take a step back afterwards to continue reading.
Lightboxes fix this problem by opening images in a box overlay on your current page. In modern lightbox plugins, visitors can simply click anywhere on your site to close the lightbox.
Structure should add to usability and not confuse your visitors. Give your site a continuous structure so visitors can learn it. Don’t even make them think. You don’t need to be the special one that places your site’s menu on the right side. Instead, follow the trends and create something visitors already know. You will turn much more visitors into readers if your site’s structure is easy to learn.
There are some important things to know when structuring your content. Conversion optimization tests have shown numerous times that visitors start to go through your site from the left top-mid section (in “western” countries). Place whatever you think is the most important for your readers in this position. It might be a small picture or your headline. If you have big pictures, why not place them on the right side or your page? They attract readers’ eyes easily anyway.
By now, you may feel there are no truly correct recommendations. If you want to really get this right, start user tests with your target audience.
Sidebars are important elements in each blog. They promote your ads, freebies and other goals you want your visitors to click on. If you visit my blog, you may see that I don’t have a sidebar on my single posts. This is mainly because I want my readers to have an undistracted reading experience at the beginning and a well guided flow through my website afterwards. However, this doesn’t mean you shouldn’t use them yourself.
If you really want to get the most out of your sidebars, you can use sticky ones. They also greatly enhance your visitors’ experience as readers always have their goals (your freebies) right in front of them.
Space is the single most powerful element of your website. A rule of thumb: the more space the more structured your site. In reality, it’s important to find the golden balance between space and content. If you cluster your elements beside each other, your visitors will have no clue where to start (and will end up leaving your site). If you expand your site too far, your readers will have a hard time to go through your content and reach their goal.
Use space to structure your site, keep connected things together and distinguish them from different content.
If you want to stand out in a positive way, you can make life for your visitors even easier. Add guiding elements to your posts like marks at your headlines to highlight them even further. You can also use arrows to generate a guided flow through your website.
If you don’t know how your visitors should go through your website, you can draw this process.
Start with your goal. What do you want your visitors do?
Don’t know your goal yet? It could be to generate money with your blog or to just create
awareness for certain topics.
Whatever your goal is, you need a starting point to conceptualize your blog.
If You Are Yet To Start
If you have not yet set up your blog, I have written a handy guide on how to setup your blog professionally in 5 easy steps. After setting up your blog, use this post here to build your design step by step and grow a happy followership.
If you need further inspiration we also collected some of the best web design blogs to read.
Do you have any questions? Feel free to ask in the comments below.
How to use Trello for bug tracking & user feedback!
Trello is a great tool for managing all your project-related tasks and staying in sync with colleagues and clients. We at Usersnap are avid fans of Trello. And we even built a Usersnap integration for Trello. So we thought it would be fun to share some of our best tips on how to collect bug…
12 web development trends for 2016
This article is brought to you by Usersnap, a bug tracker and feedback tool that helps you to communicate visually. Get a 15-day free trial here. We have just entered year 2016 and it’s already a couple of days old. Just before New Year’s Eve, I showed you our take on the year 2015 in…
Free & great wireframe tools for web designers & developers!
Usersnap is great for bug tracking. And that’s the core feature of our Usersnap widget. However there’s a time when ideas are brought to paper and web teams discuss about mockups and first scribbles. We know that, because a lot of users tell us about their web development and web design workflows. Unfortunately the coordination…
23 amazing lessons learned from interviewing the world’s top developers
Three months ago – on Thursday, April 16th – we launched bugtrackers.io as a new platform showing the life of people in web development. I expected it to be super fun. And of course, I expected it to be successful. After all, we showcased the life of famous, successful or extraordinary tech people, like CTOs, developers,…
Don’t listen to your users. Let them show you.
Today I stumbled upon something quite shocking. I got hooked while re-reading a couple of our blog posts on the topic of customer support and how you should engage with your customers and users. In this blog post I’d like to show you what we got wrong and why you should not listen to your…
6 mistakes to avoid when collecting design feedback
There are several lists on web design mistakes out there. Most of them focus on the web design itself but forget about other components such as how a good design becomes a great design through the right way of collecting feedback. There’s always a feedback stage in the web design process which requires intensive interaction…
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.