Designers
and developers have traditionally worked together to make the magic happen. However, sometimes this interaction could be tense because it was a minefield of different focuses, technical terms, and interests. What has happened to this struggle in the Digital Transformation era? The answer is that both worlds have come to terms! As a result, a common path has emerged called Design Systems. In the digital world, giant steps have been taken towards reconciling design and development. Thanks to this conciliatory attitude, today’s most innovative companies are starting to shape their own Design Systems. By the time we at GeneXus realized we had to do something about it, we found that several big companies had already begun this process. There were 3 major issues to tackle: streamlining interaction between designers and developers, achieving consistency among the designs of our applications, and systematizing the creation of components that we repeatedly design. We believe that defining our Design System will make it easier for us to achieve consistency and cohesiveness among styles, as well as streamline the workflow between both camps. That is to say, between those who see everything in terms of codes and features, and the rest of us who see everything in terms of color palettes and usability. According to the definition provided by Alla Kholmatova, the author of Design Systems, a design system is: “A set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.” Based on this definition by Kholmatova, we’re focused on combining code and design according to three pillars: Patterns, Principles, and Practices. We intend to create a system focused on the experience of a GeneXus developer, by studying and including the best brand patterns –those that make up the identity of the GeneXus digital product–, or the perceptual patterns that communicate the brand’s personality through the interface and help to make it memorable, adding cohesiveness even in different platforms. We also want to explore and design the functional patterns –building blocks– with which our developers interact. In other words, the specific components for each business need that allow for user interaction (for ex. the visual language of Airbnb is made up of the following components: Properties, Trips, Ratings, Editorials, etc). Working on functional patterns will be a leap forward towards the reuse of entirely visual components, using tools familiar to both front-end designers and developers. Regarding the visual language of our domain, the semantics level of design is increased, providing our business with much closer terms. To this end, in the beta version of GeneXus Tero (GeneXus 16) improvements have been added to the definition and creation of reusable experience components. During our research, we came across another definition, this time by Nathan Curtis: “A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.” We’ve realized that many times we design and develop the same components for different applications and that by “componentizing” them we would save a lot of time, as well as bring consistency to the brand identity. Let’s start at the beginning: What principles should our Design System convey? As part of our search for better cross-functional teams, we’re currently doing research and setting the basis for our design system. After a stage of research and reading (I recommend that you visit some of the links included in box 3) a big question arose in the team: What principles should our Design System convey? When speaking of design that must be aligned with the GeneXus philosophy, the following concepts quickly come to the collective mind: “Simplicity,” “Agility,” “Multi-platform.” However, we want to go further and deeper into our principles, to make sure that the product’s purpose is expressed through design. Once we’ve answered this question about principles, we will be ready to ask ourselves how our design system should be. Most likely, inside it we will find other questions, such as: What situations do we face today when designing and going over the designs with the development team? Or, what do we want the GeneXus experience to be like? A question well made leads to a good answer, which in turn takes us to another question. And this goes on and on! We’d love for you to join us in this new adventure to create our Design System. By the way, since we want this project to be a collaborative effort… It already has a name! 😉 → UNANIMOUS However, before ending this post, I’ll answer this question: Why are some projects more successful than others that have a superior UX? The answer is that their success is partly due to the effective interaction between professionals of the design and development teams. In addition, a key factor for the application’s magic to happen is the method and tools used by each one of them, and how they are integrated into a common workflow.

Sketch, Figma, InVision and Invision Studio, and Adobe XD are the most well-known tools, which represent a turning point towards design that includes code.

Interesting links to learn more about Design Systems

https://www.designbetter.co/design-systems-handbook https://medium.com/eightshapes-llc/tagged/design-systems https://airbnb.design/painting-with-code/ https://www.invisionapp.com/blog/guide-to-design-systems/ http://design.systems/slack/ https://www.smashingmagazine.com/design-systems-book/