My UI design book
After 2 decades working as a product designer, I wanted to document my logic-driven approach to UI design. I spent thousands of hours creating a UI design book and here’s a quick behind the scenes look at how I did it.
Why I wrote the book
Over the years I’ve realised that most of my UI design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules. They’re actually more like helpful guidelines than strict rules.
The guidelines are mostly based on conventional best practices, which seem to have been forgotten over the years. Many of the guidelines are based on how our bodies work. How our eyes perceive things, how our brains interpret them, and how we interact with a user interface.
I wish I’d known these guidelines when I first started out in product design, as they would have saved me many years of research and experimentation. My hope is that they’ll help you gain years of visual and interaction design experience in a matter of hours.
A book created entirely in Figma
You might be surprised to hear that I actually created this book in Figma and exported it as a PDF file. This worked well, as I needed to include a lot of visual design examples in the book.
I created each visual design example as a component. I built reusable templates for the pages of the book itself, and slotted in the examples on each page. This made it quick and easy to update the examples in the book.
The design system
Creating the book in Figma allowed me to put together a simple design system with components, templates, and shared styles to speed up my workflow. I created a colour palette, a type scale, and spacing options to improve consistency and speed up decision making.
I also created a small library of reusable components to create the visual design examples in the book. I really enjoyed designing the examples and it was a good way to demonstrate the teachings in the book too. Many of the guidelines in the book are about creating a simple yet powerful design system.
Since releasing the book, I built on the book’s design system to create a complete Figma design system. After studying hundreds of design systems over the years, I wanted to share what I’ve learned while fixing some of the issues I see in many popular design systems.
The brand
I created a simple and neutral brand to ensure that the content was the focus. Here are a few considerations I made while creating the brand:
- Logo: I started with the “Catamaran” typeface, outlined the text, and made some small manual adjustments. I wanted to add some character and make sure that each letter flowed to the next.
- Symbol: I introduced the selection box as a symbol, as it’s an iconic part of most interface design tools.
- Motif: I used a grid pattern for backgrounds to add texture. The grid is the backbone of all interface designs, so I thought it made sense to pay homage to it.
- Colours: I went with a single neutral blue brand colour to help ensure universal appeal.
- Typeface: I chose a neutral sans serif typeface called “Inter”. It’s a quality typeface that’s highly legible at small and large sizes.
The book cover
I wanted the book cover to be simple but memorable. If you look closely, you’ll see that the background texture is actually made up of interface design examples from the book.
I created this texture by outlining interface components and arranging them in a collage. I also included the grid motif and logo for brand consistency.
A picture is worth a thousand words
I tried to keep this book as concise and practical as possible to help you quickly cut through the noise. A picture is worth a thousand words, so I created lots of visual examples to demonstrate concepts faster and make the book a quick and easy read.
The landing page
To design the landing page, I used my Practical UI design system paired with design guidelines taught in the book. I created the landing page using a WordPress website builder called Elementor. It’s relatively quick and easy to use, has lots of templates that you can customise, and has a free version.
Loved by thousands
I hope this provides some insight into how I created my UI design book. I spent thousands of hours crafting each and every word and pixel. I wanted to ensure that the book provided maximum value in minimum time and it’s awesome to see it helping so many people.
