When working on a complex website, de-risk the development of new, intricate features by building them in a completely separate repository. Use "gray boxing" to nail the feel and get approval on the isolated prototype before attempting to integrate it into the main, complex codebase.
The viral Amy website originated from a simple, powerful vision: visualizing a full day of product use with scrolling gradients. This core concept, established before any design or code, was the key to its success, proving that a strong narrative can be more impactful than micro-interactions.
An unconventional, animation-heavy launch website, like Amy's, serves a specific strategic purpose: capturing attention and putting the product on the map. Even if it's later replaced by a more conversion-focused design, the initial "noise" and brand recognition it generates can be invaluable for a new company.
Reverse the traditional design process by focusing on the "liveliness" of a site from the outset. While visuals and copy can remain low-fidelity placeholders, investing in high-fidelity transitions and motion early on establishes the core interactive feel, which is often the most crucial part of the user experience.
The process for creating innovative 3D web experiences isn't linear. It's a constant, messy jump between specialized software: ideating and modeling in a 3D tool like Blender, creating static compositions in a design tool like Sketch, and then bringing it all to life with code.
The creative process involves the painful decision to discard good ideas. An interesting scrollbar concept for the Amy website was fully explored but ultimately scrapped because it risked taking too much attention away from the main product. This highlights the importance of ruthless focus on the primary user goal.
Instead of starting in Figma, prototype complex web animations using "gray boxing," a technique from game development. By using basic shapes and code (like HTML/CSS/3JS) to define the core flow and feel, you can validate the interaction's energy before investing in detailed visuals.
Elevate web interactions beyond standard animations by adapting real-time physics techniques from game development. Using libraries like "Wiggle Bones," designers can create dynamic, responsive objects (like the Amy balloons) that feel alive, providing a signature "fidget toy" experience that canned animations can't replicate.
