The Alchemy of Indigo.Design UI Kits

How we have defined our atoms, molecules, and organisms*

Unparalleled productivity, absolute consistency, and improved collaboration: design systems have definitely changed our perspective on design. About a year ago, our team stumbled into this new and trendy concept, and it was definitely a love at first sight. As a company that is mostly recognized as a component vendor, we were able in the past years to truly commit to design and embed it deeply into our culture. We saw how our processes and products improved, but it still felt as if design failed to keep its promise. This came from the realization that at Infragistics we may have 1:10 designer-developer ratio, but that was rarely the case throughout the industry. Many of the enterprises we talk to or have been long time customers and partners of ours, live in a different world. Their designer-developer ratio is usually around 1:100, which basically means that design is the bottleneck in the process and sheds light on just a few hand-picked projects from the myriad of software that is being built. With design systems, we saw the opportunity to turn things around and boost design to have for more significant impact on large software organizations.

The Inspiration

One of the cornerstones for design systems is the work of Brad Frost and, more precisely, a book he published in 2016 called Atomic Design. It draws an interesting parallel between chemistry and design systems, looking at interface elements from the perspective of Atoms that when combined build up Molecules that constitute larger Organisms. The Indigo.Design UI Kits for Sketch take this approach by providing three libraries. Styling has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library. The concept of a component is familiar to developers, and this is usually a button or a hyperlink that represents an Atom but could also be a more elaborate layout such as a calendar interface or a list with templated items, where multiple Atoms are used to form a Molecule. When mixed with caution and under proper guidance, Atoms and Molecules can turn into a beautiful Organism. And this brings us to the third piece, the Patterns library. It allows people to skip mundane tasks for assembling login forms, user profiles, and detail pages by providing them with a preset collection of UI patterns, inspired from numerous real-world scenarios and guaranteed to meet your practical necessities because of that. Note that the patterns are still in their infancy and feedback or suggestions are very much appreciated!

To make sure your design does not catch fire or explode in your hands, the reactions we absolutely wanted to avoid during chemistry classes in high school, our team has crafted a lot of prescriptive guidance that should let even a developer to craft decent design. Not that we underestimate developers, but their design work has been quite notorious in regard to aesthetics. Indigo.Design was brought to the world to change this and let anyone, designer, developer, product owner or business analyst, be able to confidently create a good and stable piece of design as long as they follow the provided guidance. 

Moving Beyond Sketch Libraries

Having provided the context and foundations for our Indigo.Design UI Kits, the leap in productivity and the improved consistency should be without doubt. But how about collaboration? Indigo.Design is much more than a collection of Sketch libraries, and the rest of the tooling speaks to collaboration. Being able to upload the Sketch project you crafted with the libraries to the Indigo.Design Cloud, define the precise interactions, and run a usability study  is priceless when on a tight schedule and trying to get things right from the first time. But once you are convinced that your design functions and meets all user needs, you can leapfrog the annoying process handing off your designs to a team of developers, simply by generating most of the code assets yourself with our Visual Studio Plugin. As long as you have the data you will be consuming, you can specify your bindings by going back to Sketch and using some of the special override properties we have defined, or work alongside a developer and fill in the gaps so that your assets flow in a beautiful Ignite UI for Angular app.  

*The parallel between design systems and chemistry was first described by Brad Frost, who explains the organization of Design Systems at length in his book “Atomic Design”