joshpuckett's banner

joshpuckett

@joshpuckett • 40,501 subscribers

Designing at @IterationDesign, teaching at https://t.co/Jn9brli34Y. Previously led teams at Dropbox, Wealthfront, Groupon & more.

Shorts

40k. I am grateful for each and every one of you. As a thank you, I've made 40% off for the next 40 hours. If you've heard about it or been waiting to join, now is the time!

40k. I am grateful for each and every one of you. As a thank you, I've made 40% off for the next 40 hours. If you've heard about it or been waiting to join, now is the time!

138,408 görüntüleme

are we still allowed to have fun on the internet in 2026? 🎶

are we still allowed to have fun on the internet in 2026? 🎶

382,112 görüntüleme

Means & Methods is now live on A collection of practical techniques to achieve excellence in interface design, covering 100+ topics across 11 chapters, with plenty of interactive examples and code. New members welcome; enjoy!

Means & Methods is now live on A collection of practical techniques to achieve excellence in interface design, covering 100+ topics across 11 chapters, with plenty of interactive examples and code. New members welcome; enjoy!

701,083 görüntüleme

When you're designing anything of even moderate interface interactivity or complexity, state machines are a great way to help you manage that. I make these all the time, and they're remarkably useful little tools.

When you're designing anything of even moderate interface interactivity or complexity, state machines are a great way to help you manage that. I make these all the time, and they're remarkably useful little tools.

121,681 görüntüleme

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

As software gets easier to make, the products that stand out will be the ones crafted with uncommon care. If that's the kind of work you want to do, I'm sharing everything I know:

1,082,525 görüntüleme

Here's an actual design engineering tip: Safari sucks at updating multiple WebGL video textures in the same frame, especially during interactions or animations on initial page load. To keep things buttery you'll wanna pause texture uploads during motion e.g: isMoving ? holdLastFrame() : gl.texImage2D(video)

Here's an actual design engineering tip: Safari sucks at updating multiple WebGL video textures in the same frame, especially during interactions or animations on initial page load. To keep things buttery you'll wanna pause texture uploads during motion e.g: isMoving ? holdLastFrame() : gl.texImage2D(video)

36,171 görüntüleme

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

Pica is a fully native app for managing your fonts on MacOS. Organize into collections, test color themes and logos, watch folders, manage what's installed, and much more. Available for free at

529,217 görüntüleme

I was digging around the HyperCard 1.0.1 floppy image tonight, as one does, and found a curious private file: FONT 31756. It's a font file containing all of the glyphs for HyperCard's tool palette, likely created by Kristee Kreitman and Marge Boots (credited in the app for Graphic Art). I can't believe they were using this technique back in 1987, although it seems Bruce Tognazzini invented it with MouseText two years prior (!). I was moved, as I often am by the work of our field's forebears, so created this little tool for everyone to explore it here:

I was digging around the HyperCard 1.0.1 floppy image tonight, as one does, and found a curious private file: FONT 31756. It's a font file containing all of the glyphs for HyperCard's tool palette, likely created by Kristee Kreitman and Marge Boots (credited in the app for Graphic Art). I can't believe they were using this technique back in 1987, although it seems Bruce Tognazzini invented it with MouseText two years prior (!). I was moved, as I often am by the work of our field's forebears, so created this little tool for everyone to explore it here:

51,722 görüntüleme

I think so many concepts in design need to really be felt and played with, not just shown. That's why Interface Craft is full of interactive figures that demonstrate topics. I always look forward to making them; this is one of my favorites!

I think so many concepts in design need to really be felt and played with, not just shown. That's why Interface Craft is full of interactive figures that demonstrate topics. I always look forward to making them; this is one of my favorites!

138,628 görüntüleme

Invoices used to be works of art. Stumbled on an old folder of references I'd collected years ago for some forgotten project. I love that it was en vogue to feature an illustration of your factory or building on them.

Invoices used to be works of art. Stumbled on an old folder of references I'd collected years ago for some forgotten project. I love that it was en vogue to feature an illustration of your factory or building on them.

18,124 görüntüleme

It's always a good day to iterate

It's always a good day to iterate

19,682 görüntüleme

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

This is Bloom, an iOS inspired pull down menu for the web. Fully configurable, interruptible, and themeable. Watch the demo and grab it below.

254,049 görüntüleme

$One of my favorite details for Interface Craft is one of the least used: the invoice tool. Customers can enter the unique tax or business info they need, see what they paid in localized currency along with any discounts, and download a PDF. Thankfully Stripe makes this all fairly easy. It's something only a fraction of users see, but I think great design is sometimes about facilitating all of the edge cases to keep accounting and tax departments happy worldwide!$

One of my favorite details for Interface Craft is one of the least used: the invoice tool. Customers can enter the unique tax or business info they need, see what they paid in localized currency along with any discounts, and download a PDF. Thankfully Stripe makes this all fairly easy. It's something only a fraction of users see, but I think great design is sometimes about facilitating all of the edge cases to keep accounting and tax departments happy worldwide!

67,651 görüntüleme

A few people have asked how I make these animations. The answer is it's just code and a screen recording. I’ll make little jigs like this interactive timeline to dial things in, but for me I find this is still the fastest way to create and refine exactly what I want.

A few people have asked how I make these animations. The answer is it's just code and a screen recording. I’ll make little jigs like this interactive timeline to dial things in, but for me I find this is still the fastest way to create and refine exactly what I want.

53,125 görüntüleme

Just added four new articles and videos to Interface Craft covering advanced animation ideas. There's also an updated DialKit skill to help you take advantage of the new Timeline feature. Available in the library now:

Just added four new articles and videos to Interface Craft covering advanced animation ideas. There's also an updated DialKit skill to help you take advantage of the new Timeline feature. Available in the library now:

29,222 görüntüleme

Three levels of popover interaction design:

Three levels of popover interaction design:

130,597 görüntüleme

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

Added two new Practical Demonstrations to including a deep dive on the Library Card designer and inventing a new kind of control ∞ Enjoy!

59,794 görüntüleme

This is your weekly reminder: you're probably not iterating enough.

This is your weekly reminder: you're probably not iterating enough.

33,371 görüntüleme

I wanted to give everyone a preview of what's in the Library, so I put 3 live articles on If I was smarter I'd probably have asked for your email first, but sometimes you just gotta do it for the love of the game, not growth.

I wanted to give everyone a preview of what's in the Library, so I put 3 live articles on If I was smarter I'd probably have asked for your email first, but sometimes you just gotta do it for the love of the game, not growth.

42,264 görüntüleme

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

Here's a tip I don't see enough: make your animations interruptible. You should be able to immediately trigger close events without waiting for the animation to complete. Motion makes this super easy. This helps your interfaces feel durable, snappy, and well considered.

101,682 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

DialKit has a new home: Give the wheel a spin to see some of the amazing and creative ways folks are using it 🎛️

DialKit has a new home: Give the wheel a spin to see some of the amazing and creative ways folks are using it 🎛️

227,976 görüntüleme • 3 gün önce

Somewhere along the way, we lost the art of writing a love letter. I think we should bring it back. Letters of Love is my quick weekend project towards that end. A collection of notes across time that I hope inspires you to write to your beloved today.

Somewhere along the way, we lost the art of writing a love letter. I think we should bring it back. Letters of Love is my quick weekend project towards that end. A collection of notes across time that I hope inspires you to write to your beloved today.

64,690 görüntüleme • 11 gün önce

I love how Jony and Flavio predicted the precise, immediate response we're seeing to the Luce. It's almost like they're good designers who know a thing or two about design! Clip from Cleo Abram's interview, a must watch.

I love how Jony and Flavio predicted the precise, immediate response we're seeing to the Luce. It's almost like they're good designers who know a thing or two about design! Clip from Cleo Abram's interview, a must watch.

382,249 görüntüleme • 3 ay önce

Interface Craft is now open. It’s a growing library of resources for those who are committed to crafting experiences and interfaces with uncommon care. I hope you’ll consider joining:

Interface Craft is now open. It’s a growing library of resources for those who are committed to crafting experiences and interfaces with uncommon care. I hope you’ll consider joining:

560,972 görüntüleme • 6 ay önce

DialKit now has visual timeline editing for all your fancy animations. Supports loops, groups, staggers, compound animations, and scrubbing (even with springs). I can't wait to see what ya'll create with it! npm i dialkit

DialKit now has visual timeline editing for all your fancy animations. Supports loops, groups, staggers, compound animations, and scrubbing (even with springs). I can't wait to see what ya'll create with it! npm i dialkit

92,838 görüntüleme • 1 ay önce

To achieve excellence, you must build a culture of critique.

To achieve excellence, you must build a culture of critique.

70,561 görüntüleme • 1 ay önce

I truly cannot wait to share this with you all.

I truly cannot wait to share this with you all.

200,366 görüntüleme • 7 ay önce

You need to be going rogue more as a designer.

You need to be going rogue more as a designer.

46,060 görüntüleme • 1 ay önce

Vibe coded this little app for my dad on the flight home yesterday. Let's him easily generate personalized stories for the kids he tutors in reading every week. Fun little ship to sneak in before the new year!

Vibe coded this little app for my dad on the flight home yesterday. Let's him easily generate personalized stories for the kids he tutors in reading every week. Fun little ship to sneak in before the new year!

176,087 görüntüleme • 8 ay önce

I got some questions on this, so I decided to fully embrace my content creator era with a video reaction.

I got some questions on this, so I decided to fully embrace my content creator era with a video reaction.

67,382 görüntüleme • 2 ay önce

Polished up Locale some more tonight: - change font size, weight, and italic - view on dark/light/image background - save fonts to a short list (per session) - inspect all styles per family - jump to alphabetical section (hit any letter key)

Polished up Locale some more tonight: - change font size, weight, and italic - view on dark/light/image background - save fonts to a short list (per session) - inspect all styles per family - jump to alphabetical section (hit any letter key)

99,287 görüntüleme • 5 ay önce

I can't believe over 30k of you willingly follow me on here. I am both honored and horrified. To celebrate, is 30% off for the next 30 hours. Join members from over 114 countries who are committed to growing and designing with uncommon care.

I can't believe over 30k of you willingly follow me on here. I am both honored and horrified. To celebrate, is 30% off for the next 30 hours. Join members from over 114 countries who are committed to growing and designing with uncommon care.

83,989 görüntüleme • 4 ay önce

As you level up, you have to be able to navigate ambiguity. The best way to do that is to develop frameworks and conceptual models to aid you in finding clarity:

As you level up, you have to be able to navigate ambiguity. The best way to do that is to develop frameworks and conceptual models to aid you in finding clarity:

18,852 görüntüleme • 27 gün önce

DialKit 1.3 is live! - Stable IDs for sharing DialKit state across pages - Persistent values, presets, and panel state - Programmatic getters and setters - Multiple DialKit instances now combine into one panel - Bug fixes and perf improvements › 𝚗𝚙𝚖 𝚒 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

DialKit 1.3 is live! - Stable IDs for sharing DialKit state across pages - Persistent values, presets, and panel state - Programmatic getters and setters - Multiple DialKit instances now combine into one panel - Bug fixes and perf improvements › 𝚗𝚙𝚖 𝚒 𝚍𝚒𝚊𝚕𝚔𝚒𝚝

43,002 görüntüleme • 2 ay önce

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

DialKit is a framework for live tuning any parameter in your app. See changes instantly, test different value sets with presets, then copy a prompt for your agent. Available for free today.

98,397 görüntüleme • 6 ay önce

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

105,000 görüntüleme • 7 ay önce

Tonight's refinements: - visualize custom brand colors - upload a logo to preview it next to a wordmark - focus on a single font style full screen - keyboard jumping snaps vs animated scroll Enjoy!

84,658 görüntüleme • 5 ay önce

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

To really dial in animations and transitions, pay close attention to the origin objects animate from. Here's an example I just noticed: Vercel has a lovely little toolbar on a project's analytics page, but bc the icons animate from their center, it feels ever so slightly off.

103,216 görüntüleme • 7 ay önce

Fons is a gem, but I found it telling that not a single reply actually asked for specific feedback. Here’s what I mean:

Fons is a gem, but I found it telling that not a single reply actually asked for specific feedback. Here’s what I mean:

32,188 görüntüleme • 2 ay önce

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

Onboarding was extra fun to design and build for this one 🕺 It's a moment of delight but it's also functional. It gives Pica a couple valuable seconds to index all of your fonts* so when you click through everything is sorted, loaded, and instantly available. This is an example of how 'design and engineering are really the same.' *unless you're one of those sickos with like 10k+ fonts. Then unfortunately you'll sit with a spinner for a few more seconds 😅

54,965 görüntüleme • 4 ay önce