iOS migration to Swift UI

iOS colours in the design system

xxxx

 

Background

xxx

 

The Challenge

xxx


Solution

xxxx

Process to updating the design system

below the process I took to update our old colour in the deisgn sysatme to new M3 deisgn systems

The Process

  • 1 - Documentation

    Before updating the colours I needed to update the fundamentals of the new M3 colours system.

    Key points
    - Hue affects colours
    - Colours are generated using them builder.
    - Opacity has been removed in some aspects

  • 2 - Understanding M3 colour kit

    understanding the structure of the colours in M3 and how they will affect the app and how the developers will structure there colours I also discussed this with the developers to get a deeper understanding

  • 3 - Using the theme builder

    This required some trial and error to understand how be to use this plugin to work for our colours. Once I understood hue controlled the way colours were generated it made it easier to play with

  • 4 - Brand vs Native plugin - Manual customisation

    After discussing the colours with developer, designer and key stakeholders in the business we agreed that some colours needed updating to make them more accessible however there was a few colours that were adjusted

  • 5 - Implementation audit

    Description goes here

  • 6 - Accessibility checks

    Accessibility was chekc thorughout the process but a final check was once the colour were privisional chekced

  • 7 - Sign off from key stackholders

    Description goes here

  • 8 - Tokenisation and final documentation

    Description goes here

Colour updates

xxxxxxxxxxx

NEW!!!!!!!

 

Background

This project required thinking how to logically visualise how well a user cash health was this needed to be simple to understand but also give clarity .

 

OLD

XXXX

The process

STUDY

The challanges

Accessiblity vs brand - getting the balance right

Bk ground -android adjusted
adjusting the hugh- limits adjustment

Colour Accessibility updates

Thttps://m3.material.io/foundations/accessible-design/design-to-implementation

DEMO IMPorvemnet to accebility on app screens ‘ticks” colout contrast - larger text etc……

Colours in the the design system

Old design system

Whatever it is, the way you tell your story online can make all the difference.

New design system phase 1

Whatever it is, the way you tell your story online can make all the difference.

final notes

xxxxxxxxx