MetaFilter Redesign Contest Results
I originally came up with an idea for a contest because I felt tapped out of good ideas, and wanted to see an outsider's take (well, outsider meaning not me, not completely outside the site) on some of the design problems MetaFilter presents. I don't know if I adequately described the problems, but they were manyfold and I tried to get across that most of the trouble was organization of major elements. What I got back in return was a tremendous bunch of solutions, each with their own small strength. Picking the winners wasn't easy, so before I reveal those that got the final nods, I wanted to go through every entry sent to me and share some comments, since everyone put a lot of work into these.
The Participants
(I'll add usernames to each entry if folks can help me in MetaTalk come up with them all)
http://www.osterhoudt.net/design/mefi/
Looking at the main page screenshot there's a lot going on, but I really like the left side nav bar that shares the color with top header, tying them together visually. The textad spot is a good idea and I like that the nav is vertical and can grow but the ad area is a bit far down on the left side.
http://www.erisfree.com/mefi/ (eris free)
Incredibly clean layout and included a bunch of mocked up pages showing off various views. I like what was done on the user pages the best, as the information looks quite a bit more organized. A great entry near the top of the heap, probably because I love clean, simple designs. If it had any faults, it might be a little bit too clean of a design, perhaps taking a slight amount of personality away from the current clunky, color-rich site.
http://www.pseudoquasi.net/mfmu.png (abcde)
I like the way the in-page nav is vertical and the between-subsite-nav is up at the top. The most interesting bit is the new recent comments feature, and how it was worked in at the very top without taking too much attention away from the posts. The ads are handled well, clearly marked away from any contributed content.
http://lens.gyan.info/mefi-fp.html (gyan)
I like the efficient use of the top section and the splitting the area into general links for stuff and stuff related to users. That's a good way to organize things. The dropdown menu to jump between sites makes it infinitely expandable as well.
http://elowel.org/mefi/
I like the fade and cloud theme and I'm impressed that it's xhtml 1.1 standard code, but I think it's kind of got a personal blog personality about it that might not mesh with MeFi as a whole.
http://www.craigwittler.com/metalifter/ (wendell)
This is kind of chaotic, but it was the first entry to come in with a three column layout, which I've long thought would make it look like every other css blog layout, but this definitely looks different and shows you can fit tons of info in those side spaces. I like the way the textads were worked into the theme.
http://www.macalester.edu/~bketcham/metafilter/ (stopgap)
I love the attention paid to saving vertical space, by compressing the wasted stuff in the old design into a spot less than half the size, but it's not cramped or cluttered at all. Another one at the top of the heap, it also shows a nice compromise between having a colored background while keeping text easy to read on white. The nav area on the right is clean and easy to read, about the only drawback to this entry was the lack of where to stuff graphical/google/text ads in an above-the-fold spot.
http://www.oeffinger.com/mefi/ (still)
Great, interesting use of color and graphical headers. I also like how it broke out of a simple grid layout.
http://www.beyoutrend.ro/metafilter/index.html
Clean, simple design that includes classic colors without overdoing it. Each post looks really clean and refined with the tiny icons. The header section comes out a bit tall and the between sub-site nav problems aren't solved, but otherwise a clean, crisp design.
http://www.citrusmoon.net/tazdesign/
Really clean use of three columns and I like the personality of the new logo. Not sure I like the right justified right column, but I love the idea of a random old post at the top.
http://www.concerningthestruggle.com/mefi/ (Alt F4)
I like the two horizontal lines of nav and how they can grow, while keeping the top section short enough to stay out of the way. Good use of color and the right column is a good spot for the ads and other stuff. If there was anything I didn't like, it was the extra lines on the sides that made it feel a bit too boxy or closed in.
http://www.pixelsmoke.com/metafilter/
This one kind of sneaks up on you. At first it seemed a bit plain and I wasn't a fan of the huge logo tabs with new logos, but it is loaded with tons of small details that are really hard to do well. The forms and buttons and stuff give the sense that every inch was thought about and lovingly hand crafted. The search page is fan-fucking-tastic and makes the site look like a real web application optimized for ease-of-use. I like the idea of dropping sideblog posts in between each day's entries and I like the recent comments feature. The subpage nav is also a highlight - extremely easy to read, organized, and looks great.
http://webmutant.com/mefi2/ (webmutant)
This is probably the strongest of the entries that used a three column design. Everything seems to have its perfect spot and I like the use of color that still mixes well onto a white page. I'm guessing the icons let you jump between sections, and I love the idea of surfacing the search engine onto the front page.
http://hans.misfithill.com/mefi/
This entry came up with a cool idea to color code new posts, old posts with new comments, and your posts, apart from regular posts. Unfortunately, the mockup demonstrating this kind of comes out looking chaotic, but I think on a full page of 30 posts, it'd be much more uniform.
http://junk.metafilter.com/mwd.pdf (fandango_matt)
Here's a GIF version of a page from this PDF. This entry stood heads and shoulders above the rest in terms of showing a clean looking site, a professional looking site, and having the very best presentation. The PDF covers new logo, new pages, new sections, layouts, and colors in depth. About the only drawbacks to this design are that it might be too white for some users that prefer blue, and some of the navigation could run into old limitations by being horizontal.
http://www.webnesia.com/mefidemo.htm (rushmc)
Great solution to the lack-of-screen-real-estate problem to have a "slideshow" of different panels loaded with information, letting you wedge loads of custom info into a small space that doesn't have to take over the new design of the page. I can't recall any sites or apps that do something like that.
http://junk.metafilter.com/purephase.jpg
Efficient use of the space, I like how the user detail stuff fits into the top and the left sidebar isn't too cluttered.
http://www.thinky.org/blah/metafilter/metafilter.gif
Cool idea here to have a header that expands to differentiate each section you're in.
http://donald.tetto.org/mefi/ (submitted after the deadline)
This one is clean and simple and features the cool idea of intermingling all the subsites into one, with a megafeed of new posts each color coded to their originating site.
The Winners
In the end, it was hard to pin down the exact top three. My favorites were fandango_matt's, 4easypayments', webmutant's, stopgap's, eris free's, and Michael at pixelsmoke.com's entry (sorry, can't find a username for it). They're all really strong and contain a bunch of good ideas. After thinking about it for a few days, I've come up with the following breakdown:
1st Place: fandango_matt
2nd Place: person who's username I can't seem to locate at the pixelsmoke.com domain
3rd Place: Eris Free
Thanks again to everyone that entered, you put a lot of work into it and I appreciate all the great ideas shared in the process. I believe ultimately a new design will be built off all three in the top slots, with the fit and polish of unknown person's designs, eris free's cleanliness and fandango_matt's strong identity work.
Feel free to comment on this and help me name names and link users in the MetaTalk thread about the results.