658: Andy Bell on Working with Clients, Writing, and Building Courses for Web Builders
Episode
62 min
Read time
2 min
Topics
Productivity, Design & UX, Software Development
AI-Generated Summary
Key Takeaways
- ✓Client Control Through Process: Set Studio maintains project control by delivering designs only in browser prototypes with Loom explanations, never sending static Figma files. They conduct long discovery phases to understand requirements, then present direction rather than asking permission, which prevents clients from derailing projects with uninformed decisions.
- ✓Decision Log System: For challenging clients, implement a read-only decision log documenting who made each decision, when, and what was decided. This creates accountability, makes stakeholders think before deciding, and provides grounds to increase budget when clients reverse their own documented decisions, especially useful with multiple decision-makers who communicate poorly.
- ✓Design Token Architecture: Build themeable systems using semantic design tokens that reference core tokens through CSS custom properties with double fallbacks. This allows complete brand customization by changing a few variables rather than writing specific override CSS, making future redesigns or multi-brand implementations significantly faster to implement and maintain.
- ✓Browser-Native Layout Philosophy: Use flexible layout systems with CSS Grid and Flexbox that work with browser capabilities rather than fighting them. Let the browser handle responsive behavior through hints and bounds instead of rigid breakpoint-based layouts. Design decisions often change in-browser because what works in Figma doesn't always feel right when implemented with actual web behavior.
- ✓Publication Standards for Trust: Only recommend techniques after battle-testing them in real client projects, not theoretical demos. This approach builds reader trust by ensuring all published content represents proven, production-ready solutions. Avoid covering bleeding-edge features until they have genuine use cases and stable browser support, focusing on immediately applicable knowledge over novelty.
What It Covers
Andy Bell discusses his agency Set Studio's browser-first design approach, delivering prototypes instead of Figma files to clients, and building Piccalilli as a publisher for practical web development courses focused on battle-tested techniques over bleeding-edge features.
Key Questions Answered
- •Client Control Through Process: Set Studio maintains project control by delivering designs only in browser prototypes with Loom explanations, never sending static Figma files. They conduct long discovery phases to understand requirements, then present direction rather than asking permission, which prevents clients from derailing projects with uninformed decisions.
- •Decision Log System: For challenging clients, implement a read-only decision log documenting who made each decision, when, and what was decided. This creates accountability, makes stakeholders think before deciding, and provides grounds to increase budget when clients reverse their own documented decisions, especially useful with multiple decision-makers who communicate poorly.
- •Design Token Architecture: Build themeable systems using semantic design tokens that reference core tokens through CSS custom properties with double fallbacks. This allows complete brand customization by changing a few variables rather than writing specific override CSS, making future redesigns or multi-brand implementations significantly faster to implement and maintain.
- •Browser-Native Layout Philosophy: Use flexible layout systems with CSS Grid and Flexbox that work with browser capabilities rather than fighting them. Let the browser handle responsive behavior through hints and bounds instead of rigid breakpoint-based layouts. Design decisions often change in-browser because what works in Figma doesn't always feel right when implemented with actual web behavior.
- •Publication Standards for Trust: Only recommend techniques after battle-testing them in real client projects, not theoretical demos. This approach builds reader trust by ensuring all published content represents proven, production-ready solutions. Avoid covering bleeding-edge features until they have genuine use cases and stable browser support, focusing on immediately applicable knowledge over novelty.
Notable Moment
Bell explains his agency stopped sending design comps to clients entirely, delivering only browser prototypes after discovery. Designs evolve significantly during browser implementation because features like position sticky and natural layout behavior cannot be adequately represented in static design tools, making in-browser prototyping the only authentic design medium.
Episode Transcript
Hey there. ShopUp Miniacs. You are listening to another episode of the ShopUp Miniacs. All about friend and web design, development, everything like that. With me is Chris Coyier. Hey, Chris. Hey. How are you doing? We actually have another special guest, long time friend friend of the show, friend in real life, Andy Bell. How are you doing, Andy? Good to have you. Yeah. Good to have you here again. It's good. Yeah. Funny. It's just it's it's fun to watch watch Andy's story evolve. You, got into to, you know, studio work and client work, who knows, a long time ago now, but run a studio called setstudio, literally set.studio, killer killer URL. Can't forget it. Killer cross tag. Yeah. Yeah. Fair enough. I heard the fonts weren't cheap either. Is it one of those domains where it's, like, nine dollars the first year and 199 the next year? I have to remortgage every year to renew it. Yeah. Yeah. I bet. Yeah. I have to we have to make a little case internally for pen dot new every year because I feel like we have all kinds of dumb expenses at Copen, but I kinda it's my pet one. You know? Like, I like that URL, and I see it enough because I'm like, you know, I'm a little more I'm man of the community. You know? I use all the time, Chris. Yeah. So please There you go. I'm gonna cut out that clip. It's just for you. I'm like, I will put this on my personal credit card if I have to. We are keeping it. I almost don't know how to make a pen beyond pen dot new. Now that I have my pen dot new. My sound bite's longer now. Yeah. Even the spreadsheet, she's not new. You know? Like, it's Oh my god. They're so useful. Those demands. We had some people at the Discord, like, brainstorming what else we could do with it. And I was like I was like, you need to simmer down because we're not the fastest at shipping. But it was like it was like it was like pen dot new slash and then, like, any string. And they're like, if you're logged in, it will fuzzy search your pens to find the closest matching pen and make a template from that to use, you know. So you could just be like, you know, pen dot new slash d three, and it would find, like, your best d three pen and and then start start the new pen from now. It's like, actually, it's like an amazing idea. But Kinda like mdn.io/ whatever MDN thing you're looking for. Are you blowing minds right now, Dave? Oh, you're not used to that. Yeah. You go mdn.io/ whatever observer or, what's the one I don't remember? Intersection observer, and it'll just pull up go take you straight to the docs. It looks like it does a hop on duck …
Get the full transcript (11,249 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 59-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
Lenny's Podcast
Why cultivating agency matters more than cultivating skills in the AI era | Max Schoening (Head of Product, Notion)
May 3
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
Accidental Tech Podcast
682: Medium Core
Mar 12
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“Set Studio maintains project control by delivering designs only in browser prototypes with Loom explanations, never sending static Figma files”
“Set Studio maintains project control by delivering designs only in browser prototypes with Loom explanations, never sending static Figma files”
other
- PiccalilliBy guest
“building Piccalilli as a publisher for practical web development courses focused on battle-tested techniques over bleeding-edge features”
company
- Set StudioBy guest
“Andy Bell discusses his agency Set Studio's browser-first design approach, delivering prototypes instead of Figma files to clients”
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
Lenny's Podcast
May 3
Why cultivating agency matters more than cultivating skills in the AI era | Max Schoening (Head of Product, Notion)
Accidental Tech Podcast
Mar 12
682: Medium Core
The Product Experience
Mar 4
Lessons from Games, Big Tech, & Hollywood - Laura Teclemariam (Product Leader)
ZOE Science & Nutrition
Mar 3
Recap: How to build strength from the comfort of your home | Andy Galpin
How I AI
Feb 23
“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime