22nd
Feb/08

Blog Design Lessons 1: Menus

Posted: 1:21 am by tom in Blog, Web Design

bloggingdesignclassmenusthumb.jpgAs a web designer I’m really interested in design trends as well as good design practices. Blogging may be all about content, but nobody is going to stick around to read your thoughts if your blog is horribly designed. As a designer I thought that I would start a series of blog design lessons for the average blogger - essentially just pointing them in the right direction to improving their blogs appearance.

The benefits of a well-designed blog:

  • You have more credibility and people will trust you more.
  • Often good design results in improved usability/accessibility.
  • You will be able to improve your brand by setting yourself apart from the bulk of poorly designed blogs.


  • This week I will be looking at menus, but will eventually cover all aspects of a well-designed blog (just follow the series of lessons).

    Contrast:

    This is a VERY common design error on your average blog - menus often become illegible or don’t draw enough attention due to poor textual contrast with the background color/image. When reviewing other’s websites this is usually the first thing that I will point out. The good news is that it’s very easy to fix! Just try and experiment with various text/menu colors and find the greatest difference between the two that fits with your blog’s color scheme. That doesn’t mean go for black on white, keep it within reason. What I usually do is design my blog from the ground up, and then as a final step just increase the contrast of all my images in photoshop by about 10 - this adds ‘pop’ factor.

    Check out some examples of good menu contrast below:

    blogdesignclassmenuscontrast.jpg

    Use text instead of images (where possible):

    This one is also pretty basic, but I continually see blogs using images instead of text for their menus. Here are some reasons why you should use text wherever possible:

  • It’s better for Search Engine Optimization - search engine spiders will be able to crawl your site better if you use text.
  • It helps reduce load times - image menus can be bulky in terms of file size.
  • CSS now allows for some really nice typography. You don’t need to worry about your text menu looking boring anymore.
  • Your site will be more accessible. This means that users with vision problems will be able to increase your page’s text size to make it more readable - this obviously isn’t possible with image based navigation.
  • Here are some cool examples of text based menus:

    blogginglessonmenustext.jpg

    I should also point out that you can still have really graphical backgrounds behind your text menus to help liven them up (see: Web Designer Wall)

    Dare to be different:

    This point is a little trickier, and will depend on your designing capabilities. Quite simply, it pays to be different from every other blog. You will see more return visitors and create a unique brand for yourself if your menu (and design) is really unique and interesting. Try to think outside of the box, try anything, the worst that can happen is that you’ll go back to the drawing board!

    blogginglessonsmenusdifferent.jpg

    I hope that these tips helped some of you. Please feel free to ask if you have any questions or would like to know more. Here are a couple of very useful links to help you in your menu designing ventures:

  • CSS Menu Inspiration
  • CSS Menu Generator (a really useful tool if you don’t have the time/knowledge to design yourself)
  • Please subscribe via RSS or Email!

    2 Responses to “Blog Design Lessons 1: Menus”

    1. I’m a bit of a sceptic about the importance of design.

      I’m probably unusual, but for me its the quality of the information.

      There was a discussion about this on a blog called skelliewag.
      Skellie is more of your view than mine.

      You may find it enjoyable to read the comments. I said things a little more tersely than was probably altogether helpful.

    2. I do agree that information is very important, but you can’t under estimate the importance of design. Studies show that users won’t even bother to read a website’s content if they immediately don’t like the design.

    Leave a Reply