Michael Baumgarten
Houston, Texas

The Metafilter Project

  A redesign of the Metafilter.

Summary

**Update (Febuary 6th 2005): I would like to thank Matt Haughey & MetaFilter for the opportunity to contribute to an amazing community of users. I'm glad that I can be a proactive part of the re-design process. Congratulations to all the winners! Cheers.
This page covers all the graphical/design elements involved with the new Metafilter layout. There is no HTML templates available for this layout. However, I have provided references to links that show the proof of concept.

Much of the design was inspired by several sites, and other things that I have found on the web. The information I present is a culmination of different approaches to create a site that I believe is noteworthy of the Metafilter name. My principles are clean, focused and organized. I made an effort to fill out the site with small details that I will make note of throughout this page.

All graphics were created in Macromedia's Fireworks Software. This page was completed in Macromedia's Dreamweaver.

The logo

How, what, & why.

I wanted to add a visual representation to the words Meta & Filter, I used a "<" to represent <meta> tags that are in html markup, and bits of squares to represent pixels being filtered.

For MetaTalk I used the same method as before and used a cartoon balloon to give a visual representation to the logo.

Ask MetaFilter was different, mostly because it should have the same qualities as Metafilter with just the ask part added to it. So, I took some inspiration from the Ask Jeeves web site and created a Metafilter version of it.

 

The layout

To view any of these images at high resolution, just click on the image.

When I first started this project, my priority was to show an evolution of Metafilter and not to recreate "the wheel". In essence add to what has been a success since 1999. I believe it is important to establish a history with a re-design so that current users will find it refreshing yet surprisingly similar to the old site.

Requirements

  1. Flexible navigation that can grow with the site.
  2. General Design Scheme
  3. Front Page is devoted to posts
  4. Ad bar for non-logged folks
  5. Extras (News, recent comments, etc.)

Some people might be skeptical about skinning a form field:

Form Field Skinning Proof of Concept.

 

The goal with the design is to implement the notion of "degrading gracefully" so that all browsers can view the site easily.

** I have used the same content on each site (Metafilter, MetaTalk, Ask Metafilter). This will not be the case in a real site, the content will be relative to the site the user is at.

My solution

Each solution is numerically associated with the requirements listed above.

  1. The Navigation system is outlined in the above images with a black #1. The key to making the site flexible is organizing it such that the navigation is broken down into major sections, and then into child sections much like hierarchal lists. One of the unique qualities, is that I chose to use the logos for each major site as tabs like in the navigation scheme. The reason I did this is to minimize repition and increase usability. Additionally the size of the logos can be reduced to include additional logos.
  2. If you review all the images, you can see that the navigation and overall look is the same across sections, even the sites AskMetafilter and MetaTalk. The key differences are the colors, as seen below (MetaTalk & Ask Metafilter):


  3. The front page of each section of Metafilter is devoted to posts, it takes up 3/4 of the screen real estate. The best part, is that the site will be scaleable as well (image scaled for 1280 pixel width):

  4. The Advertising can be displayed in numerous places as shown below:

  5. I included two extras, one of which (the news) was already on Metafilter, I just moved it where the posts are. The recent comments will show up on the right sidebar.

Additional Screenshots

Comments Page

The comments page layout is similar to the old version, it is just styled differently.

Search Page

Again, the same content with a new look.

Conclusion

I believe there is alot more that can evolve from what this design has to offer. One of the most important parts of this site, is how easy it will be to set up in CSS. The design is pretty "classic" but I think where it shines is in its character. I think this character comes from the choice of fonts, and the use of graphics to further emphasize their importance.