Thursday, April 14, 2011

Simple, Code-Free Ways to Improve Your Blog Design

As a blog designer, I hear from so many people about how they have no clue how to start customizing their blogs. Of course, your content should come first, but that doesn't mean you can't have a pretty backdrop for all of that A+ blogging. For me, a nice layout and a personalized design helps motivate me a little, and it might do the same for you. If you don't have the money to hire a designer and you don't know anything about HTML, there's still hope. These simple tips can help make your blog a little more visually appealing.

*This post only applies to Blogger blogs, though some of the basic concepts can be used for blogs hosted on other platforms. I'll work on more posts tailored to Wordpress and other sites in the future.

This is your main design toolbar, which I'll be referring to throughout the post.


1. Make it wider
This might not be for EVERYONE, but I think especially if your blog is visually-driven, the width can make a big difference. By extending the width, you can add larger photos and it gives you more white space so it looks cleaner.

This easy-to-use tool is found under "Template Designer" on your toolbar.



2. Get rid of the plain text header
Adding a plain text header is easy, yes, but adding a photo to your header is almost as easy and makes such a huge difference. You can use an existing photo or just a plain background and edit it at picnik.com. It's amazing how much customized fonts, colors and designs in your header can change the entire look of your blog.

plain text header = boring
This one was created at picnik.com and took all of 3 minutes.

3. "Center" your tabs
In order to actually center your tabs in most basic blogger templates, you do need to know some coding. But if you just extend the length of your tabs by increasing the font size (or adding more tabs, if you want) your pages will extend the full length of your blog and it will look a lot more deliberate, as opposed to just adding some pages and calling it a day.

From your design toolbar, go to template designer>advanced>tabs text, then you can edit the font and size.


4. Customize your "about me" widget
This might be just me, but I think the blogger profile widget is pretty ugly. Everyone has it, and it just looks kind of lazy. If you use the picture widget followed by the text widget (which is basically what I did on my blog if you look at the top of my left sidebar), it looks a lot neater and more put-together.

This is what my about widget would look like if I used it. Doesn't offer much customization.

Add widgets by going to "Page Elements" from your design toolbar, then click "add a gadget" at the top of your sidebar.


5. Keep it simple
Don't add stuff just to add it. White space is visually appealing and you don't want your blog to look like a cluttered mess. Leave it to one sidebar if you don't have much to put there. Try to make sure all or most of your photos in your sidebar have the same width. Keep it organized.

This is the page you see under "Page Elements" on your design toolbar. You can move things around, delete, and keep it all organized here.


6. Choose an actual color scheme
You might have a couple favorite colors you want to use, but there are so many great shades to consider that making a bunch of random decisions can lead to a disaster. By using a color scheme site like colorschemedesigner.com, you can find a palette that actually looks good together and will give you a polished look.


Once you have your color scheme, you can use it in your header and any photo accents, and also add it into your regular blogger page elements, which can be found under Template Designer>Advanced.

7. Get rid of that Blue Navbar
To me, the navbar (that thing at the verrrry top of blogger blogs) is really distracting, ugly, and screams "I'm BRAND new to blogging." (note: unless blue goes with your blog design, then by all means - keep it). And it literally only takes a couple of clicks to make it fade into the background.

blech.

This can be found under "Page Elements" then click edit by the Navbar. You can choose what goes best with your design. Transparent Light is usually a pretty safe bet.

I hope that was at least a little helpful. I'm not an "expert" but I look at a lot of blogs and talk to a lot of bloggers, so this is a culmination of that knowledge. If something I said here doesn't work for you, then it doesn't - no biggie. I'm going to do some more posts in the future on how to improve your blog design, so if you have any questions you'd like me to cover, let me know in the comments. And as always, if you'd rather have someone do it for you: hire me

I'm working on my own blog redesign right now (I know, I'm terrible at just keeping one design) so I hope to unveil that soon!

14 comments :

  1. Great post!!! I have done almost all of these except for the picture/text thing. For some reason, my pretty polished pictures always look edgy (as in, ragged lines/distorted) when I put them as pictures on my side. >.O I don't know why!!! I do want to do this though.

    It took me two years to even find most of this out by myself, so I hope many bloggers new and old will benefit from this post! :D Retweeting FTW!

    ReplyDelete
  2. This is so helpful! I use Wordpress... but I am sure (read: hope!) that there is something similar in the design section.

    Thanks for sharing!

    ReplyDelete
  3. This is so helpful! I use Wordpress... but I am sure (read: hope!) that there is something similar in the design section.

    Thanks for sharing!

    ReplyDelete
  4. I didn't think about the picture/text part for the "about me" section. May have to try that. Blogger really does have quite a few features that are pretty easy to use if you play around with it!

    ReplyDelete
  5. I have even decided to remove the profile widget, only have written my description and added a link to my full profile :)

    ReplyDelete
  6. Great post! Thank you!
    One question - when you suggested using picnik, do you mean the free version or the subscription version? I'm not that familiar with picnik.

    ReplyDelete
  7. The free version will definitely work if you just want to do something simple. I have the subscription version because I use it a lot and it's still pretty cheap. But either would work depending on your needs.

    ReplyDelete
  8. I stopped by because I saw the Pikachu hat and couldn't resist! :D Have a great day!!

    ReplyDelete
  9. I so wish I had this to reference when I originally started my blog! I wince now at how bad it used to look... I'm going to bookmark this and share it with any friends who may start a blog!

    ReplyDelete
  10. So very nice of you to post this. I won a blog design giveaway thats why mine is all nice :)

    BUT I do want to change it one day haha! thanks so much


    xo

    ReplyDelete
  11. great link for those who don't know what their doing with html and layouts!

    ReplyDelete
  12. Thanks for the ideas. I think you can get a little too 'close' to your own blog sometimes making it hard to be objective. I'll look at it again with fresh eyes!

    ReplyDelete
  13. I'm planning on more fancy formatting once I finished college and can dedicate time to my blog, but your suggestions have fancied it up for now :D

    ReplyDelete

Leave a note! I love to hear from you!

Related Posts Plugin for WordPress, Blogger...