Design System

Products don’t survive without a design system

Design systems make it quicker for designers and more importantly developers to create new pages to maintain consistency.

Design systems house all the design building blocks including typography, colour guides, buttons, links, imagery, animation and more depending on the complexity of your brand and product.

01 Make a list

The first step is to make a list of all of the components we will need to design. We do this by going through your current product and creating a list of components that currently live on your product. From there, we can look to reduce any unnecessary components and really refine your digital visual language.

View audit

02 Create your visual language

In this step, we look at developing your visual language, which involves looking at expanding your brand digitally through the use of colour, shades, gradient, typography, typography treatment, shadows and effects.

03 Developing your component library

This stage gets down to the nitty-gritty of the design, here we design all of the components listed in the approved audit phase starting from small components such as buttons and links all the way up to organisms such as product cards, dashboard navigation and more. We will work aside you and the development team to ensure all design requirements are met by checking in frequently using weekly meetings.

04 Label and organise

Although we do this from the get-go it's good for us to review and organise individual components and groups for components so they can be easily found and also referenced within the team for future referencing.

05 Handover

Handover is simple with the use of Figma. Figma allows developers to inspect the specifications of any design elements such as its properties colour and language such as CSS, iOS and Android.

View design system

Check out some of our work where we started with page and screen strategy

BTC Markets

Website, Marketing Design System

ALTR

Web App, UI Refresh