Without a design system, it's the blind leading the blind.
Monday morning, you arrive at work eager to check out the latest install of the latest build, or check out the newest code, ready to see how your design was translated into beautiful action. But wait! After seeing the new build, you notice that the actual implementation does not look like your design at all. Something is wrong with the colors, the margins, the balance, and the viewport.
I think this story sounds familiar to any designer at least once in their career. Maybe even once each Monday. There is a gap between creating design, and transforming that into actual implementation. There are several factors that can help to reduce the gap and make the output even better than the original design.
To ensure consistent output, the original design need to be as close to perfection as possible. Harmony in design includes harmony across platforms, so all platforms and all apps within your ecosystem should have a consistent look and feel. A Style Guide is the best way to ensure consistency because it acts as 'the truth'. You can start constructing your style-guide after the first set of main screens or hi-fi mockups are in place. Some good resources to understand more about style guides are:
http://bradfrost.com/blog/post/atomic-web-design/
This is a short book but a great start to understand about how important those small UI elements are, in forming the bigger picture.
https://developer.apple.com/design/human-interface-guidelines/
If you are an “iFan” and design applications for the Apple iOS platform, you will have heard of this famous style guide. HIG is particularly helpful for new developers to help bring applications UI closer to the experience that Apple users have come to expect. As an expert designer, you can of course go outside the HIG - but be aware that you may be introducing unnecessary effort on behalf of your potential users.
Material design is good for developing Android apps and it differs from HIG in that it also is a well accepted guide for web design.
Over the past few years, there has been a gradual migration in app development toward the “mean” in-between HIG and MD, so that apps on the two popular mobile systems look and feel more and more similar.
On this site there are several good examples of how to author your own styleguide and how to use each atom in the guide.
https://get.foundation is also a good starting place for enterprise level style guides that can be integrated into your Front End.
Besides static UI elements, the strategic placement of animation in navigation, buttons, view transitions and hover shading can make the application more lively - if you use it judiciously. Animation can be a tricky part for designers because it requires an intimate knowledge of development kit capabilities which in turn requires much additional effort on animating design elements. Some good tools that support animations are: Proto, Invision, and Flinto (best for showing transitions between views); also Adobe After Effectsand Principle(for more complicated animations)
To collaborate between designers and developers, beside a design guide that acts as the “truth,” some prototype tools including Invision,and Zeplin already store color, size, fonts and other CSS stylings so developers can make sure the output will be close to original design. Rather than maintaining a heavy design guide for the team, this can be public for developers to use and contribute to over time.
A good Design System not only benefits design, it also benefits the developers who are your design 'translators' because it involves them in an open and collaborative environment. However, building a design system can take time, and maintaining a good design system over time takes great effort. In the end, the output is the prize, and a good system will reduce both time and tensions during the ongoing process of test > design > build > retest.
