Section Logo
Go BackGo Forward

Interactive Annual 16:
self-promotion

FL2

Launch Live Site

“A clear, concise glimpse of the agency and the work they produce. With cleanly displayed, nicely structured information, a good use of typography and smooth, flowing interactivity, it’s not trying too hard to do too much.” —Nikolai Cornell

“They remembered that typography is graphic and let that drive the communication. That coupled with the simple interaction design and succinct descriptions of their work, without a lot of agency blah blah blah, was refreshing.” —Glen Sheehan


Overview: The latest iteration of the FL2 site uses a typography-based interface with unexpected transitions and unconventional interaction points. Intended to not only showcase the studio’s portfolio but also its development chops, Papervision was used for the portfolio transitions and the contact form. Additionally, it opens up communication with site visitors with a Twitter aggregator (Oops. I Tweeted My Pants) and Cam Yourself, that allows users to record and submit video messages directly through the site in real-time. It’s an effective business development tool that shows, rather than tells, what FL2 is and what it can do for agencies and brands.

  • • The front end of the site is Flash 10, ActionScript 3 and Papervision3D. The back end technologies include ASP.net, MySQL and a Flash Media Server. Additionally, the blog runs on a WordPress engine and is coded in ccs and XHTML with a MySQL back end.
  • • The initial site load is minimal due to the lack of video and graphic elements. All imagery and video content are loaded on-demand throughout the site. Video playback in the Cam Yourself section uses a Flash Media Server and provides a snappy response.

Comments by Matt FaJohn and Karl Becker

What was the most challenging aspect of the project? “Although the site seems very straightforward, from a technical perspective, a lot is actually happening behind the scenes. We wanted to ensure a great user experience, so we created deliberate strategies for balancing the load time and memory usage for the Papervision elements and external APIs. We also took hardware considerations into account with regard to tapping into users’ Webcams.”

How did this project compare with others you’ve worked on in the past? “We’ve built plenty of user-generated content sites recently, but this site is truly unique. When we create online experiences for a brand, we almost always put an admin system in place to ensure that the overall experience remains positive. However, in this case we made a conscious decision to allow users to contribute any content they wanted without requiring submissions to go into an approval queue or scrubbing inappropriate material. Instant gratification is part of what makes the site so fun for users.”

Credits

David Snyder, creative director
Matt FaJohn, strategy
Karl Becker, principal
Codin Pangell, developer
James Deagle/Thomas Gibbs, Flash programmers
Nathan Kurach, technical lead
FL2 (Denver, CO), project design and development/client


SHARE THIS  
  
Facebook  Twitter  LinkedIn