Blog

Redesigned and refocused on usability

November 24th, 2006 at 12:42am | 5 Comments
New Design

The last time I redesigned this site I had a lot of ideas that had been gathering in my head, on little notepads, and in e-mails that all went into the design with no real focus on a set of design goals. And it showed.

The text sizes were strange, the graphics were heavy and took a long time to load, and the design just looked sloppy and unprofessional. I spent most of my time tinkering with the Prototype and Scriptaculous Javascript libraries, refining the page load animation, debugging the AJAX-powered live search, and ignoring obvious usability issues. Only a month or two after I had released it, I was totally sick of that design.

This time around I had a solid set of design goals in mind and made a mental note to stick with them no matter what fancy crap I wanted to try. My design goals were:

1. Clean
The design should flow over the entire page. Whitespace should be used in place of borders and separators when possible.
2. Lightweight
No Javascript libraries. Libraries are way too large for what little utility I get out of them for this small site. Minimal graphics. It is usually easy to ignore the handful of users with slow internet connections, but mom is still on a modem! Javascript to enhance user experience only. Enough with the useless Javascript animations, they are slow and annoying.
3. Scalable text
Computer users are getting older (hell, I’m getting older!) and vision degrades with age but there is no reason that readability has to decrease.
4. Scalable layout
If the text scales, it would be useful for users with large monitors to scale the window size as well.
5. Encourage discussion
Making commenting controls more accessible and showing off users’ comments will surely encourage more feedback and discussion.

And that’s it! Very simple set of goals but I have to admit, it was tough sticking to the plan. I came very close to adding huge photo viewer in the header inspired by Schiller’s site and I almost wrote Javascript to make the header graphic bounce when the user hovers over it inspired by Mac OS X. Then there was Matt Mullenweg’s redesigned blog and I was recently introduced to the incredibly well designed sites of Jeff Croft and Jonathan Snook. Lots of clever, inspiring ideas on those sites, but luckily I was almost done when I came across them.

My original plan was to release this as a WordPress theme called ‘Edgy’ and post it at themes.wordpress.net, but unfortunately I doubt I’ll have the time to generalize it and package it up.

So, in the spirit of design goal #5, let me know what you think.

Sean McGrath

Very nice! Very simple yet professional. I wish I had the patience to design my own worpress theme, but is so much eaier to just download an existing one and activate it. Not that I am very good when it comes to design anyway…

I bet you will find you’ll be posting more because I find that nothing inspires you to blog more than a newly designed theme, as you can probably tell from my blog.

November 24th, 2006 at 5:26am

BT

Thanks for the good word Sean. Actually, I realized that my lack of enthusiasm to post was related to the fact I hated my design. That was pretty much the clincher that made me start the new design. So yea, I expect I will be posting more often.

November 24th, 2006 at 10:21am

Bojan

Wow, this is really nice. Quite an improvement over the old one. I really like the menu on the right. Very simple and clean. Nice work.

November 27th, 2006 at 1:01pm

bradt.ca » Redesigned and more

[...] a few weeks it will be exactly a year since I redesigned this site. It really has become an annual event. This time I’ve redesigned it but also rebranded and [...]

November 5th, 2007 at 4:58pm

Rene

Very nice work on the site. I’m wondering where you’re hosting it :)

November 5th, 2007 at 5:20pm

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>