Guest Post: Blog Designer Michael Martin On The Future Buzz Redesign

January 22, 2010 Author Guest Author In Meta

Future Buzz Redesign

(Note from Adam:  this is a guest post from my blog designer – Michael Martin at Pro Blog Design.  If you’re reading through email or RSS, you’ll walk to click through to the site to read today’s post and check out the new look.)

You’ve hopefully already noticed that The Future Buzz is looking a little bit different these days (And even more hopefully, you might even think it looks a little better these days!).

Michael Martin My name is Michael Martin, and I run a small web design company called Pro Blog Design. Adam recently asked us to redesign his blog, and I’m here to walk through some of the steps we took in the project, and why it has ended up the way it did.

First of all though, a one-sentence overview on who we actually are: we love the web (obviously!), WordPress is our specialty, and our blog of tips and tricks for WordPress and web design is just shy of 10,000 subscribers.

Now, on to the case study!

Start with the Brief

Every project starts with a brief. I’d been on Adam’s site before, but that’s not enough knowledge to build a design from. We had to talk about its readers, its competitors, and ultimately, what he wanted to achieve with this redesign.

This is a crucial stage of any design project, and if you ever find yourself working with a designer, don’t let them skimp on this. Until you both have a clear idea of what lies ahead, and you’re both certain you’re on the same page, then forget about Photoshop.

One thing I noticed from the start with Adam is that his number 1 goal was to “build subscribers.” Advertising and revenue didn’t even make it on to the list. That speaks a lot about a care for quality, and was definitely a nice way to start the project.

In terms of the actual design side of things, everything was to be as clean and clear cut as possible, putting the content right to the fore. Of course, we weren’t going to let it be boring either! Some elegant design touches would sort that out.

Where To Next?

With all that information gathered, where do you go from there?

That probably sounds like a very difficult question, and in reality it is, but that’s the entire point of the whole previous section. If you don’t know where to even start, you probably haven’t done the brief very well.

No-one (Well, I like to think no-one does!) sits down and instantly knows exactly how a design is going to look right from the start. Once you have your basic idea, the best bet is just to start. At Pro Blog Design, I work with another designer on each project, so between the two of us, something usually works itself out soon enough!

And naturally, we like to keep the client involved every step of the way. At Pro Blog Design, we use a system called Backboard to make client feedback easy.

Probably the biggest change from the original design was the comments. You can see the original design for them in the screenshot below, but you’ll have to actually leave a comment to see the one!

Future Buzz Design

Function In the Design

It’s easy to add streams of functionality these days and get carried away, but the overall goal here was always simplicity, so we were always careful with what we were adding. Some of the main features you’ll notice on the site now include:

  • Tabbed sidebar section – This was a nice way of merging two long lists into one space, and with a very minimal design on it, it doesn’t add any clutter at all.
  • Twitter updates - As a marketer, naturally Adam is a fairly prolific Twitter user! Embedding his tweets is a nice way of showing this and making it easier to connect with him.
  • Sharing options – There are quite a lot of sharing options around the posts now, but because they’re all so compact and spaced out, it really doesn’t feel it.

There are other things like related posts, popular posts and true threaded comments, but the three above were some of the most relevant for this blog.

Careful Coding

I won’t bore you by talking too much about the code here, except to explain one vital thing.

If you check the W3C Validator, the code isn’t quite valid. It fails on one single error. The error is that I’ve used JavaScript to hide the tabbed section, until it is fully loaded.

Tabbed section.

The reason for it is that this way, users with JavaScript won’t have the section flash all of the tabs at once on them, and non-JavaScript users will see the full content of all the tabs.

We could make the page fully valid by removing that line, but then we’re losing the accessibility of it.

The validator is a great tool, but always remember that the experience of your users is the most important thing. Vanity tests come second.

My Favorite Little Touch

To round things off, I want to share with you one of the little touches that you might not otherwise notice. In the footer are links to two of Adam’s other projects, Slice Quotes and his artist homepage. The idea originally was for just the URLs to be the links, but when coding it, I had an idea for making the whole section the link, with no images involved.

The result is just a nifty little rollover effect, but it made me smile at least! And it’s the little touches like this one and things like the subtle gradients in the sidebar (And a special one for the subscription section) that make a design great.

Footer rollover.

What Did I Learn?

One of the best things about working on the web is that you always learn new things, every single day. Normally the new things I learn are when I try out something new myself. This time though, I’m quite pleased to say that it was Adam himself who showed me something new.

The Tweetcount Widget from Backtype is a great little script that creates a very compact Twitter button, but better than that, it lets you customize all of colors so that it blends with your design. I’ll definitely be using that again in the future!

So, How Did We Do?

Adam and ourselves have worked hard on this for close to two months now. We’ve done our best, but was it good enough? I’d love to hear what you think of the new design! If you have any comments, either good or bad, or even just want to ask a question about how we did it all, I’d love to hear them!

And if you’d like to catch up with me, you can subscribe to Pro Blog Design, or of course, it’s never hard to catch me on Twitter. Talk to you soon!