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 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.
Agreed. New docs are under construction and they'll be posted on a separate website. The agency came first and then liftkit came after, which is why it's hosted on there now. But I'm shutting down agency operations and so the whole thing will be liftkit eventually.
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.
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.
Yeah I tried using a similar "golden rule" after reading a design article about it. I based my css variable sizes on it but I kept having to use manual px and rem values instead because stuff just never felt correct.
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.
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…
Yeah the docs are like that because I didn't know React well enough to make my own docs and so I stuck with Webflow and realized very quickly I'd made a huge mistake. But I needed to get something out there to buy time while I figure out how to make grownup docs.
LiftKit's free forever to anyone. It's just early stages and bad.
The idea was that if a company wanted to hire us for direct support, we'd do that. But the problems are: [A] no enterprise in their right minds would use this thing in its current state and [B] "us" is me and I don't have time to do that anymore
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.)
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.
it's bad UX.
There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
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.
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.
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 value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable.
(My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
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 comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free.
Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
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.
And once you have the hang of this technique, congratulations! You can now enjoy those 3D "Magic Eye" images that stumped a significant portion of the population back in the 90s :)
I use ScreenFloat[0] in a similar way to catch differences between GUI settings, like the cPanel PHP extensions selector, which has tons of checkboxes. Position a screenshot of settings for site A over the settings for site B, adjust the transparency, and any differences will jump out.
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 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 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.
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.
Unfortunately I've already ported in all the radix primitives. I actually found out about Base literally the exact day I finished it. Then I saw shadcn just upgraded to Base. So it looks like shad once again proves the gary oak in the completely one-sided rivalry that lives entirely in my own head. except instead of Ash I'm like youngster joey with a copilot subscription
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
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”
>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.
> And studies show people at large tend to find the proportions pleasing.
I don't think that's the case - or at least, not well-designed studies. There's nothing to suggest that people prefer 1.618 more than 1.61 or even 1.6, and probably not 1.5. It's like if we found people like the colour blue and then claimed that people like the shade of Mary's veil or something.
Brains are great at pattern recognition (lots of studies). This includes ratios. Your shade of color is not a good example, because it's just a single value, not relative to anything on its own. But if you have multiple colors, there will be various relationships/ratios between physical properties of the colors (wavelength, intensity etc.). Similar in music, 1:2 frequency ratio is recognized as an octave. Strongest ratios (i.e. strong pattern) are usually the simple ratios like 1:2, 1:3 & 2:3, etc. However, science hasn't been able to find out, if we can recognize Golden ratio because of the Fibonacci sequence pattern that is often found in nature or if it's to us just a ratio that is close to a simpler ratio like 5:3.
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
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.)
You only have to watch the WWDC videos from the designers regarding Liquid Glass, and appreciate how much "improved" the macOS with Tahoe experience feels like in practice.
Same applies to sessions on Fluent or Material designs, and how they end up on the respective OSes.
The whole design rhetoric of the recent years is just so bad. It's all vague feel-words that are straight out of a marketing playbook and don't communicate anything concrete.
The Liquid Glass guidance is so emblematic of this. What in the slop is "providing a more dynamic and expressive user experience that elevates the content" even supposed to mean when we're talking about an app that shows a scrollview with a tab bar and a few buttons?
Reading the early 2010s HIGs is such a breath of fresh air in comparison, where it's just a succession of clear statements like "Controls should look tappable. iOS controls, such as buttons, pickers, and sliders, have contours and gradients that invite touches".
Just two entirely different schools of thought. One based on research, evidence, clear actionable items; the other is just pure vibes. Something of value's been truly lost along the way.
Fully agree, feels like listening to some modernism artists in some avant guard gallery exposition, on the symbolism of an empty room with a single shoe inside.
I agree with your criticism of design dogma - it drives me nuts too - people saying something bad is good because it follows the rules. But since I'm also responsible for the Android icon shape-change you talked about, let me waffle for a bit in case it helps provide a perspective on the other side of that decision:
I agree with that the non-uniform icons are easier to find, and that uniform shapes make it harder (I also agree that uniform colors are awful, but that was after my time so I have no stake in that).
However, usability is not about pure efficiency - a huge amount of it is approachability - people have to _want_ to use the UI. If they don't want to use it, no amount of pure-usability work will mean anything - it will just be "shitty computers" in their heads. In Android's case, the developer-provided weirdly shaped icons were a major sticking point - people would take one look at an Android homescreen with all kinds of mismatched splatters of icons, mentally lump it with Windows and Linux in the must-be-for-geeks bucket, and walk off to the Apple store.
It drove us nuts - in actual tests, people would often find Android easier and more efficient to use, but would still pick iPhone as the "easier" product, because that's the one that was inviting, that fit their style, that looked easy to use.
So we did a lot of work nudging Android to a place where real people would find it desirable, easy, and powerful - making really difficult tradeoffs - sometimes breaking expectations, sometimes sacrificing a little bit here and there to gain a lot somewhere else, sometimes just taking a chance.
It took a lot of effort from a lot of wonderful people, and it involved a stupidly large amount of arguing against "just copy iPhone" laziness and pressure (a major reason I left), but I am still deeply proud of what the team was able to do. We couldn't please everyone, but I think more people were pleased afterwards than before.
Replacing the Android home buttons with the swipe up gesture. It was demonstrably a very clear usability and efficiency loss, but most people strongly preferred it.
Before we had that latter data I actually argued against attempting it - I figured having a clear usability win vs iPhone would be an area we could capitalize on, and didn't believe we'd be able to execute the swipe system well in the time we had (I'd rather be behind and robust than leading edge and flaky), but doing it was definitely the right call - felt pretty sheepish about that one for a few years. The eng and ux teams that pulled it off were next level.
People's actual measured experience, vs people's experience of the experience, are rarely the same things, when they have prior knowledge of one thing, and low knowledge of the alternative. They prefer the thing they know, even when it's worse.
There's loads of this in the UX space. To overly simplify, people's brains use expected ideas about what things are like, in order to interact with the world. We build models as to what things are like, and then things that look like what we expect, we over-weight to stating as things that we understand.
So when people are presented with something which is visually appealing, we think it's easy to use, even when it isn't. And people will then default to blaming themselves, not the pretty, elegant thing, because clearly the pretty elegant thing isn't the issue.
We call this the aesthetic-usability effect. Perception of the expected experience, and attribution of the actual experience, is more important part than the actual experience.
It's one of the many ways in which engineers, economists and analysts (in my experience) tend to run in to issues. They want people to behave rationally, based on their KPIs, not as people actually experience and interact with the world.
There's all sorts of research that then comes off this, like people enjoying wine they've been told is more expensive, over wine they've been told is cheaper, and the physiological response as measured with an MRI confirms their reported divergence in experience, despite that the wines are the same, as one quick example.
Low contextuality evaluations (my term for where you ask someone to state things about something where they lack enough experience with enough breadth and depth to answer reliably) are always wonky. People can't comment on wine, because they don't know enough about wine, so they seek other clues to tell them about what they're experiencing. Similarly, people don't know about things that are new to them (by default) or that look different to what they expect, so their experience is always reported as being worse than it probably actually is, because their brain doesn't like expending energy learning about something new. They'd rather something they understood. It's where contextualisation and mimicry come in really useful from a design of experience standpoint.
> 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
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.
Now I'm imagining an app that automatically back-engineers a 'golden ratio' analysis or similar bullshit explanation for you to save you the time and trouble of making it up yourself. Being able to give fussy clients an instant graphic design placebo would be super useful.
In a way it's anthropologically (and linguistically) interesting that such a bigram can gain this kind of status as a result of marketing, essentially. Probably having 'gold' in there helps. Maybe the app could have optional modes for completely new magic numbers:
- The Platinum Proportion
- The Gilded Fraction
- The Silver Symmetry
- The Coveted Correspondence
All other browser I've tried (firefox, vivaldi, edge, safari, atlas, many others) and all other programs with a tab-based UI I use (zed, vs code, sqlitebrowser) look worse.
> All other browser I've tried (firefox, vivaldi, edge, safari, atlas, many others) and all other programs with a tab-based UI I use (zed, vs code, sqlitebrowser) look worse.
Both you and the poster could both be correct.
Looking good and being a poor interface are unrelated.
IOW, something could look absolutely beautiful and still have a nightmarish UI.
"Looking pretty" is subjective. Being a good UI is objective.
Reminds me of how like 10 years ago there were the fanbois who wanted to do their cars in Material Design or tatto Material Design on their face and such.
If you're talking about graphic design, that's probably true. I'm talking about the thousands of design decisions the Chrome team made to decide exactly what to include and not to include, where to put things and how they appear, what words are used, and how features behave. Chrome is heavily and well designed in that regard. It's evident that everything was heavily considered and evaluated. I contrast Chrome to other apps and websites where it feels like the "designers" may not use the product at all.
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.
When we started work on Chrome my favourite browser was a now-forgotten IE shell called iRider, which implemented tree-ish style tabs in a better way than anyone, and we did take multiple attempts at vertical tabs early on.
We didn't ship them because they were only a mitigation of the too-many-tabs problem, not a solution, and they didn't really fit our model of 'tabs are titlebars'. They were also never going to be default - most people did not have that many tabs, and we had a very strong opinion was that we shouldn't have configuration - it was better to very strongly execute on one vision we loved and risk losing people (but hope the quality would bring people along), than to execute and support multiple directions poorly.
The world has changed a lot since I last worked on Chrome ten years ago, so as an outsider I'm excited to see what the team currently attempting it can do.
"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?
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.
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).
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
> 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.
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.
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]
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.
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?
helterskelter | a month ago
That said, it still looks good.
Garrett_Mack | a month 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.
moonlighter | a month ago
khimaros | a month ago
khimaros | a month ago
cchance | a month ago
Garrett_Mack | a month ago
There is a community plugin, though. https://github.com/jellydeck/liftkit-tailwind
lelandfe | a month ago
This design system really deserves its own site.
Garrett_Mack | a month ago
Garrett_Mack | a month ago
That calculator is for agency services. LiftKit itself is free.
earksiinni | a month ago
Good luck! I always wanted something like this, too.
cush | a month ago
Garrett_Mack | a month 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.
candiddevmike | a month ago
cluckindan | a month ago
carshodev | a month ago
stevage | a month ago
Garrett_Mack | a month ago
Garrett_Mack | a month ago
You don't have to use it though. The system works with any scale factor. 1.618 is just the default.
This video explains in detail how the system works with lots of visual aids.
https://youtu.be/r1DANFZYJDw
danielvaughn | a month ago
jofzar | a month ago
esafak | a month ago
nickradford | a month ago
tkzed49 | a month ago
deepfriedrice | a month ago
https://www.chainlift.io/components/select
Garrett_Mack | a month ago
The next release will use radix primitives.
MomsAVoxell | a month 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…
Garrett_Mack | a month ago
slillibri | a month ago
Garrett_Mack | a month ago
digiown | a month ago
Garrett_Mack | a month ago
cchance | a month ago
Garrett_Mack | a month ago
LiftKit's free forever to anyone. It's just early stages and bad.
The idea was that if a company wanted to hire us for direct support, we'd do that. But the problems are: [A] no enterprise in their right minds would use this thing in its current state and [B] "us" is me and I don't have time to do that anymore
Nekorosu | a month ago
absqueued | a month ago
tom_ | a month 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.)
accoil | a month ago
reactordev | a month ago
tom_ | a month ago
(And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
reactordev | a month ago
bobbylarrybobby | a month 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.
Garrett_Mack | a month ago
rablackburn | a month ago
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.
jstanley | a month ago
For me the better image appears on the left.
The left image has the icon in the centre of the radius and the right image has it in a random place.
Garrett_Mack | a month ago
tom_ | a month ago
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 value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable.
(My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
rablackburn | a month ago
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 comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free.
Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
Garrett_Mack | a month ago
Terretta | a month ago
Instant "spot the difference" solve.
// Long time in print and digital agency
kayge | a month ago
e.g. https://old.reddit.com/r/woahdude/comments/1lxqd0l/the_most_...
donbrae | a month ago
[0] https://eternalstorms.at/ScreenFloat/
Garrett_Mack | a month ago
stevage | a month ago
Don't even have a button. Just put both items next to each other.
Terretta | a month ago
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.
heliographe | a month 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
david422 | a month ago
moribvndvs | a month ago
theusus | a month ago
cchance | a month ago
Garrett_Mack | a month ago
claytongulick | a month 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 | a month 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.
Garrett_Mack | a month 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 | a month 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 :(
Garrett_Mack | a month ago
redanddead | a month ago
To the moon Macky boy!
esperent | a month ago
Compare like with like, not a badly colored and low contrast version of the competition against yours.
Garrett_Mack | a month ago
edit: wait are you on light mode or dark mode? I work in light mode where mine are lower contrast but i swapped to dark and now it's reversed.
esperent | a month ago
Nathanba | a month ago
re-thc | a month ago
Check out Base UI (or React Aria) instead.
Garrett_Mack | a month ago
re-thc | a month ago
Shad did this way late AFTER everyone said Radix was unmaintained though.
Quite a few of the original Radix devs moved to work on Base.
Garrett_Mack | a month ago
75w | a month ago
dmd | a month ago
learyjk | a month 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 | a month ago
stevage | a month 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 | a month 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.
stevage | a month ago
I don't think that's the case - or at least, not well-designed studies. There's nothing to suggest that people prefer 1.618 more than 1.61 or even 1.6, and probably not 1.5. It's like if we found people like the colour blue and then claimed that people like the shade of Mary's veil or something.
zigzag312 | a month ago
gavmor | a month 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 | a month ago
gmurphy | a month 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
chrismorgan | a month 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.)
pjmlp | a month ago
Same applies to sessions on Fluent or Material designs, and how they end up on the respective OSes.
gyomu | a month ago
The Liquid Glass guidance is so emblematic of this. What in the slop is "providing a more dynamic and expressive user experience that elevates the content" even supposed to mean when we're talking about an app that shows a scrollview with a tab bar and a few buttons?
Reading the early 2010s HIGs is such a breath of fresh air in comparison, where it's just a succession of clear statements like "Controls should look tappable. iOS controls, such as buttons, pickers, and sliders, have contours and gradients that invite touches".
Just two entirely different schools of thought. One based on research, evidence, clear actionable items; the other is just pure vibes. Something of value's been truly lost along the way.
pjmlp | a month ago
gmurphy | a month ago
I agree with that the non-uniform icons are easier to find, and that uniform shapes make it harder (I also agree that uniform colors are awful, but that was after my time so I have no stake in that).
However, usability is not about pure efficiency - a huge amount of it is approachability - people have to _want_ to use the UI. If they don't want to use it, no amount of pure-usability work will mean anything - it will just be "shitty computers" in their heads. In Android's case, the developer-provided weirdly shaped icons were a major sticking point - people would take one look at an Android homescreen with all kinds of mismatched splatters of icons, mentally lump it with Windows and Linux in the must-be-for-geeks bucket, and walk off to the Apple store.
It drove us nuts - in actual tests, people would often find Android easier and more efficient to use, but would still pick iPhone as the "easier" product, because that's the one that was inviting, that fit their style, that looked easy to use.
So we did a lot of work nudging Android to a place where real people would find it desirable, easy, and powerful - making really difficult tradeoffs - sometimes breaking expectations, sometimes sacrificing a little bit here and there to gain a lot somewhere else, sometimes just taking a chance.
It took a lot of effort from a lot of wonderful people, and it involved a stupidly large amount of arguing against "just copy iPhone" laziness and pressure (a major reason I left), but I am still deeply proud of what the team was able to do. We couldn't please everyone, but I think more people were pleased afterwards than before.
dbdoskey | a month ago
Do you have another example of something like this that your team had to deal with that was not as easy, but "looked easier" for the users?
gmurphy | a month ago
Before we had that latter data I actually argued against attempting it - I figured having a clear usability win vs iPhone would be an area we could capitalize on, and didn't believe we'd be able to execute the swipe system well in the time we had (I'd rather be behind and robust than leading edge and flaky), but doing it was definitely the right call - felt pretty sheepish about that one for a few years. The eng and ux teams that pulled it off were next level.
pwatsonwailes | a month ago
pwatsonwailes | a month ago
So when people are presented with something which is visually appealing, we think it's easy to use, even when it isn't. And people will then default to blaming themselves, not the pretty, elegant thing, because clearly the pretty elegant thing isn't the issue.
We call this the aesthetic-usability effect. Perception of the expected experience, and attribution of the actual experience, is more important part than the actual experience.
It's one of the many ways in which engineers, economists and analysts (in my experience) tend to run in to issues. They want people to behave rationally, based on their KPIs, not as people actually experience and interact with the world.
There's all sorts of research that then comes off this, like people enjoying wine they've been told is more expensive, over wine they've been told is cheaper, and the physiological response as measured with an MRI confirms their reported divergence in experience, despite that the wines are the same, as one quick example.
Low contextuality evaluations (my term for where you ask someone to state things about something where they lack enough experience with enough breadth and depth to answer reliably) are always wonky. People can't comment on wine, because they don't know enough about wine, so they seek other clues to tell them about what they're experiencing. Similarly, people don't know about things that are new to them (by default) or that look different to what they expect, so their experience is always reported as being worse than it probably actually is, because their brain doesn't like expending energy learning about something new. They'd rather something they understood. It's where contextualisation and mimicry come in really useful from a design of experience standpoint.
amadeuspagel | a month ago
It does now.[1]
[1]: https://developer.mozilla.org/de/docs/Web/CSS/Guides/Grid_la...
redanddead | a month ago
user____name | a month ago
foobarbecue | a month ago
ListeningPie | a month ago
virgil_disgr4ce | a month ago
In a way it's anthropologically (and linguistically) interesting that such a bigram can gain this kind of status as a result of marketing, essentially. Probably having 'gold' in there helps. Maybe the app could have optional modes for completely new magic numbers:
- The Platinum Proportion - The Gilded Fraction - The Silver Symmetry - The Coveted Correspondence
PaulHoule | a month ago
https://www.explainxkcd.com/wiki/index.php/2322:_ISO_Paper_S...
European paper sizes are based on a sqrt(2) spiral so cutting in half works well.
gregoriol | a month ago
tshaddox | a month ago
amadeuspagel | a month ago
lelanthran | a month ago
Both you and the poster could both be correct.
Looking good and being a poor interface are unrelated.
IOW, something could look absolutely beautiful and still have a nightmarish UI.
"Looking pretty" is subjective. Being a good UI is objective.
PaulHoule | a month ago
xnx | a month ago
gregoriol | a month ago
xnx | a month ago
Wowfunhappy | a month ago
Squarex | a month ago
Squarex | a month ago
gmurphy | a month ago
We didn't ship them because they were only a mitigation of the too-many-tabs problem, not a solution, and they didn't really fit our model of 'tabs are titlebars'. They were also never going to be default - most people did not have that many tabs, and we had a very strong opinion was that we shouldn't have configuration - it was better to very strongly execute on one vision we loved and risk losing people (but hope the quality would bring people along), than to execute and support multiple directions poorly.
The world has changed a lot since I last worked on Chrome ten years ago, so as an outsider I'm excited to see what the team currently attempting it can do.
Wowfunhappy | a month 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.
Razengan | a month 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?
port11 | a month ago
efskap | a month 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 | a month ago
tehsuk | a month ago
Garrett_Mack | a month ago
vasco | a month ago
baalimago | a month ago
I'll stick to LLM design, thank you very much
Yasuraka | a month ago
cantalopes | a month ago
Garrett_Mack | a month ago
nottorp | a month ago
[1] M3Pro, Firefox. No, I'm not trying in Chrome.
Garrett_Mack | a month ago
/s
voidUpdate | a month ago
Hendrikto | a month ago
Not sure if this is irony or not.
aetherspawn | a month ago
Surac | a month ago
Garrett_Mack | a month ago
notenlish | a month ago
amadeuspagel | a month ago
[1]: https://tailwindcss.com/
Netcob | a month ago
_el1s7 | a month ago
What a weird joke of a company is this.
Garrett_Mack | a month ago
findalex | a month 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 | a month ago
findalex | a month ago
graypegg | a month ago
[0] https://www.chainlift.io/components/snackbar
[1] https://i.imgur.com/uPuTtNb.png
djfdat | a month ago
replwoacause | a month ago
upcoming-sesame | a month ago
EricRiese | a month ago
vivzkestrel | a month ago