What is a design system?

The design system is a set of rules and guidelines the design and development team will follow throughout the website build. They help to speed up every stage of product development, from concept and design to production and testing. They also improve the customer experience by ensuring consistency, familiarity, and accessibility at every touchpoint.

Our design systems typically consist of the following pages:

Grids: The website grid is a system for organising the content on the page and creating alignment and order. It forms the basic structure or skeleton of your user interface. Designers use website grids to make design decisions and create a good user experience. In web design, grids are used to guide the designers with how and where to place elements on the page. These guidelines incorporate margins, spaces, and columns, collectively – providing an encompassing, consistent framework for the page’s content.
Typography: Typography styles helps to establish a strong visual hierarchy, setting the overall tone of the website and creating a good graphic balance. Typography should be used to help inform users as well as optimise readability and accessibility. It should help to frame the overall user experience. We create a variety of sizes to be used across desktop, tablet and mobile and these consist of at least two different fonts. The header is usually more of a stylised typeface that compliments the brand and works at much larger sizes than the body styles. The body styles consist of a more simple typeface that allows the text to be legible even when scaled down to the smallest sizes.
Colours: Colours also help towards building a content hierarchy, focusing attention on key information and calls to action. When used creatively, whilst taking into account the needs of the target audience and the site content, it can really make a difference to the user experience and ultimately the conversion rate. These typically consist of primary colours which will be used heavily across the website as background colours for sections of the site. The secondary colours are more associated with the brand identity and will be used to bring attention where needed on the page, for example, call to action or button styles. We also include a variety of neutral & opacity colours that can be used in a multitude of areas for example overlays on images where we need to help with the legibility of text on top of an image. Finally, have status colours and these help to determine the style of error or success messages across the site which may appear on the input of incorrect information added to a contact form.
Buttons: Using the previous styles established for typography and colours we set out the style for the buttons. These help users navigate your product and because they can compel users to convert to any desired outcome. In the design system, we cover a range of button styles and hover interactions that will be used across the website. Primary button styles are used for the most important calls to action, these are styled to be the most prominent of all the buttons. Secondary buttons are typically used at the end of text sections or secondary information that leads to another page. Icon buttons are used for pagination for example you have an archive with a lot of blog articles we break these down over multiple pages to allow faster load times on the page.
Controls: The controls consist of checkbox, radio and toggle button styles. These may be used across the site for various reasons but the most common is on contact forms, allowing the user to agree to privacy policies before submitting their details.
Fields: Finally we have field inputs, these are areas where users will directly interact with your website and can be a very important part of a website as often are a gateway in the conversion funnel. These consist of input fields for adding contact or application details and drop-downs that allow users to select an option from a list. We specify all of the different stats and interactions that are needed.