Hacker News Reader

Comment by averagebear | Hacker News Reader

Get Refactoring UI (https://refactoringui.com/book/)! I LOVE this book. It teaches you a bunch of rules, and has a component library with examples of things that look good.

View on HN

I'm a bit lost at the name and the target audience of this book. OP is asking for help with implementation of layouts, book seems to be geared towards learning design, not implementation of design (but there is no 100% free samples available so not fully sure on this)

And why is the book named Refactoring UI? It doesn't seem to be talking about refactoring at all, so where does that come from? Is it a design/UI/UX term I'm not used to?

Steve Schoger started a video series called Refactoring UI a few years ago where he would take a real website layout, and through incremental tweaks, produced stunning results.[1] He always explained his reasoning for each change, justifying the concrete design tips he recommends. That's where the book name originated, and it's much like the video series (with some helpful appendices including mocks, color palettes, etc). It does not tell one how to implement said designs.

[1] youtube.com/channel/UCxqiDtkXtOCNJdckODHk9YA/videos

Something about the first example makes me laugh. "Remove borders, add shadows, and increase the spacing between elements". In 10 years we'll see the exact opposite, "Get rid of shadows and egregious padding, and use borders to clearly delineate objects"

Second this, Refactoring UI is a good resource, Adam Wathan also created tailwind css and the authors of that book created Tailwind UI which is a collection of UI components based on Tailwind.

I've read that book. It has great design concepts and little design tricks.

It fails for providing the answers to 'how' is this done with code, here are coding tricks to get you there. It's more if you have a package page with three packages making the middle a slightly different color makes it stand out.

That goes for most of design books/resources but what makes this book a good one is that it is focused on how to improve the layout of web sites/applications in a practical way. But as always we mis the part how to implement it in html/css. Most html/css resources are about websites and not about webapplications unfortunately.

I just came across that book the other day. It looks very interesting; after this recommendation, maybe I should just buy it. I see they offer 2 packages. In your experience do you feel the extras in the more expensive package are worth it?

I bought the more expensive version and I find it worth it. I do a fair amount of web design/dev consulting (as a side gig) and frequently use the component gallery to get my layouts designed before I write a line of code.

Reply on news.ycombinator.com