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.
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.