Please Excuse the Wet Paint, it’s Just About Dry

One of the goals I challenged myself with for 2010 was to redesign Monday By Noon. I’m really happy to say that inspiration struck early, and I was able to launch the revamp sooner than originally planned. Scheduling personal projects is probably the hardest thing I try to manage, simply because there is a lot I need to take care of in my free time, much of which is more important than a personal Web project.

When it comes to personal projects, I often wait for serious inspiration to strike, as I find it much more likely to actually end up with a finished product. As such was the case with the latest version of Monday By Noon.

Inspiration

Over the past few months, I’ve had a strong calling to redesign the site, as I felt it was no longer a representation of where I’m at with Web design and development. It wasn’t until recently that I was able to better define exactly what it was I felt inaccurate about the then current version of MBN. When I originally pushed the design, I was really in to minimalism for the purpose of concentration. I wanted readers to be able to truly focus on the article at hand, the conversation that followed, and that was it.

I felt the old design catered to that, but it began to wear on me. When viewing the site, I no longer saw the minimal elegance I originally shot for, I saw sterility. The design remained clean, organized, and structured, but to me it had moved beyond that to an extent. The minimal design was pushed roughly 18 months ago, and I think that’s quite a shelf life given a designers inherent need to change things on a very consistent basis. I accepted the challenge of redesigning in 2010.

As I mentioned, the redesign came to exist much out of the blue. As I sat down one evening to take care of some overflow work, I had a simple urge to start sketching a few wireframes for MBN. I wanted this design to be different, to get back to the roots of the first design to ever grace Monday By Noon. Four years later, I would definitely not call it graceful, but it did something I really liked; it promoted exploration.

The conversations in response to some of the articles I’ve written in the past enrich the overall message in such a way that isn’t otherwise possible. I know many writers prefer to omit the entire comment exchange, but I can’t imagine MBN without it. I truly value the response of the readers, and it’s great to have a targeted conversation on a specific issue every week. I wanted to make it a point to push comments and commenting where applicable as much as possible.

As I was sketching, inspiration came flooding in. I thought about the applications I use every day, and what they all have in common; sidebars. Sidebars in application design are nearly essential. There is always a combination of information and interaction that’s valuable no matter what you’re doing or what you’re looking at. It’s the hub of the UI that facilitates easy access to anything and everything, and it’s always in eyesight. I wanted something like that.

It then came down to figuring out what’s truly essential for a website like Monday By Noon. First things first is the brand. Brand was super important, so it went without question that was to be included. I want to try and push MBN to be the best it can be in 2010, and that means trying to attract new readers, so I planned on sticking with the quick blurb describing the purpose of the site as well. It’s quick and easy to digest, and can simply reinforce MBN to veteran readers.

With the minimalist design, I received some positive feedback about the ‘personal favorite articles’ section on the home page. Some people felt it was nice to know which pieces I’ve enjoyed most, and I thought that would be something nice to include in this redesign, but in a different way somehow.

I also find it easier to become hooked to a website when the people behind it aren’t obscured too much. Personally, I really like seeing a photo of an author, just to get that much more sense of who they are. That was a must. Also, since Twitter isn’t going anywhere fast, I wanted to include something referring to @jchristopher for new readers as well. Last, and definitely not least: search is a must. With my list in place I started sketching.

From the first quarter page sketch I was already pumped on the new design and I knew I was going to like the direction this was heading. To be honest I didn’t even make it to a full page wireframe sketch before hopping into Fireworks and playing around.

I skipped back and forth between Fireworks and sketching quite a bit that first night, and nearly lost enthusiasm just as quickly as it had come on. It wasn’t the first time something like that had happened, but a good nights sleep helped to clear my head and the next evening things really began to snowball.

Process

I’m hooked on 960.gs. Long time readers may be wondering what the heck I’m talking about since many people feel that I hate CSS frameworks. That never was (and never will be) the case, I simply have a specific stance on using a CSS framework, and 960 really caters to that for me. The grid set the stage for the design, and I chose to use the latest variation from Nathan, a 24 column grid. Things quickly began to take shape and I was really pleased with the structure of everything during the initial stages. The only problem was, I was drawing a blank on a color scheme.

If there’s one thing that’s remain constant about Monday By Noon’s brand, it’s the red. Since the first version launched, I’ve based the entire MBN brand on #960000, and I used that as a platform. Until now, the designs have been a mix of red, black, grays, and white, but I wanted something different this time. I’ve been a sucker for tan since forever, and thought “What better time than now?” So I went for it. I poked around until finally settling on a blend of two tan/brown combinations that I felt suited the look and feel I was going for.

I’ll be the first to admit that the previous MBN designs lacked a bit of character. The most recent (minimal) design had a bit of style, but that was one of the focal points I chose for this round. Not too long ago Hoefler & Frere-Jones released Tungsten and the design community went nuts. Me too. In fact I became nearly obsessed with the type. To me it simply comes across as an authoritative, strong, and intriguing. I wanted to use it. With the design community in such a frenzy I nearly put it out of sight out of mind in hopes of remaining as unique as possible, but I couldn’t resist.

After playing with the type I knew that Tungsten was going to become integral in portraying the look and feel I was going for. This redesign also brings something new to the table that MBN has never seen; article copy set in a serif. With Tungsten being the sans-serif it is, a serif, in my opinion, complements it really well. A serif helps Tungsten to become that much more elegantly tough, without a modern feeling many other sans-serif typefaces bring with them.

Iconic

The other part of the inspiration flood was Iconic. Iconic is a free icon set designed and produced by a good friend of mine, P.J. Onori, a.k.a. @somerandomdude. From the second I laid eyes on the icon set I knew it was for me. I wasn’t quite sure where it was going to fit, but the mood set by the type combination I chose for this version of MBN simply called for Iconic in a really strong way.

P.J. has made waves with Iconic, and the set couldn’t have arrived at a better time.

What’s New

Along with the design updates, I wanted to really take advantage of what WordPress has adapted since the last redesign. I’ve been meaning to incorporate threaded comments forever and a day, as I think it really facilitates a conversation as opposed to a generic comment thread. To put it simply, I’m glad I won’t have to be typing @replies to comments anymore!

The other novelty I wanted to include was something I find myself using on Wikipedia all the time: a random article link. While I don’t expect it to be one of the most popular features ever included on MBN, I do think it may help both new and long time readers alike at some point.

What’s Left

I’m far from done with this redesign. In fact I’ve already got a few new ideas coming to fruition in the background already. For example, I struggled a bit with the Archive and ended up shelving the work I had done with it in favor of something as simple as possible. There’s both a benefit and a drawback to publishing once a week, and that’s publishing once a week. I’m determined to design an effective way to browse the archives no matter what mindset you may be in.

I also plan on going back to each and every old post and optimizing the content for the new design. It’s definitely the worst part of any redesign, but I’ve got some things I’d like to do to future-proof against having to do much of that maintenance when the next redesign comes about.

Happy 4th Birthday, MBN

As it turns out, Monday By Noon turns four years old in just 3 days, so the redesign coming to be so quickly worked out nicely as a decent birthday gift if I may say so myself.

I’ve had a blast writing weekly throughout the past four years, and can’t wait until I’m writing a similar article on the 8th anniversary. I hope you all enjoy the changes around here, I hope it’s a great beginning to a great 2010 for MBN!