“A design system can create value on at least two levels. At the team level, it can create a more streamlined, predictable process that reduces design and engineering time. At the UX level it helps deliver consistency and predictability in the interface, and to raise the quality of the experience overall when designers and engineers are freed up to think about higher-order tasks.” – Nick Stamas, Creative Lead at WeWork

What is a design system?

A design system offers a library of visual style, components, and other concerns documented and released by a team or community as design tools so that adopting products can be more efficient and cohesive. It is the canonical source of truth for product design and development. A design system breaks down the most fundamental and common parts of your interface such as colour, layers, typography, icons, interactions etc into simple, predictable elements that can be reused to build larger and more complex structures.

Benefits

• Increased velocity and time to market
  A element-based toolkit accessible in one place allows for a more ‘copy and paste’ Agile process, speeding up releases without compromising quality.
• Increased product value
  Reusable components build upon each other, which creates a consistent look, feel, and behavior to the product. As consistency increases, so too does user efficiency.
• Increased collaboration and knowledge sharing
  Because the shared design system includes approved assets and conventions, designers and developers are more autonomous without closing off into silos.
• Less time and money wasted
  Because designers and developers aren’t caught up in redundant questions or repetitive work, they’re freed up for projects that deliver more business value.

Principles

Taken from Principals of designing systems

1. Systems solve the easy problems so products can solve hard problems more easily
2. Include what’s shared, omit what’s not
3. Products own their destiny, systems equip them to realise that destiny
4. Favour community over control
5. Favour elegance of simple things over flexibility of complex things
6. Make documentation first as a tool to use, then as pictures to show, then – if needed – as words to read
7. Measure success on dependency
8. Favour quality over quantity

What is the Jisc design system?

Our design system offers
visual style, UI components, and accessibility procedures
released as
Downloadable design assets, imagery and written guidance
This is documented at
http://uxd.jisc.ac.uk
and produced by
The ux team of 1 UX specialist (lead) and 2 UX developers,
in order to serve
≤ 5 web-based services currently, with the potential to grow to ~50
products and experiences.

This will cover

• Principals – Our underpinning approach to design for the web
• Grid – How elements are structured and flow within a responsive grid
• Layers – How to build depth and visual hierarchy
• Spacing – How to ensure consistent vertical and horizontal rhythm
• Colour – What colours to apply in different contexts and use cases
• Typography – Making pages clear and simple to understand
• Icons – What icons we use for common / repeated interactions
• Interaction – the states and motion of clickable elements

If you’d like to know more get in touch via user.expereience@jisc.ac.uk or for further reading check out Nathan Curtis’ excellent medium posts.