Brad Frost, Dan Mall, and Josh Clark delve into the early choices you must make in order to construct a durable design system in episode 3. The following best practices are discussed: utilizing atomic design principles, protecting against shifting development environments, and planning and launching a pilot using objective criteria. To be able to feed your design system, is really vital to have a tiny pilot. It doesn’t need to be finished or flawless right away; you only need something to start, and you can be sure that it will develop from there. They describe the system of starting small, and expanding upon ideas. growing a system that everyone can use. Making sure to follow our previous topic Atomic design.
Atomic Design is a methodology for creating thoughtful, deliberate, hierarchical design systems. What atomic design is, is it’s a way to step through how our smallest atomic units of a UI is able to sort of build a final product. Atomic design consists of five discrete stages that all happen concurrently. Atoms, molecules, organisms, templates, and pages.
https://blog.joseph-wyman.com/design-systems/
Where to begin? What do we do?
The short answer to this question is to create style tiles. in practice, it is found to be helpful to begin with setting up a style guide from day one of a project. Even though it can look like an empty shell with no styles or anything, it’s there, and it’s an opportunity for a team to start collecting assets from the get go. Collecting things meandering around the organization and bringing them all under a kind of style guide umbrella is vital. Designers should be able to visit the style guides to get key information on how to design better products and Developers should be able to visit the style guides to understand how a particular component is used and what coding conventions to follow. Product owners can even visit the style guide to understand the materials to use and the rules and guidelines to follow for their own products. Making sure that when you start you begin with building up the components following the procedure of Atoms, to molecules, to organisms, to templates, to pages can help create and maintain a cohesive system that the entire team can follow.
I like to compare this to my little sister building her houses in Minecraft. When she builds structures within the video game she starts off with a basic structure, and uses that structure to base the rest of their ideas off of. She would start with the floor, then the walls, then the roof, and the additional accessories. Some of their specific rules I noticed were for example: only using cobblestone for the flooring, using oak wood for the walls, and even making sure they use dark colored wood stairs. When I decided to join in on her game with her, I was able to help build her structures how she wanted using what I learned from the first built one. Rather than me constantly asking how shed like things built she would say “just look at that one I built awhile ago and make it kinda like that” I didn’t know at the time, but my little sister is a natural born designer; making design systems like a professional designer.
Whats a pilot? Why should we have one?
The best way to to exemplify this concept is to think about your favorite T.V show, and watch the very first episode. And thats it, thats a pilot. A pilot is your beginning point, where you started from and grew from. Using this same example that was used in the documentary, think back to your favorite show at the beginning and compare it to how it is now. How has it grown? What has changed? Is it how you remember? The answer is most likely no, and its changed a-lot.
Or how about that Minecraft game I mentioned earlier? My little sister didnt have an idea of how things were going to work, but they picked a project (the first simple structure) and just started creating. They then used this to create a style guide and design system.
Your pilot is just your starting point and you are supposed to expand on these ideas. Take out what isn’t working from your initial ideas, and work on improving the ideas that are there. When creating a pilot there are about seven categories that this episode mentions for you to keep in mind:
1. How much of this can be commonly used
Consider common elements and common flow. A common example would be a header that can be placed on common documents.
2. How we can have highly-valued components or patterns
Perhaps you have a component thats only used on one or two products. An example used in the video is a calendar widget. It doesn’t appear often, but makes an impact.
3. Technical feasibility
How possible is it on the technical side to actually accomplish the project. Are there certain requirements, technology or material that you will need to complete the project.
4. Which pilot is the available champion?
A good pilot project will usually have a good champion (person) that will present project and head the management of it, being an evangelist for it.
5. Scope
How long will this project take to achieve. Days? Weeks? Months? if you choose too long of a pilot project, you most likely are not going to see results for quite awhile to build off of.
6. Technical independence
To summarize, technical independence is related to technical feasibility, but refers to how separate you can be from the project and systems to accomplish this.
7. Marketing Potential
A good pilot project will be something your organization can look at and inspire others to say “wow, Id love to do something like that”
How to protect you design system.
Now that we’ve gone over the discussed topics for creating a design system, we should finish off with discussing how to protect it from changing development environments. Well the strategy for this is relatively simple, and thats atomic design. To make sure that a design system stays truthful to its design is to make sure you follow atomic design, from atoms to pages. With each part of it designed and established it creates a working system for each level and work environment to adhere and reference to, to make sure it isn’t drastically altered beyond recognizability. Following the system of building up your design system and defining your atoms, molecules, organisms, templates and pages will prevent anyone from being confused on the topic, and from deterring too far from the path you set.
The overall takeaway from this segment with Brad Frost is: to create your pilot, develop your design system, and make sure it follows atomic design to stand the test amongst the team members.
https://www.invisionapp.com/design-system-manager/expert-advice/pilots-and-atomic-design