Venture backstory
When Keith from Higher Off® Studio approached us to do that undertaking we have been very hyped. What makes this undertaking particular for us is the truth that it’s a tradition piece, not a industrial web site that should hit quotas.
Not having to consider conversion charges and enterprise objectives and having the ability to focus solely on making this a artistic expertise was very liberating from a design perspective. Keith needed some type of tradition capsule the place the studio may doc every part that impressed them and issues they created themselves.
From a design perspective we needed this to be scalable (must work with 20 items, but in addition with 200) and a enjoyable expertise. The enjoyable half is necessary to maintain customers engaged and encourage them to discover the entire website. We began with a timeline as the primary view the place you’ll be able to scroll again in time, an index view to simply navigate by the database of content material and a enjoyable about web page to elucidate a bit about this ardour undertaking. Keith himself is fairly huge on browsing in actual life in order a shock to him for trusting us with this undertaking we created a surf view as nicely the place the content material mimics the waves of the ocean.
Tech stack & instruments
Constructed with Nuxt 3 (Vue.js) for static era and quick load occasions. Content material comes from DatoCMS by way of GraphQL, conserving editorial and frontend totally separate.
Animations run on GSAP, web page transitions, scroll results, the interactive bits. Styling is Tailwind for format and SCSS the place extra management was wanted. State by way of Pinia, deployed on Netlify.
The web page transitions
One of many extra concerned elements was the web page transitions, particularly the picture “flip” animations. While you navigate between pages, the photographs don’t simply fade or reduce, they bodily transfer and scale from the place they sat on the earlier web page to the place they reside on the subsequent. That is powered by a customized flip operate that information every picture’s precise bounds earlier than the route adjustments, then on the brand new web page matches parts by ID, calculates the distinction in place and scale between the 2 bounds, and animates from the previous state to the brand new one utilizing GSAP. Importantly, the calc operate solely considers parts which can be really seen within the viewport on each pages, so that you by no means animate one thing the person couldn’t see.
The surf web page added an additional layer of complexity, because the pictures are offered in a faux CSS 3D area, rotated and stacked in perspective. Flipping there required accounting for that reworked state earlier than matching bounds, so the animations nonetheless learn as pure regardless that the beginning positions weren’t flat.
Totally different routes wanted totally different logic, so there are a number of transition variants, carousel to article, article to article, to and from the about web page, every with their very own choreography.
Visible & interplay design
From a visible design we needed the content material to be the primary driver, that’s why we selected a impartial white background for all of the views when exploring content material. There are three essential views for this, the primary timeline view, the surf view and the index view. To ensure there’s a clear distinction between these views and the about web page, we made the about web page black with white typography.
The design language is a mix between minimal simplicity and a little bit of brutalism. We did this on function to let the content material shine within the areas the place it ought to, however nonetheless have a cultural edge on the about web page and locations the place we now have extra typography.
The principle hero, interplay sensible, of the positioning is unquestionably the transitions between the content material views, we needed this to really feel contextual and high-end. As a substitute of doing a easy fade in/out animation from one view to the opposite we selected a contextual animation that reveals the content material altering to the brand new view. Going from the primary timeline to the index and from timeline to surf are my favourites.
For the timeline view we now have the large kind lockup on the high which provides you context (because it’s the primary view you land on), for the opposite views we opted for a smaller model of the kind lockup so the content material has extra room to shine, considered one of my favorite particulars is the animation between these 2 variations.
From a person expertise view we additionally needed the content material to be simply explored. We had an important expertise on the timeline, surf and index view however we don’t need individuals to have to return to these views to discover additional. We designed the element view round this problem, the view is designed in 2 essential areas, on the proper we now have the scrollable content material and on the left we now have the energetic merchandise, left and proper to it there’s the subsequent and former merchandise, customers can intuitively use these to see extra content material with out having to return.
Moreover these ‘hero’ animations we additionally outlined a movement language for the entire website. We needed every part to have a way of context bodily. That’s why you’ll see the photographs skew on the timeline and index view in relation to the scroll course. Additionally the quantity of ‘wave’ you get on the surf view is in relation to your scroll velocity.
Structure and construction
With a content-heavy web site like this one which retains rising as time goes on efficiency was one of many essential issues we stored in thoughts throughout the construct of the positioning. The positioning solely masses the content material that’s seen by the customers, similar goes for animations between totally different views. If there’s 100 gadgets on the positioning however solely 7 in view, the animation solely occurs to these 7.
We additionally added a preloader to the positioning the place the person has the choice to enter the positioning with sound or with out, right here we additionally do some loading whereas the person makes the choice.
One other factor we would have liked to be aware of with regards to efficiency was hover results, for instance on the surf view we couldn’t use a hover impact that will fade out the not energetic gadgets or have the picture scale up or one thing. The principle cause being when your cursor is on the content material and you’d be scrolling, that impact can be triggered a number of occasions per second. We got here to a cool choice the place the picture peeps out like a ebook on a shelf. A great instance of how a artistic answer comes up when you could suppose with boundaries.
In relation to cell, we needed the positioning to be as mild as attainable, we eliminated every part audio-related and sure performance to prioritise efficiency. By making this resolution we have been in a position to have the three essential views additionally on cell. So no matter medium you employ to entry the positioning, you get a full expertise tailor-made to your system.
Web page by web page notes
- The intro: In the course of the preloader we trace in direction of what kind of content material you’ll discover on the positioning by exhibiting the varieties of content material which can be being loaded.
- Timeline view: On the backside we now have the timeline UI, we needed this to really feel interactive, whenever you go down together with your cursor, the strains begin rising in direction of your cursor, inviting you to click on and drag. We additionally added a wheel-of-fortune–like sound for the strains passing.
- Surf view: One of many sturdy fits is the infinite scroll, that is additionally on the timeline view. It permits the person to scroll in no matter course from the beginning and it seems like there’s no finish to the content material.
- Index view: For content material heavy web sites, having an index view seems like a zoomed out view that makes coming again to content material simpler, it additionally allowed us to play with cool animations.
- About web page: Certainly one of my favorite issues is the distinction between the about web page and the remainder of the positioning, brutalist uppercase typography that works in concord with the 3D brand that strikes with you on scroll. Making this web page with an infinite scroll is a touch in direction of the primary content material pages.
- Content material element web page: Right here I’m a giant fan of the shut button following your cursor on the left aspect.
- Music participant: Throughout the entire website we now have the music participant, music is a giant a part of what can encourage us so we needed to embrace a customized participant for the positioning.
Reflections
Wanting again on this undertaking, we’re very completely satisfied we have been in a position to give the individuals over at Higher Off® a house for every part they documented and created. It’s a real ardour undertaking constructed on expertise, not just for the top person but in addition for the consumer itself. It’s been nothing however enjoyable engaged on this, taking part in round with totally different concepts and animation ideas.
