From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The award-winning website for Anderson Moss culminates a year-long brand repositioning and integrates a fresh identity design that embodies the agency’s new direction. It stands as both a design and development folio piece in its own right, featuring interactive design that captures this identity and complements a number of custom development features. The distinct art direction reflects the aesthetic principles characteristic of the agency’s work.
Type & Palette
Bold typography alternates between serif and sans-serif, evoking a sense of coherence between modern and classical visual styles, reflecting the timeless creativity that Anderson Moss strives to achieve. This concept of unifying contrasting elements extends to the complementary off-monochrome palette, which itself was chosen to reinforce one theme of the website – the notion of a blank slate – the foundation of every creative process.
The Blank Slate
The idea of the blank slate – the opportunities and possibilities of a new creative project – is a central theme of the website. A surrealist 3D environment featuring unclothed, androgynous mannequins, set within an unlit warehouse studio conveys these ideas and, in a practical sense, informs prospective clients of the sheer potential of contemporary design and development technologies, evoking a sense of excitement and optimism.
ANTI-BRAND
“Anti-brand” is the concept that behind any brand lies its culture and philosophy – the pioneers, their ideas, dreams, and visions from which the brand is borne and defined. A variety of elements throughout the site, such as dates in Roman numerals and other little ‘easter eggs,’ manifest this idea; meaningful personal touches and subtle visual integrations that elevate the identity and experience as a whole.
Custom Features
Ranging from a custom-built SCSS grid system, which includes features such as optional components, intuitive and in-depth customization, and PostCSS optimization, to a fully-fledged JavaScript-based scroll utilities library, the website integrates a number of custom development features. Beyond these cross-application boilerplate frameworks, several project-specific features supplement the Three.JS WebGL implementation:
Blender→Three.JS CameraPath Plugin
CameraPath is a custom Three.js plugin built for this project, providing extensive functionality for controlling camera traversal throughout a scene. A custom curve path can be created in Blender, with rotation and x/y/z axis manipulation, which the plugin reads and translates to an array of position and quaternion values applied to the camera over time. This traversal can be triggered within the render loop or tied into a scroll event, as shown on this website. A second LookAt Path can also be exported, defining at each step the orientation of the camera. With the additional integration of an easing function to the traversal, this ultimately gives granular control and a natural, filmic quality to the camera movement.
Velocity Dependent Chromatic Aberration & DOF Blur
Two of the custom shaders created for this project include a lightweight Chromatic Aberration effect and Depth of Field approximation. The effect is dramatically enhanced by tying in the uniform values for the shaders to a separate function that returns the velocity of the camera movement. As the camera speeds up and slows down while traversing between each section in the scene, the strength of the aberration and blur ramps up, creating a very effective and lightweight motion blur effect.
Faux SSR / Distorted Custom THREE.JS Reflective Material
A custom Three.JS material (MeshReflectiveMaterial), based on shader elements from MeshStandardMaterial(), was used to approximate a distorted ground reflection effect based on a GL Normal Map. A custom shader program integrated into the material takes a box-projected camera and distorts the result based on the imported normal map and various settings, creating a realistic ground reflection effect—a surprisingly challenging effect to achieve properly.
Conclusion: Fulfilling the Blank Slate
This entire project was conceptualized, designed, and developed by a solo creative—the founder of Anderson Moss, Chris Carruthers. Striving to position the brand and website among larger-scale teams in established agencies was a daunting but motivating prospect. Upon launch, the website has won several awards, including FWA of the day, and shows—especially when utilizing modern development technologies within a solid visual framework—just what can be possible!
Check out the live website: www.andersonmoss.com
Follow Anderson Moss on Instagram: @andersonmossagency
