The Frank Lloyd Wright Foundation needed a website that lived up to the ideals of Wright, namely the harmonious relationship between form and function.
This site, designed by Casual Astronaut, delivers on that promise with a powerful, content-rich and easy to navigate experience, punctuated with plenty of architectural eye candy.
Flexible content management
Although the previous incarnation of the site didn't have a CMS or API, it did use good, semantic HTML5 markup. That enabled us to write Python scripts to scrape and parse over 100 articles and 75 architectural projects, which were imported to the CMS using the WordPress REST API.
After importing the archival content, we began addressing a common problem: giving site editors the control they need while maintaining the integrity of the design.
On one end of the spectrum you have template-based themes that lock you into a predetermined structure: pick a template, fill the holes with content, don't stray from the path.
On the other end you have "page-builder" tools, which tout their infinite customization. Change the font, change the margins, change the colors. How about a background image? Maybe some parallax?
Multiply these decisions by dozens of editors and hundreds of pages, you end up with an inconsistent mess.
The sweet spot
We developed an extensive library of modular components, which site editors can use to build out media-rich pages. Each of the components was thoughtfully designed to maintain consistency, while providing an impressive level of flexibility throughout the site.
The component library includes image galleries, sticky navigation bars, pullquotes, featured posts, event listings and more. They are are all available for site editors to mix-and-match to compose new pages, marketing campaigns, and event announcements.
Vector animations
In addition to his architectural designs, Wright also created many geometric patterns that were used throughout his buildings, including furniture, stained-glass windows, and structural tiles.
Animating these design elements highlights their unique shapes and provides subtle motion throughout the site. The illustrations were animated in After Effects and rendered on the website using Lottie, an open-source JavaScript library.
FLW150
Post launch, we developed a microsite for FLW150, an international celebration of the 150th anniversary of Frank Lloyd Wright’s birth.
The site included a form where organizations from around the world submitted their FLW150 events. Over 100 submissions were collected on the site, which became the de facto hub for this momentous occasion.
Taliesin West kiosks
The Frank Lloyd Wright Foundation makes its home at Taliesin West in Scottsdale, Arizona. This UNESCO World Heritage site and National Historic Landmark welcomes thousands of visitors every year.
A kiosk-friendly version of the site integrates the extensive content and resources from the website with the physical experience of this magical place.
3D Laboratory
The Frank Lloyd Wright Foundation partnered with Leica Geosystems and Multivista to capture detailed scans of Taliesin West using the BLK360 3D imaging laser scanner. This technology allows anyone to experience Wright's architecture through their web browser.