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.
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.
The brand
I created a simple and neutral brand to ensure that the content was the focus:
- 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 “Lato”. It’s a quality typeface that’s highly legible at small and large sizes.
You’ll learn more about applying brand colours and typefaces to interfaces in the book.
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
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.
