📝 CSS-Tricks 208: Notes on prototyping, the backdrop-filter CSS property, and Rough Notation

View this newsletter on the web.

[Robin]: This week I realized that I wasn’t solving a design problem at the right level. Here’s the scene: I found myself sat my desk, struggling to add some new features to this one page. Yet there’s so many directions that we could take this design! We could do this thing on hover, or when you a click an icon, or when you do x, y, and z. This feature started to haunt me. It felt like I was no longer sweating the details in Figma and moving the pixels around, but the pixels were beginning to move me around, the details sweating me.

My designs fell apart as I realized I had no idea what I was doing.

I needed to change my approach. I closed my designs in Figma and moved into the browser. I needed to prototype this idea in a more realistic environment. I relearn this again and again. Sometimes a prototype is the only way you can convince yourself that an idea is terrible or that an idea is the most fantastic thing you’ve ever thought of before.

This particular design I was working on was based entirely on hover states and as soon as I cobbled the prototype together I realized I’d made a terrible mistake. This design wouldn’t work at all, it just doesn’t feel right and no visual design or mockup could show me that in Figma. Because visually things looked just fine.

Sometimes we need to move around a bit when designing interfaces. We need to take things from a static environment into a dynamic one to see how realistic they are. Most of the time we probably don’t need a complex prototyping environment to figure out this one tiny problem, but sometimes we absolutely do. It’s the only way to see if this darn thing will work.

A reminder to myself: sometimes the feeling of a design is far more important than visuals alone.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s