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.
Related Insights
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.
When building his own site, MDS doesn't aim for pixel-perfect Figma files. He gets the design to 85% completion, establishing the core direction, and then moves to code to finalize details like hover states and animations where the interactive "feel" is paramount.
As a solo builder, you can't afford to perfect every UI element. Instead, identify the 20% of components that drive 80% of user interaction and obsess over their details. For the rest, use libraries and minimal systems to ensure consistency without getting bogged down.
Product teams often use placeholder text and duplicate UI components, but users don't provide good feedback on unrealistic designs. A prototype with authentic, varied content—even if the UI is simpler—will elicit far more valuable user feedback because it feels real.
Not all parts of an application require the same level of design polish. Founders must develop an "editorial eye" to invest heavily in the core user experience (a 9/10) while accepting "good enough" for less critical areas like settings pages (a 5/10).
Shift the mental model of a portfolio from a simple gallery of projects to an immersive experience. Designer Matt Sellers focused on making his homepage itself a demonstration of his craft and attention to detail, encouraging exploration even if visitors never click into a specific case study. The medium becomes the message.
An unexpected or curiosity-inducing action in the first frame—like a fisherman chopping a rubber worm—can stop a user's scroll more effectively than any spoken words or on-screen text, making the initial visual paramount.
In design thinking, early prototypes aren't for validating a near-finished product. They are rough, low-cost "artifacts" (like bedsheets for walls) designed to help stakeholders vividly pre-experience a new reality. This generates more accurate feedback and invites interaction before significant investment.
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.
When exploring an interactive effect, designer MDS built a custom tool to generate bitmap icons and test hover animations. This "tool-making" mindset—creating sliders and controls for variables—accelerates creative exploration far more effectively than manually tweaking code for each iteration.