Modern communication technologies are forcing us to re-evaluate our design and development methods. We can no longer escape the challenge of rethinking how we communicate with our clients and what the results of a visual concept should be. As a consequence of this necessary change, so-called atomic design principles, which aim to create coherent design systems, are particularly useful.
An UI-documentation or styleguide is a collection of assets and rules. A design system, on the other hand, schematizes and modularizes a design.
A section of the Airbnb design system | Source: www.designsystems.com
Because a schematized design based on modules leads to a considerable reduction in effort during the later technical realization and is also more consistent.
Also, a «code pattern library» linked to the design system eliminates the tedious and error-prone translation of design into code. This reduces the number of necessary correction loops as well as the associated communication effort.
Thus, a design system is particularly practical if it is available online and provides code patterns for the technical realization of the design. Because if the digital design patterns consist of the native code, then you can use your design system to display all elements pixel-precisely and 100% responsive. This way, you avoid unpleasant surprises in the technical realization and have a native look & feel of your later application quite early on, which you can evaluate yourself or via user tests.
A design system ensures the inner correlation and consistency of all elements. This leads to a high usability and a consistent appearance. It reduces visual "uncontrolled growth" and ensures design quality for a long time.
A design based on a deductive building block principle is technically much easier to implement, since code is basically also modular. It can also be easily extended when new requirements arrive. Both factors significantly reduce the effort and cost in the page creation process.
It is the ideal tool when designers and developers need to communicate with each other and also when different employees, teams or agencies work together on a long-term project.
Especially in the communication between designer and client, misunderstandings often occur, because stakeholders who are only sporadically called in to presentations and workshops are not able to understand all consequences of a complex user flow or responsive behavior. Without an intuitive look & feel for the responsive behavior of elements or possible user interactions, an evaluation process on the client side often leads to a massive overload and ultimately to many avoidable change requests after the golive, after the clients first actually experience the real look & feel of their application.
For this reason, code-based prototypes are often used. However, their creation is very time-consuming and often this generated code cannot be used in the technical implementation phase after successful acceptance, since frameworks or other code regulations, e.g. of a CMS, are used there.
Another problem is that teams nowadays work together on a complex UX project. Questions of a completely different nature arise, such as how to bring together the individual work results of all collaborating designers, how to create consistent, i.e. contradiction-free solutions within a team?
It is crystal clear: a new, contemporary workflow is needed.
Every designer who creates digital media has realized by now that we no longer design "pages" today, but a system of components that are brought together in a modular way. We no longer design screens, we design complex user interfaces.
It seems almost ridiculous that many clients still want to see static screens in pitches and design presentations. Therefore, a clear guidance on contemporary presentation and coordination methods as well as an associated agile workflow in the conception phase is needed at a very early stage of the collaboration with the client, otherwise the results will be unsatisfactory for itself and for the client.
In the summer of 2013, the American front-end designer Brad Frost presented his new design approach «Atomic Design». This approach is based on a scientific view of design, that functional, i.e. good design should be consistent and modular in all its individual elements.
And conversely, when you look at design results through the eyes of an atomic designer, that is, if you break down a design into its smallest individual parts, all its weak points and contradictions are much more clearly visible.
In principle, this approach was not entirely new. Many designers have intuitively worked this way for a long time, and there are similar design-theoretical approaches and postulates from Gestalt theory and the Bauhaus - but in their simple metaphorics and in the application focused on websites, as Brad Frost describes his system, Atomic Design is very contemporary, plausible and above all useful.
The analogy to the physical world, in which matter is composed of atoms and molecules, which in turn form cells, which in turn form organisms, gives the model its metaphorical armor.
Thus, one begins on a small scale and then gradually works one's way up to the large scale. The advantage: one avoids inconsistencies and ensures that the design system created is of one piece. In addition, an «atomic design» is much easier to implement, since «code» follows the same principles.
On this basis we have developed our application AtomicKitchen - because with AtomicKitchen you can create and manage an Atomic Design System in a very simple way. With its user-friendly interface, it helps designers, editors and developers in their daily work.
AtomicKitchen can be used to create online style guides, UI documentations, brand portals, as well as code pattern libraries that can be used as both a conceptual end result or as an iterative coordination tool between agency and client.
You and your team, and if desired of course all stakeholders, receive a complete, pixel-perfect «Look & Feel» of your future digital solution. This not only guarantees a perfect golive, but also leads to a reduction of effort to at least half of the usual effort during the technical realization of the frontend, during the necessary reviews and during the post-golive phase when the design is extended.
The code of each design element can be easily copied and pasted from the online style guide and used - the complete created design system including all necessary files can be exported and viewed offline.