Design Systems
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.
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.
