The Designer’s Guide to the Buttons
The idea of writing a book about interfaces came up while I was working on the design of Skybonds, a complex asset management platform for a bank.
The platform already had a design system with all the necessary components, but something about it felt wrong. Beautiful buttons, carefully designed in every state and even in several styles, stubbornly refused to come together into the interface the way I had imagined. Every time, they seemed to stumble over something invisible.
While investigating this phenomenon, I noticed that the button component mixed styles and states. For example, the main blue button was designed as the pressed state of an ordinary gray one. Interestingly, the interface could still be built from them. You just had to close your eyes to the logic and make the blue button out of the pressed gray one. Easy!
Modern interfaces are literally bursting with errors like these. Some go unnoticed by users, but many are simply baffling. For example, in the interface of the dearly departed Skype for Business, two buttons sat side by side. One of them, with a camera icon, turned on video, while the neighboring one, with a microphone icon, turned off sound.
In another well-known product, Gmail, a designer somehow implemented autocorrection and grammar-check settings using two radio buttons, although checkboxes were a much better suit. In another interface from a major company, someone confused a dropdown list with a dropdown menu. One popular mobile app still uses underlined text fields; another mixes first- and second-level tabs. And in every other form, fields are now labeled above, even though the labels should be on the left...
And so on and so forth. After collecting hundreds of examples like these, I came to the conclusion that most mistakes designers make come from a lack of understanding of the interface internal logic. Instead of studying how components are structured, designers simply copy solutions that look successful. Everyone can see the result of this approach: modern design is always beautiful, but sometimes it is so hard to use.
Having decided to tell this story, I set out to write a book. At first, it was conceived as a collection of the best examples of interface design and the most typical mistakes. But as the work progressed, it became clear that good and bad examples were not just a random set. Behind the development of interfaces was an internal process of evolution, in which working solutions survived and became established.
The History of Interfaces from Xerox Alto to Vision Pro
The Designer’s Guide to the Buttons is a universal and highly comprehensive handbook for UX/UI designers. The book provides a deep, fundamental understanding of interface design and leaves superficial courses from General Assembly, Coursera, or Designlab far behind.
The book follows a clear historical arc. It begins with the invention of the first graphical user interface at Xerox PARC and ends with the ultra-modern Vision Pro augmented reality headset. Step by step, I guide my reader through the evolution of design from the earliest computers to modern desktop and mobile systems.
The emergence of the first GUIs, the Newton and iPhone revolutions, the interface race between Windows and Mac OS, the birth and death of skeuomorphism, the victory of flat design, and the transition from style libraries to design systems — the book covers all of this not only with substance, but with taste. The history of interfaces is woven so elegantly into the narrative that the book even includes a chronological timeline divided into historical eras.
The book consists of three parts. The first is devoted to desktop interfaces — from the Xerox Alto and Apple Lisa to modern macOS and Windows. The second covers mobile devices — from the Apple Newton to the iPhone and Android. The third explores the future of interfaces: working in virtual and augmented reality, using Quest and Vision Pro as examples.
Each chapter of the book is devoted to a single component. The book examines buttons, checkboxes, text fields, menus, dropdown lists, and other components in every detail, down to their anatomy. Through clear diagrams and hundreds of examples, it shows what each component consists of, which states it can have, and why some solutions work while others do not.
A UX/UI Designer’s Encyclopedia
The Guide to the Buttons is a true designer’s encyclopedia. The book contains an incredible number of illustrations — so many, in fact, that the exact count is not even listed on the book’s copyright page.
According to my own rough estimate, the book includes about 500 illustrations, diagrams, and sketches. Most of them are screenshots and interface examples collected from 180 — and this number is exact — of the most famous and widely used apps: Google Docs, Notion, Airbnb, Uber, Revolut, Microsoft Excel and Telegram.
Designers often struggle to find a good example from an interface proven in practice. When we need to quickly design a complex dropdown menu or toolbar, we mentally run through websites and apps where we might have seen a suitable example. The book solves this problem not only by providing dozens of the best examples for each component, but also by developing the reader’s visual experience.
The Designer’s Guide to the Buttons is intended for a wide range of readers. The book will be useful to both beginners and professionals. Beginning designers will be especially interested in tracing how familiar interface elements, such as buttons, text fields, radio buttons, and checkboxes, emerged from their counterparts in the physical world: electric bells, radio receivers, and ballot papers.
For professional designers, the book offers a reason to think deeply about the nature of interface decisions. It helps answer questions that seem simple but often prove difficult in practice.
Why is a component structured the way it is? Should a button become brighter on hover, or darker? What is the right way to mark a selected item — with a checkmark or with color? What is the difference between a dropdown list and a dropdown menu? What is the optimal way to align fields in a form?
These questions seem simple, but they are deceptively simple.
The book’s structure allows readers to skip difficult sections and return to them later. Scattered throughout its pages are 35 QR codes, making it truly interactive. Is something unclear? Just point your phone at the page and watch a video lesson or read an article.
A Guide to Building a Design System
The idea running like a thread through the entire narrative of the book comes down to creating a universal design system. While working on large international projects, I noticed that a design system could be represented as a set of tables of styles and states for each component. I called these tables matrices, and they turned out to be a rather unusual discovery.
First, the matrices look very simple, yet they can contain dozens of combinations. For example, the button matrix created in the book includes 144 variants, presented in an extremely compact form.
Second, the matrices proved to be universal. They have the same structure and differ very little from one component to another, which makes them easy to remember and understand.
Third, the approach turned out to be somewhat similar to the periodic table or the Standard Model of elementary particles. This may sound funny, but component matrices allowed me to literally discover missing components. Of course, this is a metaphor, but the result was curious: the logic of the matrix suggested new component styles to me; then I went looking for them in real-world examples — and found them!
Design Does Not Begin in Figma
I am convinced that The Guide to the Buttons is the best book on interface design — and here is why.
Today, we pay too much attention to the outward side of design. This is not bad in itself. I also love modern typefaces, pleasant colors, and neatly adjusted corner radius. However, designers increasingly forget that there is another side as well. Some will say: yes, and that is UX. But no — there is something even deeper. It is the logic of the interface itself, which we have lost behind a dozen fashionable abbreviations.
We have begun to forget that design does not begin in Figma. Nor does it begin with research, as is commonly believed today. Most UX research does not investigate anything; it merely justifies a decision that has already been made. Of course, there are certain experiments that do bring science into design. They are conducted, for example, in laboratories developing surgical robots, and I discuss this in the book. With that exception, all research — including research from Google — is a pseudoscientific screen for defending design decisions in front of management.
The Guide to the Buttons gives design back to designers. The book explains how to build an interface not on the basis of naive empirical inquiries, but from a priori logic and the properties of human perception.
The last book written from this point of view belonged to Jef Raskin, the creator of the first Macintosh interface. It was published back in 2000. Since then, interfaces have become more complex, while our understanding of their nature has gathered a layer of dust. This book is written as an attempt to reverse that trend and remind us what interface design really is.
Dear designer,
The Guide to the Buttons is the book I myself would have wanted to read at the beginning of my career. I am absolutely convinced that it will help you look at familiar things in a new way, become twice as good a specialist, and give your professional growth a serious boost.
As you can see, this book is three in one: a history, an encyclopedia, and a guide. And it also has one more thing. I swear by my cursor, this is the only book in the world with an intermission!
