Rebranding Stojan

Swiss creative and branding agency Stojan asked Cruncher to build their new website for a 2023 rebrand. Our challenge was to deliver a smooth, performant user experience required by a highly interactive design.

Banner image

Design

Stojan, Onlab

Development

Cruncher

Website

stojan.ch

It has become something of a modern front-end habit to start building an interface with a JS framework. In most cases Cruncher considers this bad practice. It makes all your content dependent on JavaScript. We prefer to work ‘close to the metal’, meaning good-old hand-optimised semantic HTML and CSS, progressively enhanced with JS where required.

Cruncher excels in technical prowess, crafting tailor-made solutions that cater to the meticulous needs of detail-oriented graphic designers.

Romain Crochat, Partner

Stojan’s design divides a screen into 4 main panels, vertically or horizontally depending on the screen orientation. Each panel animates when hovered or tapped, and contains scroll-snapped text, images and video, again scrolling vertically or horizontally depending on the screen orientation. The technical question is, can we animate the full-frame blurs, transforms and scrolling regions required by these designs largely in CSS, and keep the interface fluid, responsive and performant, without requiring a JS framework?

Panels divide the screen vertically on portrait and horizontally on landscape screens

We reflect on the problem, then test some ideas, always keeping an eye on browser differences that might trip us up, and conclude that these animations are feasible within the limits of CSS that can reasonably be hand-coded. And by employing grid, clip-path and 3D transforms, animations are off-loaded to the graphics processor, making them smooth and performant even on large screens and underpowered devices.

Cruncher's skilled engineers consistently deliver top-notch results.

Romain Crochat, Partner

The site is built on a customised Django stack. Latest developments are pushed to a private ‘staging’ server as features are added, enabling Stojan to stay abreast of progress and to give feedback. Stojan are given full upload and edit control over their projects, their text, videos and images for the whole site via the admin interface, allowing them to start uploading content even before the site is complete.

This is a useful way to work with a client as it exposes any rough edges, places where the design or architecture is broken by real-world content, at the earliest possible stage, in turn allowing us to make modifications before further developments ‘bake in’ any problems.

The site fills up with content, and the animations – thanks to our early CSS tests – remains just as smooth and stable. Stojan’s rebrand was unveiled and the new site launched in November 2023.

Contact

Email hello@cruncher.ch Telephone +41 21 546 68 00

Other projects

KAVEA
Galerie 1 2 3 Galerie 1 2 3
Galerie 1 2 3
Swiss Typefaces Swiss Typefaces
Swiss Typefaces
Blondel Blondel
Blondel
Napoleome Napoleome
Napoleome