UI design book

About the book

With an increasingly overwhelming amount of design tips, videos, books, and blog posts out there, you can burn through a lot of time and money only to end up even more confused. Over nearly 2 decades working as a product designer for startups, agencies, corporations and government, I’ve found that you really only need a small handful of key UI design principles to tackle most interface design problems.

You don’t even need to be exceptionally creative or artistic to be a solid UI designer (although it doesn't hurt). Much of what comprises an intuitive, accessible and beautiful interface design, is the simple, systematic application of these key UI design principles.

I wrote this book to help you cut through the unnecessary noise, and focus on the 20% of UI design knowledge that will bring you 80% of the results. UI design is so much more than just making things look pretty, every detail has the power to make or break the user experience of your product.

What's inside

Rather than comprehensively detailing countless chapters of high level design theory, this book contains 8 concise chapters of quick and practical UI design principles and tips that you can immediately put into action. Examples and a clear rationale are provided for each principle, to help you better understand and articulate the reasons behind your design decisions.

Below are a few examples of UI design principles you'll find in the book, I've posted other quick tips on Twitter too.

Example 1

Break up content using descriptive headings and bullets

Break up large pieces of information into multiple smaller ones to make it easier and faster for people to understand. This is increasingly important as our attention spans are getting shorter and shorter.

Highlight key information using descriptive headings, this allows people to scan the information at a high level first and delve deeper by reading the supporting copy if needed. Since some won’t read supporting copy, make sure the headings are descriptive and convey the key points.

Example 2

Ensure ideal line length

To aid readability, ensure copy is 45 - 75 characters per line (including spaces). If lines are too long, it makes it harder for people to gauge where the line starts and ends. If lines are too short, our eyes get stressed by having to travel back too often. Having a comfortable line length is especially important for long-form body copy.

What you'll learn

This book won't teach you how to create glassmorphic visual effects for your next Dribbble shot (although they do look pretty cool). Instead of trends, it focuses on simple, timeless design principles used to design user friendly products in the real world.

By the end of the book, you’ll have a set of rules that govern your UI design decisions, so you’re not just relying on “gut feeling” or what looks pretty. You’ll be able to articulate logical reasons to support each interface design detail. Most importantly, you’ll be able to apply the principles you’ve learnt, to efficiently design intuitive, accessible, and beautiful interfaces.

Here’s an example of a few UI design principles in action

The design below is a fictional property details page for a short-term property rental app, similar to Airbnb. Many designers would look at this design without seeing any issues. Some might make subjective comments on aesthetics. Only a few would notice that there are numerous objective UI design issues that could negatively affect usability and accessibility. Even fewer would be able to explain why.

Based solely on the UI design principles in this book, I’ve highlighted the main issues with this design below. Each issue poses a risk to usability.

As you can see, there are quite a few issues that need to be fixed. Rather than jumping straight into timely and costly usability testing, there’s a lot we can do to mitigate usability risks beforehand. Simply applying some of the design principles in this book, results in the design below.

Much better. I actually did some usability testing that quickly verified some of the improvements from the initial design to the updated one. Usability testing is great, but it won’t highlight all of your design issues. So, it’s imperative that we mitigate as many known usability risks as possible. I’ve detailed the rationale behind the updated design below.