CASE STUDY01

Stanley Saitowitz
Natoma Architects Inc.



INTRO

San Francisco based design firm Natoma Architects asked us to join them in an effort to redevelop their company's website. We worked together with their office to iterate a series of design concepts and ultimately created a site that is refined, easy to use and places emphasis on their incredible work.



Saitowitz website homepage by zeppelin


The new website is a natural translation from its Flash-based predecessor, intended as an evolution of the previous site rather than a complete rebranding, a decision that reflects Natoma Architects' own design practice and values.




PROCESS
PROCESS

We began by examining a range of precedents — selected by both the firm and our team — and extracting a number of typological variants for showcasing architectural work. Using these as a foundation, we progressed through a series of mockups, static at first but moving quickly on to live prototypes to better understand the feel of the site, and to refine the navigational flow.



Menu layout 01
Menu layout 02


Menu layout 03
Menu layout 04


PLATFORM
PLATFORM

Migrating the site from Flash to HTML5 required a retooling of the original animations, which we elected to create using the native capabilities of modern web browsers. Implementing a number of CSS transitions, projects on the home page now gradually ascend into place, and gently fade out when filtered.





MOBILE
MOBILE

The primary purpose of the redesign was to enable acces via tablets and smartphones, which often don't support Flash websites. With mobile devices now accounting for more than half of all web traffic, we approach every design with a thorough consideration for each screen size, and an understanding that what sets a great site apart from its contemporaries is the seamlessness of user experience across devices. The devil is still in the details.



`
Saitowitz custom layouts


Custom layouts — for desktop, tablet and mobile were each carefully crafted to ensure a consistent and engaging experience on every screen size while maintaining the visual integrity of the work.



Saitowitz image optimizations


Image optimization — every image uploaded to the website is now optimized for each type of device and cached in locations around the world, providing crisp, beautiful images at incredible speeds no matter what screen you're using.





Mobile navigation — on small screens the main menu is tucked away to the side and accessed on demand, while tapping a filter button reveals the list of project categories used to organize the work.



Saitowitz ipad iphone table


RESULT
RESULT

The updated site is well designed, responsive and, most importantly, visually structures the work in a clean and legible fashion without getting in the way. We had a great time working with the folks over at Natoma Architects and are always on the lookout for interesting proposals that require creative thought and organization.