Overview

We use Wedgetail in our design/development process to design, develop and test new and updated UI components. This design system also acts as the specification for CMS integrators and developers.

Why do we need a design system?

Learn more about the benefits of design systems:

See and learn from other design sytems:

Our Guiding Principles

1. Simple Build

This design system has been created to provide La Trobe University with a resource of living design patterns. The system aims to be cohesive, dynamic, reusable and maintable both in design and code.

2. Design for Flexibility

Using a design system ensures patterns adapt correctly to meet user needs, offering variation, and yet, providing design consistency and familiarity. It also allows us to build components that work well in multiple digital channels.

3. Reuseable Best Practices

Design, develop, test, review, and repurpose patterns, code, and design. That results in a comprehensive collection of tried-and-tested assets that reflect industry best practices.

Our Standards

Atomic design

We use the atomic design approach to create a modular design system.

Responsive design

We use the Responsive Design approach to create a device agnostic solution.

Iterative design

We iterate our design to optimise the User experience.

Accessibility

The modular approach allows Accessibility to be achieved at the component level.

Visual design principles

Vertical and horizontal rhythm

Vertical and horizontal rhythm is paramount for good UI design.

We achieve this through:

  • Consistent spacing - using the soft grid approach where all spacing is based on 4px (0.25rem in reality)
  • Modular scale for heading hierachy - Major third

Readability

Readability is also paramount to UI design in particular web site design.

We achieve this through:

  • Maintaining readable line lengths - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
  • Typesetting
  • Predominantly using black text on white background
  • Using whitespace to allow easy focus an scanning of text requiring less cognitive load