Beginners Guide to Good Blog Design

Everyone has their own opinion on what is beautiful. Tastes vary, styles change. What appeals to one will repel another.

When it comes to your blog design you won't be able to please everyone, but you can make sure that the way your blog is presented doesn't turn potential readers away.

First impressions last. What does your blog design say about you, your personality and the "heart" of your blog?
Does it reflect who you are?

You may have some wonderful thoughts to share and be a wonderful person, but I may never know it if I am put off by a boring or confusing layout.

What is good blog design?

• It makes a good first impression - a nice header, colours, layout
• It has interest to draw the reader in - good use of images, fonts
• It is unique - not a copy of someone else's blog
• It is clear and easily read - easy on the eye
• It is easy to navigate - the reader can find what they are looking for

What puts me off when I visit a blog?

• A cluttered or too-busy design - I get confused and will probably click-off
• Unreadable fonts, dark backgrounds, garish colours - instant headache = click-off
• Ads screaming in my face making it hard to decide where the stories are - instant click-off
• Lots of things flashing at me
• Long text-heavy posts and no images - I take one look, feel tired... and click-off

Everyone can have an attractive, easy-on-the-eye blog with a few little tricks and attention to detail.
You don't have to be a designer or a techo to have an attractive looking blog. Free tools are there for the taking. Basic Templates can be customised and made unique by using your own fonts and images, creating your own unique style.

First Impressions: A Header

Headers are surprisingly easy to make. Above is a version of one I made for a friend, using free images I found on the web and the free-to-download editing programme Photoscape.

I simply google-searched fifties-themed textures and images and made a collage in "Page" which I cropped to a header format and added text and a border to. Voila - instant header.

***UPDATE*** PicMonkey is even easier. Go to Collage and choose FB Header or Pinterest style collage, then drag and drop photos, add text and fancy bits in the Editor.

My own original header was originally drawn for me by my daughter. I figured the childish drawing style suited my blog's theme. I add in different elements each season, and even have a Christmas version.

Headers are so simple to make. You can even customise free downloadable ones from websites like ShabbyBlogs, as this blogger has. I made my current header in... PicMonkey. It took ten minutes.

Or crop a favourite photo and add text to it. Give the image some cool effects to make it funky. Free photo editing programmes like Photoscape, Photobucket and Picnik all offer tools to fancy-up your photos and turn them into cool headers.

Free Photo Editing tools:

• Download PhotoScape 
• Sign up to PhotoBucket
• Brilliant *NEW* PicMonkey

One thing to watch out for: Make sure your header is cropped to be the right size and shape. A header that is too deep or which overlaps the background looks very odd and messy. Headers should be a narrow rectangle in shape. Check the pixel-width of your blog in "Template Designer/Adjust "Widths" to get the size just right, before making your header.

Readability: Using Fonts and Backgrounds
A white (or light) background for your posts is most easy to read.
A neutral colour like grey or black is best for page text; make sure its in a decent size too, for easy, headache-free reading.

Bright-coloured fonts and a colourful background might be fun to play around with but they greatly reduce readability. Trust me.

Web fonts are also fun to play with, but be careful - not all browsers display them properly.
What looks lovely on your monitor may be bitmapped and ugly on someone else's, so bear this in mind when picking your page text.

I strongly suggest sticking to the basic standard fonts for page text and having fun with the web fonts in your post titles, sidebar headings and tabs text.

Be careful with curly fonts on all-caps headings - the text is very difficult to read (and its not pretty either).
If you want upper and lower case for your sidebar titles, choose a template that allows this option then have fun with scripty curly fonts, such as the Blogger "Watermark" template.

For those brave enough to play with a little html...

• A great tutorial here will explain how to customise your sidebar titles in all kinds of ways.
• And this blogger's answer to a question on the Blogger forum gives simple instructions how to just change the case of sidebar headings.

Maxabella gets it right... (simple but appealing blog design)

Increase interest and Break up Text: Use Pictures
Long unbroken screeds of text is a surefire way to get people to click away.
So if you have a particularly long post to share, try breaking up the text with images.


If you aren't into photography, you can find cool images on free websites like weheartit.com.
MaxabellaLoves is a great example of this. Her images are always delicious, rarely taken by her, credited to the free web source. You can also find images by using google image search. {Make sure you always credit your image source}


Even if you aren't the worlds most award-winning picture snapper, you can make your own pics look very cool using effects in Photoscape (or if you're lucky enough) Instagram etc on iPhone. (I am choking down my jealous envy. One day?)

Maximum Space: Adjusting Blog Widths
In Template Designer you have the option to adjust the widths of both your whole blog and your sidebar.
Have a play around with these widths until you get something that fits you.
My blog is 950 pixels wideand my sidebar is 210px - the perfect width for using the lovely free 3-column backgrounds from Shabbyblogs.

It also allows me to choose "extra large" for all my photos - displaying my pics to their best.


Important Real Estate: Your Sidebar
What do you have lurking in your sidebar? You need to make good use of it, because a cluttered sidebar can detract from your blog's appeal, whereas a well-used sidebar can be a great asset.

To help keep things simple and enable readers to find what they're looking for, make use of Tabs/Pages and move things from your sidebar into Pages.

• Click Here for the Tabs and Pages Tutorial

Simplifying Your Sidebar Content
Fairly obvious... put the most important things at the top and everything else in order underneath.
Simplify your blogroll by choosing to show just the ten most recently updated blogs, with the most recent posts at the top. You can have more than one blogroll as well. I have one for my favourite reads and another for friends blogs. Some people have one for craft blogs, another for photography blogs etc etc.

AdSense
I've said it before and I'll say it gain - get rid of AdSense. It is UGLY. It looks cheap and tacky. Plus, you will make next-to-nothing from it (because it is ugly and cheap and tacky). So do your sidebar a favour and give it the boot.

Button Collections
If you have a collection of "blog buttons" they probably come in all shapes and sizes.
Here's a few tips to help you tidy up your button collection...

Firstly, you can paste the code for all your buttons into ONE html widget, rather than having to have separate widgets for each button.

Secondly, you can resize other bloggers' buttons to a uniform size by pasting in the highlighted code where shown:

................
<a href="http://www.projectalicia.com" target="”_blank”"><img src="http://i359.photobucket.com/albums/oo34/iowalish/button200x200version2.jpg" width="130" height="130"/></a>

Each piece of button code needs this added in; you can adjust the size by simply changing the numbers.






Clickable Buttons to Highlight Important Posts/Topics
You might notice that I have little clickable "buttons" in my sidebar and wonder how I made them.
They are very easy to do. Here's how...

First create a small graphic in a photo-editing programme.
I created this one very quickly using Photoscape.

Then in "Design"/"Page Elements" click on "add gadget" then choose "picture"

Upload the graphic you just made. Paste the web address of the post (or collection of posts) you want to link to where it says "Link:"

To make a button to link to all the posts in a certain topic, click on the "label" you want to link to, e.g. Pet Peeves, Parties, etc. Copy the address that comes up in the address bar and paste it in as you would for a post.

Click here for more on Using Labels.

Have fun playing!

...................



{P.S. If you're feeling eternally grateful right now... you can say *thankyou* by Following and/or sharing this post}

More Blog Tips

• Blogging Tips for Newbies
• Making Clickable Links (Hyperlinks)
• Making Grabable Buttons
• Using Labels Properly
• Blog Tips & Tricks for a Delicious Blog
• Blog Tips: Making & Using Tabs/Pages
• Blog Tips: Making Photo Collages & Using Photoscape
• The Gentle Art of Commenting