The last 20% of a design

We had a great Shift Nudge live session this past Thursday and lots of really good designs and websites submitted.

This is one of my favorite parts about Shift Nudge.

Getting live, actionable feedback directly on what you’re working on, with someone pointing out the exact area to focus on, is one of the best ways to improve quickly.

I absolutely love being able to provide that feedback for people on these calls.

One of the designers was working on a mobile layout with a list of videos for a work project.

We were working through the details.

The size of each thumbnail.

The space between the title and description.

Whether the rows needed a divider or just a little more breathing room.

All of those small, nuanced decisions accumulate to create polish.

You have to get obsessive about the details.

The negative space, the size of the image, the gap between everything.

As we worked through the layout, another question came up...

What happens when this mobile list goes wider on desktop screens?

Maybe the list becomes a grid of cards.

Maybe the images need to get bigger.

Maybe the spacing that feels right on a phone starts feeling awkward on a laptop.

You can mock up each version.

You can build an elaborate auto layout setup in Figma.

But at a certain point, I want to grab the edge of the browser and see what happens.

For years and years, when designing things for myself, I’d often design them to about 75–80%, then begin coding and tweaking with CSS and JavaScript.

Because interaction design can only happen when you’re interacting with the thing you’re designing.

This is the reason I taught myself to code to begin with.

I wanted to be able to do this.

Previously, you couldn’t build those interactions unless you knew how to code. Now we have tools that let us do that.

Back on the call, we talked about how this designer could connect an AI tool to the layout she’d started, then add some adjustment sliders to tweak it and dial it in based on the feel.

You could ask it:

Now you can resize the browser, adjust the controls, and watch the relationships change.

You can see what it looks like on mobile, desktop, and all the sizes in between. Then you can tweak it and adjust it while you’re actually using it.

Today I saw Pavel Durov share a post from Telegram’s design team that opened with:

“The mockup era is over.”

​In the video, you can see items circling the avatar, spinning faster, and opening up when they’re pressed.

All of those rich details of the interaction design are brought to life in a coded prototype.

For feature concepts submitted to the team, they’re asking for working code accompanied by a demo video.

Static mockups and videos without code behind them are no longer enough.

That’s where we’re headed, and that’s basically where we already are.

I’m sure it won’t be long before more product design teams expect this, especially when you can spend a small amount of time having an agent build it for you.

Then you can prompt it, refine it, and adjust it.

If you want to get better at interactions, you have to design the interactions.

You still have to notice the awkward spacing.

You still have to decide whether the transition feels right.

You have to tweak them and adjust them while you’re testing them. And you can’t test them unless you build them.

This week, take one screen you’re already working on and get a working version into your hands.

Keep it small.

A list is plenty.

Try longer titles.

Adjust the spacing.

Resize the browser.

Tweak it, refine it, polish it.

Design every detail!

Happy designing,