Award-winning $50k Website Deep Dive

Key Concepts

• 3D Animation
• Creative Navigation
• Vector Animation
• Sound Design
• Webflow
• GSAP (GreenSock Animation Platform)
• WebGL
• Timestamping (for video playback control)
• AI Voice Generation
• Easter Eggs
• Data Attributes
• Howler.js (JavaScript audio library)
• CDN (Content Delivery Network)
• GitHub
• JS Deliver
• Components (Webflow feature)
• Custom Code
• Layering System (for page structure)
• Iterative Design Process
• Collaborative Teamwork

Ledger Website Deep Dive with Joseph Barry

This summary details the creation of an award-winning website for Ledger, a project that pushed the boundaries of web design with its innovative use of 3D animation, creative navigation, vector animation, and sound design. The discussion features Joseph Barry, a designer at Flux Academy, and highlights the technical challenges and creative solutions employed.

Project Overview and Key Features

The Ledger website is described as a groundbreaking project that goes beyond standard web design. Its core principle involves navigating through a cityscape, with each area representing an individual product.

• Cityscape Navigation: Users navigate through a virtual cityscape where each product is outlined. Different pathways lead to specific product pages.
• Animations and Interactions: The site is rich with animations, including glitches on text and subtle micro-interactions.
• Technical Foundation: A significant portion of the animations were coded using GSAP prior to a major update, demonstrating a commitment to custom development for elevated experiences.
• Asset Variety: The website incorporates diverse assets, including videos and 3D spinning elements of Ledger's key products.
• Dynamic Mouse Cursor: A custom, animated mouse cursor enhances user interaction, changing its appearance when hovering over elements.
• Immersive Sound Design: Sound plays a crucial role, with a comprehensive bank of sounds triggered by user interactions to create an immersive feel.
• AI-Generated Voiceover: The introductory voiceover was created using AI, with Joseph Barry providing the initial voice input, which was then processed to achieve a robotic, sci-fi tone.
• Easter Eggs: The site includes hidden elements, such as a flashing dot that initiates a "reboot" sequence, causing missing items in an itinerary to appear.

Innovative Technical Solutions

The project involved overcoming several technical hurdles to achieve its unique visual and interactive elements.

• 3D Cityscape Alternative (Video Timestamping):
  • Challenge: The initial consideration was between using WebGL for the cityscape or a more cost-effective alternative.
  • Solution: Joseph opted for a complex video timestamping technique. This involves using video playback to simulate 3D rotation.
  • Mechanism: A video is used to control playback between rotation points, creating a dynamic and "alive" feel that closely resembles 3D without the full complexity and potential performance issues of WebGL. This was a strategic decision based on project parameters.
• Dynamic Button Notches:
  • Challenge: Creating responsive buttons with intricate notched designs was technically difficult.
  • Solution: A dynamic button system was developed using data attributes. These attributes allow for changing specific elements of the buttons, enabling them to adapt and respond effectively.
• Responsive Frame Elements:
  • Challenge: Ensuring that frame elements were responsive and visually consistent was a significant challenge.
  • Solution: This required careful structuring and potentially custom code to ensure the frames adapted correctly across different screen sizes.
• Element Responsiveness:
  • Challenge: Making small, detailed elements with dots and notches respond well across devices was complex.
  • Solution: This involved meticulous attention to detail in the Webflow build and potentially custom code to ensure these elements functioned as intended.
• Mobile Optimization:
  • Achievement: A major success was the website's exceptional performance on mobile devices, which surprised even the client, Ledger. This highlights the effectiveness of the development approach.
• Glitch Effect Versatility:
  • Mechanism: Data attributes assigned to GSAP allow for versatile application of the glitch effect. This effect can be triggered by hover or click events, making it easily adaptable.
• Sound Triggering with Howler.js:
  • Tool: Howler.js, a JavaScript audio library, was used to manage and trigger sounds.
  • Implementation: The script allows for unloading instances of multiple sounds and assigning attributes to elements to trigger specific audio cues. This provides fine-grained control over sound playback and volume.
  • Asset List: A comprehensive list of all sounds used in the project was maintained.
• Asset Hosting (GitHub & JS Deliver):
  • Challenge: Hosting large assets like videos and audio files within Webflow can be problematic.
  • Solution: Joseph utilizes GitHub and JS Deliver to host assets. This method converts GitHub repository links into full, live URLs, leveraging a CDN for fast loading.
  • Benefit: This approach is cost-effective, as it avoids the expenses associated with services like Amazon S3.

Webflow Build and Page Structure

The development process in Webflow involved a blend of custom code and strategic structuring.

• Limited Use of Webflow Components/Variables: Due to the highly custom nature of the build and the extensive use of custom code, traditional Webflow components and variables were less utilized. The complexity of the site meant that a more bespoke approach was necessary.
• Layering System for Page Structure:
  • Concept: Instead of a linear, section-by-section approach, pages are structured as a system of layers.
  • Implementation: Elements are stacked on top of each other, with the intro layer sitting over select elements, and frames acting as individual, controllable units.
  • User Experience: This layering creates the illusion of multiple screens within a single view, contributing to a singular, cohesive experience. For example, what appears as three distinct screens might be three layers within one Webflow page.
  • Navigator Complexity: The Webflow navigator reflects this layering, showing numerous positioned elements that need careful management (e.g., using z-index and display: none) to avoid interference.

Collaborative Process and Project Timeline

Building such an ambitious project required a significant collaborative effort and a considerable timeframe.

• Team Collaboration:
  • Joseph Barry: Design and overall vision.
  • Nenna Amadi (Flux Academy Student): Developer of the year, responsible for significant technical development, including the cityscape, GSAP animations, and complex button interactions.
  • Ledger's Team: Creative Director, Head of Copy, 3D Artist, and Project Manager.
• Iterative Design and Development:
  • Process: The project followed an iterative process where design and development occurred concurrently. Initial ideas were explored with dummy visuals, allowing for creative evolution as assets were developed.
  • Benefit: This approach enabled further creative ideas to emerge and allowed for a deeper understanding of what was technically feasible, leading to boundary-pushing results.
• Project Duration: The project took approximately one year to complete.
• Workflow: The process involved consistent, steady progress with periods of waiting for asset creation and integration.
• Content Integration: This included extensive work on copy pages, ensuring tone and language accuracy, and collaborating with the copywriter.
• Asset Direction: Joseph provided detailed direction to the 3D artist regarding asset requirements and explored creative possibilities together.
• Budget: The project cost was approximately £40,000 sterling (around $50,000 USD).

Key Arguments and Perspectives

• Trusting Intuition and Creative Freedom: Joseph emphasizes the importance of trusting one's intuition, especially in projects that venture into the unknown. He advocates for clients to allow designers creative freedom, stating that with the right feedback and direction, this can lead to exceptional results.
• Pushing Boundaries: The project is presented as an example of pushing the boundaries of what is possible in web design, inspiring others in the Webflow community.
• Value of Collaboration: The success of the project is attributed to the strong collaborative effort between Joseph's team and Ledger's internal team.

Conclusion and Takeaways

The Ledger website exemplifies a highly innovative and technically sophisticated approach to web design. Key takeaways include:

• Strategic Use of Technology: Employing techniques like video timestamping and custom code (GSAP, Howler.js) to achieve complex visual and interactive experiences efficiently.
• Importance of Detail: The meticulous attention to micro-interactions, sound design, and visual polish significantly elevates the user experience.
• Iterative and Collaborative Development: A flexible, iterative process and strong teamwork are crucial for tackling ambitious projects.
• Creative Freedom and Trust: Empowering designers with creative freedom, within a framework of clear communication, can lead to groundbreaking outcomes.
• Cost-Effective Asset Hosting: Utilizing platforms like GitHub and JS Deliver for asset hosting offers a practical and economical solution.

The project serves as a testament to the potential of Webflow when combined with custom code and a visionary design approach, demonstrating that award-winning, boundary-pushing websites are achievable.