When we designed Chrome, since minimalism was our thing and screens used to be small, A LOT of time was spent on the total vertical space - thin titlebar, slightly bigger tabstrip, and a large toolbar. Lots of discussion, lots of questions
Telling people the height ratios between them followed the golden ratio was a very convenient way to shortcut the bikeshedding and get to "aha, very nice"
The trick was it didn't follow the golden ratio at all because the golden ratio is not some magic number that leads to balance and peace - lighting, rounding, color, and visual strength all dramatically outweigh it
My favorite genre of graphic design is when you take a logo and work backwards to show the "very deeply thought about" construction, completely made up after the fact. The golden ratio is useful in that with a bit of fiddling you can fit pretty much anything to it. This is like catnip for "spiritual" types.
Ah, explanations that are treated as justifications without actually justifying anything.
“Vertical rhythm” in website layout. Utter nonsense. Valuable in print layout (for adjacent columns or double-sided paper), completely useless in digital (unless you have side-by-side columns with headings or pictures mixed in, but this is seldom seen outside print, partly because the web doesn’t support it well).
“Modular scales” in choosing font sizes. Typically worse than utter nonsense, because you want heading levels to be distinctive, and modular scales will harm this by forcing lower heading levels to be too small.
Force all your app icons into a rounded square or squircle or circle, because consistency. No! Now you can’t find anything easily. Android was so much better before that nonsense started.
Monochrome icons deliberately designed to look the same. Now they’re unmemorable. Colour was a useful signal.
(This comment is generic; I’m not saying anything about LiftKit here, for or against.)
What was the reasoning about not implementing vertical tabs much, much earlier? I use them now in the canary builds, but on 4k 32" screen it is not that critical as it was on the small 16:9 full hd screen. The vertical space used to be much scarcier than the horizontal.
"lighting, rounding, color, and visual strength" along with "clarity, content-focused" etc. are used as hollow buzzwords just as much as "golden ratio"
The whole minimalism/flat movement from iOS 7 and Google's Material and Microsoft's Metro crap was frankly a lazy and weak copout, a give-up on trying to make nice looking UI that could also be functional.
Why is it that sci-fi has always had such beautiful UI since Star Trek but the real world is still so boring?
Hi everyone, I'm the creator of LiftKit. This project is EXTREMELY early and, as everyone has pointed out, not ready for production use. It's a solo project I work on in my free time. I'm a self-taught, so a lot of the weird choices you're seeing can be attributed to the decisions of someone who had never built something like this before.
LIFTKIT IS FREE AND OPEN SOURCE. The website's just out of date.
I love the project -- even if I agree with a lot of the critique in this thread. Critique that is very high quality, professional feedback that you should take as a very big compliment.
I think every Front End developer or designer dreams of this idea(+) at some point, but you're the madlad who actually did it. It feels like you've posted an implementation of everyone's baby and tugged at our heart-strings ;)
It's fantastic, keep going.
(+) a truly consistent design system that Just Works. See GEB for why not :(
I like your design idea in principle but you said in the reddit thread 7 months ago in regards to rendering the components that "Besides the landing page itself, not yet. That's the next priority". Now you don't mention it as a priority anymore. It's a pretty big red flag for ui frameworks not to be able to render their ui components in their own docs.
This is a great idea and satisfying is the correct word to describe the homepage. Have you written about your process at all? I’ve been trying to use the golden ratio in iOS apps for a while and any insight might help
opticalCorrection is genius. That small change makes the layout feel so intentional, polished, and complete - not text stuffed into a card, but the card itself is one cohesive component
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, click, click - and your eyes do all the work for you.
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
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 always found this UI pattern a bit odd, because there just aren't that many situations where you want to compare the left side of image A and the right side of image B.
I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied.
One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it.
But I made two additions to it that make it more useful IMO:
- have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at
- click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching)
I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
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 its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.
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.
I hate to pile on since it's already getting some criticism, but I agree. It's kind of a good example why designers don't purely rely on mathematically consistent designs. Getting things to "look right" often means shifting pixels here and there ever so slightly, so that the math is a bit off but it feels better on the eyes.
Yes, I too felt that way as I began to read, it was an immediate disappointment, kind of, that the UI wasn’t on full display, front and center.
I wouldn’t trust a framework that requires me to involve myself with JavaScript, nextJS, and React, also… but I am generally of the opinion that a framework pitching itself as a UI kit, must pretty much not be a plugin for a web browser…
With the optical correction none/top thing, is that manually measuring the height of capital letters to correctly space everything, or just relying on the height of the font to be correct and respected in the glyphs? Because having worked with the internals of fonts, a lot of them just make up numbers for stuff and then don't actually respect them. You can see how the glyphs don't have to actually abide by any of the numbers from the h in "Checklist", which extends above the capital letters. It makes the font look better, but it makes them a nightmare to work with
I tried to find pricing for it (the top "contact sales" is a no-starter; too much initial friction. Just tell me how much it costs?! At the footer is a pricing calculator... I asked for pricing for 10 top-level pages and 5 sub-level pages (they explain the difference)... came out to a whopping $16,500 (you're reading that right... SIXTEEN THOUSAND). No thanks.
Thanks! Yep, super gimmick. I picked golden ratio because I thought it was a good eyecatcher.
To be clear; You don't HAVE to use the golden ratio. You can set your global scale factor to anything you want in /liftkit-core.css. I just use 1.618 because I like it.
> In LiftKit, everything derives from the golden ratio, from margins to font size to border radius and beyond. Everything renders in perfect proportion to everything else, creating a unique sense of harmony you can’t get anywhere else.
I’m not sure, the moment I opened the page there was something unusually satisfying about the buttons (that had bothered me about shadcn), so I guess there is some method to the madness.
One tiny thing I don't see many UI libraries do when loaded with rounded corners: fix nested rounded boxes by adding the size of the gap between the outer and inner boxes to the border radius. Otherwise, you end up with the slightly off-kilter appearance of the snackbar component for example. [0] Chrome recently added this two-up pane layout for tabs, and it has this exact issue as well. [1]
I don't think their homepage looks good, and for so much attention to detail the padding around text titles and other spacing, specially on mobile, doesn't look good. Not of the elements they showcase but of their own landing page.
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.
I didn't know what web components were until after I'd released it for React. I was working in a complete vacuum until I put this out there, and then I started to get involved with the community. Before that I was pretty much the only designer/techie I knew. I'm not a professional developer. I'm just a designer who knows enough TS to piece things together.
So having it for React/NextJS isn't an affirmative decision. It's just the only thing I knew how to do at the time. After the first launch last summer I had a couple folks reach out to help port to SvelteKit and Vue, but you know how it is. People get busy.
I'd expect the website for a design system to look beautiful (or oddly satisfying, if that's the goal here) but this one doesn't. Tailwind's website looks better.
You got some shitty comments in here but you handled them well. While I think there is _some_ valid criticism, I think what you've built is pretty cool. I'd like to be able to test this without next JS. Is a CDN option planned for those wanting a quick start?
>In LiftKit, everything derives from the golden ratio,
I don't think the authors realise the extent to which their product, which looks well made and useful, is being completely undermined with this nonsensical pseudoscience.
Hi, I'm the author, it me. You're right, I need to be clearer that golden ratio doesn't automatically equal beautiful. It's not sacred geometry. It's just pretty. I like it. And studies show people at large tend to find the proportions pleasing.
It's just a rule of thumb, that's all. I just went crazy on the copywriting because I thought I'd need to in order to get the kit to stand out.
I have now been extremely informed that this is not the case.
The creator of this is a friend of mine and just gonna chime in that he’s a fantastic and talented dude. Nice surprise to see his project listed here! I think he’s working on something new called Liftkit Studio too I’m looking forward to.
He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”
Sorry to pile on, but I also think that changing the background color in the before/after feels like you're purposefully trying to make the before one look worse. Like when in weight loss photos people don't smile and pose nicely in the before photos but they do in the after.
I can't tell which one is supposed to be good, and the design is not intuitive enough for me to know which is the LiftKit (the one I'm supposed to prefer).
gmurphy|21 days ago
Telling people the height ratios between them followed the golden ratio was a very convenient way to shortcut the bikeshedding and get to "aha, very nice"
The trick was it didn't follow the golden ratio at all because the golden ratio is not some magic number that leads to balance and peace - lighting, rounding, color, and visual strength all dramatically outweigh it
user____name|20 days ago
redanddead|20 days ago
Wowfunhappy|20 days ago
I wish this was still a priority for modern Chrome. Just because screens are bigger now doesn’t mean I want to waste that space.
chrismorgan|20 days ago
“Vertical rhythm” in website layout. Utter nonsense. Valuable in print layout (for adjacent columns or double-sided paper), completely useless in digital (unless you have side-by-side columns with headings or pictures mixed in, but this is seldom seen outside print, partly because the web doesn’t support it well).
“Modular scales” in choosing font sizes. Typically worse than utter nonsense, because you want heading levels to be distinctive, and modular scales will harm this by forcing lower heading levels to be too small.
Force all your app icons into a rounded square or squircle or circle, because consistency. No! Now you can’t find anything easily. Android was so much better before that nonsense started.
Monochrome icons deliberately designed to look the same. Now they’re unmemorable. Colour was a useful signal.
(This comment is generic; I’m not saying anything about LiftKit here, for or against.)
Squarex|20 days ago
gregoriol|20 days ago
port11|20 days ago
Razengan|20 days ago
The whole minimalism/flat movement from iOS 7 and Google's Material and Microsoft's Metro crap was frankly a lazy and weak copout, a give-up on trying to make nice looking UI that could also be functional.
Why is it that sci-fi has always had such beautiful UI since Star Trek but the real world is still so boring?
Garrett_Mack|21 days ago
LIFTKIT IS FREE AND OPEN SOURCE. The website's just out of date.
https://github.com/Chainlift/liftkit
Most of the feedback folks are providing here was raised about 6 months ago on Reddit and is actively being worked on. You can check it out here: https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_...
KNOWN ISSUES INCLUDE: - Docs are a nightmare, screenshots are ridiculous instead of real components - Components are inaccessible spaghetti
CURRENT PRIORITIES: - Rebuilding with radix primitives - Improving docs
TO LEARN MORE: - This youtube video explains the gist of the system (though it's also a little outdated) https://www.youtube.com/watch?v=r1DANFZYJDw
I'll reply to folks as best I can.
rablackburn|21 days ago
I love the project -- even if I agree with a lot of the critique in this thread. Critique that is very high quality, professional feedback that you should take as a very big compliment.
I think every Front End developer or designer dreams of this idea(+) at some point, but you're the madlad who actually did it. It feels like you've posted an implementation of everyone's baby and tugged at our heart-strings ;)
It's fantastic, keep going.
(+) a truly consistent design system that Just Works. See GEB for why not :(
Nathanba|20 days ago
75w|20 days ago
re-thc|20 days ago
Check out Base UI (or React Aria) instead.
cush|19 days ago
esperent|20 days ago
Compare like with like, not a badly colored and low contrast version of the competition against yours.
tom_|21 days ago
(Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
Garrett_Mack|21 days ago
heliographe|21 days ago
I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied.
One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it.
But I made two additions to it that make it more useful IMO:
- have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at
- click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching)
I have a video of it in action here:
https://lutlab.com/#viewer-photo
accoil|21 days ago
bobbylarrybobby|21 days ago
Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.
david422|20 days ago
candiddevmike|21 days ago
jofzar|21 days ago
danielvaughn|21 days ago
unknown|21 days ago
[deleted]
esafak|21 days ago
cluckindan|21 days ago
nickradford|21 days ago
tkzed49|21 days ago
cchance|21 days ago
slillibri|21 days ago
MomsAVoxell|21 days ago
I wouldn’t trust a framework that requires me to involve myself with JavaScript, nextJS, and React, also… but I am generally of the opinion that a framework pitching itself as a UI kit, must pretty much not be a plugin for a web browser…
digiown|21 days ago
voidUpdate|20 days ago
moonlighter|21 days ago
Garrett_Mack|21 days ago
That calculator is for agency services. LiftKit itself is free.
khimaros|21 days ago
Nekorosu|21 days ago
cush|21 days ago
Garrett_Mack|21 days ago
To be clear; You don't HAVE to use the golden ratio. You can set your global scale factor to anything you want in /liftkit-core.css. I just use 1.618 because I like it.
Hendrikto|20 days ago
Not sure if this is irony or not.
aetherspawn|20 days ago
graypegg|20 days ago
[0] https://www.chainlift.io/components/snackbar
[1] https://i.imgur.com/uPuTtNb.png
vasco|20 days ago
helterskelter|21 days ago
That said, it still looks good.
Garrett_Mack|21 days ago
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.
claytongulick|21 days ago
I had to dig through the docs and get to the installation instructions just to find out that it's React only.
It looks great, but I'm always confused why design system folks wouldn't base everything off web components, which work with almost any framework.
Garrett_Mack|21 days ago
So having it for React/NextJS isn't an affirmative decision. It's just the only thing I knew how to do at the time. After the first launch last summer I had a couple folks reach out to help port to SvelteKit and Vue, but you know how it is. People get busy.
amadeuspagel|20 days ago
[1]: https://tailwindcss.com/
replwoacause|20 days ago
cantalopes|20 days ago
Garrett_Mack|20 days ago
dmd|21 days ago
efskap|21 days ago
I don't even know if the golden ratio itself is that magical, but I do see a lot of value in picking one ratio and sticking to it everywhere.
Garrett_Mack|20 days ago
findalex|20 days ago
You know what gets lift? Correct spelling (inscrutable)! Unless they chose that word specifically to misspell but that's meeting more than halfway.
laksjhdlka|20 days ago
nottorp|20 days ago
[1] M3Pro, Firefox. No, I'm not trying in Chrome.
Garrett_Mack|20 days ago
/s
gavmor|21 days ago
1. Clean, expressive interface, 2. Extensive documentation.
That being said, good on you for shipping! I would like to try it just for the mystery factor.
Garrett_Mack|21 days ago
vivzkestrel|20 days ago
tehsuk|20 days ago
Garrett_Mack|20 days ago
absqueued|21 days ago
Surac|20 days ago
Garrett_Mack|20 days ago
notenlish|20 days ago
_el1s7|20 days ago
What a weird joke of a company is this.
Garrett_Mack|20 days ago
EricRiese|20 days ago
stevage|21 days ago
I don't think the authors realise the extent to which their product, which looks well made and useful, is being completely undermined with this nonsensical pseudoscience.
Garrett_Mack|21 days ago
It's just a rule of thumb, that's all. I just went crazy on the copywriting because I thought I'd need to in order to get the kit to stand out.
I have now been extremely informed that this is not the case.
Yasuraka|20 days ago
learyjk|21 days ago
He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”
https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO
Party on
Garrett_Mack|20 days ago
Netcob|20 days ago
upcoming-sesame|20 days ago
djfdat|20 days ago
moribvndvs|21 days ago
Garrett_Mack|21 days ago
theusus|21 days ago
baalimago|20 days ago
I'll stick to LLM design, thank you very much
jheriko|20 days ago
[deleted]