Icon

Refactoring UI

Refactoring UI

Created by the masterminds behind Tailwind CSS, this book shifts the perspective from "making things pretty" to "engineering a layout." It is arguably the most practical guide for designers who work closely with developers or those building complex SaaS products where every pixel needs to work for its living.

Icon

Refactoring UI

Refactoring UI

Created by the masterminds behind Tailwind CSS, this book shifts the perspective from "making things pretty" to "engineering a layout." It is arguably the most practical guide for designers who work closely with developers or those building complex SaaS products where every pixel needs to work for its living.

template image
template image
The "Design by Deletion" Rule

A great design is often achieved not by what you add, but by what you dare to remove. Stripping away unnecessary background colors and heavy borders often reveals a much stronger, more resilient core structure. It taught me that "white space" isn't emptyโ€”itโ€™s a functional element that directs user attention.

The "Design by Deletion" Rule

A great design is often achieved not by what you add, but by what you dare to remove. Stripping away unnecessary background colors and heavy borders often reveals a much stronger, more resilient core structure. It taught me that "white space" isn't emptyโ€”itโ€™s a functional element that directs user attention.

Component-First Thinking

This book forced me to stop designing "pages" and start designing "components." This mental shift was a total game-changer when I began building design systems in Framer, allowing me to create scalable, reusable UI patterns that stay consistent no matter the screen size.

Component-First Thinking

This book forced me to stop designing "pages" and start designing "components." This mental shift was a total game-changer when I began building design systems in Framer, allowing me to create scalable, reusable UI patterns that stay consistent no matter the screen size.

Shadows vs. Borders

Their deep dive into using soft, multi-layered shadows instead of harsh outlines completely transformed my visual style. Itโ€™s the subtle secret behind the "modern tech" aesthetic where elements seem to float and breathe rather than being trapped in boxes.

Shadows vs. Borders

Their deep dive into using soft, multi-layered shadows instead of harsh outlines completely transformed my visual style. Itโ€™s the subtle secret behind the "modern tech" aesthetic where elements seem to float and breathe rather than being trapped in boxes.

My Personal Key Takeaways

Here are the key shifts in my perspective:

  • Limit Your Palette: Stop using too many colors; pick one primary hue and master its various shades to create a unified, professional brand feel.

  • Weight Over Size: Prioritize font weight (Bold, Medium, Regular) over font size to establish an information hierarchy that is easy for the user to scan.

  • Double Your Spacing: Most designs feel cramped; giving your elements more breathing room than you think they need is the easiest way to make a UI feel premium.

My Personal Key Takeaways

Here are the key shifts in my perspective:

  • Limit Your Palette: Stop using too many colors; pick one primary hue and master its various shades to create a unified, professional brand feel.

  • Weight Over Size: Prioritize font weight (Bold, Medium, Regular) over font size to establish an information hierarchy that is easy for the user to scan.

  • Double Your Spacing: Most designs feel cramped; giving your elements more breathing room than you think they need is the easiest way to make a UI feel premium.

Final Rating

Final Rating: 9.5/10. If you want your designs to look "expensive" and well-engineered, this is the only guide you need for modern digital product aesthetics.

Final Rating

Final Rating: 9.5/10. If you want your designs to look "expensive" and well-engineered, this is the only guide you need for modern digital product aesthetics.

Pages Included

  1. Quick Intro

  2. Design by Deletion

  3. Component-First Thinking

  4. Shadows vs. Borders

  5. My Personal Key Takeaways

  6. Final Rating

Book Description

Release

Desember, 2018

Author

Adam Wathan

Steve Schoger

Pages Included

  1. Quick Intro

  2. Design by Deletion

  3. Component-First Thinking

  4. Shadows vs. Borders

  5. My Personal Key Takeaways

  6. Final Rating

Book Description

Release

Desember, 2018

Author

Adam Wathan

Steve Schoger

โ“’ 2025

Inspired by life, designed with heart. See you around! ๐Ÿ’–

โ“’ 2025

Inspired by life, designed with heart. See you around! ๐Ÿ’–

โ“’ 2025

Inspired by life, designed with heart. See you around! ๐Ÿ’–

Create a free website with Framer, the website builder loved by startups, designers and agencies.