Responses by L2D.

Background: Being a small, independent studio primarily focused on producing the research, strategy or functional components behind large agency projects, we’ve often struggled when it comes to redesigning our own website. Though every few years we would aim to draw in new clients with a redesigned experience, in most cases our efforts felt half-baked—stretched thinly between mixed or idealized expectations, the realities of a hectic client production schedule and an illogical but real aversion to self-promotion.

Directly addressing those past hurdles, our aim with the current redesign was twofold: to design and develop an uncompromising site that speaks to our unique company culture, and to build a platform with the express purpose of attracting forward-thinking agencies and corporate clients with a vision for the experiential web.

Design core: As our company has matured, we’ve learned to better trust our artistic direction—this site is an example of that growth process. Early on, we decided that we wanted to present users with an immersive experience that would highlight our capabilities in a futuristic and minimal, but not cold nor alienating way. To answer this need—via an extensive prototyping process (and three directions changes along the way)—the metallic “gem” motif was born and created unique, project-encapsulating elements that give the site warmth, depth and needed tactile nature where there would otherwise be none.

Favorite details: Though we are fans of many aspects of our website, we are most excited by the balance that our team achieved between interactive, visual, aural and technical components. Oftentimes, we’ve found that one or more of these components can overwhelm an entirely interactive experience, leaving users with a wrong impression, so we were happy to have found that balance. More specifically, we were also proud of the 3-D gem motif that not only uses a cursor/point-light reflective brushed metal material on the exterior but also includes a sophisticated, project-related kaleidoscoping interior material (an article on the creation of those materials is now in the works.)

Additionally, we are also happy with the function of the custom shader–driven background particle effect, and albeit not officially woven into the site structure, the physical Kinect-based experience featured on our Lab page. Special thanks to our friend Mathias Biabiany for helping us establish the initial front-end framework, informing the transitional elements of the site.

Challenges: With the new site being no exception, the most challenging aspect of undertaking any of our own projects is agreeing on the initial direction. Though we often joke about how difficult the process is, we see it as a mostly positive outgrowth of having a passionate, engaged team. Once settled upon, we found the process to be somewhat straightforward by following some identifiable expectations: First, though building as a flat, front-end structure has its advantages, to make state management and routing easier, in retrospect we would have built the front end using a framework such as Vue.js.

Also, when building similar projects in the future, we’ll most likely assign a team directly to optimization QA. As we’ve found, creating WebGL components may be an excellent way to imbue a website with unique elements, but it’s also a way to bring browsing devices to their proverbial knees.

Technology: Among a variety of other tools, we mostly used three.js, min-signal, Native Canvas API, GSAP and custom shaders to develop the site.