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 only need a small handful of UI design guidelines to solve 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 guidelines.

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 tedious high-level design theory, this book contains 8 concise chapters of quick and practical UI design guidelines 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 guidelines 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 guidelines 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 confidently articulate logical reasons to support each interface design detail. Most importantly, you’ll be able to apply the guidelines you’ve learnt, to efficiently design intuitive, accessible, and beautiful interfaces.

Some UI design guidelines 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.

It might not sound fun or creative, but many of my design decisions are based on risk. The risk that someone could have difficulty using an interface e.g. light grey text can look nice, but there’s a risk that some may find it more difficult to read. Using the UI design guidelines in this book, we’ll find and fix the interface elements that pose a potential 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 avoid usability risks beforehand. Simply applying the design guidelines in this book, results in the following design.

I didn’t update the design just to make it look better, as that’s very subjective. The goal was to apply the guidelines in this book to find and fix interface elements that pose a potential risk to usability. You might be thinking, isn’t that what usability testing is for?

In a perfect world, every detail of our product would be rigorously tested with a diverse range of real users. In reality, that’s simply not practical or economical. This is why reducing usability risks using tried and tested guidelines is so powerful. Here's the rationale (logical reasons) behind the updated design.