Introducing the new design system
The DPL began development at the end of 2014 and has been regularly updated since then to support the University’s primary web site, alongside many associated sites and web applications. While continuous improvement is a core principle that we follow, with the advancement of web technology it was only a matter of time before a replacement system made more sense.
- ‘Baked in’ Bootstrap and jQuery code causes conflicts with modern web application frameworks, reducing uptake by other development teams.
- Lack of flexibility forces other developers to maintain their own parallel DPL versions.
Taking inspiration from leading examples of large-scale pattern libraries and design systems, such as GovUK’s design system and Google’s Material Design, we have separated the pattern library code from the guidance and documentation of the design system. This allows different methods to be used to construct and deploy each of these while keeping a tight focus on their differing key objectives.
The pattern library includes the Fractal documentation tool to assist in development and maintenance of the components, while each version of the pattern library is also published to npm. The pattern library will grow as new components are added, with the intended aim to replace the current DPL with this new resource.
The new design system is a detailed documentation resource for both developers and content creators who are creating or maintaining University web sites and applications. It combines technical information on how to correctly use the new pattern library alongside guidance on building accessible user interfaces that follows best practice and the University of St Andrews brand.
The digital communications team have a lengthy backlog to grow this resource to include all pattern library components, further design guidance and helpful examples.
To find out more information about either of the new projects, or to request new features, please contact the digital communications team at firstname.lastname@example.org.