Skip to main content
Shop Talk Show

658: Andy Bell on Working with Clients, Writing, and Building Courses for Web Builders

62 min episode · 2 min read
·
Chris Coyier,Andy Bell

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.

Know someone who'd find this useful?

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.

Browse all Shop Talk Show transcripts →

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 — Free

Keep Reading

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?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime