The purpose of the system
The primary objective of the Component System is to aid the design team in creating website and UI work of a high quality, while improving efficiencies. This is achieved by minimising time-consuming and repetitive tasks in development stages and cutting down handover tasks in the design and content stages. A key benefit of the system is the ability to share clean, professional wireframes with clients and the team. This avoids misinterpretation of information common with other wireframe methods.
The component library
Shifting the design team's mindset to a 'component' methodology provides a number of benefits. It allows the team to scale out unique functionality by creating component "packages" that are interchangeable and re-usable in future projects. It unifies styling language, design structure and other conventions within the team, which is particularly beneficial when onboarding new designers. And although the components themselves are wireframe-ready for quick implementation, they are 100% customisable to fit any brand or visual requirements, allowing the team complete design freedom.
The global styleguide
The styleguide controlling the Component System begins as a blank canvas, allowing the design team to apply styles and brand their project to meet any visual goals. The styleguide is easily editable to suit an evolving client brand, and provides a central source of reference when understanding a site's visual design language.
Fast prototyping
Above are two examples of how the Component System creates wireframes from components within the library. Once styling is applied to the styleguide, these wireframes transform into high fidelity UI elements. They can also be styled directly on the component for faster production.