Refactoring UI: The Book

Make your ideas look awesome, without relying on a designer

4.4/5
About

Make your ideas look awesome, without relying on a designer.

Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

Would you recommend this product?
Senior Consultant, InnoSource

I've just started going through this material and it's an amazing resource that I'll be using daily. Can't wait to make it all the way through the book and videos.

Pros:

Such great content

Cons:

Is more content possible?

Share
⚡️ transistor.fm

Everyone who works on the web should understand design: software developers, product managers, etc...

This is the best resource I've found on the topic.

Pros:

A no-brainer for web professionals

Cons:

Why didn't I think of this? 😜

Share
Founder of Reform

Read this book in one go. It only took 1.5 hours, which is something other books should aspire to achieve. I don't know that I've ever consumed that much knowledge about a topic in such a short time. It's really packed full of actionable tips.

Pros:

Extremely actionable

Cons:

Steve doesn't have time to design my app

Share
Saas Product Designer

I bought the whole package. This teaches you to make better and logical design decisions and to create a design system that makes sense and will look really good. I think it will make most designers better.

1) They clearly know their stuff and teach it in a very easy to consume manner. If you are starting off or are doing things by gut-feelings, this is worth the full price as it will make you a much better designer.

2) It is advertised as 250 pages. It is 252, but to get to that number, they included 32 blank pages throughout the book. Maybe that's normal, but it kind of bothers me. I'm sure 220 pages would have sounded just as good.

3) You can consume it all in a 2-4 hours, which makes the price seem quite high when you can buy $12 Udemy courses with 12 hours of videos.

4) I wanted to see much more on what to do and not to do for usability on forms. There is tiny bit in the book and some more on it in the videos, but a lot more could be said. That seemed like an important section that was missing, and is a place where it is easy to make a lot of mistakes. At this price, I expect it to be there.

5) It seems very odd that the color palettes and component gallery add-ons, are PDF files instead of more useful and usable Sketch files.

6) If they had included their component gallery as a HTML/CSS framework I could actually use, then it would have felt like great value for the money.

For me, the first half was pretty basic - though still things designers get wrong all the time, and I wish I had learned years ago from a book like this. In the second half, the color stuff and some of the font stuff was quite useful and I'll change the way I use color from now on. I've kept meaning to research that, so it is the one area I knew nothing about.

I also knew that upping my game on systemizing my designs was the next step for me, and that after reading this, I won't put it off anymore.

Final thoughts:

I ended up asking for a refund... reluctantly, as I want to build a design system based on it, but for ~$150, it irks me too much that a useable one wasn't included. I just wish it came with files you can just use instead of pictures of files! If it came with componentized Sketch or Figma files, I wouldn't dream of returning it. As it is, that omission makes it feel to me like not enough product for such a premium price.

UPDATE:

When they processed my refund, they told me that Sketch versions of the resources are coming. So, now I have to buy it again. That's the tipping point. Also, I discovered that neither Sketch or Figma use HSL to choose colour, which is what they recommend. So, need to find a workaround as their reasons make a lot of sense.

Pros:

UI Beginner? Buy this to start off from a very solid footing and avoid wasting ages of trial and error, researching, and mistakes.

Cons:

Experienced? You figured out some of it already. Would like to see more on forms, and wish it had usable files instead of PDF resources.

Share
Touchgram founder, coder+martial artist
The PDF-only bugged me too. For forms, suggest Adam Silver's great book https://formdesignpatterns.com/ (Multi-format, $20 eBook as well as physical). I love their writing but the sample content looked too much like stuff I already have and the pricing aggressive for what's offered.

Seriously, Adam and Steve have done such an amazing job with this book, and all the bonus content. They have agonized over all the little details. BUY IT!

Pros:

This book contains a ton of super practical design tips geared specifically for developers and will make you a WAY BETTER WEB DESIGNER.

Cons:

It didn't exist 10 years ago. 😜

Share

Adam and Steve packed an impressive amount of approachable and achievable design wins into one of the most digestible books I’ve ever read. I was left feeling empowered and inspired.

Pros:

Approachable, achievable, and actionable UI wins

Cons:

No paperback copy yet

Share
Tech guy with a passion in creation.

Really dig reading this book!

I was suppose to be working and I ended up reading the entire book in 4 hours because the learning point is just soo good.

The chapters kept me going and It's so easy to read! It's actually the first book that I've managed to read through the end without falling asleep!

Colour concepts is the best! I was never able to understand it as well as this before. Thanks Adam and Steve! It's worth every penny! Now I fully understood HSL and HSB :)

Pros:

Lots of graphic to state their point.

Each chapter has no fluff. Just the right amount of words to explain the concept.

Cons:

Cant have enough insights of their designs!

Share
Founder of startups & products

I'm really looking forward to going through all the content and building new products with it. I've been following Steve and Adam for the last few months and I've been really excited about every insight.

Pros:

the quality of this stuff is extremly awesome

Cons:

could have come earlier :D

Designer, Indie Maker, Marketer

Though this book has been made specially for developers but I recommend this for all the existing fellow designers. I suspect that not all the designers know all those tactics well. I also do/did some of the tactics mentioned in this book as always with my design experience without knowing the actual reasons behind them. This is a must.

Pros:

Best book for making decisions about user interface and making the flow for better user experience. You can read it in one sit, awesome.

Cons:

Only 3 video case study (re-design). According to the price, I expected 15-20 video case studies (before-after) along with mobile version.

Creator at Booster Stage

I have been looking forward to this for weeks and just bought it for my team this morning. The content quality is top-notch, and all the examples are actionable.

The package is solid - PDF book, videos, and even an icon pack.

Combined with Tailwind CSS, this is my go-to design resource from now on.

The only thing I wish is that there was an HTML version of the book so that the examples could be inspected in Devtools.

Pros:

Practical examples

Cons:

Every new web app will now look like it was designed by Adam and Steve

chill-build mode 2020

Every insight is fantastic and having the examples of before/after the change is really help you feel the difference. I usually dread the design aspect of building something, but with every section I find myself actually excited imagining how to implement these ideas on current projects.

Pros:

Clear, actionable content with examples - and it looks amazing

Cons:

nope

Google Dev Expert · Head of DevRel

There's something about Steve's design tips that gets stuck with me for the good. His tips and generally always helpful attitude has been a huge help for me when I was designing the landing page for my VSCode.pro course.

This is a no-brainer purchase. Period. Zip. Nada. Zilch.

Pros:

Steve's Design tips have always helped me

Cons:

NONE!

Sr Software Engineer | Fintech

Wow. I’ve been following along on twitter for some time and couldn’t wait til launch. It’s finally here. And it’s amazing.

Pros:

Amazing content, beautifully laid out.

Cons:

None

UI/UX Designer & Front-End Developer

You can go through the book quick while grasping all the concepts really well.

Its like putting a sponge into the water, So much tips And tricks within 2-4 hours

Pros:

This Book might be the best go-back-to-reference for UI Designs

Cons:

None, The book is Awesome

Web Entrepreneur & Media Enthusiast.

I very rarely buy books development/design books, but this purchase was one of the best purchases I have ever made. My wife does not work in this industry yet, but I am making her read the book and I am certain that once she finishes, she will be a better designer than 90% of the designers I have ever worked with. Adam and Steve's interpretation of high quality designs is unseen.

Pros:

Amazing visuals that explain and compare "bad" and "good" designs.

It also includes an amazing Component Gallery!

Cons:

None that I can really think of, but would love to see Tailwind code for the designed components.

Should be one of obligatory materials for everyone building products.

Pros:

Condensed pill of knowledge

Cons:

Why so late? :)

Software Developer

If anyone is in the proces of bulding applications, especially D2C-esque, this provides high-quality detailed information in not only how to design an enjoyble application, but how not to get caught in some of the pitfalls of design/prototyping stages.

Pros:

Consise, yet exhaustively extensive.

Cons:

Can't find one

Code, liberty and business...

This is great, already put it to use on the color side. It is well written, to the point and very actionable for a developer like me that has just about close to ZERO artistic inclinations... lol I bought it as soon as I listened to the podcast... I am already a fan of Adam and Steve and their Refactoring UI work... Definitely recommend it if design is a challenge... (or you are as tired as I am of Bootstrap ... lol )

Pros:

Great content, love the structure of the information.

Cons:

Gumroad...

Founder, Developer

The absolute madness. Adam and Steve bring the world of development and design to a common point, so that every developer is able to learn design. And I promise you that you too can do that with this book. For this price? I would have paid a lot more.

Pros:

- Authentic authors

- Your design skills will improve drastically

- No-brainer for that price

Cons:

None

CTO in Bythesea

The start of the book is awesome. The strategies to design, recommendations, best approaches to do the hardest things, everything it's really great. Great content, great chapter segmentation. It's funny to read.

Pros:

I really loved it. It's really engaging to read, then you start thinking in all the things you have done wrong all your life.

Cons:

none