What are your UI design/development hacks?
I'm just wondering what tools/frameworks/techniques the indie hacker community uses to reduce the time it takes to put together a good looking UI?
I find that I burn a lot of my time on the UI. Initially I built everything from scratch to force myself to learn html, css and js.
At this point I feel like I have a solid foundation I would like really reduce the amount of time I spend hacking together a good looking MVP for an interface.
So when you are putting together a UI for a new project what tools do you reach for?
Trending on Indie Hackers
I think buying a high-quality theme is one of the best ways to save time on UI. I know devs generally want to avoid spending money, but it can save you like weeks of time.
I actually started working on divjoy.com because I was frustrated by how much time I was spending building UI for various projects and just wanted a big library of pre-built sections I could add to my project. The idea has evolved a bit to include React and backend logic as well.
Some other good resources are creative-tim.com, themes.getbootstrap.com, and themesberg.com.
Definitely helps. We have a membership to UI8.net, it's definitely good for starting points. Typically, I find that once we get into the nitty gritty of finalizing designs that we end up crafting our own things based on the kits we use from UI8.
Thanks for the resources! I think I’ve decided I need to pay for something. But if it saves me even a few hours a week it’ll be worth it pretty quick.
Yeah, that's generally how I look at it. If you value your time and can afford it, it's usually the right call. Fyi, I'm doing a sale for the IH community right now if interested: divjoy.com/?promo=indiehackers. If you're looking for a non-React option I usually recommend themes.getbootstrap.com. Good luck!
Glad you realised that spending time on custom UI isn't the most important thing.
I see so many indie hackers do the same, instead of building actual features or working on the UX they work on UI. A lot of the problems have been solved by teams and tested by the open source community.
I would look at UI kits such as https://blueprintjs.com/. They come with a lot of components with similar props etc and speed design/development up massively.
I've purchased Tailwind UI (https://tailwindui.com) pack and I'm really impressed. Lots of options and looks, and it is continually improved by the creators, Adam Wathan and Steve Schoger.
I read Refactoring UI and it had a lot of really good information. Ultimately I’m still limited by my own skill level.
I have considered tailwind UI over the past few days. My question is does it feel complete even though they are calling it beta? Am I going to feel like I’m missing things that may be available in a more mature UI kit?
Hey,
they are calling it a beta as some components do not yet exist at the moment, but they are quite complete and added at a rapid rate. If you visit the website and don't have an account yet, you can click the "Explore the preview" and get PNG previews of components that are already there and also how they change when the browser window is resized.
If you plan on actually buying it at some point, the current "beta" stage will also save you some $$.
Here's why I bought it personally: I try to do side projects, mostly centered around open source and am struggling with UI design the most. Even if I can ship a few extra demo apps and make them rapidly look nice using Tailwind UI, that is worth it for me.
I start with a template on https://codeply.com, and then add the frontend framework of my choice which is usually Bootstrap. Yes, Bootstrap gets a bad rap for being boring and cookie cutter, but actually it's not. It still the fastest way to get started, and easy to customize with a tools like https://themestr.app