**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.
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.
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.
Some people might be skeptical about skinning a form field:
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.
Each solution is numerically associated with the requirements listed above.
The comments page layout is similar to the old version, it is just styled differently.
Again, the same content with a new look.
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.