Transient
Nod is a 10-week coding boot camp in Stockholm centered on Python, SQL, machine studying, generative AI, and information analytics. It’s a difficult, fast-paced program with a rigorous acceptance course of to make sure pupil success.
The bootcamp’s founder, Axel Cajselius, approached us after a pupil solid doubts over this system’s legitimacy on account of its poorly designed web site.
Our mission was clear: to reimagine Nod’s on-line presence, making it really feel pleasant and reliable whereas reflecting the transformative nature of the bootcamp expertise.
Inventive analysis
We started with a casual dialog with Axel to totally perceive his model, imaginative and prescient, and what units Nod aside. This preliminary dialogue was important for us to establish an method that will align along with his targets and resonate with the audience. By means of this dialog, we created a listing of key phrases to information our creativity: “node” (which means “Nod” in Swedish), unique, elegant, Scandinavian, difficult, and adventurous.
Guided by these phrases, we carried out visible analysis on platforms like Codrops, Awwwards, Behance, and Dribbble, constructing a illustration of what Nod’s new model might appear to be. Two major instructions emerged: Scandinavian minimalist design and Bauhaus-inspired graphics. These ideas influenced us as we developed a visible temper board encompassing brand, typography, format, movement, and interactivity.
Branding
We began by designing a brand that will seize Nod’s essence. Our exploration included connecting node-like shapes impressed by the model’s identify, geometric varieties paying homage to Bauhaus, and Scandinavian runes in reference to Nod’s roots.
After just a few iterations, we landed on a design that featured a stylised “o” symbolising a node and hinting at a Scandinavian rune. The geometric typography struck a stability between minimalism, class, and modernity.
We accomplished the emblem with a model pointers doc that encapsulated Nod’s visible id.
Design
In parallel with the branding work, we drafted a content material map and wireframes for the web site.
We examined the competitors and used our initiative to create a content material map that appealed to the goal demographic. A central function of our content material map was constructing belief: from the hero part on the touchdown web page, all through the whole website.
From the preliminary content material define, we created low-fidelity wireframes, refining them with Nod’s workforce till each element was in place.
With the wireframes finalised, we moved to the ultimate design part, beginning with the homepage. Our aim was to create a putting, interactive visible that will instantly interact customers. We designed an illustration of flowers made out of geometric shapes that spell out “coding,” utilizing playful animations to ask interplay. We different the format throughout the web page, presenting content material in small, digestible sections enhanced with participating visible parts.
With the homepage and total design route authorised, we proceeded to craft the remainder of the location.
Implementation
Tech stack
Nod’s web site runs on WordPress, offering an easy-to-use backend and the flexibleness to scale.
On the entrance finish, we built-in a number of libraries for a seamless person expertise:
- GSAP: For the sleek, dynamic animations.
- Lottie: To export the animated illustrations from After Results to code.
- Luge: To manage the general person expertise and website’s lifecycle.
- Lenis: For the sleek scrolling.
- Matter.js: For physics-based interactions.
Animation
Animation was important to convey Nod’s vibrant, enjoyable id to life. We used our wide selection of expertise and a mixture of methods to totally realise the potential of the brand new design.
Animated illustrations
Customized illustrations had been created in Illustrator, transferred to After Results by way of Overlord, and exported as code utilizing Lottie. This allowed for fluid, looping animations that matched the model’s playful id.
On scroll animations
Scroll animations helped emphasise important parts with out overwhelming the person. We prioritised scroll-triggered animations, which play at particular factors on the web page, over scroll-controlled animations, which progress because the person scrolls. We used Luge’s reveal function and GSAP or CSS animations, relying on the complexity.
Micro-interactions
Micro-interactions are the small, usually unnoticed particulars that add a definite, premium really feel to Nod’s web site, akin to the quiet luxurious of a high-end model. These interactions could appear insignificant at first look, however they play a important function in shaping customers’ perceptions, conveying high quality and trustworthiness in an understated means.
Interactive parts
Fascinating interactive parts encourage customers to actively interact with the location, creating an enduring, optimistic impression. This method, carried out with JavaScript and CSS, was particularly efficient in reinforcing Nod as a high quality, premium expertise.
Focus 1: Key visible
The introductory animation on Nod’s homepage is a right away attention-grabber. It presents customers an surprising, playful second with out disrupting their expertise.
The animation idea was initially developed in After Results, permitting us to determine the pacing and total really feel. This gave us a visible reference for the movement, making certain the ultimate animation could be participating and polished.
As a result of we wished the animation to be interactive and responsive, exporting it utilizing Lottie was unattainable. We determined to export every flower animation individually and recreate the movement by animating dynamic SVG parts utilizing JavaScript.
We began by integrating the flower Lottie animations and attaching them to a GSAP timeline that allowed us to finely outline the vertical motion and opening timing of every component individually.
The stems had been added in a separate SVG utilizing path parts to maintain them versatile and responsive. Every stem’s dimension is dynamically calculated based mostly on the viewport dimension, whereas flower positions are outlined in CSS. This setup ensures the animation adapts easily to completely different display screen sizes, sustaining visible consistency throughout gadgets.
To boost the animation’s realism, we added a distortion impact to the white content material container, making it seem as if the flowers had been rising from the soil. This was achieved by manipulating a path command on an SVG path instantly inside the GSAP timeline, making a refined, natural movement that provides depth and makes the animation really feel extra lifelike.
The content material’s reveal animation offers the crowning glory to the primary sequence. Because the flowers animate into place, the content material regularly fades in, seamlessly finishing the visible story and welcoming customers to discover additional. This closing reveal enhances the stream, making certain the animation transitions easily into the primary website expertise.
To convey the visible absolutely to life, we added dynamic movement and interactivity, giving the flowers a mild, floating motion as in the event that they had been swaying in a breeze. This refined animation provides a way of peacefulness and fluidity, making the illustration really feel immersive and enhancing the general person expertise.
Focus 2: Transition
What would a Waaark website be with out charming and energetic web page transitions? For the Bootcamp web page reveal, we spark curiosity with an animation embodying the message: “Dive Deeper into our Coding Bootcamp” and “Our bootcamp will flip your curiosity into experience.”
To realize this, we used the attention illustration from the Bootcamp web page’s key visible, permitting it to open fullscreen to seize the eye and create a component of shock.
The attention is dynamically crafted as an SVG, with the pupil motion and blinking animated in CSS.
Your complete sequence is managed via a GSAP timeline, enabling the attention to regularly scale down and shift to its closing place on the web page, seamlessly integrating with the encompassing parts. This fastidiously timed transition pulls the person easily into the Bootcamp expertise, making a visually participating invitation to discover deeper.
Conclusion
The Nod redesign was an bold venture that demanded creativity and a spotlight to element to utterly rework an ordinary web site right into a elegant model.
From the preliminary temporary to launch, the method took over 300 hours throughout six months. The ultimate end result was nicely well worth the effort, as the web site has obtained substantial recognition: Website Of The Month on GSAP, Website Of The Day and Developer Award on Awwwards, FWA Of The Day on FWA, Net Of The Day on CSS Design Awards.
The brand new website doesn’t simply look nice — it has achieved tangible outcomes that underscore the indispensable function of efficient design in driving enterprise development. The positioning’s efficiency metrics communicate for themselves:
- Site visitors: 10x improve in guests within the first two months (from 6k to 60k).
- Every day Guests: 8x improve (from 100 to 800 customers per day).
- Lead Technology: 2.9x improve in kind submissions (from 16.5 to 47.5 monthly).
These metrics translate instantly into actual affect for Nod’s enterprise, with a major rise in Bootcamp functions and new B2B alternatives.
This rebranding has reworked Nod’s enterprise and positioned it as a memorable, high-quality expertise within the coding schooling market.
