Live data from Hacker News

LiftKit – UI where "everything derives from the golden ratio"

chainlift.io

51–60 of 160 posts

Re: LiftKit – UI where "everything derives from the golden ratio"

#51

Earlier quoted context omitted.

I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left. Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of it…

Thanks for the tip! That actually was the first idea but I didn't end up doing it, for some reason. Thanks for the suggestion.

... just to be a (hopefully helpful) pedant:

If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.

Re: LiftKit – UI where "everything derives from the golden ratio"

#52

Interesting idea, but I haven't found a compelling reason that phi is inherently superior, aesthetically speaking. Seems more like a marketing spiel. That said, it still looks good.

You don't actually HAVE to use phi. That's just the default global scale factor. You're correct that it's kinda marketing spiel. I figured I needed an angle to stand out in the crowded design system world and now I'm paying the consequences in this absolute roastfest, lol.

The only real reason I use phi is because it's very useful in asymmetrical typography scaling. At small type levels, differences in font size are more visually apparent than at large sizes. In other words, 14px vs 16px looks more noticeable to me than 38px vs 40px. So, my goal was to find a rem coefficient that would provide large jumps at large sizes, but I could also use the square root of it to derive smaller increments. I tried phi on a whim one day and realized I liked it.

I also went to apple's HIG and looked at the type specs for MacOS and put them into a spreadsheet. I found that the proportions of line height to font size hovered around 1.272 (which is the sq root of 1.618, or phi). Then I found similar patterns in the ratios of difference font sizes to each other (I think. It was back in 2022).

I also did a bunch of personal tests where I'd try to eyeball line heights and padding and stuff without snapping or looking at the metrics, and my preferences kept landing around golden ratio proportions. Biased? 100%. But I haven't got access to focus groups, and every time I asked my boyfriend to try it for me he'd be all like "please get a job you promised you'd work on your resume today"

So then I looked into other research. I can't find the study because I unpublished the article where I linked it, like a dumbass, but studies have shown that laypeople can tell the difference between abstract art based on rules like fractal symmetry and the golden ratio versus art made by children or animals at a rate of about 60% accuracy. Im on my phone right now but if you're curious I'll gladly look it up for you. I took that to mean "well, if we're entering an age of AI generated interfaces, then eventually we'll need to distill the essence of what looks good into certain mathematical principles so that there's a quantifiable "baseline" for quality that models can rely on. Golden ratio!" (Note: I do not know how AI actually works)

Finally, I got obsessed with that damn material button. There were ads on BART for some Google thing showing a button and it just looked off center to me. It haunted me for weeks. I couldn't stop looking at it. So I thought I'd try finding a reliable way to achieve the correct optical offset, but programmatically, so a designer wouldn't just have to do eyeball every button every time.

So, it's not totally baseless. But it's not a magic number either.

Re: LiftKit – UI where "everything derives from the golden ratio"

#54
post #16

Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, cli…

Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!

I also had a lot of trouble figuring out which side was supposed to be which.

Don't even have a button. Just put both items next to each other.

Re: LiftKit – UI where "everything derives from the golden ratio"

#55

I thought this was an unhinged parody of a design site, kinda surprised it's a real thing. Unfortunately the design isn't for me, things look off center and the overall "weight" of components feels off.

Agreed. I’ve spent considerable time on scale-based design, and 1.618 always feels too large of an interval.

1.618 is complete nonsense that people hang on to because they want it to be true. It doesn't stack up, neither in ancient Greek times, nor in the renaissance, nor today. It's a dumb idea that needs to die.

Re: LiftKit – UI where "everything derives from the golden ratio"

#57
post #45

Earlier quoted context omitted.

Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!

If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again! I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The val…

No, the opinion is valid. And it's not hard to do, what you're describing. In fact, it's easier than what I've actually done here.

Re: LiftKit – UI where "everything derives from the golden ratio"

#58
post #45

Earlier quoted context omitted.

If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again! I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The val…

The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you. I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you. I likewise tucked that little trick into my belt -- it com…

Whoa that's fascinating! Thank you so much for sharing this, I never would've thought of it that way at all.

Re: LiftKit – UI where "everything derives from the golden ratio"

#59
post #16

Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, cli…

Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!

I'd like to imagine I know which of each example were better designed, but the handle going to the side opposite from the label was making me second guess. Move handle away from the label to reveal is how I took it, so hope that's what you intended.

OTOH, I'm on touch screen (iPad/iOS26/WebKit) and it didn't go up and down, it went side to side.

As other feedback, the dumpster fire and deprecation warnings in the docs make me want to try this. I find builder-to-builder candor refreshingly helpful, treating your doc reader like an actual partner instead of like a euphemism. Appreciate your same candor throughout these comments.

Chainlift > Agency Services > Team menu option seems inert.

I'm not on LinkedIn all that much but I'm there.

Re: LiftKit – UI where "everything derives from the golden ratio"

#60
post #45

Earlier quoted context omitted.

If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again! I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The val…

The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you. I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you. I likewise tucked that little trick into my belt -- it com…

If you put two proofs side by side, you can view from the right distance then uncross or cross your eyes like a stereogram till they converge, which makes differences shimmer.

Instant "spot the difference" solve.

// Long time in print and digital agency

Post reply on HN