A progressive approach to the foundations of UI Design
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:
- The supports, in particular the screens on which the design will be displayed.
- The base elements such as colors or typefaces, influenced by the screen characteristics, such as resolution, density, color space, etc.
- Components which are assemblies of the base elements according to certain general layout rules, as well as common best practices and certain styles.
- Templates which are assemblies of components according to the same general layout rules, as well as common best practices and certain styles.
- Flows, which are concrete actions such as “log in” or “add to cart”, often made up of several templates and which also have certain common best practices.
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.
What the book covers
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.
