正在加载视频...

视频加载失败

You probably need a bit more rhythm in your life. My quick pro tip for improving your web designs is to choose one major and minor spacing unit for vertical rhythm, and align everything to it by default.* *this is also how you teach agents to design productively

84,272 次观看 • 13 天前 •via X (Twitter)

29 条评论

gsimone 的头像
gsimone13 天前

yeah I don't know why we have sort of left grid and vertical rhythm kinda out of the discourse for so long, they are literally a cheat code

joshpuckett 的头像
joshpuckett13 天前

I mean some of us still actually design with care and intention 🤣 but yes I’m sharing cause it feels like a long forgotten spell that’s 101 level

gsimone 的头像
gsimone13 天前

yeah @sheherenow_ is the only high profile designer I follow that's still grid obsessed - as in sharing them, maybe more use them

joshpuckett 的头像
joshpuckett13 天前

@sheherenow_ real ones remember The Grid 👴

Dave Fano 的头像
Dave Fano13 天前

This is awesome. Probably overthinking it a little bit, but how do you think about the size of those? Do you subscribe to like the four pixel, eight pixel round numbers, the proportions of those, or just pick something and stick with it?

joshpuckett 的头像
joshpuckett13 天前

A bit of both; for web stuff where proportions are larger I like multiples, e.g. 24pt minor and 72pt major. For apps it’s a lil more complicated and that’s where 4/8pt multiples serve you well (so far as values) but same principles loosely apply

Dave Fano 的头像
Dave Fano13 天前

🙏🙏🙏

Greg Washington 的头像
Greg Washington13 天前

I haven't heard anybody talk about vertical rhythm in digital since @gt very necessary

joshpuckett 的头像
joshpuckett13 天前

@gt There’s a reason he’s one of the GOATS 🐐

Martin Bavio 的头像
Martin Bavio13 天前

Gonna leave this in here:

Eamin 的头像
Eamin12 天前

Clear systems like this help both designers and agents work smarter

Dave Fano 的头像
Dave Fano13 天前

are you adding this to dialkit?

joshpuckett 的头像
joshpuckett13 天前

you could already do this by just saying "visualize a 24pt minor grid and 72pt major grid on my page. add a toggle to dialkit to show and hide it"

Dave Fano 的头像
Dave Fano13 天前

🤩 on it!

Howard y. 的头像
Howard y.12 天前

looks good

Gabriel 的头像
Gabriel13 天前

When you resize your screen, do you lose the perfect vertical and horizontal alignment? How do you think about responsiveness?

joshpuckett 的头像
joshpuckett13 天前

Nope. I think about it the same as anything else: do as best you can to make it great and Just Work

Gabriel 的头像
Gabriel13 天前

Thanks for sharing!

Anthony 的头像
Anthony13 天前

I smell a new addition to Interface Craft

joshpuckett 的头像
joshpuckett13 天前

i touch on this in but ya, probably deserving of it's own article

Anthony 的头像
Anthony13 天前

True, that’s a long one with a lot of great gems that get lost in the shuffle.

Andrea Cau 的头像
Andrea Cau12 天前

Why weren't you one of my professors in university? 🥲

Rakibul 的头像
Rakibul12 天前

thats true. thanks for sharing Josh

JayBorda 的头像
JayBorda12 天前

Can I get that grid system?

Wes 的头像
Wes12 天前

never in all my life have I ever used a PROPER grid in web design. Simplifying it down to one major and one minor makes me wanna try it. Sounds more like a constrained (in a good way) sandpit.

Tyler Stegall 的头像
Tyler Stegall13 天前

This is something I’ve fallen out of practice with on the web. I’d love to read more from you on this subject, specifically getting back into this way of thinking.

outloop 的头像
outloop13 天前

wow

Rusty Meadows 的头像
Rusty Meadows13 天前

Also true with type! It's a mad man!

joshpuckett 的头像
joshpuckett13 天前

lol ask @krispuckett about this 🤣

相关视频

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!

joshpuckett

82,659 次观看 • 8 个月前