Design Journal
7/17/2025
Really like the video-demo design of fiddle.is [archived link].
The main idea is something like:
- Demo videos are cool! But - they’re not very glanceable, they’re information sparse until you commit to watching - how do you get info quicker?
- Classically, the answer is start with a catchy hook - but that always feels kinda clickbaity etc
- Fiddle’s approach: The bottom of the screen has ~all the relevant product screenshots, plus a list of the features - you get this seamless combination of a) demo video, b) list of features
7/17/2025
I just built a tool to generate OpenAI-style gradients from the last message: https://gradients.venki.dev/
I’m still pondering over Justin Wang’s blog post, in particular:
But we can also apply any color scale to these values. I generated randomized scales by creating color stops with varied locations, hues, saturations, and brightness, and then interpolating a smooth blend between them.
How do you pick good randomization parameters here? His results look quite good, and I don’t understand how you get them, specifically to make these interesting color scales.
My top guess would be “just mess around” ~ try diff randomization params, see which produce the best outputs, cherry-pick the best results.
How much of this is inspo from others or de-novo insight too, I wonder?
These gradients didn’t feel quite right for OpenAI’s visual identity so never made it to production, but they’re nevertheless lovely to look at.
It’s pretty interesting that he decides that the heightmap + colorscale generation flow doesn’t fit with the visual identity, but the ellipses gradient does. Why?
My closest explanation is that the ellipses gradient feels “softer” in its transitions, whereas the heightmap gradient tends to have these more strongly defined shapes. The heightmap gradient feels more about shapes while the ellipses one feels more about colors?
But why is OpenAI’s visual identity the latter? Was this something someone actually wrote down at some point? Why does it important cohere with the other bits?
ie: What sorts of other brand identity decisions would the ellipses gradient fit more or less with?
I asked o3 out of curiosity, and this is what it spat out (not super compelling):
ㅤ | Height‑map noise (blue example) | Layered ellipses (pink/orange example) |
Geometry | Derived from Perlin‑noise iso‑contours → recognisable “blobs” and contour ridges. | Pure radial gradients whose edges feather out smoothly. |
Visual emphasis | Shape first (the colour merely labels altitude). | Colour field first; forms dissolve into one another. |
Perceived energy | Slightly restless/topographic—good for “terrain”, “data”, “generative art”. | Calm, enveloping, “human‑centric tech”. |
Circle vocabulary | Irregular shapes; circles appear only by accident. | Repeated circles/ovals echo OpenAI’s Blossom mark and the circular ‘O’ in the word‑mark. |
7/16/2025
Thinking about procedurally generated random gradients: https://justinjay.wang/methods-for-random-gradients/
Reflecting on it here: https://x.com/__venki__/status/1945580280666099788
6/23/2025
Liked the neo-brutalist style for a short project recently, a la: https://comparevoiceai.com/
Mostly just asked Claude for ~ playful, white background, bright colors, zero border radius, thick borders/cards, then eventually asked it what the style was.
Why do I like it? There’s something about it that coheres well with the simplicity of the project.
I’ve been feeling more often that design often feels nicest when it’s aligned with the spirit of what’s being designed.
6/17/2025
If I were to try do design something today, what are the tools in my belt?
ShadCN for sure - along with probably Next.js etc. I’ve been liking TweakCN - but haven’t used it in practice yet. Reweb is an interesting Tailwind/ShadCN builder, but I’ve not ended up finding it that useful.
The biggest one is probably just copying people’s websites. My personal website draws from one by Judah, I’d probably just mix and match from other entries in this journal.
You could copy from Dribbble/Behance. Looking at the actual website tho helps you eg: replicate exact CSS whenever you’re stuck.
I don’t still have a great source of “textures”/”backgrounds” for websites. Perhaps you could generate them via Midjourney etc. I found this ages ago, but it’s not the modern vibe. In general, a source of ~tonnes of generations for LLMs used in products could be helpful. Some sorta prompt catalogue.
AuraChat and 21st.dev seem like reasonable collections of components. ChatGPT recommended shadcnblocks, but seems so-so.
Shots seems like the tool for Social Media graphics.
6/15/2025
Thinking a lot about “density” in design. Here’s a quick metric - open a website, count the number of words that show up above-the-fold on macOS.
I like more dense websites over less dense websites, by a lot.
6/9/2025
I really dislike scroll-jacking, particularly in websites ostensibly targeting developers.
Think of a website as two: a) as advertisement, b) as documentation
Very often, scroll-jacking adds better polish to the former, but it makes it much more painful as the latter. If you’re trying to jump back and forth to ponder over various specific pieces of information, it makes it much harder to get at.
Fancy animations are ornamentation though, so I presume this convinces some people that this is a serious/big company worth working on.
6/9/2025
Turbopuffer [archived] is currently my favorite designed website. I emailed their designer about it, and he pointed me to this article on paperclip-punk, which calls out Turbopuffer as an example. I actually don’t like most of the designs the article calls paperclip-punk though, eg: Cloudflare Agents, Supabase}.
Why? Here’s the author’s definition of paperclip-punk:
Here are a couple of visual tenets of paperclip-punk: light, bright website (no darkmode), clean exploded-view diagrams, interactive graphs, minimalist animation, font derivatives from the Satoshi, Inter, Söhne, Berkeley Mono, or JetBrains Mono families, industrial blue-print-y colors (#0050FF HEX blues, #F38020 HEX oranges), integrated real-time data and interface-level responsiveness, infinite on-hover tooltips, developer “playgrounds” or “sandboxes”, and a rejection of passivity: the process of interacting with the visuals teaches you about their underlying meaning.
And I kinda agree - but my biggest issue is that everyone else doing it feels like a LARP.
A core reason Turbopuffer’s design appeals to me is this sense of coherence between the design and the content. The design signposts “this is a technical document”, and the content in fact delivers on this!
Turbopuffer puts up all the raw stats you care about front-and-center. If you don’t understand these stats, or what a vector database is, or why this is relevant, this website really isn’t for you!
Turbopuffer is serious, non-fluffy.
Cloudflare Agents for example - pretty unserious! Who’s going to use Cloudflare Agents? Not clear to me. [related tweet]