UI DESIGN BOOKS
A curated list and review of my favorites
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.
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:
Another principle included in the book that formed the way I think about user interfaces is “Emphasize by de-emphasizing”, here is an example:
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.
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.”
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.”
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:
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”
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.
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:
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.”
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.
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:
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.
Next to practical tips, the book contains a theoretical part in each section, for instance here are some parts of the Profile settings chapter:
After some theory, Adrian gives you a step-by-step tutorial:
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!
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
- 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:
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
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
Master UI Design Elements
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.
UI Design Principles
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.”
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:
Do you know about any other UI design books I should check out? Please let me know, I might feature it in this article!