Design and development guide

Everything you need to start designing and building user interfaces with WorkSafe's design system and reusable components.

Date last updated

Monday 19 Jul 2021

Please note

The design elements included in this area of the Playbook are specific to the interface design version UI 1.0. This version has reached end of life. UI 2.0 is currently in development and this area of the Playbook will be updated when it is finalised. You can preview UI 2.0 via Storybook and view variations using knobs.

Step 1: Design fundamentals

The role of a designer is to solve interaction, information and functional problems - not just visual ones. That's why these design fundamentals begin with user experience, not interface design. This is a starter kit for anyone that wants to understand the design process behind WorkSafe's websites, the digital service standard, personas and archetypes, user journeys and design vision.

Step 1: Design fundamentals

Step 2: Interface design

Interface designers can hit the ground running by using WorkSafe's design system. This design guide introduces the patterns and foundation elements, utilities, components and content types, and explains how we design accessible digital products that are true to our brand, are modular and reusable, with the right amount of white space in the interface.

Step 2: Interface design

Step 3: Storybook component library

Version 1 of the WorkSafe design system (also known as UI 1.0) is available to you in Storybook. UI 1.0 is more than two years old and we're actively designing version 2.0 behind the scenes. UI 2.0 improves everything from the grid system to the typography, while retaining the features that work well already. It will be available to you in an upgraded version of Storybook once it's tested and stable.

Step 3: Storybook component library

Step 4: Drupal and Vue.js

WorkSafe websites are built using a modern, enterprise grade, web service enabled systems architecture. We use open source to build stable and scalable digital services. Drupal 8 and {JSON:API} do the heavy lifting and expose content to other applications, Apache Solr is the connector, and a couple of Vue.js web applications (and a native app thrown in for good measure) are the face of the operation.

More information coming soon.

Step 4: Drupal and Vue.js