10 Steps to A Well-designed Blog

Written by Kevin Liew on 01 Oct 2017
13,581 Views • Web Development


There's a big difference between a simple WordPress site and a well-designed blog that wows your visitors and provides them a great experience. Here are 10 steps you can follow to create a well-designed blog.

Step 1: Start with a Great Header or Hero Image

The first thing that your visitor will see is your blog header graphic followed by a headline or a hero image with a headline in it. To make a strong first impression, come up with a visual presentation that captures what you do and communicates the value you offer to the reader. Come up with a strong logo and brand elements to set the right tone with your header. If you're using a hero image, use an image that really gets to the heart of what your blog is about. Get to the point and avoid trying to be fancy or too creative.

Step 2: Create a Simple Navigation Menu

When it comes to navigation menus, you want to keep it simple. Build a navigation menu with the most essential pages ordered by the pages that would most likely be visited. If you need a larger navigation menu for your content, consider using two navigation menus - one for your core pages and one for the various categories of your content. You may want to use the sidebar to provide navigation for your content as well. Another option is to go with a drop down navigation menu as it will be more user-friendly to mobile users.

Step 3: Pick a Layout that Complements Your Blog Format

Do you plan on your blog being content heavy or filled with small blurbs? Are you going to cover a wide variety of topics or are you going to stick with one to two? Figure out how you want to deliver your content and choose a layout that supports it. For instance, arranging your blog posts into rows of small preview boxes will allow visitors to discover a wide variety of content. A simpler blog can follow the traditional layout of a single column layout. If you have varied content, you can mix layouts to keep the reader engaged and to distinguish different content. 

Step 4: Choose the Right Set of Fonts

Typography has a huge impact on your blog design. Great fonts result in higher readability and add to the look of your site. Try to look for three fonts that you can use throughout your whole blog (one for the main headline/title, one for subheads and one for your content). Look for fonts that are unique and have a high readability by browsing through font libraries. Google Fonts is a good place to start but there are many other resources you can find online.

Step 5: Use an Adequate Amount of Negative Space

One of the most common design mistakes you see on blogs is a lack of negative space. Having space between your content and border, widgets, graphics and even the individual words makes it easier for users to understand what's going on in your blog. For example, many blogs have a column of widgets that meld into each other and makes it confusing to use. Simply putting enough space between each of your blog widgets helps distinguish them from each other. It also allows the user to see the purpose of each one which encourages the user to interact with it. 

Step 6: Come Up With a Strong Visual Hierarchy 

At a certain point, you will want to come up with a visual hierarchy you're going to be using over and over gain for your content. Visual hierarchy is basically designing to help users focus on the most important elements of a page and lead them through the content. This is done with size, shape and color. The title would obviously have the highest visibility so it will be centered and have a bigger font size. A drop cap can be used to lead the user into the content and the formatting can be arranged to create a flow the user can follow. Visual cues, relevant images and other elements can be integrated to lead the user down the right path.

Step 7: Match the Right Colors with Gradients, Shadows and Textures

Coming up with the right color scheme can be a bit challenging due to the vast amount of options you have. A great way to start is to look for related blogs and get a sense of what color scheme can work well with your site. You can also use this color scheme generator to find matching color schemes. You should then go beyond that by experimenting with different gradients, shadows, textures and lighting. This will help you create unique looks for your fonts, backgrounds, web graphics, borders, etc.

Step 8: Work In Extra Features and Functionalities

There are many small things that you can add to your blog to improve functionality. Some of the common things include adding social share buttons, implementing click to share functions, setting up advanced search options, replacing pagination with infinite scrolling and setting up sticky navigation menus that follow users as they scroll down the page. All these small features and functionalities will make your blog truly special and make it a pleasure to use. Just make sure that you don't install too many plugins as it can slow down your site.

Step 9: Work On Your Responsive Design

It's not enough to use a responsive theme for your blog. There are many things that you still need to do to improve the design for mobile users. You want to figure out a way to condense your navigation menu on to smaller screens. You want to optimize your media file sizes so that they load quickly on mobile devices. You want to make your web buttons and links easy to click. With the number of mobile users surpassing desktop users, you definitely don't want to neglect this part of your website design. 

Step 10: Improve Your Blog's User Experience

The user experience (UX) is also a big part of design. The goal of UX design is to provide a satisfactory experience and make it easy for the user to interact with your site. Some of the things that you can do improve your blog's UX include improving the loading times, fixing broken links, providing breadcrumb links and designing a better navigation menu. Just think of how your visitor's experience can be improved and you'll find many different ideas that can be applied through your site's design.

By setting up with a reliable WordPress hosting provider and following these 10 steps, you'll have a well-designed blog up and running in no time.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.