A thumbnail studio for my portfolio
Post
When I set out to create my very first product design portfolio, I thought it would be easy. I had ten years of great design to draw from, and it was just a matter of getting it all organized and online. I went so far as to tell my partner that I’d be done in two days. I won’t say what I did on the second day, but I will tell you about the thumbnail studio I built well past the 30th day.
By that point, I had already gone through all five stages of portfolio: the initial claim that it would only take a day and subsequent claims that it would only take one more day (denial), digging through a decade of old Figma files (anger), rebuilding my 1998 Angelfire website from the Wayback Machine instead of trying to finish case studies (bargaining), remembering I’d have to post on LinkedIn when I finished the portfolio (depression), and logging in and posting the portfolio anyway because I need a job (acceptance).
That rebuild of my very first website was only my second-biggest detour. It pales in comparison to the thumbnail studio I built into the homepage itself. And it all started with a single thumbnail.
The index of my portfolio is a grid of work from the past ten years: desktop apps, design systems, marketing pages, charts, and dozens of phone screens. When I had finished digging everything out of my Figma files, out of the ancient HTML files, out of some Sketch and Illustrator files, I found myself with 181 thumbnails on that grid.
At this stage, all the thumbnails were cropped using CSS object-fit, and it was very rudimentary. Most of them looked terrible. Take the “Reviewing a brokerage account” screen. It’s a tall phone screen from an agtech product. object-fit leaves us with just the top portion of that screen. In other words, the fake status bar, a back button, and the screen title. Desktop screens fared a little better, but headlines got cut in half and any designs with white backgrounds (which is most of them) blended into the page background to such a degree that you couldn’t tell where one screen ended and another began.
The card on my homepage
Obviously, this wasn’t going to cut it. But fixing 181 thumbnails one at a time is absolutely the kind of work I’ll do anything to avoid. To escape such hell, I figured I’d build a tool with an agent that could do the work automatically. The first version of the solution involved a script that generated a layout and derived a nice muted background color for the designs to sit upon. Each thumbnail was presented through a simple HTML interface with buttons for Keep or Change and a text field for any comments I might have.
It was still slow, but considerably more tolerable, and after my first pass through the candidates, I had already approved 128 thumbnails. A round of revisions and my second pass through kept 49 more. For those scoring at home, that left only four thumbnails. After those, I’d be done with the wretched business of choosing thumbnails for my homepage.
My notes on them, though, read like a grumpy art director muttering to himself.
- Terrible thumbnail.
- most boring thumbnail
- Practically unreadable
- There are simply too many phone screens. we need some kind of variety.
- still lacking and hard to read
- it’s just so small and it doesn’t look like much
- Needs to be more of a cartoon
- boring thumb
I gave it a few more tries to fix what was lacking, but I started to grow frustrated with needing to prompt an agent to make every little adjustment. When you want to nudge a phone screen up until the useful rows sit in the middle of the frame,
So I dropped Josh Puckett’s DialKit into a local page, planning to drag a few sliders on four cards and get back to my two-day portfolio.
I quickly set the brokerage thumbnail right.
The first change was to set the background to a pale green.
Next, I scaled the screen size up well past the edges of the frame.
Finally, I nudged the screen down so the top of the phone peeked out from the bottom of the frame. It finally showed the thing the screen was about.
But I couldn’t help myself. One control begat another. Now I wanted layouts for tilting several screens into a spread. Once I had layouts, I realized that it would be nice if I could wrap these screens in some minimal browser and phone chrome. Then it was inner mats and drop shadows, then palm and window-blind shadow overlays, then filters like halftone, dither, and ASCII. To give the backgrounds more life, I added a folder of 55 photographs I had taken myself. I’d kept those photographs for years in a Google Photos album called Textures, looking for any excuse to use them, and this was finally it. Thinking that might not be enough variety to choose from, I also added a huge collection of paper, wall, and gradient textures. Finally, I had the agent wire up the full range of one-click style presets. Now the thumbnail studio would present an enormous gallery of thumbnail options for each and every one of the three remaining thumbnails I needed to finalize.
Looking at the preset gallery and the sidebar next to it, I realized I had rebuilt most of Dann Petty’s Reframe inside my portfolio repository.
The trouble with the thumbnail studio is the same problem I’ve had with every tool that helps you to create mockups. It shows only one thumbnail by itself in the middle of a dark or light expanse. In those conditions, any thumbnail that is sufficiently well composed will look good. So you spend your ten minutes creating this perfect thumbnail, get it exported, place it where it’ll actually live on your portfolio, and then immediately reject it because it clashes with the visuals surrounding it.
And that’s when it struck me. The thumbnail studio is just code for drawing the thumbnail at the center of that dark background, but there’s nothing stopping it from drawing that same thumbnail on my homepage itself.
A few quick messages to the agent and I could now open my homepage with the URL parameter ?edit and each thumbnail would become editable in place. Click the yellow pencil on a thumbnail and the DialKit panel opens on the spot. Drag a slider, pan the image, or jump through the 33 presets and the thumbnail changes right before your eyes, completely in the context of your actual portfolio.
When I’ve tweaked a card just right, I just have to click Use as pick to save the settings. The agent helped me rig up a build script that automatically reviews the picks and creates pristine WebP and AVIF files for the live site. Now, whenever I need to tweak any thumbnail, I just open the studio in place.
Needless to say, the whole portfolio undertaking took more than two days.