PMIDesign system
In order to make sure each stream of the project was aligned a design system was put in place. This follows the principles of atoms. The main challenge was alignment with the 3 separate streams that were sprinting together at the same time.
It was apparent that lots of clear up was needed after each sprint – random symbols from older sketch files and bad naming conventions made it hard to design at times.
Developing out this design system so that it had a clear and concise logic helped in the structure of further sprints.
The process broke down the main design into various components – each component then had to relate back to the foundation core of the system. Using symbol libraries and abstract to ensure design was all aligned.
We had 4 main different sections that split the entire system in parts.
A. FOUNDATIONS
B. MODULES
C. COMPONENTS
D. SYMBOLS
Atomic design:
“In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. For instance, water molecules and hydrogen peroxide molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.”
Atomic design
Brad Frost.
Below is the main logic for spacing elements in which it was decided to ensure everything broke down into multiples of 4.
In an ideal world the design system is fleshed out before starting any template design. However on this project we worked backwards in certain areas, alignment proved difficult at times. it is still an ongoing process programs like abstract help designers keep aligned.
Stylistic elements were also incorporated into the system – like for instance this header. (This would link into the foundation of the system)
Components split into their various forms – type, colour, spacing make up the foundation atoms that then make the full structure for the template. Below is an example of an artboard from the component section.
