YIN-YANG in UI
Why YIN-YANG?
“Why not just say “balance in design” without this mysterious oriental show-off”? – someone might ask. Of course, you can say that. But the most interesting, as always, is in the details. I hope that as a result of reading, you will appreciate the term “YIN-YANG in design”))) Because, in my opinion, reference to this symbol in the work of an interface designer is more informative and easier to understand for related specialists. And I’m going to talk about this as briefly as possible, without further ado, with examples of specific elements and design solutions for the dBrain console.
The very appearance of the topic of the article has a practical background. The YIN-YANG vision was born in the process of my onboarding for a new project when transferring the current project to another designer. In conversations with colleagues – designers, front-end developers and business analysts – I repeatedly voiced the principles of constructing the design I was creating, when the information (unexpectedly for me) suddenly formed into the following system:
The proposed approach to the design of any interface is based on the interaction of two opposites:
YIN (dark side, cold, Moon) – this is something passive, not attracting attention, but intuitively read and understandable.
YANG (light side, fire, Sun) – on the contrary, dynamic, bright, eye-catching and involving in the game.
YIN
The design of elements in the YIN style sets the overall background, clear and simple. Actions with it are predictable and natural due to recognizable and easily readable elements by the user. It is like an orchestra around the solo violin YAN – all the musicians are in their places and play strictly according to the notes. Here is a sample list of such elements:
Corporate design system – these are tens and hundreds (depending on how you count) of elements: from “indivisible atoms” of icons and check boxes to prefabricated components such as “calendar”, “slider” or “search field”. There are also fonts, colors, sets of buttons and their various connections and patterns.
Local UI Kit of the project – it also tops the list, if there is no corporate design system yet – elements of the corporate design system actively used in the project and their combinations.
Page template structure – control points for switching designs in adaptive view, grid, internal and external margins of parent sections and main blocks.
Application architecture and navigation principles – the structure of sections and their presentation in the main and additional navigation menus.
Anatomy and behavior of standard elements – uniform rules for cards, forms, options. Answers to simple questions, for example, where should the main “Confirm” button be located in forms, etc.
Principles of content filling – where and when do we put periods at the end of sentences, do we use Camel Style… and other numerous boring questions.
It should be noted that all interface design problems can be successfully solved only by means of YIN, but that will make it boring. A good example is the final work of school students for beginning UI/UX designers. Such portfolios are built exclusively on YIN elements and even with scrupulous elaboration they look gray and faceless. And this is an excellent strategy, because in this way candidates convey a clear message directly to the heart of HR – “look how much I know, but at the same time I’m as clean as a white sheet of paper, all that’s left is to add your colors!”
YANG
Design in the spirit of Yang is designed to attract attention, slightly excite the user’s brain with simple puzzles that encourage them to understand them and find similarities with objects in the real world. What's in it?
Custom Design Elementscreated on the basis of elements of the corporate design system or in addition to them – buttons, icons, checkboxes, fields and other elements that are used only in this project.
Custom Design Components – widgets, graphics, sliders and other bright components that are created exclusively for the functionality of the product and emphasize its identity.
Unique Features – for example, the behavior of large tables on screens when overloaded with content. We have implemented a feature where, when scrolling vertically, the table header is fixed at the top of the content area of the screen, and when scrolling horizontally, the “Name” column is fixed on the left side of the content area. I talked more about the design features of the dbrain.cloud platform here.
The downside of this “celebration of life”: if we go a little overboard with YAN, we end up with an interface design that is difficult to perceive. Therefore, YAN must be used in doses and extremely carefully. Mandatory discussions of innovative solutions with fellow designers and quick “corridor tests” with other team members will help us. And a reserve of nerves – get ready for criticism and a high risk of transferring Yan’s decisions to the backlog.
I would also like to note in a separate paragraph on the topic YAN “festival design”. This design would work great to represent the product in marketing materials, or the designer in his portfolio, but not in the actual interface with which the user interacts for a long time.
And for the same reason, the preparation of presentation materials for seminars, public speaking and other marketing activities of the company cannot be done without bright solutions in the YAN style. Here, “festivality” not only advantageously represents the product, but also emphasizes the uniqueness and solemnity of the event itself. But this is also an important UX – the first contact of a potential user with the product.
Dots inside
Points are an integral part of YIN-YANG. This is a symbol of the fact that opposites not only complement, but contain each other. And in interface design, this is clearly visible and has practical application. Look at the examples of how light and bright additions of YANG grow through the “reinforced concrete” elements of the YIN design system. And vice versa – how YANG elements, after numerous repetitions in the project, gradually stabilize and take their place in the YIN design system. Isn't this a miracle?!
Example No. 1. Sections of forms with switches
The simple plug-and-configure solution, first appearing in the Postgres cluster create/edit forms, spread throughout the project at the speed of light. Now only in the dBrain design project there are more than 10 different modifications of this solution. And it is already preparing to jump into other projects – of course, through the company’s design system. An excellent example of the transformation of YANG into YIN.
Example No. 2. Fields and selects stylized with icons
Some icons are used in clearly designated cases throughout the console interface. These include the designations CPU, Memory, Replicas, Storage size and others. And with repeated repetition of fields and selects in various forms of the console, these elements freely cross the border of YIN and YANG in any direction, depending on how you look at them))
Balance line. Dynamics
No one knows where the border between YIN and YANG lies. Even in one company with a single design system for all projects, different projects and teams may have their own rules for passing the dividing line between the corporate design system and the local UI Kit of the project. This is influenced by various factors, both technical and organizational: the complexity and age of the application, team size and many others.
The good news is that we have the right to determine the balance line ourselves at our discretion. And without becoming hostage to your own decisions. Because the entire system as a whole is dynamic, it is constantly influenced by both internal and external processes. The latter would include regular news from world leaders Google and Apple. And we are talking not only about updates to their sets of recommendations Google Material Design and Human Interface Guide. A fresh example for 2024 is the appearance of the new Apple Vision Pro device and a special UI Kit – visionOS for application developers for this device.
The YIN-YANG circle never stops! And therefore there are no clear rules – we can only strive for the ideal weight distribution of elements, being in a constant search for harmony.
Conclusion
I hope that the principle proposed in the article and the practical examples associated with it will help you communicate more easily and effectively with colleagues, teams and stakeholders:
Compared to the concept of “balance in design,” the reference to YIN-YANG is more friendly, and also visual and picturesque.
Clearly structured YIN and YANG elements help to quickly evaluate and adjust the design.
PS: Of course, my passion for kung fu played an important role in the announced concept, and I admit that in recent years I have seen the YIN-YANG symbol not only in design)) I will be glad to answer your comments. Thank you for your attention, colleagues, I wish you confidence and balance in everything!
