Loading ...

Responses by Dan Hinton, creative director and founder, Pixelfish.

Favorite details: We are most proud of the experience we have designed and created. The interactive map of Britain and Ireland is the centerpiece, lending a vintage feel to the site with a modern twist. The use of moving clouds, a 3-D-rendered map and ambient sound create something unique—and certainly something I haven’t seen before in the same way. Pixelfish is also a big fan of the “How it works” page, as it has a clear narrative structure as users scroll down, including some subtle animated elements.

Challenges: Marrying the rich, detailed aesthetic taken from the map with classic Swiss graphic design cues. From a technical perspective, there are some rather complex value-added tax calculations depending on the products purchased and where in the world—mainly Europe—the user is. This took a little while to get our heads around, but in the end, we’re happy with the elegant, straightforward way we handled it.

New lessons: Giving different phases of the project time to breathe—particularly in the design phase. We were fortunate that while there were time constraints, we had a very understanding client who, with us, wanted to make sure everything was done right rather than quickly. It’s essential to keep that space to experiment, research and think to get the best creative results.

Navigation structure: We have broken a lot of usability rules with navigation on this site, but we did so intentionally. The project is about “slow motoring” and taking your time, so we wanted the navigation to be more deliberate and experiential. We want the user to be intrigued and interact with the site. It’s more than just a case of getting them from point A to point B as quickly as possible.

Technology: We have started introducing more animation into our projects, as it can enhance the experience. We utilized the Lottie library throughout the site, enabling us to take animation created in After Effects and use them within the site in a low-impact, efficient way. The loading animation makes use of a more complex animation, and it’s all handled in-browser—so cool!

longestroadout.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In