Building Design Gut Instinct

Ever looked at a website and thought “wow, that’s beautiful” but couldn’t explain why? That’s where design gut instinct comes in.

This is a tip from Learn UI Design, a design course I’m taking. To be clear, I most definitely am not a UI design expert! There’s always something lacking in my own designs that I can’t quite put my finger on.

Sure, I could use a UI library like Bootstrap to quickly create a good-looking site and save countless hours of learning what’s basically a new career. But sites that use these libraries have a template-y “smell”.

I want to design rad sites that make someone go “ooohhh pretty”. And to do that, I’m working to improve my gut instinct.

Here’s how you can do it too:

Find a website with a banging design. If you’re not sure where to find these sites, I’ll link to some resources at the end.
Open up your tool of choice to store notes. I’ve found Figma to be the best tool for this exercise. Here’s what my Gut Instinct Figma File looks like. You’re welcome to clone it, and modify!
Write down what you liked about the website, take screenshots as well.
Explain why you liked certain elements. Try to be as specific as you can. It’s okay to not know the terminology. But dig deeper than “cool font”.
Observe elements that you might want to repeat in your own designs. And if there’s an element that, by changing, would make the design look worse. Note that down.

Having done this process for a handful of sites, I can tell I know more about design today than I did a week ago. Each analysis takes me about 10-15 minutes, and after a few sites I start seeing patterns emerge. And even though I don’t know all the design-y words, I write down what I feel when I see something I like.

Let me share a concrete example.

While looking at Fly.io, I loved the header font. It was a serif font (Mackinac) that, for me, evoked a sense of trustworthiness but also whimsy.

Fly.io header font: Mackinac. It says "A public cloud built for developers who ship"

Now that I know about this font, I can use a tool like Typewolf to see what other sites are using it, and if they evoke the same emotion.

Our goal is to build a library of patterns that we can draw from. We want to know what patterns work well, and why they work. The other benefit of documenting these patterns is to build an inspo board. When you start designing your own site, you’ll have a well of inspiration.

If you’re wanting to build your design gut instinct, give the above steps a try and let me know what you come up with! You can tag me with your notes / Figma file on Bluesky.

Resources

Here’s a list of aggregators that share beautifully designed sites. Note: beautifully designed, sometimes not great UX.

To more easily figure out what font a site uses, I use What font browser extension.