The Obligatory “Explaining the New Design” Post

I’m sure that you all have noticed the new design by now. After a too long period of planning, designing, pushing pixels, and beating my head against the wall, I spent part of last Saturday afternoon moving the site over to the new design.

I’ve received several comments that it doesn’t even look there is a design there, it’s so simple and stripped down. Well, in my mind, that’s a very good thing. What this new redesign represents is a much, much more simplified Opus. Not only have I redesigned the site, but as most you have probably noticed, I’ve restructured the entire site as well.

Actually, this redesign represents the latest in a long line of restructurings, from removing the newsfeed to putting the blog in its own section to using Flickr. All of these represent an attempt on my part to bring this beast of a site under better control so that it better reflects the true nature of the site.

You see, when I first started doing major development on Opus several years ago, I envisioned it turning into a webzine, and as such, I set everything up to reflect that — from the site hierarchy to the database structure. At the time, it seemed most logical. I was developing a staff of sorts that was writing music reviews, movie reviews, going to Cornerstone, doing interviews, etc. I really wanted to run a webzine, my own little Bandoppler or Fine Print.

However, recent years have found the site moving away from the webzine model. In other words, while the webzine model and approach still works, the site has quickly become a glorified blog. Unfortunately, the design and structure didn’t reflect that. I realize that most of you probably never noticed, but I did. I saw all of the unused pages, the infrequently updated areas, etc. I saw that the blog, which had originally been a relatively minor area of the site intended only for personal entries (some of which are quite embarrassing as I read them now) is now the major area of the site and sees the most updates and traffic.

So this redesign/restructuring is an attempt to reflect this change. Websites are dynamic creatures, constantly changing and morphing. And so it goes with Opus.

For starters, you’ll notice that the design is much more streamlined — one column only. To be honest, I’m not really sure where that came from. Most of my initial designs were of the trusty two-column type, but as I worked with them, I realized I was seeing them everywhere. And when I worked with two (or more) columns, the site would inevitably start to look like someone else’s (in my mind, at least).

Then one day, I created some sidebar graphics for the design I had been planning to go with, even though I was getting frustrated with it. There was something about the way those graphics looked that clicked with me. And then I remembered a mockup I’d done in Photoshop a long time ago. I pulled up the file, did a little tweaking to incorporate some elements from the sidebar layout, and voila, the new Opus design. Funny how that works.

This slimmer design is paired with a completely stripped down site structure. I’ve reduced Opus to its barest components, the areas that are most updated and that, frankly, I’m most interested in updating; the blog, music reviews, movie reviews, and the HiFi. Everything else has been removed.

It’s all still there in the database, of course, and stuff will slowly be eased into the new design. I’ve already started moving concert reviews into the blog, tinkering with their posted dates so that they appear in chronological order, and I plan to do the same with Cornerstone entries, special features, and interviews in the coming weeks.

The one column design, with lots and lots of white space (of course), lent itself well to the vision I had of the site being this constant stream of information, with very little visual clutter getting in the way of things. This is best seen on the homepage.

The homepage represented the biggest challenge. It needed to display all sorts of info — new blog entries, new reviews, recent comments, new Cool Sites, etc. With the previous design, I had multiple columns to work with, not to mention iframes and separate sections. In the end, I ended up with an approach similar to Kottke and Daring Fireball.

Content is content, regardless of whether it’s a blog entry, a music review, or a link to some other site with a little blurb by me. And if I’m attempting to restructure the site so as to make it simpler, why bother with trying to display everything differently? And so, the homepage is now a constant stream of info, sorted by date, of the last 10 days’ worth of updates — music and movie reviews, HiFi entries, blog entries, cool sites. It’s all there, just scroll… or not. I’m working on some filtering methods, so that a user can see just the most recent blog entries, or just the most recent movie reviews right there on the homepage, and hopefully that’ll be on the site this weekend.

I’ve also rewritten the entire commenting system, so that it can be more easily applied to the other parts of the site. For example, comments can now be added to HiFi entries. You’ll also notice the cool new way of displaying comments, with the neat little rounded boxes (courtesy of Alessandro Fulciniti’s “Nifty Corners”) and the use of gravatars (those little icons displaying with each post).

The design itself is the perhaps the most minimal design I’ve ever done in my career. And believe it or not, but I’ve actually thought of some ways to make it even more minimal. But we’ll see how this incarnation goes. As I sit back and look at it, I realize how much the design reminds me of the face of the iMac G5, with its curves and whatnot. This wasn’t conscious, but considering how much I’ve been lusting after one of those things, even with its hiccups, perhaps it isn’t too surprising that some of Apple’s industrial design lodged itself in my subconscious.

And just in case you’re wondering about the blue and green link colors, well, those are our wedding colors (not exactly, but close).

I suppose I could go into how the design validates as XHTML 1.0 Transitional, everything is laid out with CSS except for some little bits here and there, the image replacement techniques I’m using for the section titles, etc. And maybe I will in a future blog entry. However, all you really need to know is that this redesign is an attempt for me to get a better handle on the site, to simplify it as much as possible. Considering all of the massive changes going on in my life, I got tired of having this bloated site hanging over my head, with so many areas gathering dust. And so I pulled out the scalpel and started cutting.

There’s still plenty of work to do, however. The database still needs some massive overhauls, if only to bring about a consistent naming scheme for columns and tables. A bunch of content needs to be moved into the blog, which will now be housing the bulk of the site’s content — concert reviews, Cornerstone articles, interviews, etc. And I just started working on an overhaul of the admin area (which, of course, you won’t see).

The end result is/will be a much purer site, a site that is easier to use, for both you and me. So far, I’ve been pleased how things have turned out. Whether its true or not, the site feels fresher and more dynamic to me. I enjoy the flow of the site now — it feels more organic and holistic to me.

So far, the feedback has been positive. (In fact, I got a complimentary e-mail within an hour of implementing the new design — talk about instant feedback!) Most people seem to be enjoying the simpler, more streamlined design. It can be refined of course — anything can — but I think I’ve really hit on something here, and even though it looks nothing like my original concepts (more on those later), I’m pretty pleased with the design and excited to see what comes of it.