My experiences and conclusion building a webapp with a UI Framework like e.g. Material UI...
Material UI is a nice toolkit to start something fast and have a rough boilerplate on how to do things but as the product and complexity evolve it is somehow very rigid.
It still cost time to get into the design system and its principles and you can fall fast ist customization pitfalls.
As soon you need custom components it cost a lot of effort to get the material design and if you are not aware of every detail like which shadow, rounded corner etc...
Apps built on UI Frameworks are looking all pretty similar or boring nowadays, this applies especially to Material UI.
If I need to build something from scratch I would go today with something like Tailwind CSS which don't have such a rigid design system and library and would prefer more flexibility with just some guardrails regarding the design.
I believe this is also a reason why frameworks like bootstrap and bulma are so popular. It supports you more with the CSS part. Tailwind looks for me as the next step after bootstrap.
So developers need to get a design intuition/feeling for good design. Especially if they don't have a feedback from a designer at hand.
If you need to build something fast and don't have time to think about the whole application design, such frameworks can help to get started.
But while the apps are evolving it will be harder and harder to cut / re-design and develop it.
My advice would be to go only with such a framework if you are really under time pressure else take your time and think about a proper UI and UX design and develop it with something like Tailwind. Learn what are good designs, and learn to get better at CSS.
If you have a chance work closely with a designer or a UI-savvy developer and learn from it. Ask questions if you don't understand something. Get inspiration from other products or sites like Dribbble.
like
What do you think about this? What are you using when starting something new?
TailwindCSS with TailwindUI has been a 🧨 combination for me. Would always recommend
Was not sure about TailwindUI but you would say it's worth buying? I develop mainly with react?
I would say it’s an absolute must have. I lack expertise in design and hate using starter kits. TailwindUI gives me just the right amount of hand holding to get started with beautiful looking apps.
Thanks, I will take a closer look in to it.
As a developer (i.e. not a designer), I liked Material just because it makes a bunch of pretty reasonable UI/UX choices for you. That let us focus on functionality instead of design, which we thought was more important for an MVP. But certainly different products might prioritize those things differently.
yes, agree. We used it also for our MVP and could deliver it fast but when you want to go one step further and add a better UX experience I would go in favour of tailwind.
I used Vuetify (a Material UI) framework for Vue for a long time.
But when I started using Vue 3 I found that Vuetify wasn't ready so I switched to Bulma.
Having this experience, I couldn't agree more. I feel simpler frameworks that do one thing well and don't get in your way are easier to work with.
Honestly, when looking for good UI frameworks I was a little disappointed. It feels like there's a lot but when you dig a little deeper there's only a handful of really good ones.
yes, I think you can not create a UI Framework for all purposes. That's why bulma, bootstrap, tailwind give you more flexibility but you can also make bad design decisions there.
Material UI is a tricky one.
On the other hand frameworks like chakra UI and mantine are highly customizable. It's pretty easy to keep the frameworks base standards while you slowly differentiate to your own design.
yea, chakra seems a better option if you want so components from the beginning.
Agreed. Customizing Material UI is too damn hard. It's too much work to change just a color.
I usually make the design system myself, but it takes time since everything is made from scratch.
About Tailwind, it's great, I made a whole site without writing custom CSS.
I think, making the design system from scratch, cost time in the beginning but boost development later.
Also if you did it some times it will get easier or what would you say?
Totally! The good thing is you can make your components as customizable as you need. You don't need to think too much ahead on all the use cases you might need, you can just make the basics and improve them later. That's quite hard to do, if not impossible when using a library like MUI. You cannot simply change the components API to match your use cases, the best you can do is to override some CSS classes.
It gets easier as you gain more experience, but there are a few things that take a lot of time to implement properly, for example, a Select component. It seems simple, but to make it work just like a native Select, you must consider a lot of things, like positioning it properly on the screen, handling keyboard arrow keys, making it accessible, etc. It's days of work, you must test on many browsers, and it will probably break on Safari.
So, for a few basic components, and depending on how fast you wanna deliver, I think it's better to use a library
Not sure if you know this https://headlessui.dev/. But if you develop with React or Vue this could help already I think.
I starred it on Github ages ago, but forgot about it. 😅
It's great, 100% customizable! I'll give it a shot on a future project, thanks for sharing!
happy to help 💪🙂
Yeah man, if you have the time and money to afford it - I'm talking about hours of practice -, learning to design with Tailwind CSS is the best investment I've made in my career. Also, Tailwind UI comes with lots of components, but really they're not enough, you need to learn to create your components from scratch and extend existing designs.
yea I believe it. I will also invest now more in tailwind and general CSS stuff. Hided a long time, but if you want to build outstanding UI/UX it's necessary.
Right! And I’ve found that React and Svelte are the best for state management, combine React with Remix and you’ve got automatically better UX (you don’t even have to worry about state any more, let the URL/loaders/actions handle that)
Yep, I agree. Material UI when you need a decent looking dashboard quickly. TailwindCSS when you need custom designs. They solve two different problems.
Yes, where I would probably go with TailwindCSS for the dashboard also meanwhile.
I think you are missing an important point: UI is not only about design but also UX and accessability.
With CSS-only frameworks you don't get all the cross-device and accessibility features that a UI framework like Material-UI provides and implementing them properly takes a really long time.
A few examples of accessibility features: focus traps, keyboard controls, aria labels, native device controls, cursor styles, etc.
Think, for example, how long does it take to create a functional auto-complete dropdown in Tailwind only.
yes, UX and accesibility. And tailwind comes with the needed responsiveness. Regarding accessibility, I would not implement my own autocomplete but rather use https://headlessui.dev/. But yes, that's a very good point nevertheless I would say the UX experience itself is also not the best with Material UI.
I quickly looked over headlessui.dev, the first thing I tried was the autocomplete dropdown: https://headlessui.dev/react/combobox
Unfortunately, as soon as I started using it the UX was bad (I clicked on the input, but the dropdown didn't appear as expected).
My point is that even some premade components don't have the basic accessibility features implemented, so making something from scratch is even less likely to tick all the basic boxes (unless you spend a lot of time on it). Using a component library also sets some expectations (so you know what functionalities you can expect to already be implemented).