Refactoring UI is a book you can read in a couple of hours, but it helped me immensely to design my projects. It does not go to a great depth, but it's very useful for simple and quick hacking.
>Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered.
>Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.
Emphasis mine. The above may be reasonable advice if you're building a low information density app for nonproductive content consumption... Or a touchscreen only app where all interactive elements must be at least a finger tall and wide... But it drives me absolutely batty when extra white space appears in software that I want to use to process/analyze a lot of information and actually get stuff done. And numerous examples on the website just make things... Farther apart and/or bigger.
I still rue the day Spotify fattened up its row height for all lists in the app. It's less readable than it was if I can't read as many song names as before without scrolling.
I don't want to rag on the book overall without reading it, especially given how many in this thread seem to love it and the table of contents does hint at good ideas within, but that seems like a terrible set of examples to lead with. 'More white space' is not universally good design advice. Give me design in the school of TMUX and Bloomberg Terminal any day over extra white space for the sake of 'readability.' As much information as it is possible to present clearly on a given screen.
The entrepreneur, who was watching me interact with the site, asked me what I was doing, and was confused at why I'd go to desktop mode. That, in his mind, was too information dense. But I wanted to see all the information at once without scrolling around, my eyes can scroll fine.
I guess it goes to show it should be a consideration, given its variance.
Remember, good design is not only what the cool kids do or what FAANG might believe it is. Good design is timeless. Good design is a conversation with the product. Sometimes whitespace is good, sometimes it is not. You saying whitespace is a bad idea is as misinformed as a naive designer saying whitespace is king.
That said, I recommend Refactoring UI, but I recommend more anything on Dieter Rams or the book "The Design of Everyday Things" by Donald A. Norman.
So yes its subjective and people probably like it.
In the cases I've seen where whitespace is added, it's purely an aesthetic choice and not a UI design choice.
The rules in the book (and on the website) should not be seen as set-in-stone, they are more principles we can follow depending on the situation. I think the use fewer borders principle is very useful in many scenarios.
Saying that, I agree that today's designs tend to too much whitespace (there was a blog here recently ranting that all product landing pages are basically a navigation bar with a shallow text over a picture background).
You can check this blog if you want to see more principles from the book: https://medium.com/refactoring-ui/7-practical-tips-for-cheat...
One way to think about it is in terms of how much you value your time. If you value your time at $25/hr and this book saves you more than 4 hours of time learning UI design, it is worth it.
Another way to think about it is in terms of ROI. As someone in the tech industry I think that having these skills is likely to pay off way more than $99. Not in a legible way -- it's not like anyone will ever say to you "I see you have these UI design skills, here's a $5,000 raise." But I believe that the skills will ultimately shine through and improve your ability to get jobs and make more money.
Also, in practice, if you're in the tech industry, there's probably a good chance that you can get your employer to pay for it.
I think the idea may well be that there are two groups of people in the world. Those who pay for books and those who never pay for books, especially if they can find a free download somewhere.
Students, young tech workers from low wage countries, people who just want to have a look or are horders rather than readers won't pay regardless of price.
So the only question remaining is what effect price has on those who do buy tech books. Will they buy a cheaper book instead?
I don't know the answer to that, but I can say that for me there is a psychological £49.99 threshold that makes me start thinking and looking at other options rather than making an impulse purchase.
This threshold is completely irrational. If you double my salary today, the threshold won't change. It only changes gradually over time.
I claim that I belong to a third group: I do spend a lot of money on books, but have to be somewhat careful with my spending. I can also claim that the knowledge that I get from the mentioned book will in all likelihood not increase my salary, so I am interested in this book solely because I am very interested in this topic. But since I am interested in a lot of topics (and tend to avoid illegal downloading of e-books if possible), I have to concentrate the huge book spendings on those books that are insanely good.
That is certainly true, however many young programmers could benefit from books like this one when they are in the early learning phase, to avoid developing bad habits that can only become harder to forget with age and (bad) experience, especially if they land the first job after creating or contributing to a dozen projects.
With that said, I have read about 'flexbox' or sort tech that React has but I have procrastinated forever to revamp the UI using flexbox. I didn't quiet understand flexbox or react layout general and will need to take another jab at it.
On the other hand, will this book benefit me? Sort of mental model to have when mocking up UI for website? I understand the whole idea of wireframe and sketches, but I want think beyond that. For example, I am always impressed by https://www.hims.com/ UI/UX.
Second, how long should it generally take to read through the book? In my mind, it will take months or so to go through it...
- how to design a good UI
- how to implement a given UI design (in your case with react)
In general, I would start with visualizing and sketching the desired end result. Then choose a UI framework, that can make that happen. (and I don't know of a magic bullet UI framework, that just works automatically for different screenresolutions)
I would suggest with keeping it as simple as possible. Less is usually more.
> how to design a good UI
And my issue is exactly your second point - how to implement a given UI design. I came across multiple React UI Framework but haven't been able to fully understand the 'big picture' per say on using them.
For example, I don't know if I agree with the removal of borders. Old reddit looks better for many folks because of the information density even if its an "uglier reddit".
Another example for a good UI but would not meet the "recommendations" of this book is https://www.mcmaster.com/