Mission backstory
When Keith from Higher Off® Studio approached us to do that venture we had been very hyped. What makes this venture 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 with the ability to focus solely on making this a inventive expertise was very liberating from a design perspective. Keith wished some form of tradition capsule the place the studio may doc every thing that impressed them and issues they created themselves.
From a design perspective we wished this to be scalable (must work with 20 items, but additionally with 200) and a enjoyable expertise. The enjoyable half is vital to maintain customers engaged and encourage them to discover the entire web site. We began with a timeline as the primary view the place you possibly can scroll again in time, an index view to simply navigate by the database of content material and a enjoyable about web page to clarify a bit about this ardour venture. Keith himself is fairly massive on browsing in actual life in order a shock to him for trusting us with this venture we created a surf view as effectively 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 instances. Content material comes from DatoCMS through GraphQL, retaining editorial and frontend absolutely separate.
Animations run on GSAP, web page transitions, scroll results, the interactive bits. Styling is Tailwind for structure and SCSS the place extra management was wanted. State through 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 pictures don’t simply fade or minimize, they bodily transfer and scale from the place they sat on the earlier web page to the place they reside on the following. That is powered by a customized flip operate that data every picture’s precise bounds earlier than the route adjustments, then on the brand new web page matches components by ID, calculates the distinction in place and scale between the 2 bounds, and animates from the outdated state to the brand new one utilizing GSAP. Importantly, the calc operate solely considers components which might be truly 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, for the reason that photographs are offered in a faux CSS 3D house, rotated and stacked in perspective. Flipping there required accounting for that reworked state earlier than matching bounds, so the animations nonetheless learn as pure though the beginning positions weren’t flat.
Completely 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 wished 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 foremost views for this, the primary timeline view, the surf view and the index view. To verify 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 goal 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 now we have extra typography.
The primary hero, interplay clever, of the location is unquestionably the transitions between the content material views, we wished this to really feel contextual and high-end. As an alternative of doing a easy fade in/out animation from one view to the opposite we selected a contextual animation that exhibits 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 now we have the large sort lockup on the high which supplies you context (because it’s the primary view you land on), for the opposite views we opted for a smaller model of the sort lockup so the content material has extra room to shine, one among my favorite particulars is the animation between these 2 variations.
From a person expertise view we additionally wished the content material to be simply explored. We had an amazing 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 foremost areas, on the correct now we have the scrollable content material and on the left now we have the energetic merchandise, left and proper to it there’s the following 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 web site. We wished every thing to have a way of context bodily. That’s why you’ll see the pictures 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 foremost issues we stored in thoughts throughout the construct of the location. The positioning solely masses the content material that’s seen by the customers, identical goes for animations between totally different views. If there’s 100 objects on the location however solely 7 in view, the animation solely occurs to these 7.
We additionally added a preloader to the location the place the person has the choice to enter the location with sound or with out, right here we additionally do some loading whereas the person makes the choice.
One other factor we wanted to be aware of in terms of efficiency was hover results, for instance on the surf view we couldn’t use a hover impact that will fade out the not energetic objects or have the picture scale up or one thing. The primary cause being when your cursor is on the content material and you’ll be scrolling, that impact can be triggered a number of instances per second. We got here to a cool choice the place the picture peeps out like a e-book on a shelf. A superb instance of how a inventive answer comes up when it’s worthwhile to suppose with boundaries.
With regards to cell, we wished the location to be as mild as potential, we eliminated every thing audio-related and sure performance to prioritise efficiency. By making this choice we had been capable of have the three foremost views additionally on cell. So no matter medium you employ to entry the location, you get a full expertise tailor-made to your gadget.
Web page by web page notes
- The intro: In the course of the preloader we trace in the direction of what sort of content material you’ll discover on the location by exhibiting the forms of content material which might be being loaded.
- Timeline view: On the backside now we have the timeline UI, we wished this to really feel interactive, whenever you go down along with your cursor, the traces begin rising in the direction of your cursor, inviting you to click on and drag. We additionally added a wheel-of-fortune–like sound for the traces 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: One among my favorite issues is the distinction between the about web page and the remainder of the location, 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 the 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 web site now we 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 location.
Reflections
Trying again on this venture, we’re very joyful we had been capable of give the individuals over at Higher Off® a house for every thing they documented and created. It’s a real ardour venture constructed on expertise, not just for the top person but additionally for the shopper itself. It’s been nothing however enjoyable engaged on this, taking part in round with totally different concepts and animation ideas.
