In late 2009, HeaderFooter designed the front-end for a new online collection and curation service, Pinterest.
Pinterest lets you collect and showcase the things you love in beautiful visual galleries called pinboards. Exploriung Pinterest lets you discover new styles and products, hand-picked by the people you care about.
The most important page on Pinterest is the Board itself. Designing the layout of Pinterest's Boards was an involved and iterative process. Boards need to convey detailed information about the content pinned on them while still allowing the intention of the board to be legible at a glance. Each board needs to display a variety of metadata - creator, tags, followers, and related boards - without distracting from the content of the board itself. The final layout uses an irregular grid to position new pins chronologically without forcing the content of the board to flow into a two-way grid. The result creates boards that feel individual while still allowing for cross-board exploration and interaction with other pages that have a similar look and feel.
Special thanks to Ben Silbermann and Paul Sciarra of Cold Brew Labs for working so closely with HeaderFooter during the birthing of what we hope will be a brand new community on the web.
Special offer for fans of HeaderFooter: if you're curious and would like an invite to the Pinterest alpha, please let me know and I'll send you a code.
Site Design by Matt Brown at Things That Are Brown
In November 2009 MIX Online, Microsoft's community for web designers and developers, relaunched with a clean and beautiful new look designed by good friend Matt Brown of Things That Are Brown.
HeaderFooter had the pleasure of taking Matt's gorgeous designs and coding them up from scratch into lean XHTML and CSS templates. MIX Online wanted the code for the new site to serve not only as an efficient and editable base for the site itself, but also as a teaching tool with which to demonstrate proper XHTML and CSS technique in talks about the web. The final product is carefully semantic and uses id's named after the new elements in HTML5 as a nod to forward compatibility.
Special thanks to Matt Brown at Things That Are Brown, Nishant Kothary at MIX Online, and Tiffani Jones at Second and Park.
Update: Drawar.com names MIX Online Design of the Year!
Read more about the redesign:
In August 2009, HeaderFooter designed and developed a web presence for the Urban Landscape Lab, an inter-disciplinary applied research group at Columbia University in New York.
The Urban Landscape Lab had years' worth of work to display in addition to a constant stream of ongoing projects. In response, HeaderFooter created a custom Wordpress installation that allows the Lab to quickly add new content to a variety of streams. In addition, HeaderFooter developed a basic set of Filters to allow the site's users to browse the Lab's work according to specific categories of interest.
In addition to displaying the Lab's work, HeaderFooter also conceived of - and maintains the content of - the Encyclopedia of Urban Nature, a full-screen presentation of content pertaining to Urban Nature drawn from across the web.
In July 2009, HeaderFooter developed the Windows 7 information portal for the Microsoft Developer Network's Channel 9.
Channel 9 wanted the site to capture the feel of the much-publicized Windows 7 user experience, while still conveying the in-depth video content that the team produces for its Windows Developer user base. Working within the pre-determined wireframe of the existing site, HeaderFooter designed this subsite and its icons to feel like a hybrid of both Windows 7, through the use of Windows 7 interface elements and imagery, and Channel 9, through the use of the site's background structure and its yellow orthagonal iconography.
HeaderFooter also developed a Windows 7 CSS theme for the entire Channel 9 site, deployed as a celebratory gesture on the day Windows 7 team shipped their Golden Master.
Update: After HeaderFooter delivered the site, Microsoft adapted the design to be the basis for their Windows 7 Training Kit for Developers
In Fall 2009, HeaderFooter redesigned the topic pages for Microsoft Developer Network's Technet Edge.
The Topic Areas are portals to content on specific topics. This content may be in the form of a video, a blog post, a link to a more focused page, or a downloadable (such as a Training Kit).
At project start, the Topic Areas on TechNet Edge were not clearly presenting the content they are meant to communicate. Instead of acting as a central point for content distribution, the Topic Areas sent their users off to a myriad of different pages: videos could only be watched by going to another page, the primary point of eye-entry on the page (the left side) was occupied by a relatively unimportant list of Topic Owners, and there was little opportunity for visual differentiation between the different topic pages. This lack of customizability was especially acute on country-specific topic areas.
The final design for the topic pages strove to keep the information being presented clear, while still allowing various Topic owners (who live around the world and speak many languages) wiki-like control over all aspects of the page.
In December 2008, HeaderFooter overhauled the marketing pages for Commercial IQ, rethinking the site's approach to communicating its services and designing custom-targeted header graphics.
As Lead Web / Interface Designer, we directed the layout, overall appearance, marketing strategy, and copywriting of the site's content.
Commercial IQ is one of the largest national commercial real estate listing services on the internet.
As Lead Web / Interface Designer, we were responsible for creating all aspects of Commercial IQ: identity, logo, color scheme, mark, marketing direction, SEO, etc. Since its launch in March 2008, Commercial IQ has quickly become one of the most visited Commercial Real Estate sites on the web, drawing tens of thousands of unique visitors.
Update: In July 2008, we undertook a redesign of our original homepage for Commercial IQ to help the site better reflect the expanding nature of its products & services.
As Lead Web / Interface Designer, we directed the graphical identity, layout, marketing strategy, and features displayed on the site's homepage. We focused our attention on marketing, usability, and visitor retention, and built the site into the existing JavaServer Pages framework.
Timo Lindman Architect, PLLC was looking for a site that could effectively showcase the firm's portfolio of built projects to both industry peers and potential clients. The firm wanted to showcase the entire architectural process, from inceptive conceptual drawings through to the often unpredictable realities of final construction.
HeaderFooter is building a categorized site of the firm's projects - house designs, apartment / condo refurbishments, and kitchen redesigns - to help potential clients better understand the power of quality architectural space.
Catylist provides Commercial Real Estate listing web application technology to 45+ regional Realtor® Associations throughout the United States. As part of this service, Catylist provides a templated website that serves as search gateway, SEO booster, and website for its client organizations.
As Lead Web / Interface Designer, we were responsible for redesigning this template, which is iterated with over 45 different color schemes, layout widths, and header styles across websites used by tens of thousands of viewers. Our design was crafted to accommodate not only a wide range of styles, but also areas of dynamic information written and maintained by these associations independently of Catylist's oversight.
Rushforth Productions is an independent theater in Los Angeles, CA loosely tied to Steppenwolf Theater.
HeaderFooter worked to design an identity and online experience for the theater tied closely to their past productions.
In August 2008, HeaderFooter re-designed the Property Overview page-templates used by the hundreds of thousands of nationwide commercial properties listed on the Catylist Network.
In addition to clearly and elegantly displaying the information inputted by the listing agent, HeaderFooter was specifically tasked with finding and harnessing supplemental sources of information - maps, demographic statistics, and market statistics - to allow Catylist's service to evolve beyond its historical foundation as a "Bulletin-Board" for commercial listing broadcasts.
