With all the work I’ve been doing on NPUG in it’s redesign, among other projects I’m working on, I guess I’ve been having a little “redesign on the brain”. I suppose it’s much like when you’re shopping for tires. You don’t notice how many sales for tires there are in the newspaper until you begin shopping for them yourself. It’s at that point that you realize you’re inundated with them. That’s how it’s kind of been for me as of recent. I’ve been itching to redesign this weblog.
Mike Rohde has been documenting his recent redesign and it’s been a very interesting “behind-the-scenes” look at his work and the effort that it takes to bring a web site to life. Before Mike began his journey down the rabbit hole, I was following the redesign of StopDesign. I’m a huge fan of Douglas Bowman and his recent redesign has been a massive influence on where I’d like to take the direction of this weblog. So I’ve been pondering what I like about Mike and Doug’s sites as well as factoring in other sites that blow me away like Simple Bits and Asterisk. All of these sites have a lot going for them and in my opinion represent the cream of the crop in terms of weblogs as well as overall web design. It’s certainly a challenge to think that I could aspire to something even close, but in never hurts to have lofty goals. 😛

However, even though I have goals, I haven’t had the inspiration, much less the time to actually begin the redesigning process. This summer has been really busy with both work and personal stuff and I haven’t had the time to think the process though. The other hurdle is that I haven’t really had the inspiration on where to take the design. I did find a little bit of inspiration in a favorite coffee cup of mine, but with not a lot to go on, I simply put the redesign on the back burner. I needed a little bit more than just a picture on a coffee cup for me to hang my hat on. Besides, there’s a ton of other things demanding my attention, so I figured I’d just wait till later in the year.

Then last Sunday, Holly and I stopped by Provence Beads and Café to pick up a cheese and paté plate for dinner that evening. We were going to the Brentwood Concert In The Park Series that evening to enjoy the music of the Nashville Bluegrass Band and we thought a bottle of wine and a tasty platter would be a perfect compliment to the evening. As we were standing in line, looking at all the cheeses to choose from, something caught my eye. There in a basket in front of the counter were Starr Ridge Rosemary Parmesan Crackers. The packaging immediately caught my eye. I liked the colors, the fonts and even the overall design of the piece.

Getting the cheese and paté sampler to go, we decided to grab a quick lunch while it was prepared. As I sat there eating my Italiano on Rosemary Focaccia sandwich (Lightly smoked turkey breast, Pepperoni, and Capicola with smoke cheddar and aged provolone cheese, accented with spicy cole slaw, Dijon mustard and mayo with tomatoes and lettuce.), my mind kept returning to the box of crackers. I really liked the design and I couldn’t get it out of my mind. I kept thinking, “wouldn’t that make for a nice web site?” By the time the to go order was ready, I had added the box of crackers to the order as well.

Good artists copy, great artists steal. – Pablo Picasso

I should probably mention that I happen to subscribe to Picasso’s belief, but in the manner in which Cameron Moll describes in his article “Good Designers Copy, Great Designers Steal“. There are plenty of sources for inspiration that can be adapted to various other forms of work. There have been plenty of songs inspired by movies just to cite one example, but I think you get my point.

Turns out the crackers where unbelievably good, but that was beside the point. My goal in buying them was simply to have the packaging in which to study and use for a little inspiration work. The next day, I sat down and by using Photoshop, attempted to re-create the design on my computer. The colors were pretty easily to replicate, but the fonts were a real stickler. I immediately recognized Copperplate as the font used for “HORS D’OEUVRE”, but the other escaped me. I instant messaged Mike Rohde, showed him an image and he instantly picked up Gill Sans as the font used for “CRACKERS”. However we were both stumped on the script font used. Luckily, Mike turned me on to Identifont and in a few minutes, it accurately identified the elusive font as Coronet. Of course, I didn’t have any of these fonts, but thanks to Dan and Mika, I soon had all three of them and was able to complete a mock up of the box, which you should see on the right.

What works for a box of crackers, doesn’t necessarily work for a web site, so now that I had the mock up done, it was time to take a crack at rendering a design that would work for a web site. Like any design, it’s about more than just pretty pictures and colors. As Mike has so eloquently documented in Part 4 of his redesign, there’s other goals that come into play – namely simplification. I’m a big proponent in stripping away what’s not needed and to try and attempt to achive the best user interface possible with a minimal amount of clutter. For example, I think Google is a perfect example of what I’m talking about and Yahoo is the exact opposite. I’ve already done some cleanup, but there’s a lot more that I’d like to do. So the challenge is to incorporate these new elements, while stripping away as much as possible.

With all this in mind, I took my first stab at using the cracker box as my inspiration for a new design. I played around various elements and styles all the while wrestling with several thoughts in my mind. Just how could I expand on the design? What new elements do I plan on incorporating and where should they go? How can I simplify the navigation and de-clutter the UI? I’m far from done, but I am happy with the first draft. There’s a lot of work, fine turning and in depth study remaining, but for a first draft I’m quite happy. 🙂

Will this new design make an appearance on mashby.com anytime soon? That’s hard to say at this point. With a rough draft in hand, I have some direction, but like I said, it’s far from over. There are a lot of work left to be done as I try to move from what Cameron calls “Level 1 Design” to “Level 3 Design”. I also have to figure out how to handle the navigation and the sidebar, as well as what content I plan on adding, if any.

At this point, this is simply a peek behind the curtain. This is a very rough draft, but as always, I’d love to hear what you think. So feel free to post a comment to let me know your two cents. 🙂

• Michael Ashby
• July 13, 2004
• web design
•  
• Previous Post
• Next Post