Welcome back.

We're getting pretty technical over here at UX Tools. The reason for this is two-fold:

1. Tools are breaking down more technical barriers for designers
2. The number of tools heading this direction are increasing dramatically

I can understand designers who push back against this. But I've gotten a few angry comments from designers for simply exploring these tools at all.

The work we do here at UX Tools, from our interviews to our annual surveys, is in service of helping you decide which tools are worth your time and keep you informed about what's ahead in design.

Yes, I'm optimistic about design tools and the future of building software.

No, I don't think you need to share my opinions.

I'll continue to do the research and share my findings. All I ask is that you read, remain curious, and try things for yourself.

Like WebGL.

- Tommy (@designertom)

The Wireframe

• Evolution from novelty to practical UX tool
• When to use WebGL (and when to avoid it)
• Designer-friendly tools and implementation strategies

From "Woah, Cool" to Actually Useful

When WebGL first hit the scene, it was mostly used for flashy demos and experimental sites that won awards but crashed browsers. Today, it's matured into a technology that solves real design problems.

I recently spoke with George Hastings, creator of Unicorn.Studio, about his journey from traditional product design at IDEO to creating a tool that democratizes WebGL for designers.

His story captures this evolution perfectly:

"It sounds silly now, but I distinctly remember what started me on the path to Unicorn.Studio," George told me. "I don't even remember why, but I wanted to draw a path that had a gradient fill. No tools I had could do it. I found a Photoshop tutorial and it was 12 minutes long."

That frustration - "this would be so easy to build with code - why don't we have better tools for this kind of design?" - led him to build the first prototype of what would become Unicorn.Studio.

This pattern repeats across the industry: designers identifying specific problems that traditional tools can't solve efficiently, then turning to WebGL.

The benefits go beyond just looking cool:

• Fluid interactions that respond naturally to user input (and look rad doing it)
• Reduced load times compared to video-based solutions (when implemented correctly)
• Contextual feedback that guides users through complex interfaces
• Spatial understanding in product visualization and configuration

The old perception of WebGL as just a technology for flashy effects is outdated. Today's implementation is about strategic enhancement of the user experience... when it makes sense.

When WebGL Actually Makes Sense (and When it Doesn't)

Not every project needs WebGL, and misusing it can create more problems than it solves. So how do you know when it's the right solution?

George Hastings provided a straightforward framework that I think is worth adopting:

You should consider WebGL if:

1. You want dynamic motion that responds to user interaction
2. You need interactivity beyond what CSS can provide
3. The client wants to "make it pop" with distinctive visual treatment
4. You're spending too much time trying to compress the file size of your "vibey background video"

This framework provides a practical starting point, but we also need to consider the tradeoffs.

A perfect example is how Stripe uses subtle WebGL effects in their payment elements - enhancing the experience without overwhelming it or creating performance issues.

WebGL implementations can vary dramatically in performance across devices and browsers - something designers often overlook while working on their $3,000 MacBook Pros.

The right approach depends on your project type:

Hell yes for marketing and branding sites:

• Hero sections and key brand moments
• Product showcases and configurators
• Immersive storytelling elements

Probably not for transactional and utility interfaces:

• Checkout flows
• Data-heavy dashboards
• Critical utility functions

One of the biggest misconceptions is that WebGL is an all-or-nothing proposition. The most effective implementations often use it selectively for specific elements, while keeping the rest of the interface conventional.

Use George's advice: "Do as much as you can with as little as you can." This is crucial for balancing visual impact with performance.

Together with DOVETAIL

Calling all customer-obsessed people:

If you want to learn how the best product teams use customer insights to drive innovation, or how AI is eating the research world, this is where you need to be.

Insight Out 2025 is Dovetail’s conference where Jakob Nielsen, Microsoft AI’s UX Research Head, and OpenAI’s GTM lead are sharing from the ground-level.

• Two days in San Francisco
• 1000+ people who ship products.

With day one already sold out, secure your spot for day two now and get an extra 30% off with code DESIGNERTOM30.

If you can’t make it in person, register to tune in online.

Grab your tickets →

The Designer's WebGL Toolkit

The most exciting development in the WebGL ecosystem is the emergence of tools that make these capabilities accessible to designers without coding knowledge.

No-Code WebGL Design Tools

Here's a rundown of the leading options in 2025:

​Unicorn.Studio​

• Why it's dope: Over 35 WebGL effects that can be mixed and stacked; lightweight output (36kb gzipped)
• Best for: Enhancing existing designs with visually striking animations and interactive elements
• Integration: Easily embeds into Framer, Webflow, or custom websites

​Spline​

• Why it's dope: Browser-based 3D design with real-time collaboration; intuitive interface for modeling
• Best for: Designing interactive 3D elements and immersive experiences
• Integration: Exports to various formats including React components

​Polygonjs​

• Why it's dope: Node-based approach inspired by VFX apps; deep customization options
• Best for: Creating procedural 3D scenes with complex behaviors
• Integration: Export options for Webflow, Shopify, and other platforms

​Framer​

• Why it's dope: Combines visual design with code-based customization; WebGL-powered effects
• Best for: Prototyping and building responsive websites with interactive components
• Integration: Direct web publishing and React component export

Understanding the Technical Foundation

While you don't need to code to use these tools, understanding the underlying power of similar frameworks gives you street cred and context. Worth knowing:

• ​Three.js: The most popular JavaScript library that simplifies WebGL; powers many design tools including Unicorn.Studio
• ​Babylon.js: A powerful 3D engine particularly well-suited for complex applications and game-like experiences
• ​A-Frame: Built on top of Three.js, makes creating VR/AR experiences easier through a HTML-based approach

7 Critical WebGL Implementation Tips

Even with designer-friendly tools, WebGL requires careful implementation to avoid creating problems for your users:

1. Implement progressive enhancement
   • Always build a functional non-WebGL experience first
   • Add WebGL as an enhancement layer, not a requirement
   • Use feature detection to provide appropriate fallbacks
2. Test across device tiers
   • Don't just test on your high-end machine
   • Use actual mid-range and budget devices for testing
   • Pay special attention to older mobile devices
3. Implement preloaders and lazy loading
   • Show a loading indicator for WebGL elements
   • Defer non-essential WebGL content until after critical page elements
   • Consider a "lite mode" option for users on slower connections
4. Respect user preferences
   • Honor reduced motion settings in the operating system
   • Provide manual controls to disable animations
   • Consider battery and data usage for mobile users
5. Monitor memory usage
   • WebGL can leak memory if not properly managed
   • Dispose of unused resources and textures
   • Implement throttling for animations when not in view
6. Optimize assets relentlessly
   • Compress textures appropriately for web delivery
   • Use lower polygon counts than you think you need
   • Implement level-of-detail techniques for complex scenes
7. Set explicit size boundaries
   • Limit canvas size to prevent excessive rendering
   • Use viewport-relative sizing with sensible maximums
   • Consider disabling effects at smaller viewport sizes

How to Think About WebGL Performance

Most designers have no idea what to measure when it comes to WebGL performance. Here's the no-fluff breakdown of what actually matters:

Frame Rate & Performance Budgets

• Target: 60 FPS (16.7ms per frame budget)
• Warning Sign: Anything over 90 FPS is probably wasting battery
• Measure it: Use Chrome's FPS Meter or the performance.now() API

Draw Calls (aka How Hard You're Working the GPU)

• Mobile Limit: Keep it under 300 calls/frame
• Desktop Limit: Stay under 1000 calls/frame
• Fix it: Batch similar geometry together

Texture & Memory Usage

• Reality Check: 4K textures use 4x more memory than 2K (32MB vs 8MB)
• Critical Threshold: Exceeding 80% VRAM causes major performance drops
• Quick Win: Use compressed textures (BASIS Universal = 90% size reduction)

Power Consumption Killers

• Anti-Aliasing: 4x MSAA = 40% higher power draw vs none
• Better Alternative: Post-process FXAA (30% less power)
• Screen Fill Rate: 10% reduction = 15-20% power savings
• Pro Move: Pause rendering when tab is inactive

Optimization Cheat Sheet

• Use medium precision shaders on mobile (2-4x speedup)
• Target 30 FPS for static scenes (saves battery)
• Use geometry LODs (50% triangle reduction past certain distances)
• Implement buffer recycling to avoid garbage collection stutters

You can use tools like Chrome's Dev Tools, WebGL Inspector, or Spector.js to get a clear look at the metrics we've mentioned here, but someone should create a designer-friendly WebGL performance tool and let me know when it's ready.

The Bottom Line

WebGL's gone from flashy demo toy to a legit tool designers can actually use if they're smart about it. Plus, you don't need to write a single line of code anymore.

Just remember: with great power comes the responsibility to not make your users' devices burst into flames. Use the framework George recommended, pick the right tool for your specific project, and always test on devices that aren't your capable MacBook Pro.

Do it right, and WebGL takes your designs from "meh" to memorable. Do it wrong, and you're just another designer who prioritized flash over function.

You messing around with any of these WebGL tools? Hit reply and tell me what you've built.

See you next week,

Tommy

Enjoying this newsletter? Let me know here.​