Responses by Ben Steers, creative director, and Nick Lewis, creative technologists, Fiasco Design

Background: The site was designed and developed following an overhaul of the Whistle Punks branding. While the original branding leaned on visual clichés such as axes, woodcutting and targets, our creative strategy took inspiration from the propelling motion and the high-impact, raw aesthetic of the experience. The identity includes a bespoke typeface, glitchy visuals, and an energetic color and material palette. Built with the WordPress CMS and WooCommerce, the site carries these principles and brings the brand to life while providing a fully editable, scalable site for growth across venues and eventually countries.

Favorite details: Having created a visual identity that was full of energy, impact and movement, we implemented these design principles throughout the site with a mixture of design and animation. Load and scroll animations, hover effects, impactful typography, and photography join together to create an exciting, memorable brand experience.

Challenges: The most challenging aspects in development involved the animations and overall speed of the website. As it contains a lot of imagery and video, we needed to implement lazy loading techniques and animations to engage the user while other sections of the page were loading.

Technology: The site is built on a WordPress CMS back end, with the front end using HTML5, CSS3 animations and JavaScript to handle more technical features, including AJAX loading and replacing the default cursor with our stylized version.

Anything else? The site needed to match some of the animations created as part of the branding process. We achieved this through the use of animated swiping masks on images when loading, on titles and on media in the hero sections of the website as well as in the navigation. Some of these animations are slimmed down for mobile platforms to increase speed and overall site performance.