Loading ...

Responses by Anton Bondar, Anton Kozhevnikov, Brandon Levesque and Josh Posty, cofounders, CUSP.

Background: This is our first introduction to the digital world as CUSP, so we wanted to create something fun and experimental that gave some insight into who we are as a team, and would be explorative for users. Our target audience is pretty wide. As a smaller group, we take pride in being dynamic enough to pursue the projects and clients we’re passionate about. Sometimes they’re larger global brands, but often they’re startups or small businesses with great people behind them.

Design core: The unique navigational elements for sure. The overall aesthetic is minimal and bold, which pairs really well with the interactivity of the elements. We worked through many combinations of animations and interactions to find a balance that worked for us. Favorite details: We’d say the case overview page and the transition between the menu and the contact page. We obsessed over both to the point of exhaustion. The devil is in those subtle details, especially when it comes to interactive projects.

Challenges: Lots of heavy animations affected performance of the site so we had to spend a couple of weeks bringing 60 fps back while optimizing every possible element of the site.

Combining the technologies of the PixiJS and three.js libraries with dynamic content from the CMS and real-time element resizing was one of the most challenging tasks, on which we worked for many weeks trying to find universal formulas for calculating points coordinates.

Working with a multinational team also created difficulties: All participants in the process were truly creative personalities with their own view on the visual concept of the site. Combining all the ideas and finding the best way to visualize them was a test of communication skills for everyone.

Navigation structure: Our site is relatively small in comparison to others, so we focused our attention on the feeling of using the navigation throughout the site. The pacing is something we worked on a lot. We wanted everything to feel responsive but a bit more relaxed.

Special navigation features: We’ve always loved infinite scroll so we worked that into our main navigation. Also, our cases page has two different view modes, allowing visitors to cycle between a more interactive project-by-project layout or a speedier scrolling index.

Technology: On the front end, we used React with the PixiJS and three.js libraries. The back end and CMS are based on Prismic.

Technical features: Considering the vast amount of interactive elements, animated transitions and visual effects, our developers did a remarkable job on optimizing the WebGL code so that users can surf the site without any significant performance issues—even on old devices.

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