Designing - Get started

Contents

Introduction

Welcome to the Mosaic Design System (MDS)! On this site you can find plenty of content to help you design with confidence. On this page, you'll find a few things to help you get started with using MDS, as well as some key technical information.

Design philosophy

First things first, we'd like to get you on the same page as us. When designing MDS, we've constantly been thinking about our eight key values - the things we think really matter when designing web products. The idea doesn't stop there, though: even if you have well-made tools that embody these key concepts, you still need to embody them when designing. They're simple, and easy to remember, but they'll go a long way to making a product that your users will love:

Consistency

Consistency is king! Ensure that information is always presented accurately and in a uniform manner from page-to-page. Having a consistent look and feel throughout a product is vital to helping the user familiarise themselves with the interface, and will help them pick up new concepts and ideas quickly.

Structure

Organising interfaces in a logical and meaningful way based on clear, consistent patterns that users will recognise. Place related things together, differentiate unrelated things, and make similar things the same.

Affordances

Make it clear (visually or otherwise) what things do, how they work, and what to do next. Affordances are essential aspects of an interface because they naturally lead users to take the correct steps to accomplish their goals.

Constraints

Limit the number of actions users can perform for a given task. Do not overwhelm them with unnecessary options. This will make your interfaces easier to use and understand, and will reduce the potential for confusion.

Feedback

Provide a suitable response when users have performed an action, so that they clearly understand how the software has interpreted them. Without it, they may question whether their actions have been successful.

Performance

Consider the immediacy expected by today's users, and aim to built fast, accelerated pages, with zero bloat. Users may have little patience for products with poor load times or a less than adequate infrastructure.

Accessibility

Make products inclusive and accessible by everyone, regardless of disabilities. Carefully follow accessibility guidelines to ensure there are no barriers that make them difficult or impossible for some people to use.

Quality

The quality of your products directly affects the delight of your users, so aim higher than "good enough". You would not accept a poor product or service, so never settle for anything less than superior software.

Components and Patterns

In MDS, you will find two key building blocks for your product. We have Components, and we also have Patterns.

Components are the building blocks behind MDS. They're the small individual pieces that come together to make a larger whole. Each one serves a specific purpose, from Breadcrumbs to Buttons, and from Snackbars to Spinners. You can think of them like ingredients in a meal - nice on their own, but they really shine when they come together...
Patterns are the next step - they're what you get when you combine Components into a delicious meal. Or, more specifically, Patterns are groups of Components that have been combined together to make a ready-to-use user action. They consist of things like Login pages, Tables and a Drawer that includes tabs.

When designing, make sure you review the pages for each of our Components and Patterns. They should be your first step when designing something, as each page gives you a clue as to how and when they should be used, and special considerations you need to take while using them (some of which you might not have thought about!).

Guidelines

MDS also includes some overarching design guidelines that will help you design amazing software for your users. These cover a wide breadth of concepts, and work hand-in-hand with the Components and Patterns as a set of overall 'rules' to follow. Some of them are a little more specific than others, but some of the ones you should familiarise yourself with first are:

Brand tells you how to incorporate the Advanced brand into your products, and gives some governing rules for when and how this should be done
Icons covers the basics of iconography in MDS. Learn how and when to use the different types of icon, and their sizes.
Accessibility is an important consideration for your application - without it, you'll alienate some of your users. Make sure you absorb the content in the guideline to learn how to make your product as accessible as possible.