Prototyping

Axure RP

Axure RP is an application used to mock up wireframes and clickthrough prototypes.

Add the Design System Axure library to Axure RP

1. Install Axure RP
   To design with our Axure library you must have the latest version of Axure RP installed.

2. Get the Design System widget library
   The library contains widgets for Design System components, design elements and patterns.

Open Axure and click the ‘Add Library +’ icon at the top of the Libraries pane. Locate and select the digitalscotlanddesignsystem_v1.0.rplib file.

Start Designing

Use the widgets from the Design System Axure library installed in step two to start designing. You’ll find the widgets located in the Libraries pane in 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, they offer tutorials to get you started.

Releases

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

Figma

The Scottish Government Design System Kit is available on the Figma community portal.

You can also directly download the file.

Once you have the file added to your Figma account, publish the library from the assets panel. You will then be able to access the styles and components in your project’s files by enabling the library through the assets panel.

Guide to Prototyping Model

The prototype you select should be appropriate for the intended audience and features you are testing.

Define what the objective is of your testing is at the outset, as different outcomes suit different prototypes.

Outcomes could include:

• Design, layout and page flow
• Copy and content
• Functionality and task performance
• Accessibility
• Usability / User Journey

Hand-drawn Sketches / Storyboards

Ideal for quick testing of ideas, useful in discovery. Could be used for testing broad concepts as opposed to detailed and complex transactional services. Can be used in focus groups, for peer review or to capture a quick overview. Ideal for referencing reused components which form part of a tested pattern library.

Ideal for: Design, layout and page flow testing.

Flat Mock Ups

Ideal for communicating layout and design concepts or combinations of components that are already developed and in use. Could be used to illustrate a series of pages and content.

Ideal for: Design, layout and page flow, copy and content testing.

Simple Wireframe

Simple wireframes are ideal for demonstrating the relationship between content, basic navigation and copy. These wireframes would usually be un-styled (unless a wireframe library exists that can be tapped into).

Ideal for: Design, layout and page flow, copy and content testing.

Standard Wireframe

Standard wireframes will include navigation, content, and components which include functionality and logic which perform in the prototype, such as drop-down menus, postcode lookups etc. These wireframes would usually be un-styled (unless a wireframe library exists that can be tapped into)

Ideal for: Design, layout and page flow, copy and content testing, functionality and task performance testing.

Complex Wireframe

Includes all of the functionality of a standard wireframe but fully styled up per the final live site to provide a near to final model for testing prior to build.

Ideal for: Design, layout and page flow, copy and content testing, functionality and task performance, usability / user journey testing.

HTML Prototype

An HTML prototype can be used to test any aspect of a product or service as it is closest to the final product delivered and includes site styling, functionality, interactions and flow. Accessibility testing for assistive technology requires production-ready code so will need to be performed on a HTML prototype or live service. Testing of responsive design and layout across viewports is also ideally tested on this type of prototype.

Ideal for: Design, layout and page flow, copy and content testing, functionality and task performance, accessibility, usability / user journey testing.

Staging Environment

Accessibility testing for assistive technology can also use prototypes built in a staging environment. Testing of responsive design and layout across viewports is also ideally tested on either a staging or live environment.

Ideal for: accessibility testing, usability / user journey.

Most projects will require more than one type of prototype during the design / UX lifecycle. Usually, at least two prototypes will be required.