There are two main ways of creating prototypes with the design system:

  • design kits
  • HTML

Design kits

Our design kits support single page mockups, low and high-fidelity prototypes and simple or complex interactions.

Our design components and settings are available as Adobe XD and Axure RP files.

HTML

HTML is best for advanced functionality, complex logic or to simulate the most realistic user experience, for example when testing for accessibility.

HTML prototypes currently need developer support to setup. Contact the Design System team to see how we can help with this.

How to set up Axure RP

Axure RP is an application used to create wireframes, mockups and interactive prototypes.

Add the NICE Design System Axure library to Axure RP

  1. Install Axure RP - make sure you install the latest version
  2. Get the Design System widget library. The library contains widgets for Design System components, design elements and patterns.
  3. Open Axure and click the 'Add Library +' icon at the top of the libraries pane.
  4. Locate and select the NICE_Design_System_2023_v1.0.rplib file.

NICE Design System Axure library

Start Designing

Use the widgets from the NICE Design System Axure library to start designing. The widgets are in the libraries pane on the left side panel. To add a widget to the canvas, click and drag it from the libraries pane.

All widgets come with styles and interactions already built into them.

Support

If you are new to Axure, there are lots of tutorials to get you started.

Releases

When a new library version is available, you must download the new file to replace the old one.

Pick the right tool for the job

Consider what you need to learn with your prototype and choose the right prototyping tool.

Flat mockups

Mockups of pages without interactions or navigation.

Best used for

Initial design feedback, early concepts, copy and content testing.

Tools to use

Adobe XD is good for quick mockups and simple user journeys. You can also use Axure if you are familiar with it, but it has a steeper learning curve for beginners.

Simple prototypes

Ideal for demonstrating content and simple user flows and journeys, for example, navigating between pages.

Best used for

Simple journeys, user flows and interactions.

Tools to use

Adobe XD is suitable for simple user journeys and interactions. However, it lacks advanced prototyping functionality.

Complex prototypes

Prototypes with more complex functionality and logic. For example, working filters, form fields and drop-down menus.

Best used for

Functionality and task performance, usability and user journey testing.

Tools to use

Axure allows you to add more complex interactions and functionality to your prototype, for example, logic and conditions.

HTML prototypes

Building designs in HTML is the most realistic and accessible experience for testing but also potentially the most time-consuming to produce. HTML prototypes should only be considered if you are confident in the design and content. Try to learn as much as possible with simpler prototypes before considering HTML.

Best used for

Accessibility testing with assistive technologies. Testing of responsive design and layouts across viewports. Testing advanced interactions that would be too difficult or time-consuming to build in a design tool.

Tools to use

HTML prototypes will need support from developers to setup and build. Contact the team if you think this is something you need.