The award-winning web site for Anderson Moss culminates a year-long model repositioning and integrates a recent identification design that embodies the company’s new course. It stands as each a design and growth folio piece in its personal proper, that includes interactive design that captures this identification and enhances a lot of {custom} growth options. The distinct artwork course displays the aesthetic ideas attribute of the company’s work.
Kind & Palette
Daring typography alternates between serif and sans-serif, evoking a way of coherence between trendy and classical visible types, reflecting the timeless creativity that Anderson Moss strives to attain. This idea of unifying contrasting components extends to the complementary off-monochrome palette, which itself was chosen to strengthen one theme of the web site – the notion of a clean slate – the muse of each inventive course of.
The Clean Slate
The concept of the clean slate – the alternatives and prospects of a brand new inventive venture – is a central theme of the web site. A surrealist 3D atmosphere that includes unclothed, androgynous mannequins, set inside an unlit warehouse studio conveys these concepts and, in a sensible sense, informs potential shoppers of the sheer potential of up to date design and growth applied sciences, evoking a way of pleasure and optimism.
ANTI-BRAND
“Anti-brand” is the idea that behind any model lies its tradition and philosophy – the pioneers, their concepts, goals, and visions from which the model is borne and outlined. Quite a lot of components all through the positioning, corresponding to dates in Roman numerals and different little ‘easter eggs,’ manifest this concept; significant private touches and delicate visible integrations that elevate the identification and expertise as an entire.
Customized Options
Starting from a custom-built SCSS grid system, which incorporates options corresponding to non-obligatory elements, intuitive and in-depth customization, and PostCSS optimization, to a fully-fledged JavaScript-based scroll utilities library, the web site integrates a lot of {custom} growth options. Past these cross-application boilerplate frameworks, a number of project-specific options complement the Three.JS WebGL implementation:
Blender→Three.JS CameraPath Plugin
CameraPath is a {custom} Three.js plugin constructed for this venture, offering in depth performance for controlling digital camera traversal all through a scene. A {custom} curve path might be created in Blender, with rotation and x/y/z axis manipulation, which the plugin reads and interprets to an array of place and quaternion values utilized to the digital camera over time. This traversal might be triggered throughout the render loop or tied right into a scroll occasion, as proven on this web site. A second LookAt Path may also be exported, defining at every step the orientation of the digital camera. With the extra integration of an easing operate to the traversal, this finally offers granular management and a pure, filmic high quality to the digital camera motion.
Velocity Dependent Chromatic Aberration & DOF Blur
Two of the {custom} shaders created for this venture embrace a light-weight Chromatic Aberration impact and Depth of Discipline approximation. The impact is dramatically enhanced by tying within the uniform values for the shaders to a separate operate that returns the rate of the digital camera motion. Because the digital camera hurries up and slows down whereas traversing between every part within the scene, the energy of the aberration and blur ramps up, creating a really efficient and light-weight movement blur impact.
Fake SSR / Distorted Customized THREE.JS Reflective Materials
A {custom} Three.JS materials (MeshReflectiveMaterial), based mostly on shader components from MeshStandardMaterial(), was used to approximate a distorted floor reflection impact based mostly on a GL Regular Map. A {custom} shader program built-in into the fabric takes a box-projected digital camera and distorts the consequence based mostly on the imported regular map and numerous settings, creating a practical floor reflection impact—a surprisingly difficult impact to attain correctly.
Conclusion: Fulfilling the Clean Slate
This complete venture was conceptualized, designed, and developed by a solo inventive—the founding father of Anderson Moss, Chris Carruthers. Striving to place the model and web site amongst larger-scale groups in established businesses was a frightening however motivating prospect. Upon launch, the web site has gained a number of awards, together with FWA of the day, and reveals—particularly when using trendy growth applied sciences inside a strong visible framework—simply what might be attainable!
Try the dwell web site: www.andersonmoss.com
Comply with Anderson Moss on Instagram: @andersonmossagency
