in

My favorite UI design books & why I love them | by Krisztina Szerovay | Mar, 2023

UI DESIGN BOOKS

A curated list and review of my favorites

A cover illustration for my article: a woman sitting on a pile of books
My favorite UI design books

In this article, I summarize what my favorite UI design books are, and I also include the reason for recommending them. (I might add books to the list in the future, so bookmark it and check back later.)

You should know one thing about me: I’m originally a designer with a strong focus on the research and the UX design / interaction design part of the design process. Adding UI design / visual design to my skillset has been one of my professional goals since 2017 (I enrolled in Erik D. Kennedy’s Learn UI Design course in March, 2017 — one of the best courses I have ever taken, but this is a different topic).

So I don’t have a visual or graphic design background. I didn’t go to art school, I don’t know how to draw in an artistic way. Therefore, I was searching for systematic, logical rules or frameworks that I can apply to UI design, an “engineered” way. Thanks to the above mentioned Learn UI Design course and to the Refactoring UI book (see below), I learnt that you don’t need special talent or an artistic background to be good at UI design.

I highly recommend the following books to anyone who wants to develop their UI design skills. If you follow the guidelines explained in these resources, and study the examples included, you’ll be able to create good enough UI designs, I can promise you that. In other words, I believe that UI design is 95% learnable. Maybe the last 5% is for the “talented” ones, but you won’t need that last 5% for most of the UI tasks or UI jobs.

A list of my favorite UI design books
This is my recommendation for your “starter kit” of UI design books — you’ll find some more suggestions in the “Honorable mentions” section of this article

Refactoring UI by Adam Wathan & Steve Schoger

Screenshot of the Refactoring UI website
Refactoring UI by Adam Wathan & Steve Schoger

At the end of 2018, I was among the first designers who bought this fantastic book (and some equally great videos). I was following Steve’s design tips on Twitter since 2017 (btw. here is a nice collection of his awesome UI design advice), and I remember that I was really looking forward to the release day. And the content exceeded my expectations by far.

The book is full of practical, directly applicable design knowledge greatly illustrated by bad and good examples. Here is one of these, it is about establishing a meaningful visual hierarchy:

How to establish a meaningful visual hierarchy — Refactoring UI book
Visual hierarchy — Refactoring UI book (pp 30–31)

Another principle included in the book that formed the way I think about user interfaces is “Emphasize by de-emphasizing”, here is an example:

Two navbar examples — Refactoring UI book
“Emphasize by de-emphasizing” illustrated by a navbar example — Refactoring UI book (p. 39)

This is very similar to the advice I read about in Understanding Comics by Scott McCloud (btw. this is one of the best books about design and visual thinking, a must read): he introduces the idea of “amplification through simplification.” To paraphrase the idea: by stripping down a user interface to the essential elements (or functions), you can amplify those elements.

Understanding Comics by Scott McCloud

If you know my work, you are aware of the fact that I’m passionate about sketching, so I really like that the book recommends sketching before designing in a high fidelity environment: “If you have trouble ignoring the details when working in a high fidelity environment like the browser or your favorite design tool, one trick Jason Fried of Basecamp likes to use is to design on paper using a thick Sharpie.”

An illustration that shows a quick UI sketch
“Obsessing over little details just isn’t possible with a Sharpie, so it can be a great way to quickly explore a bunch of different layout ideas.” — Refactoring UI book (p. 10)

I really appreciate the “myth-busting” or “non-bullshit” approach this book takes, for instance it states that:

  • “Grids are overrated”
  • “Developing an eye for all of the details that make a good typeface can take years. You probably don’t have years.”
  • “While interfaces with a lot of breathing room almost always feel cleaner and simpler, there are certainly situations where it makes sense for a design to be much more compact.”
  • “You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colors to choose from.”
Color palettes: how many colors you’ll need for a real UI — Refactoring UI book
Illustrating color palettes — Refactoring UI book (pp. 123–124)

I also like the fact that the book reminds us to think outside the box: “just because we’ve been conditioned to believe that there’s only one way to design a particular component, doesn’t mean it’s true.” The authors show this by using a dropdown component example:

Dropdown components: how to do it in a more interesting way — Refactoring UI book
“But who says a dropdown needs to be a boring list of links? It’s just a floating box on the screen, you can do anything you want with it.” — Refactoring UI book (pp. 210–211)

Practical UI by Adham Dannaway

Practical UI book cover
Practical UI by Adham Dannaway

Recently released in 2022, Practical UI also focuses on a logic-driven approach to UI design:

  • there are a ton of great examples
  • it is very concise, Adham omitted all the unnecessary words
  • it provides a clear set of rules: “(…)a system of logical guidelines, rather than just gut feeling — Interface design might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines.”

And the great thing is that instead of explaining the same (or similar) stuff using a different structure or new examples, Adham’s book complements Refactoring UI really well: there are a lot of additional aspects included, for instance next to visual design, it heavily focuses on usability and accessibility, too. Here are some of my favorite parts.

Interaction cost is a key concept in UX and UI design: it is about the amount of work users perform in order to complete a task (here is my UX knowledge piece sketch about the 4 types of work users perform). The book illustrates it with a great example:

“Total interaction cost is 3 clicks, a scroll, and a short mouse movement.” vs. “Total interaction cost is just 2 clicks and a very small mouse movement”

An illustration of interaction costs — Practical UI book
Total interaction cost — Practical UI (pp. 20–21)

Practical UI contains advice on how to use brand colors:

  • to which elements you should apply them
  • what to do if there is not enough color contrast against the background
  • what happens if there is more than one brand color

Color isn’t just for decoration, Practical UI contains advice on how to use color sparingly and purposefully to improve usability:

  • Use sufficient color contrast to help ensure those with vision impairments can clearly see interface details.
  • Don’t rely on color alone to convey meaning.
  • Apply the brand color to interactive elements to help teach people what’s interactive and what’s not, as seen in the example below.
How to use brand color — Practical UI book
“Just try to avoid using the brand colour on non-interactive elements.” — Practical UI (p. 81)

The book also shares some tips on designing for dark mode, and I love that these pages have a dark background. For instance, there is a part that explains how to create dark color palettes:

Designing for dark mode — Practical UI book
Creating dark color palettes — Practical UI (p. 99)

One of my favorite topics is designing for friction, I learnt a lot about it from one of my mentors, Zoltan Kollin, here is his great article and talk. Practical UI also discusses this topic in connection with Buttons:

“Before a destructive action is taken, you can introduce friction to help prevent people from mistakenly actioning it. This generally involves making the action less prominent, moving it further away, or progressively disclosing it. Don’t colour the action red, as this makes it more prominent.”

How to design destructive actions — Practical UI book
“Make destructive actions less prominent to prevent people from mistakenly actioning them” — Practical UI (p. 277)

As a closing thought, Adham highlights that “Guidelines can seem restrictive, but they’re not meant to limit your creativity Instead, think of them as a solid foundation to build, explore, and experiment on.”

You can download a free preview (28 pages) of the book here.

The UI Professional’s Design Manual (iOS + Android) by Adrian Kuleszo

The cover of the book Design Manual
The UI Professional’s Design Manual (iOS + Android) by Adrian Kuleszo

Adrian’s book is about creating mobile apps for iOS and Android, and it combines theory and practice by explaining general design topics using iOS or Android examples. Next to discussing principles and foundational topics like how to choose color, the book covers the native elements of these two platforms. One part of the book is about comparing iOS and Android, here is an example:

Comparing the secondary navigation on the 2 platforms — Design Manual book
Secondary navigation — The UI Professional’s Design Manual (iOS + Android) (pp. 233–234)

One of the biggest values of this book is that it comes with a Fintech UI kit, and Adrian walks you through the process of creating a mobile app using that UI kit.

The illustration shows how detailed the design guide is in the book, Design Manual
Detailed design guides and UI kit — The UI Professional’s Design Manual (iOS + Android) (pp. 663–664)

Next to practical tips, the book contains a theoretical part in each section, for instance here are some parts of the Profile settings chapter:

Example for how Adrian explains the theory behind the design — Design Manual book
Profile settings — theory — The UI Professional’s Design Manual (iOS + Android) (pp. 727–728)

After some theory, Adrian gives you a step-by-step tutorial:

A step-by-step tutorial — Design Manual book
Profile settings —practice — The UI Professional’s Design Manual (iOS + Android) (pp. 741–742)

Adrian also released a book about web design, you should check that out, too. Additionally, he has recently launched his Figma Mastery course, it contains 40+ lessons, a lot of homework assignments, source files, free ebooks and so on, highly recommended!

Making Design Decisions: How to design effective user interfaces at warp-speed by Tommy Geoco

The cover of Making Design Decisions
Making Design Decisions: How to design effective user interfaces at warp-speed by Tommy Geoco

I could use the subtitle: “and now for something completely different”. Tommy’s book provides a decision-making framework for UI design, and it is totally different from all the books on this list. As he puts it: “This book outlines a step-by-step process for making good design decisions quickly.”

I’d recommend this book for any design professionals, since next to basic notions, there are some great “aha-moments” included, too: “While this workbook incorporates a few beginner concepts, it is not a beginner’s guide for pre-career designers. It is a reference handbook for product builders.”

Here is an article that shows what kind of content you can expect from this book:

One thing Tommy recommends is that you should create and maintain reference sheets e.g. for:

  • design principles
  • design psychology
  • economics fundamentals
  • accessibility
  • design assets like typography and icon libraries

There is an idea I first heard in an interview with Jesse James Garrett: it is “strong opinions, weakly held.” (he attributed it to Peter Merholz).

“[…] at any point in the design process, he would have an opinion […] about where the design needed to go. But that was always subject to change, and he was willing to evolve or throw out ideas that he had been advocating for when it no longer felt that they fit the design, either because there was different kind of research insights or whether there were new business considerations […]” This approach is apparent in Tommy’s book, too, here are his great examples:

How to treat strong opinions — Making Design Decisions book
Example for strong opinions… — the Making Design Decisions book (p. 56)
How to treat strong opinions: in the face of evidence, you should change your existing views — Making Design Decisions book
…Loosely held — the Making Design Decisions book (p. 56)

Tommy talks about a chain of command that determines how you should evaluate your existing information and ultimately, how to make more informed design decisions: “1. What does institutional knowledge say? 2. What are my customers familiar with? 3. What does our research say?” As he puts it: “In the absence of research, it falls back to familiarity. In the absence of familiarity, it falls back to institutional knowledge (or your information scaffold). Rinse and repeat for each UI decision.”

Some more things I really like about this resource:

  • the permanent beta idea and the public roadmap
  • the book is only a small part of a bigger framework, there are (or will be) video courses, Notion templates, checklists and Figma files, too
  • the business mindset: we don’t design in a vacuum, there are business goals, deadlines, — in many cases— competitors and so on

I also read the following UI design books, and I can recommend them, too. Naturally, there is a considerable overlap between them, but each of them contains some gems you might want to add to your UI design treasure chest. I’ll mention one or two aspects I really liked about these books.

Designing User Interfaces

Designing User Interfaces by Michal Malewicz and Diana Malewicz

The cover of Designing User Interfaces
Designing User Interfaces by Michal Malewicz and Diana Malewicz

What I instantly appreciated about this book is that the authors stated that “it is just the beginning”, they released an MVP version of it, then added hundreds of pages on later dates.

The book covers a lot of aspects that are relevant for being a successful designer, e.g. how to

  • conduct a UI audit
  • show your work
  • communicate with developers effectively (this is one of my favorite topics, I have a Udemy course about it)
  • start a design project
What questions you should ask at the beginning of a design process — Designing User Interfaces book
How to start a design project — Designing User Interfaces book (p. 427)

Master UI Design Elements

Master UI Design Elements by Denislav Jeliazkov

The cover of Master UI Design Elements
Master UI Design Elements by Denislav Jeliazkov

I really like that Denis — just like Refactoring UI — starts his UI design book with this recommendation: “If you have trouble ignoring the details when working in a high fidelity environment, start designing with a pen and paper and sketch out your feature there.”

One tip that might be very useful for beginners is to always check your designs on different viewport sizes, test on a real device e.g. using Figma Mirror.

An advice about using Figma Mirror — Master UI Design Elements book
“Make sure the text you display is legible enough and always test it on a real device.” — Master UI Design Elements book (p. 182)

UI Design Principles

UI Design Principles by Michał Filipiuk

The cover of UI Design Principles
UI Design Principles by Michał Filipiuk

One thing I really appreciate about Michal is his honest and transparent approach, for instance he starts out with this statement: “Some of my Dribbble shots. I focused on making them pretty, not usable. Pretty work catches attention. I wouldn’t make something like that for a real product.”

Dribbble shots vs. reality — UI Design Principles book
Nice honest start by Michal — UI Design Principles book (p. 11)

And btw. he also treated his book as a living document, and added 150 new pages based on his readers’ feedback.

Another thing I really appreciate about his book is that he included a lot of homework assignments, practical tasks to work on, an example:

Example homework from the UI Design Principles book
Example homework — UI Design Principles book (p. 87, 205)

Do you know about any other UI design books I should check out? Please let me know, I might feature it in this article!


What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings