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 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'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 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.
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.
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…
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.
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.
(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.)
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'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...
If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways!
(And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)
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.
Agreed. I’ve spent considerable time on scale-based design, and 1.618 always feels too large of an interval.
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.
I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...
If they showed the actual css, people could just ... copy it, and then how could they charge for the secret golden ratio code lol
There is that, but I get the impression that you could hire an expert to help.
I clicked on Dropdown, thinking it's one of the more complex things to implement. It doesn't even have a picture.
And one that drops frames when I scroll through on Firefox.
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…
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.
this seems to be for custom design services. IANAL but the libraries and design language seems to be open source and free to use.
https://github.com/Chainlift/liftkit
Next.js without Tailwind ... why not just make it a fuckin tailwind plugin lol
Indeed; if you look at the top nav this is a site that's an agency first and a design system second.
This design system really deserves its own site.
There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...
Wow AGPL for CSS ui framework!!
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.
Requires nextjs, :(
It doesn’t
Next.js without Tailwind
I really wish they would start with "this is for next.js/react".
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.
While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out