Responses by Simon Bird, front-end lead developer, and Joe Trippett, cofounder and creative director, By Association Only.

Background: An Italian shoe brand founded in 2014, P448 creates forward-thinking footwear inspired by communities of artists, athletes, musicians and changemakers. Favoring feelings over fads, the company crafts pieces that transcend trends and encourage self-expression, constantly looking at fashion from new perspectives.

P448 approached us to elevate the brand’s digital presence and create a modern aesthetic while also consolidating its existing tech stack. The shoemaker wanted its new site to mirror P448’s ethos for breaking the barriers of fashion with a unique, diverse and uncommon design that was still unquestionably functional and aligned with its physical stores. Increasing brand awareness through storytelling was also an essential part of the brief, with a flexible homepage structure that would offer innovative editorial and shoppable modules, and key roles played by animations and interactive components.

Design core: P448 wanted its site to mirror the feeling of being in its physical stores. Like its fashion, it also wanted to push design boundaries with an immersive site that tells a story while adhering to e-commerce best practices. Examples of this include bespoke product pages for certain lines that provide extra detail on the shoe’s design, such as for the Bondi Gesso.

Favorite details: The model guide, which includes details of when specific designs launched, design collaborators, context and visuals. Layered animations that we created while keeping the user journey fluid. Lookbooks with a quick add-to-bag functionality, making it easier for the brand to upsell products across the site. A choose-your-laces feature. A coming soon calendar. Pop ups that boast the curation of new products and also invite users to create accounts and subscribe to newsletters. Light and dark mode. Custom cursors that users can drag, scroll, zoom and play videos with; the call to action changes depending on what the user hovers over. The wishlist. And the new product photography that follows our image guidelines.

Special navigational features: Most noticeably, the navigation on P448’s site is on the left-hand side with an animation, introducing movement to the page—much like footwear! Being positioned on the left-hand side also creates more room for larger, standout imagery as well as making the site feel less like a generic retail site and more editorial in style. The fact that the imagery and videos sit behind the navigation also lets it to be really impactful.

Practically speaking, customers can shop by shoe model with sketches showing the various shoes’ silhouettes as well as alternates between a “normal” collection view; a collection wall that features smaller images in tiles, similar to how they’re displayed on walls in physical stores; and a horizontal scroll for closer product details.

Technology: As an e-retail store, P448’s site was built on Shopify using its Liquid templating language to provide the dynamic content. For the front end, we used classic web technologies like HTML and CSS.

As performance is always key to our builds, all of the scroll animations and interactivity were built by us from the ground up in JavaScript with only the carousels and zoom functionality using external libraries.