level up some UI chops

A Formula for Getting Unstuck

Let Inspiration Strike

Everybody run into snags. You probably know the feeling well - you’re trying your hardest to figure something out, but solid ideas just aren’t coming. You take a shot at one meh solution after another as the frustration rises. You’re stuck.

Something they never tell you is that even the most experienced professionals get stumped on a regular basis. In fact I think “what are you currently stuck on?” would make a fantastic interview question. So when you get stuck, don’t get discouraged. Instead see it as a sign that you’re challenging yourself and progressing in your skills. But what should you do in the moment when you’re stuck? How do you get unstuck?

Paul Simon Knows Your Feels

You know the song Cecilia by Simon and Garfunkel? Paul Simon had this catchy tune his in mind but was having a rough time coming up with lyrics for it. He was stuck. I can imagine him in a striped shirt and leather jacket, plucking notes on his guitar, experimenting with a bunch of meh phrases. Eventually something clicked and he used this lack of inspiration as the inspiration itself. He wrote Cecilia to lament about that feeling of helplessness when your source of inspiration is fleeting. His lyrics make a lot of sense when you realize who Cecilia is - the patron saint of music according to the Catholic tradition.

Cecilia, you’re breaking my heart
You’re shaking my confidence daily
Oh Cecilia, I’m down on my knees
I’m begging you please to come home

cecilia painting

St Cecilia, by painter Nicolas Poussin

Paul got unstuck by writing about the problem he was facing. If a celebrated songwriter who composed around two hundred songs can get stuck, so can you and I.

I Know Your Feels

The other day I was trying to solve what I felt like should have been a fairly easy problem. I wanted to create a sweet laptop sticker layout using hexagons and characters from my UI mastery games Flexbox Zombies and Grid Critters.

I started sketching some ideas on my iPad and was feeling pretty good about it.

sketching ideas out

I wanted to give the main characters like Meg some bigger stickers, yet still have all the hex shapes fit together nicely. One idea I tried was lengthening Meg’s hexagon shape like this:

tall hexagon shapes

But that left an awkward little gap near the bottom. An idea to fix that would be to make the tall shape even taller:

tall hexagon shapes

But this still had a problem where you wouldn’t be able to place any stickers underneath the tall one and have them fit all perfectly together.

I played around with about a dozen increasingly crappy ideas before realizing I was frustrated and stuck. I put my mac to sleep, rubbed my eyes, and decided to try something different.

The Experiment

The first thing I did is write down as concisely as possible the problem I was trying to solve. I wrote “make an awesome layout for my laptop stickers, that fans will be proud to show off”. Just writing it down seemed to relieve some stress and give me clarity.

After that I asked myself “what constraints am I operating under right now?”. I wrote them down:

I was going to keep working at it, but we had a family outing planned that I didn’t want to miss. So I closed my laptop and took my wife and kids to enjoy the fall festivities at Cornbelly’s. While launching my kids on the zip lines and devouring terrible fair food I didn’t think about my layout problem once. But when we passed by this shoe cubby I couldn’t help but stop and stare:

shoe cubby

And just like that, something clicked. My mind drew lines around these hexagon shapes in a way that would be absolutely perfect for my layout:

inspiration strikes

Because I had clarified what I was trying to solve, I had defined something tangible for my brain to chew on in the background. Because I had questioned my constraints, I was free to discard many of them. I didn’t have to lengthen a hexagon to make a bigger sticker: I could just use two vertically. Or three in an L-shape. And they’ll always fit together perfectly. I didn’t have to use pointy tips up, that’s just the way I’m used to seeing them on most people’s laptops. Thanks to this strike of inspiration I’m no longer stuck on the project and am excited to show you the final result when they’re done.

The Formula

I didn’t realize it at the time, but this is the same way I got unstuck the time I had a crazy webgl perf issue when I first shipped Flexbox Zombies. Having learned from these and other experiences I’m now able to extract a formula:

  1. Write down the precise problem to be solved
  2. List and question all the constraints you’re operating under (both real and imagined)
  3. Walk away, rejuvenate, process the problem in the background

If you do this there’s a good chance you’ll randomly think of something when you least expect it. It also helps to talk through the problem with a friend, get their take on things. Just remember that inspiration takes time to strike and you can’t rush it. But if in a day or two if you still haven’t solved it, come back to the problem fresh and try again. It’s important to keep experimenting - that’s what gives your mind more raw input materials to work with. You may hit another wall or three and that’s totally fine. Just repeat these steps as many times as it takes. Don’t give up, you’ll figure it out.

What Are You Stuck On?

If you’re like me and Paul Simon - feeling like inspiration just isn’t coming your way - try out these steps. You’ll soon get unstuck and be back to making sweet progress.

Master CSS Grids right from the start by playing this new interactive Story Course. You'll learn the ins and outs of Grids one fun level at a time, while saving an adorable alien life form from certain destruction.