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.
I’m a fairly experienced product designer and this book has been incredibly valuable even for me. Lots of extremely practical insights packed in here. IMO a must-read for engineers and designers alike, if you’re building something where you need to care about point-and-click UI at all.
>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.
There's a subchapter in the book called Dense UIs have their place in which the authors mention situations where more compact and busy design is more desirable, adding a screenshot of a sports results website as an example.
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).
I had a local entrepreneur showing me their website/product at a meetup a while ago, and after scrolling a bit through an info page, I unconsciously switched to desktop mode to get more information density.
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.
There are no universal
rule of design. You ragging about a mention of whitespace, as if whitespace is universally a bad idea, means you are just judging a book by its cover and only have the cursory understanding of the matter that is typical of most programmers.
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.
Good design is also subjective. More whitespace is trendy and it annoys people who prefer a higher information density (I see the same with code formatting preferences: some people really like to space out code, others like to make it as compact as possible. Most people are somewhere in the middle).
There is a thing called user testing. I would say if big company makes design with a lot of whitespace its outcome of a process that had many variations and many tests.
So yes its subjective and people probably like it.
On the flipside, probably the most common software found and used in businesses everywhere is spreadsheet related, and it's common even in non-business contexts. How many of these applications are adding senseless whitespace everywhere?
In the cases I've seen where whitespace is added, it's purely an aesthetic choice and not a UI design choice.
I strongly disagree. Relative to other books, maybe it is on the expensive side. But relative to the value you get from it, I think it is incredibly low.
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.
In other countries, "tech industry" does not pay that well. Also keep in mind that there exist a lot of people who do programming (even often quite complicated programming) as part of their job, but work in a very different branch of industry than tech industry - also with a much smaller salary than what is common in the tech sector in the USA.
The example given was $25 per hour though, which is not some outrageous Silicon Valley salary.
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 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.
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.
> As someone in the tech industry I think that having these skills is likely to pay off way more than $99.
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.
Yes, it seems expensive. However, you will save sooo much time by getting it. One of my regrets was not spending money at the beginning of my journey into software. It's easy to justify not spending the money when there's so much free content on YT and other places, but this book is really good. Adam and team has created Tailwind, so he knows what he's talking about.
Yeah, same. I'm not ready to shell a hundred dollars for an ebook, however fantastic it is, my upper limit is around 50 USD, maybe 60, and only if it's very good and niche content.
Well, there is a difference. It’s you doing the piracy legwork in a community full of the types of people who make this kind of content (hackers, designers, indie devs, writers, etc.), versus someone doing it themselves outside of the community. It’s a promotion of it which I think won’t be well received here.
Is this a book someone like me who will benefit if I can't figure out the basic of layout and UI of a react website? I developed a React App to track expense b/w me and my wife. I sort of thought as I developed, the layout and structure will automatically work out of the box b/w mobile and desktop. The end result is it is not. The layout do not intelligently work themselves out in different screen resolution.
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...
I do not know that book, but it seems you are mixing up and asking for 2 different things:
- 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.
Thank you. Is it correct to say the book parent comment suggested solves item one in your list
> 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.
My personal opinion based on the examples provided, is that while it may provide a good baseline, I disagree with some of the examples as being the correct thing to do. Information density intention and audience is important.
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/
Came here to mention Refactoring UI. I think the structure makes it very valuable: Each one is focused on a particular problem or topic. So if you need help with font weights or spacing or shadows there is a chapter for that and I often go back and look at a specific chapter when I encounter a problem.
https://www.refactoringui.com/