Join Tom Green for an in-depth discussion in this video First steps, part of Developing a Design System with UXPin.
- [Instructor] The first thing you need to know about creating a design system in UXPin is that you don't make it up as you go along. There is an enormous amount of work that has to be done before you flame up UXPin. To get an idea of just what has to be done, I would urge you to head over to Anne Grundhoefer's Creating A Design System With Sketch, here at lynda.com. She gives you a great overview of the process in the first video of the course, identifying components, and even provides you with a sample worksheet that will help you kick off the process.
For many companies, a design system also includes what are called Guiding Principles. These are the rationale behind the project. For example, Demian Borba, the strategic development manager for Adobe's Experienced Design, outlines the three rather simple yet powerful guiding principles behind Adobe's XD in his Lynda course, Developing a Design System with Adobe XD. The British Broadcasting System does the same thing in its introduction to its Global Experience Language.
There are five very simple principles behind everything found in the BBC's online presence, and you can see them right here on this page. The real gold for me is this pulled quote down here, "like any language, GEL's vocabulary will expand over time." This is a critical data point for you. A design system is an evolving creature, meaning it needs to be clearly understood by everyone involved in creating the system and using the system, and it isn't carved in stone, it must change to meet new situations and even new media forms.
Think about this, how will your company adapt when augmented reality really catches on? How will AR be added to your design system? This whole process requires deliberation and a careful review of everything that contributes to your online presence. Even UXPin was not immune as it started the process of creating an enterprise level design system for UXPin. In this Youtube video, Marcin Treder, UXPin's CEO, walked through the process of creating that system.
One of the steps involved was the gathering of a color inventory of all the colors used by UXPin. One of the glaring inconsistencies that was discovered was the naming of all of the 62 shades of gray used. As Marcin put it, the naming was getting pretty weird. The names didn't mean anything to the developers. What was really going on was the designers were eyeballing new shades of gray and throwing them into their projects, and the developers were taking them, adding new variables for them, and we suddenly wound up with hundreds of colors with hundreds of variable names and no system to control them.
When your review process is complete, your decisions are made and everyone is on board, then you flame up UXPin and start creating a design system.
- What is a design system?
- Creating a design system
- Adding colors, typography, and other assets
- Integrating Photoshop and Sketch
- Wireframing and prototyping
- Sharing your design system with team members