HeaderFooter designed the front-end for Pinterest, a new social collection and curation service.
Pinterest lets you collect and showcase images you love in striking visual galleries called pinboards. It also and helps you discover new styles and products hand-picked by the people you care about.
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 overall theme of the board to be legible at a glance. Each board also needs to display a variety of metadata— creator, tags, followers, and related boards— without distracting from its content.
The final layout uses an irregular grid to position pins chronologically, without forcing the content of the board into a rigid two-way grid. The result is that Pinterest 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 genesis of this exciting new community on the Web.
If you would like an invite to the Pinterest beta, please let us know.
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:
HeaderFooter designed and developed a Web presence for the Urban Landscape Lab, an inter-disciplinary applied research group at Columbia University.
The Urban Landscape Lab had years of past 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 channels. We also developed a set of filters to allow users to browse the Lab's work according to specific categories of interest.
HeaderFooter also created the Encyclopedia of Urban Nature, a full-screen presentation of content pertaining to urban nature drawn from across the Web, as part of the site design.
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 surfacing 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 orthogonal 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. The adapted design was used the basis for the Windows 7 Training Kit for Developers.
HeaderFooter redesigned the topic pages for Microsoft Developer Network's TechNet Edge.
Serving as portals to information on different subjects for developers, the topics pages must support a multitude of content formats, including video, blog posts, and links to external sites and downloadables.
Headerfooter centralized navigation by streamlining the topics area layout, and brought needed focus to the individual topic and country pages by differentiating them visually.
The final design presents the site’s diverse content in an easily readable and consistent layout, while allowing topic owners from around the world to have wiki-like control over important aspects of the pages.
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 final construction.
HeaderFooter is building a categorized site of projects including 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.
HeaderFooter worked to design an identity and online experience highlighting the theater's past and current 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.
