Handheld : CSS Slider Toy
Jan 30, 2025
Physical-Digital Interfaces
As part of my first assignment in the Handheld Creative Tools course, I investigated CSS transform properties for sliders. I got carried away with the assignment and it became an experiment in pushing the boundaries of what's possible for me as a designer with limited coding experience.
Coming from a product design background, I was curious: how closely could I translate my design vision into functional code? Could I bridge the gap between the precise interactions I envision and their technical implementation? While this process led me to adapt and incorporate code from various sources rather than writing everything from scratch, it represents a realistic approach for designers venturing into development.
In the spirit of transparency, it's important to acknowledge that not all the code in this project was written entirely by me. Instead, I embraced a process that felt approachable as a designer, combining various tools and resources to achieve my intended output. This approach reflects an increasingly common reality in our field—where understanding systems and knowing how to effectively use available tools can be as valuable as traditional coding expertise.
Twitter Discourse or Shifting expectations?
This project challenged me to find an approachable path between pure design and technical implementation. My process embraced lots of AI tools while maintaining creative control over the final output. What emerged for me was a methodology for designers like me to bring our vision to life without necessarily mastering traditional coding.
Process Overview
My approach deviated from the traditional linear design-to-development handoff, instead embracing a more fluid workflow. I moved through hand sketches to high fidelity Figma designs, and then directly into code using AI-assisted development tools and real-time browser debugging. The process concluded with deployment on Netlify, creating a continuous chain from concept to live implementation.
Process for Creating the Artefact
This workflow challenges the conventional design process (booo Design Thinking) where designers create extensive documentation—paper prototypes, wireframes, high-fidelity mockups, and detailed interaction specs—only to face significant translation losses during development handoff.
It's interesting to me how this approach actually echoes the web design culture of the early 2000s, where designer-developers crafted experiences directly in code. Today's AI-assisted tools and modern frameworks are perhaps enabling a return to this more integrated approach, reducing the energy spent on documentation artefacts that don't directly translate to frontend implementation.
Maybe in the future the boundaries between design and development might blur again, leading to more efficient and cohesive digital product creation.
Design Phase
Drawing inspiration from the Nintendo Game Boy's tactile power switch and Teenage Engineering's hardware design, I wanted to challenge today's flat, minimalist interface trends. Rather than conform to the "SaaS-ification" of web design, my initial inspiration and sketches explored ways to bring physical presence and tactile feedback into the digital, focusing particularly on the power switch mechanism and slider controls.
Mood board and Inspiration
Initial Sketch
Moving to Figma, I wanted to explore elements of skeuomorphic design through extensive (excessive) experimentation with gradients, shadows, and depth. While uncertain about how much of this detailed styling could translate to code, I deliberately drudged on to create an interface that felt physically present and engaging, even if it meant testing the limits of technical feasibility.
Final Figma Designs
Drawing from these references, I developed a design system centered around a dark mode interface that emphasizes data visualization, employing monospaced typography for technical information and grid-based layouts for organized hierarchy. The design uses subtle animations for state transitions and maintains a minimal color palette with strategic accent colors to highlight important information and relationships.
This visual direction aims to create an experience that feels authoritative and futuristic while remaining engaging and accessible, helping users navigate through the complex web of relationships and identifiers that define our food systems.
Development Phase
With a limited technical background in HTML/CSS and some experience with p5.js, I approached development through an experimental lens. My previous work with p5.js, particularly a sketch exploring shape transitions (demonstrated in the attached GIF), provided a foundation for understanding the animation logic I wanted to achieve. This familiarity with pseudo-code helped bridge the gap between design intent and technical implementation.
P5.js Animation
The development process leveraged Cursor's AI capabilities, feeding it my Figma designs, sketches, and animation references to generate initial code implementations.
This wasn't a one-shot solution—it required multiple iterations of prompting and refinement, each time providing additional context and examples to get closer to my design vision. When the AI-generated code needed fine-tuning, particularly for element positioning and animation timing, I turned to browser developer tools and Live Server for real-time adjustments. This hybrid approach of AI assistance and manual tweaking allowed me to achieve precise control over the interface's look and feel while working within my technical capabilities.
Cursor IDE & Browser DevTools
Deployment Phase
The final step of bringing the project online proved surprisingly straightforward through Netlify. After connecting my GitHub repository, deployment was largely automated—a process that felt almost too simple given the complexity of what was happening behind the scenes. This ease of deployment, while convenient, highlighted how much of the underlying infrastructure remains a black box to me as a designer.
Netlify Dashboard
This phase opened up new questions about web development that I'm looking forward to explore further. While I successfully deployed a working prototype, I realize there's much more to learn about hosting environments, managing different deployment stages (development versus production), and handling state management at scale. These areas represent the next step in my journey to bridge the gap between design and development—understanding not just how to create interfaces, but how to deliver them effectively to users.
The Final Product
The finished slider interface was compelling (Live Demo). The power switch and slider controls successfully capture the tactile feel of physical interfaces while maintaining smooth, responsive interaction in the digital space. Looking at the final result alongside the original Figma designs, I'm impressed by how closely I managed to preserve the intended visual fidelity, particularly the subtle gradients and shadow work that give the interface its dimensional quality.
Side-by-side comparison: Figma design vs. Final implementation
While working on precise alignments and animations required some manual intervention, the end result demonstrates that designers can achieve custom interfaces without deep coding expertise. I'm quite surprised that the transition animations on the power switch, the subtle shadow interactions on the slider, and the overall feeling of depth were captured by the AI.
Rethinking My Relationship with Design & Code
This project has shifted my perspective on what's possible as a designer in today's landscape. When I started, I viewed my limited coding knowledge as a barrier between my design vision and its implementation. Now, I see it differently. The ability to bring my designs to life didn't require mastering traditional coding—instead, it demanded clear thinking about systems, thoughtful documentation of design intent, and strategic use of modern tools.
What excites me most isn't just that I could create a functional interface, but how the process felt more natural and connected to my process than I expected. The traditional gap between design and development—where detailed mockups often lost their soul in translation—seemed to shrink. Working with AI assistance felt less like "coding" and more like an extension of the design process, where I could focus on the experience I wanted to create rather than getting lost in syntax.
These experiences have left me wondering about the future of design implementation. Maybe we're approaching a time where the emphasis shifts from writing code to understanding systems and patterns—much like how digital tools transformed other creative fields. While I can't predict how this will shape the broader industry, I know it has changed how I'll approach future projects. The boundary between what I can envision and what I can create feels more permeable now, and that's incredibly empowering as a designer.