Julian Alexander
Creative Strategist at Digital360
Creative Strategist at Digital360

Component System

About the project

The Component System is an internal resource tool created by the Digital360 design team. Its purpose is to aid the agency team in producing high quality, and time efficient web projects, from simple UI elements to full websites. The system is built on a comprehensive library of modular UI components designed internally. These components are wireframe-ready and fully customisable for Digital360 client projects.

Involvement

Creative strategy
creative direction
UX design

Outcome

Website and UI

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.