joshpuckett
@joshpuckett • 36,894 subscribers
Designing at @IterationDesign, teaching at https://t.co/Jn9brli34Y. Previously led teams at Dropbox, Wealthfront, Groupon & more.
Shorts
Videos
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 😅
joshpuckett54,515 views • 2 months ago
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.
joshpuckett103,073 views • 6 months ago
New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!
joshpuckett82,065 views • 6 months ago
