ROUNDTABLES ★ 9 upvotes 2021

Ask HN: Favorite tools for building an aesthetic UI for a side project/MVP?

The Founder's Submission

Direct narrative and submission text authored by @sondog on Hacker News:

I've historically been more of a backend developer and my knack for building good looking UI's is just not there. I've read up on the basics of UI design and tried building out UI's using React + CSS, but it ends up being so time consuming for something that looks mediocre.

What are your favorite UI library or no/low code tool for building a good looking UI for side projects?

Retrospective Overview & Key Insights

Distilled analysis of the business dynamics, operational challenges, and strategic takeaways:

An open Ask HN community consultation from 2021 where @sondog convened hundreds of developers and bootstrappers to share real experiences, hard numbers, and tactics.

Core Principles for Independent Builders:
1
Participants share raw revenue figures, churn rates, and stack decisions that corporate PR never publishes.
2
Recurring answers reveal that distribution, not coding skill, is almost universally the rate-limiting step in developer businesses.
3
Practical recommendations on bookkeeping, payment gateways (Stripe vs Paddle), and freelance-to-product transitions.
Community Debate Themes:

Hundreds of active indie hackers contributed case studies, pricing heuristics, and pitfalls to avoid when moonlighting on side projects.

Community Discussions & Critical Reviews

High-signal perspectives, counter-arguments, and peer founder insights debated on Hacker News (6 total discussions):

AD @ad404b8a372f2b9 Peer Contributor

The best tool I've found to improve my UIs as someone who's not generally good at this stuff is wireframing. I use diagrams.net because it's free and has a web version.

Once I stopped trying to implement and design my UIs at the same time they started getting much better. I force myself to go through multiple iterations over multiple days to let my understanding of the UI mature. First I make a shitty ugly one where I place the buttons and block-out the general look. Then I try to refine it, change the look, place the buttons in a more intuitive way. And I force myself to move things around and change the layout of the whole thing even when I'm satisfied with it.

I also inspire myself from other people's work, like those you can find on Dribbble.

Once you've got a nice wireframe down it's trivial to reproduce in any UI toolkit.

Here's an example of the evolution of a single screen of an app I worked on a while ago, it's incomparable to the work of a professional UI designer but it's much better than I used to be able to do. You can see how some buttons disappear and are replaced by others as I refine the UX and how the layout changes over time: https://imgur.com/a/WExdqs3

BW @bwh2 Peer Contributor

Buy a theme. They're inexpensive and contain plenty of pre-styled widgets and layouts. Here's one I've recently used for a side project: https://www.spruko.com/demo/spruha/spruha/HTML-LTR/verticalmenu-light/index.html

PA @patatino Peer Contributor

I use ant design. It has some very powerful components which help moving fast.

You can also customize the default colors or border radius if you don't like the default.

I really wish I could use something like tailwind and build out my own components, but for side projects, I don't think the time is worth it.

AN @andrefuchs Peer Contributor

I really like Vuetify https://vuetifyjs.com/en/

Fantastic components, documentation and themes.

_T @_throwawayaway Peer Contributor

Tailwind is great. I use it everywhere just because i don't want to write/keep css files. For components i use Elastic UI.

HISTORICAL ERA Pandemic Bubble (2020–2022)
COMMUNITY SCORE ★ 9 points
TOTAL DISCUSSIONS 6 comments
TOPICS & TECH STACK: