My UI design book
After nearly 2 decades working as a product designer, I wrote down my logic-driven approach to UI design. Here’s a quick behind the scenes look at the making of my UI design book.

After nearly 2 decades working as a product designer, I wrote down my logic-driven approach to UI design. Here’s a quick behind the scenes look at the making of my UI design 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.
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.
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.
I created a simple and neutral brand to ensure that the content was the focus:
You’ll learn more about applying brand colours and typefaces to interfaces in the book.
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.
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.
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.
To design the landing page, I used the same design system I created for the book examples. I also used the design guidelines taught in the book.
I hope this gave you some insights into how I created Practical UI. 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. I’d love to hear your thoughts and feedback.