Top Design Elements that Make Your Blog Look Amazing

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

WordPress or not, if you have a blog you’re likely using one of several top blogging software packages that allow you to quickly update your blog’s look and feel. The easiest way is to choose a theme that has the look you want and install it. But sometimes you are using a heavily modified theme already and installing a stock theme means you’re going to loose a lot of code.

So when you think you’re blog needs a face-lift, here are the design elements to look at and ways you can upgrade without an overhaul. Huge tip: while editing your site, do all your work on a testing (also called a sandbox) version, test your changes, and then update your main site. This will save you a LOT of headache and makes sure your customers don’t see your site with broken elements.

Banner/Header Image

Across the top of most blogs is the banner. This sets the tone immediately for the entire website. The colors, tone, and content should all resonate with the banner. So changing the banner can completely change the website. Take these two samples:

How do these different banners set up your expectations for the rest of the site? Would a simple design for the top example for a business site be appropriate? Would the same hold true for the design firm’s banner/header?

Just changing the banner/header will change your whole site and it’s a single file. Often the code for the banner/header is buried deep in the site’s theme files, so you may have to dig a bit. The easiest way to find it is to visit your website, right-click on your banner image, and use your browser’s code viewer to find the location of the image. You can simply replace this file. The recommended method is to change the banner/header file name on your site and upload a new one with the old file name, so you don’t lose your original in case you don’t like the change.

Background Image and Colors

Almost as important as the banner/header is the background of your website. While each element can have its own background colors and images, the entire site has one as well. This should complement your banner/header, so when you change one you’ll likely have to change the other. But sometimes just changing the background image and colors can be the only change made just to give the site a fresh look. To see just how much a background can change a site, check out these examples:

Ranging from the simple to the intense, the background can really change the way a site looks. Finding the files to update is the same process as the banner/header — just right-click on your blog and inspect the source code.

Standard Text Elements

Another easy way to quickly update your site design is to change your basic text elements (H1, H2, links, etc.). With a few strokes of the keyboard, your headers and links change color and behave differently. If you are using blogging software, all of this information will be located in a CSS file or files. Here are examples of how you can shape your design quickly:

This example uses different colors to set elements apart.

In both cases above, this is all controlled by CSS. Specifically, within the H1 tag (or any other tag on the CSS document) just edit the “color” tag and that’s it!

The same goes for links: You can keep the standard blue for unvisited and purple for visited, but changing these can help match up your site’s look.

Fonts

While fonts could be considered part of the standard text elements section, fonts are really their own consideration. Size, type, color: these are just a few of the considerations. The standard rule of thumb is to use a serif font for all body content and sans serif for titles. This is a good rule to help with readability, but don’t be afraid to change it up.

A modern alternative for fonts on a website is to use web fonts. With hundreds of free fonts, you simply reference the font family in your CSS document using the @font-face or @import tags. An excellent source of free web fonts is Google. Google makes it easy to use and even provides a meter to show you if the font is a large download!

Other sources of web fonts can be found at Webfonts.info

Other Elements to Consider

While you can nit-pick each and every piece of your site, the above elements are the critical pieces that visually define a site. But there are other important pieces if none of the aforementioned does the trick for you:

• Forms — the comment and contact forms on your site can make a big impact.
• Advertisements — if you have any kind of advertising, consider how this area is laid out or where your ads appear.
• Navigation Bar — a quick change of the nav bar can make a big difference, and don’t let this get left behind if you do make big changes.
• Footer — you can shift a lot of information into or out of your footer to change your site layout.

Updating the look of your site to make it more visually interesting can come with some dangers, one of the most important being the risk of losing usability. Therefore, always preview your changes in light of this risk to avoid making your site worse rather than better.