A comprehensive online book of 850 pages on the essential foundations, with in‑depth content on colors, typography, icons, media, layout, and more.
Tax calculated at checkout.
14-day money-back guarantee.
UI Design remains a complex field, and no matter the skill level, there are many questions that we ask ourselves throughout our careers and that I have asked myself:
“What’s the best approach to learn and do UI Design?”
“Why isn’t a 140×48 px button, for example, the same actual size on all screens?”
“What’s a color space like sRGB or P3 that I see in Illustrator, Figma and other apps? Is it important? (Spoiler, yes)”
“Why, if I try to use HSL or HSB to create lightness variants, do I get unbalanced palettes?”
“Why don’t all typefaces have the same actual size (whereas on Figma / Sketch I used the same value)?”
“How to choose and make good typeface pairs according to the project?”
“What are the essential principles for a good layout?”
“How to make a good dark mode?”
“Which resolutions should I use for my designs, and what are the best breakpoints for responsive design?”
And the list goes on...
I spent a long time looking for a resource that would answer all these questions. Sure, I purchased books on UI Design and read many articles, but none of them answered them completely.
All too often, I’d get generic advice on colors and typography, but without going into enough detail, how to design a button or a card, but not the general principles of layout, etc.
In addition, none of them talked (or very little) about the important screen characteristics, such as pixel density or color spaces with their influences throughout the UI Design process.
Finally, they were often in PDF format, which was not easy to use, for example to go to a particular page, read on mobile, get updates, etc.
It was from there that I decided to write the book “UI Design foundations” and after more than 2 years of work, many rereads and rewrites (and several liters of coffee ☕️), it’s finally here.
If I had a DeLorean with a flux capacitor, this is the book I’d take back in time and give to myself (and also a sports almanac, but that’s another story...).
A custom-made platform to read from anywhere for the pleasure of your RX (Reader eXperience ©)
This book is intended for both beginners and more advanced designers, as well as for developers who wants:
To specialize in UI Design over the long term, save time and make their work simpler.
A progressive and logical learning approach, where each chapter builds on the previous ones.
A visual-rich guide that you can consult from any page whenever you need to throughout your career.
Content that goes really in-depth, instead of quick tips like “use HSL for colors”, “texts should be 16 px minimum” or “use 12 columns for layout all the time”.
A theoretical guide specialized on the foundations of UI Design and not the rest like native designs on iOS / Android or the different styles of UI Design.
Universal principles for any type of UI Design project, such as a website, native app or web app design.
A guide on an online responsive platform that, unlike a PDF, allows you to read on any device the content with its updates without the need to download it again.
No false hopes, it’s important to also talk about what you won’t find here. So this book is not for you if you’re looking for:
A general presentation of UI Design, in which case I recommend this article to discover the subject.
A collection of short tips, although there are some, this book takes the necessary time to properly explain all the theory on the foundations of UI Design.
A book that covers the whole field of UI Design, for example we won’t be looking at how to make certain components in particular, but rather the general principles behind them.
A practical course with exercises, this book should be seen more as a theoretical guide to foundations, to be complemented by personal practice and other content (I list several useful links for this at the end of the book).
A guide to build a design system in practice, even though I talk about design tokens (variables) and how to structure them with two types of palettes, this isn’t the heart of the book.
A course on how to use Figma, but we’ll of course be looking at the important characteristics specific to the majority of UI Design apps, such as their color spaces and units.
Although this guide is for beginners and more advanced designers, if you’ve never opened an app like Figma or tried your hand at designing a bit, I recommend going through this first.
It’s better, indeed, if you’ve already designed a little and are reading the book in search of answers.
It that’s not the case, you can for example simply copy two or three screens from an existing design and then create a small project. I’ve listed some ideas for practice here: How to practice UX/UI Design?
This way, it’ll give you some basics on Figma (or another app like Sketch) and an overview of UI Design, which is recommended for the book.
A book rich in images and screenshots to illustrate the chapters
What’s the best way to learn UI Design? Should we start by talking about colors? Layout? How to make a button?
An efficient way of approaching a new field to understand it better, is to disassemble it until we reach its elementary and indivisible parts, which we can then study more easily and in a logical, progressive order.
If I take a house or a building as an example, at first glance it’s a complex structure, made up of a multitude of parts with their own rules that fit and work well together.
Now, if I want to design a house myself, it’d better study how it was built by going back in time, deconstructing it to better understand all the parts that make it up and their order of assembly, so as to be able to remake something similar.
I’ll discover, among other things, that there’s a whole legal procedure to go through first, a study of the terrain, and that I’ll have to start by studying the role of the foundations and how to make them solid rather than starting with the interior decoration, and so on.
With UI Design it’s the same thing, and to answer the question at the beginning, we need to extract the fundamental parts of a UI design.
If for example we take this design:
In order, we can extract the different parts that make it up like this, and it would work for any design:
So we have a design made up of flows, which are made up of templates, themselves made up of components that are an assembly of base elements, all of which are displayed on screens and therefore subject to their constraints.
And if we go on, we realize that behind the assembly of components and templates, we also have general layout rules like creating clear groups, elevations, aligning elements, managing responsive design, etc.
Then we also have common best practices like putting the navigation at the bottom on a mobile app, structuring a form in a certain way, etc.
Then finally, we have the styles which will depend on the product’s image (including the styles of native OS designs like iOS or Android).
All this while taking into account users’ specificities, such as color blindness, visual acuity and lighting conditions.
Which gives us in detail:
Finally, all this can be organized in a design system to facilitate the creation and evolution of a UI project.
Note also that there’s usability (including accessibility), but as we’re going to see in the book, these are part of the foundation points, like having good contrasts.
With the parts defined above, here is the UI Design learning path in the order I recommend, including what the book covers:
(* Design apps: the book talks about their choices and base configuration like color spaces, but not how to use an app like Figma or Sketch in detail.)
These six parts are what I consider the foundations of UI Design.
This is a logical order, as it’s best to look at screen characteristics first before moving on to color choices or typeface sizes, for example, as these characteristics strongly influence them.
And in practice when working on a project, this is also more or less the order I recommend. For example, before moving on to the layout, as we’ll see in the book, it’s better to have a palette with base colors and typefaces, and even icons depending on the cases.
You can see that this book doesn’t cover the whole field of UI Design, as mentioned before, it focuses on the foundations, because that’s what I feel is lacking among current books and guides.
However, at the end of the book, you’ll find links to resources for further exploration of the last three points.
In eight chapters, here’s everything the book covers:
If you got any questions, here are the answers
The book is accessible on my online reading platform: books.dokozero.design. By getting this book, you’ll have unlimited access to it (an account will be created with the email address you’ll use at the time of purchase if you do not have one).
This is not possible at the moment, you’ll need an internet connection to read.
Unlike a PDF file, the reading platform lets you: get all the updates without having to re-download the PDF, read on mobile and in the dark with the dark mode. In addition, it would require me to use an app with different operating modes to those of the web, and would therefore take me longer to make updates.
850 pages. This may sound like a lot, but in reality, the book is rich in illustrations and other captures that are quick to “read”. Moreover, it can be read non-linearly and some sections such as the advanced notions in typography, are not necessarily essential for understanding the rest.
As this is a site, to calculate the number of pages I took the total number of words in the book (206193 words) plus the average number of words per image (955 images × 100 words = 95500 words) then divided the result by the average number of words per page (350 words). This gives us a total of 862 pages, rounded up to 850 pages.
One of the main advantages of the reading platform is that it allows me to make updates easily, which is necessary since the field of UI Design evolves rapidly.
No, once you’ve bought the book, all future updates are free.
None, there are not several versions, no matter if you get the book from the page of one language or another, you’ll have access to the same content, where you can also change the language freely.
That’s quite likely, indeed, in the book I talk about fairly recent points like the OkLCH color model or the APCA standard for contrasts, which are fairly recent notions in UI Design and not necessarily covered in other content on the subject.
For some, yes, but more scattered and not necessarily up to date. With this book, you have a centralized, easily accessible and structured source of knowledge. In addition, there are some relatively exclusive sections, such as the detailed use of the Figma OkColor plugin created in the context of this book.
No problem, you have 14 days from the date of purchase to get your money back (access to the book will be removed, however).
A computer geek from a young age, I created my first website back when the internet was limited in time and you were greeted by sweet modem music (if you don’t know what I’m talking about, you didn’t miss anything, rest assured 😉 ). For the past 10 years or so, I’ve been navigating around web development and UX/UI Design.