4 idiot-proof ways to make your blog look cool

November 29th, 2006 / 15 comments / design

I started doing freelance design by focusing all my energy on blog design. Almost every blog is essentially the same - posts, sidebars, maybe a navigation, and maybe some advertising. How do you distinguish a well designed blog from the rest? The answer is obvious - do things that separate your blog from the masses and ensure it looks different than a Blogger template or a LiveJournal.

So, without further adieu - here are 4 idiot proof ways to make your blog look cool. And you don’t even have to be a designer to make it happen. You do however, have to know how to work XHTML and maybe probably CSS, but everyone can do that now days - right?

1. Typography for the common man

You only need to know one rule about typography to make your blog look professional:

You get to use two fonts. That’s it. If you’re a badass, maybe you get 3 - maybe. I don’t want to see Comic Sans titles, Georgia as your body text, and Arial as your link text. Pick two. Stick to them. Use “complex” or distracting fonts judiciously - I won’t be reading any posts that are written in a fancy, cursive font. Who does this well?

2. Stop scaring readers away with a lot of text

chris.gifThe image tag is your friend. In large posts throw in some images to split up the content a little bet. No one wants to feel like they’re reading a college text book - they’re at your blog, it should be inviting. On your home page, spice things up with some pictures you recently took or a screenshot of a recent project.

Rather than put entire posts on your front page put excerpts on the front page and allow users to click through to the full posts if they’re interested. It will let them see more content and make your front page look less boring.

Who’s doing this well?

3. Stray from the traditional blog layout

jeff.gifMake your blog’s landing page more of a portal. Make it easy to browse. Allow people to get an idea of the content on your blog from this one, single page. Let people know who you are, what you’re interested in, and what you write about in a quick glance. Easier said than done, right? Wrong. If you take a lot of pictures, put a feed to your Flickr photos on the main page. Write a quick sentence or two about who you are. Put a picture of yourself next to those sentences. Include a list of popular, recent, or favorite posts. Be creative and give people a sense of who you are.

Who does this well?

4. Color is great…if you know what you’re doing.

color.gifIf you’re feeling ambitious, use a fancy color scheme. I should warn you: color is one of the trickiest elements to play with in design. Fortunately, there are some great tools that take all the guess work out of it. Any idiot could come up with a great looking color scheme using them - perfect for this article, right?

The tools:

It’s not so hard…

Blog design is relatively simple. Obviously people who are experienced with design are going to create some pretty impressive designs, but even regular people can enhance their blog’s design with a bit of work.

What Next?

15 responses so far ↓

  • I can not agree enough with you on the font issue. So many people don’t get it though.

  • What Zach said but in regards to #2 - gracious use of paragraphs, bullets, highlighted or bolded text and images makes for great readability.

  • Why doesn’t Cameron Moll violate rule #1? (You have him listed as a good example!) I counted like five fonts on his front page, and I’m confused! :-D

  • Cameron doesn’t violate #1 because the dynamic portions of his site are constructed with only two fonts — Georgia and Verdana.

    His deft use of italics make it seem as though more fonts are in play, but this is one of the hallmarks of savvy (to use Cameron’s word) typographic implementation.

    As far as graphics go, Cameron uses three additional fonts to complete his “brand.” One, the lowercase font that he uses in his logo, is not repeated anywhere else on the page.

    Another (maybe Clarendon?) is used in the navigational links and also in the mini headers throughout the site. I use Gotham on my site in much the same way, and I think that incorporating these little graphical elements with nice type is an excellent touch. When used wisely, you can’t beat ‘em!

    Finally, Cameron rounds things out with a script font in his Authentic Boredom logo. I view this kind of like poetic license — if you can pull it off, be my guest.

    Cameron can pull it off.

    Oh, and Ben — thanks for the good word! I’m loving your site lately.

  • Ah, thanks Chris :) Saved me some time. And good point, Paul - a lot of people don’t use lists when they make perfect sense.

  • Great post. Will take this on board setting up my blog & have subscribed to your feed. Thanks!

  • Fun post! Thanks for including me! Your blog looks quite nice, too… :)

  • About colors, consider also kuler.adobe.com

  • […] » 4 idiot-proof ways to make your blog look cool - Bleikamp.com by Ben Bleikamp - blogger, student, web guy extraordinaire (tags: design blog webdesign howto)   […]

  • […] 4 idiot-proof ways to make your blog look coolSome useful tips that you can use to improve your blog’s looks. […]

  • […] » 4 idiot-proof ways to make your blog look cool - Bleikamp.com by Ben Bleikamp - blogger, student, web guy extraordinaire (tags: design blog webdesign blogs howto) […]

  • Great post, but never underestimate the ability of a superior idiot. Just when you think you have something idiot proof… along comes a better idiot.

  • You are right about the 2 font rule, anything more I think subconsciously makes a person dislike the site

  • They don’t look as idiot:) Hm. What can you say about appropriate length of the ordinary blog posts?

  • Girls For Matures

Leave a Comment