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

Posted: February 15, 2010 Comments(32)

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.

Dot Grid book with wireframes on one page

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!

Get my newsletter

Receive periodic updates right in the mail!
  • This field is for validation purposes and should be left unchanged.

Comments

  1. Congrats! I really like your redesign. It has still the main focus on readability but comes with a very personal note. I think it is always very difficult to draw a very clean and reduced design but also keep it special and unique.

    The only thing i would change is the the scrolling of your flecked background. I would like to see it fixed, because your left sidebar stays also fixed. Just my 2 cents πŸ˜‰

  2. Well, I’ve got to say that based on what you were aiming for you really hit it on the head. This redesign is fantastically done.

    For me the best parts are the little things: the attentio to detail. The inset and texture of the elements, the CSS3 “button” functionality of the navigation links, etc. I also really enjoy that you have the recent comments so artfully displayed on the index page–it really does help foster discussion.

    Exceptionally well done.

  3. This design review is great. It’s nice to hear about the thought process that went behind all of these decisions. I’m most specifically interested in what happened on the first night of design, when you lost enthusiasm… what happened? How did you re-gain it?
    This new design came together very nicely; clean, organized and full of character. Nice work, Jon.

  4. I’ll second that: I really enjoyed the insight into the process. A lot of times people are glad to explain what decisions they made, but a good process article is rare.

  5. As I tweeted to you before, I’m diggin the new direction. You’ve maintained simplicity while moving away from white backgrounds (not that I didn’t like the white, but change is good). The one thing that feels awkward to me is position:fixed on the left sidebar, while navigation scrolls away.

    Have you kept an archive of all MBN designs? It would be cool to see em.

  6. Thanks so much for the positive feedback, Ian! It’s great to see that people are enjoying the new look. I did want to force myself to try and sweat the details on this revision. It’s something I’ve been trying to work on for some time, and I’m finally getting in the habit of executing. Not too long ago I’d often push projects to far too quickly, and not take my time and look over the small things. After all, that’s what really makes a design look finished.

  7. I’m really glad you guys are in to the ‘behind the scenes’ of how the latest design came to be. Referencing the first night, where I hit a road block as soon as I started I think came from the underlying feeling that the redesign was coming on too soon. After I started sketching I was pleased with the direction, but as soon as I started playing in Fireworks it all went down hill. I didn’t like how the type was rendering at first so I spent literally an hour or two simply playing with the kerning of Monday By Noon in the upper right. Once that fell in to place I began to like where things were going. The entire roadblock though comes down to choosing type. This was my first venture into serif body copy, so it took a bit to get used to the change. Luckily I ended the night on a high note and wasn’t completely discouraged, and waiting until the next evening left me in a good place to resume where I had left off. Things, for the most part, went very smoothly after that. Thanks for the feedback, guys, I really appreciate it.

  8. Thanks very much, Chris! I went back and forth on whether or not to include the full nav in the sidebar, but from what I can tell, people don’t really use it all that much. In an effort to keep things as streamlined as possible, and include the slightly more obscure (but in my opinion important) pieces of information, I decided to keep it at the top. It’s one of those things I’m sure I’ll reconsider over the next few months, and there’s a good chance it’ll find itself somewhere on the sidebar as well. Definitely appreciate the constructive criticism!

    Now that you mention it, I’m completely terrible at archiving old designs. I’ll dig around a bit to see what I can see, and unveil the MBN of yesteryear, no matter how embarrassing it may be. Stay tuned!

  9. Bro, once again, fantastic work. I couldn’t be more stoked for your new design, and think it strikes a fantastic balance between clean, elegant lines and a slight earthy, organic feel. I hope this design serves you well until the next one!

  10. Love the Wayback Machine — I tried to snag the first two versions of Monday By Noon but too many images were missing so I opted out. Still planning to try and find at least some original flats when I can scrounge the time.

  11. Thanks so much, Pat! I’m thrilled that the look and feel came across the way I intended. I think this design is something I’ll be comfortable with at least for another 18 months, although I’m sure the temptation to redesign will always be lurking around the corner. Thanks again guys!

  12. A good Re-design. Love the new Look of it. Readability – 100/100
    content 100/100
    design – 100/100
    Overall – I love this site.

  13. I haven’t seen the old design, but I do like the new one. I agree with the first commenter about keeping the background fixed.

    I mentioned the following in my comment on the Aggressive Graceful Degradation post, but I seriously doubt you still read comments from old posts. The site is broken in IE 6. Was that an oversight, intentional, or just something you haven’t gotten to?

  14. Thanks for the vote for the background change! I’m going to do my best to slot some time as soon as possible to make some other adjustments around here as well.

    I most certainly reply to comments, no matter how old the source article is. I’ll be sure to reply in that thread as well, but my policy with MBN is to not stress over IE (any version) simply because the audience doesn’t dictate such a need. I don’t plan to cater to IE on any level on this project.

Leave a Reply

Your email address will not be published.