9 ms·

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 use

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. https://www.refactoringui.com/ https://www.refactoringui.com/

deleted 3y ago
[deleted]
ethanbond 3y ago
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.
tiffanyh 3y ago
Should be noted, this booked was created by the Tailwind CSS folks (before Tailwind existed IIRC).
BasilPH 3y ago
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.
strontian 3y ago
Just seconding this comment. RefactoringUI is a far outlier in how _useful_ it is compared to other books.
JCharante 3y ago
The first two chapters are free and I've read them and they're very very good
aleph_minus_one 3y ago
With its USD 99 price (or USD 149 for a version with additional material), this e-book seems quite expensive to me.
- windowshopping 3y ago
  [flagged]
  - replwoacause 3y ago
    Pretty sure this isn’t allowed here
    - windowshopping 3y ago
      I mean, you can just Google RefactoringUi PDF and it's the top result. Me linking the url makes little difference.
      - replwoacause 3y ago
        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.
      - systemvoltage 3y ago
        So that justifies it?
        windowshopping 3y ago
        Yes.
  - quickthrower2 3y ago
    Looks like a trojan horse site
zengid 3y ago
Isn't that by the folks behind Tailwind?
- khaldiameur 3y ago
  Yes it is. I don't like Tailwind but the book is great for devs.
khaldiameur 3y ago
[dead]
3abiton 3y ago
I will take a look at this!
sfRattan 3y ago
From their website: >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.
- ImPostingOnHN 3y ago
  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.
- sph 3y ago
  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.
lxchase 3y ago
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/ https://www.mcmaster.com/
mattfrommars 3y ago
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/ 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...
- hutzlibu 3y ago
  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.
  - mattfrommars 3y ago
    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.

deleted 3y ago

[deleted]

ethanbond 3y ago

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.

tiffanyh 3y ago

Should be noted, this booked was created by the Tailwind CSS folks (before Tailwind existed IIRC).

BasilPH 3y ago

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.

strontian 3y ago

Just seconding this comment. RefactoringUI is a far outlier in how _useful_ it is compared to other books.

JCharante 3y ago

The first two chapters are free and I've read them and they're very very good

aleph_minus_one 3y ago

With its USD 99 price (or USD 149 for a version with additional material), this e-book seems quite expensive to me.

windowshopping 3y ago
[flagged]
- replwoacause 3y ago
  Pretty sure this isn’t allowed here
  - windowshopping 3y ago
    I mean, you can just Google RefactoringUi PDF and it's the top result. Me linking the url makes little difference.
    - replwoacause 3y ago
      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.
    - systemvoltage 3y ago
      So that justifies it?
      - windowshopping 3y ago
        Yes.
- quickthrower2 3y ago
  Looks like a trojan horse site

zengid 3y ago

Isn't that by the folks behind Tailwind?

khaldiameur 3y ago
Yes it is. I don't like Tailwind but the book is great for devs.

khaldiameur 3y ago

[dead]

3abiton 3y ago

I will take a look at this!

sfRattan 3y ago

From their website: >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.

ImPostingOnHN 3y ago
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.
sph 3y ago
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.

lxchase 3y ago

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/ https://www.mcmaster.com/

mattfrommars 3y ago

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/ 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...

hutzlibu 3y ago
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.
- mattfrommars 3y ago
  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.