Failed Redesign
Only 10 days left until the design reboot (unless I get antsy and launch early) and I thought I'd share some previous iterations of the design. You can get a sense of the direction I went in with the new design.
I can't tell you how much I've been stressing over this redesign.
The First Iteration
I started this back in March and even showed a few people the first version while at SXSW. People were very positive about the design (or just didn't want to say anything bad to my face) and was getting very confident that this would be the version I'd launch with. I saw one major problem: the fixed comments. With shrinking things down to 3 columns and adding more content into the sidebar, the fixed comments wouldn't have had the same impact as before. If anything, they were darn near useless. Plus, I worried that I was taking too much from Veerle's design.
The Second Iteration
From there, I decided to play with some of the elements from the current design. I made heavy use of the triangles, adjusted column sizing and worked some of the shading. I think it's pretty clear that I was heading in the wrong direction. Everything felt too blocky and disconnected. It was too disjointed. But I switched back to four columns to allow room for the fixed comments. I pictured them appearing from under the On Topic section when you scrolled down.
The Third Iteration
The third iteration dropped almost all the pointy triangles. This layout started feeling like a mere readjustment of the current design. It certainly had a number of the elements that I wanted to introduce but I wanted to be a little more daring than just this.
The Fourth Iteration
At various points in the design process, I'd take a detour and play with some elements. In this case, it was the layout. I shifted the green from the side to the top, moved the right-most column to the left and started creating a tiered approach to the content. Let's just say I didn't bother spending too much time on this version. Nothing about this was working for me.
Coming up
As I'm sure has become painfully obvious, I am focusing on using a light-on-dark concept this time around. To some degree, I'm jumping on the bandwagon but I also wanted a contrast from snook.ca with it's black-on-white design. It's a work/play, yin/yang thing. In any case, there are still plenty of surprises for the full launch.
Conversation
I read your "Gray is the New White" post and see you are going in that direction. I have to say I agree with it though (I'm working on my site for reboot also and was actually planning on doing a light text on dark background for it). It just seems so much easier on the eyes when done properly.
Can't wait to see the new look, it's going to hard to top what you have going for you so far.
Colin
Why not abandon your current colours and come up with a new colour theme?
The states of redesign you're showing looks very good, I liked the the first one best. :-)
Nice looking designs.
Are these photoshop mockups or screen grabs of HTML prototypes?
Martin: Part of my personal brand is the gray and green. These colours aren't going anywhere. :)
Mike: these are straight exports from Fireworks. It'd have been too much effort to do each iteration as an HTML prototype. As it is, I've spent about the past two weeks just working on the HTML prototype.
Jon, I like iteration 3, something about it feels right, feels somewhat balanced. The only issue I have is that in a way, it reminds me of veerle's "the-shit" design.
To be honest I like the site that way it is, I know you set out to redesign, so you got's to redesign.
Perhaps the introduction of some orange in the details would convey a more refreshing feel.
Great work.
It's funny you should mention the orange. At one point, I had tried doing each column in its own colour. The main in green, the next in blue and the last in orange.
I suspect you liked the third because it's the closest to the current design and that's cool. Hopefully you won't be too disappointed with the final design. :)
I have to say, your First Iteration was my favourite.
I liked the first and the third iterations (even though I still think this one is better than all of them..)
I think the biggest problem with all of your iterations is that you have too little contrast between the different objects, it's not as obvious as one would wish what's the content and what's related to the article you're reading etc.
I guess you've read Erik Meyer (i think) on C.R.A.P over at thinkvitamin.com (if you haven't, read it).
Did you try a mix between the first iteration and the third one?
What I like from the first one is that the menu plays a bigger role on your page, but you have too much white-space (black-space? ;)) to the right. On the third one, all the triangles you have going on are awesome (and I really do feel that they are a part of your personal brand; try to keep them in some form). The problem with that design is that the content, I'n my opinion, is given a bit too little space (comparing to the width of the other columns). Try adding a bit more contrast to each section of the design (that's one of the things the current design is doing very well) and/or try to make each part of the site stand out more with some added padding.
Looking forward to see what you're going to come up with!
Oh, and excuse my english, I'm a swede :)
Oh no! I like the current design so much, though. I even included it in an upcoming article. Damn.
Personally I love the current one, but if I was to have any affect on your decision with my peon mumblings I would mumble Iteration Numero Uno most def.
Number 1 also!
I think I like the third one the best. I don't know if it's the quality of the comp but the triangles on this version look better. There's just something about the triangles I don't care for in your mock-ups.
Like I said though, I think the 3rd one is the best of the three. I don't think it's because it's just a "mere readjustment," I think it's because the content flows the best. So I hope what you ended up going with intersects with that one.
First and third are quite good... you said you have more? Can't wait.
For an itty-bitty sneak peek at the final version, I posted a little something on Flickr.
Keep the white in the main column. None of the other designs read well.
One of the things that always come to mind when I hear about a re-boot event going on is the whole mentality of following trends. One of the things that my second year instructors in design always told us was to never try to follow current trends; I didn't really get this for a while as it seemed that it was the right thing to do -- following trends, I mean. Anyone who didn't, just didn't get noticed.
I eventually realized that trends are really just one person doing something unorthodox, everyone else is just following or copying.
So I guess what I'm saying is that, take inspiration where you can, keep and eye on what's happening and trendy, but always go your own way.
If the green grey thing is working for you, then keep it. But don't be afraid to try something that's completely different from what you're used to. Veerle's design is a product of doing something quite different than her norm.
Also you have 2 of the most versatile colors for your site... you might want to think about trying tints of the colors to add variation to your initial designs -- just a thought!
It's always interesting to see someone else's design process in action. I do agree with holding tight to the color-identity as it is so vital to creating a (for lack of better a better word) soul.
In all humility, I would suggest really playing with an entirely different paradigm for the interface unless you are extremely set on what you have. I say this because an extreme shift will many times give you a different perspective on your current design. Just a humble suggestion. :)
Finally, someone else that uses Fireworks to make their mockups..I thought I was the only one.. Oh and dont mind my website link..its a wip..not even close to a final product.. And I liked the first one. I have my brand of colors too :P Grey, Blue, Orange and green :P
Long time reader here, first time commentor. I just found an issue when you have a comment error. The page reverts to the old style and all of the other text is garbled across the page.