From d54d7848826eb899df64041eb9bd9fa08f33ebce Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 16:53:31 +1100 Subject: [PATCH 001/130] Update src/content/articles/accessible-by-design --- apps/site/src/content/articles/accessible-by-design.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/accessible-by-design.yaml b/apps/site/src/content/articles/accessible-by-design.yaml index c7693cc78..06a4bd066 100644 --- a/apps/site/src/content/articles/accessible-by-design.yaml +++ b/apps/site/src/content/articles/accessible-by-design.yaml @@ -10,7 +10,7 @@ description: >- lifetime.” thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666333819/cl9i44qb7000wtc8ihnxv08ex.png + https://www.westpac.com.au/content/dam/public/gel/images/accessible-by-design-hero.png height: 1212 width: 3168 smallDescription: >- @@ -19,7 +19,7 @@ smallDescription: >- of our dna. image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666333853/cl9i45goa000xtc8i8wgx5cu2.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/accessible-by-design-hero.png + height: 1212 + width: 3168 author: Michael Colibraro From 210615a9679cdbdc6d797429d07ca9e8ed5c5399 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 16:58:41 +1100 Subject: [PATCH 002/130] Update src/content/articles/banking --- apps/site/src/content/articles/banking.yaml | 6 +++--- apps/site/src/content/articles/banking/content.mdoc | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/banking.yaml b/apps/site/src/content/articles/banking.yaml index ac8bf579c..b073dccc9 100644 --- a/apps/site/src/content/articles/banking.yaml +++ b/apps/site/src/content/articles/banking.yaml @@ -11,7 +11,7 @@ description: >- thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695868279/cln2k6p0p0025vd8iauie3l0o.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/patterns-banking-hero.png + height: 1028 + width: 2400 author: Digital Experience diff --git a/apps/site/src/content/articles/banking/content.mdoc b/apps/site/src/content/articles/banking/content.mdoc index a09db1b8d..16d6ee440 100644 --- a/apps/site/src/content/articles/banking/content.mdoc +++ b/apps/site/src/content/articles/banking/content.mdoc @@ -1,5 +1,5 @@ {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695871389/cln2m1do10026vd8i9uf66u3a.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-quote.png", alt: "We're putting customers at the heart of our solutions, reducing rework and supporting teams to deliver consistent customer journeys more effectively.", height: 249, width: 1093} type="body" /%} By reducing re-work we can achieve increased speed to market and more consistent, simple experiences for our customers, leading to greater satisfaction with the Bank. We support our customers to get what they need done when they need to do it, simply and efficiently.  From a5c53ad39b8bae9d2c19df92c3d8bad2a360a180 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 16:59:11 +1100 Subject: [PATCH 003/130] Update src/content/articles/banking-display-accounts --- .../site/src/content/articles/banking-display-accounts.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml index 9c1264429..899966d8b 100644 --- a/apps/site/src/content/articles/banking-display-accounts.yaml +++ b/apps/site/src/content/articles/banking-display-accounts.yaml @@ -2,7 +2,7 @@ name: Banking display of accounts thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695774586/cln10ek1v001qvd8idm00epsy.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/banking-display-accounts-hero.png + height: 1466 + width: 2400 author: Digital Experience From 68748eda46c07034fe49dc6642eec252332d0fe1 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 16:59:29 +1100 Subject: [PATCH 004/130] Update src/content/articles/banking-display-transactions --- .../src/content/articles/banking-display-transactions.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/banking-display-transactions.yaml b/apps/site/src/content/articles/banking-display-transactions.yaml index 92bf603d2..fa89713e8 100644 --- a/apps/site/src/content/articles/banking-display-transactions.yaml +++ b/apps/site/src/content/articles/banking-display-transactions.yaml @@ -2,7 +2,7 @@ name: Display of transactions thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695782572/cln155psl001uvd8i0fuq9dfs.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/banking-display-transactions-hero.png + height: 1466 + width: 2400 author: Digital Experience From 7228ae7979240f3a5c730b74b59c39a1f19f14f2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 16:59:44 +1100 Subject: [PATCH 005/130] Update src/content/articles/banking-hand-offs --- apps/site/src/content/articles/banking-hand-offs.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/banking-hand-offs.yaml b/apps/site/src/content/articles/banking-hand-offs.yaml index e83433dcc..8df0cdb94 100644 --- a/apps/site/src/content/articles/banking-hand-offs.yaml +++ b/apps/site/src/content/articles/banking-hand-offs.yaml @@ -2,7 +2,7 @@ name: Hand-offs thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695783266/cln15klrw001xvd8igne64soh.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/banking-hand-offs-hero.png + height: 1468 + width: 2400 author: Digital Experience From a7bf7eabaf82477d51a2754329811ca5a7de4681 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:00:05 +1100 Subject: [PATCH 006/130] Update src/content/articles/banking-onboarding --- apps/site/src/content/articles/banking-onboarding.yaml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/banking-onboarding.yaml b/apps/site/src/content/articles/banking-onboarding.yaml index 2049251eb..bf9d69e79 100644 --- a/apps/site/src/content/articles/banking-onboarding.yaml +++ b/apps/site/src/content/articles/banking-onboarding.yaml @@ -1,8 +1,5 @@ name: Onboarding thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695783106/cln15h6a4001wvd8i9rs50m3t.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-onboarding-hero.png\r" author: Digital Experience From ba3460bb23752c580a411f7bf46f57f51e044ec2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:00:17 +1100 Subject: [PATCH 007/130] Update src/content/articles/banking-tysk --- apps/site/src/content/articles/banking-tysk.yaml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml index a9c254a75..cafdf8958 100644 --- a/apps/site/src/content/articles/banking-tysk.yaml +++ b/apps/site/src/content/articles/banking-tysk.yaml @@ -1,8 +1,5 @@ name: Things you should kn - thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695782900/cln15crdr001vvd8igdiy7fcz.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-tysk-hero.png\r" author: Digital Experience From 4934d13a34ebea1ba8e7b70a50cf229b9a4e1e10 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:00:37 +1100 Subject: [PATCH 008/130] Update src/content/articles/build-strong-brands --- .../site/src/content/articles/build-strong-brands.yaml | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/build-strong-brands.yaml b/apps/site/src/content/articles/build-strong-brands.yaml index 2b9587a7b..4b93daa04 100644 --- a/apps/site/src/content/articles/build-strong-brands.yaml +++ b/apps/site/src/content/articles/build-strong-brands.yaml @@ -6,16 +6,10 @@ description: >- customers. This approach helps us to deliver consistent brand experiences across all channels. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667097999/cl9ur3rp6000tf58i5s7y3ote.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/build-strong-brands-card.png\r" smallDescription: >- Create consistent, on brand journeys to strengthen brand recognition and trust. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1665993797/cl9chovs7000htc8igwry11s4.jpg - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/build-strong-brands-hero.png\r" author: Marita Purins From 56c2f818026c7c8dd55b755e02c4970972eae345 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:01:04 +1100 Subject: [PATCH 009/130] Update src/content/articles/code-with-gel --- .../src/content/articles/code-with-gel.yaml | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index 9efd86585..42cd18314 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -1,16 +1,14 @@ name: Code with GEL cardTitle: Code with GEL +description: >- + The GEL coding framework has been built with serviceability in mind, + supporting multiple platforms across the Bank that may use different + libraries, languages and coding technologies. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png - height: 1212 - width: 3168 -smallDescription: Automate your environment, scale your projects and speed up your work flow with our cutting edge code library. + src: "https://www.westpac.com.au/content/dam/public/gel/images/code-with-gel-card.png\r" +smallDescription: >- + Automate your environment, scale your projects and speed up your work flow + with our cutting edge code library. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg - height: 1080 - width: 1920 -description: >- - The GEL coding framework has been built with serviceability in mind, supporting multiple platforms across the Bank that may use different libraries, languages and coding technologies. + src: "https://www.westpac.com.au/content/dam/public/gel/images/code-with-gel-hero.jpg\r" author: Marita Purins From fee1861522f14ec3ecc9a1fec8ffd2b3bdffc6fa Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:01:50 +1100 Subject: [PATCH 010/130] Update src/content/articles/collaborate-for-change --- .../src/content/articles/collaborate-for-change.yaml | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/collaborate-for-change.yaml b/apps/site/src/content/articles/collaborate-for-change.yaml index 79755693e..4a8590e30 100644 --- a/apps/site/src/content/articles/collaborate-for-change.yaml +++ b/apps/site/src/content/articles/collaborate-for-change.yaml @@ -4,14 +4,8 @@ description: >- Design system change has wide impact, whether it’s a brand change, a component or a pattern change so collaboration & early engagement are key. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666855413/cl9qqobm6000cf58idusod3xr.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-card.png\r" smallDescription: Considered change made collaboratively achieves the best results. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663227077/cl82qghhn000tam8ia8c6gxjs.jpg - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-hero.jpg\r" author: Marita Purins From a486f56d1f964eb579af6b10c670660b568f0226 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 3 Dec 2024 17:02:08 +1100 Subject: [PATCH 011/130] Update src/content/articles/colour --- apps/site/src/content/articles/colour.yaml | 10 ++-------- apps/site/src/content/articles/colour/content.mdoc | 12 ++++++------ 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/apps/site/src/content/articles/colour.yaml b/apps/site/src/content/articles/colour.yaml index 0dc6b5806..c105230d9 100644 --- a/apps/site/src/content/articles/colour.yaml +++ b/apps/site/src/content/articles/colour.yaml @@ -6,16 +6,10 @@ description: >- colour before we see form. This article explains why we have a colour system and how to apply it to your designs. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666755294/cl9p32exi0004u48idenu5zh8.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/colour-card.png\r" smallDescription: >- Speed up your workflow, ensure you're on brand and stay accessible with our multi-brand colour system. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666069890/cl9dqztwo000jtc8iarv46fe1.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/colour-hero.png\r" author: Justin Spencer diff --git a/apps/site/src/content/articles/colour/content.mdoc b/apps/site/src/content/articles/colour/content.mdoc index b968a03f8..f451964b1 100644 --- a/apps/site/src/content/articles/colour/content.mdoc +++ b/apps/site/src/content/articles/colour/content.mdoc @@ -1,6 +1,6 @@ ## **Colour in brand** -There’s no disputing the significance of colour in branding. Many of the world’s most recognisable brands rely on colour for instant recognition. Colour increases brand recognition by up to 80% _(Source: University of Loyola, Maryland study)_ +There’s no disputing the significance of colour in branding. Many of the world’s most recognisable brands rely on colour for instant recognition. Colour increases brand recognition by up to 80% *(Source: University of Loyola, Maryland study)* Each brand in the Westpac Group uses a unique colour palette as part of its identity. These colours permeate across every touchpoint in the customer journey. The correct use of these colours plays a crucial role in brand recognition and customer experience. When the colour palette is not applied correctly the integrity of the brand is diluted and the customer journey fragmented. @@ -10,13 +10,13 @@ Applying each of the brand colour palettes in the the digital space comes with i ### **Challenges include:** -1. Accessibility requirements. -2. Multi-brand - shared code base requirements. +1. Accessibility requirements. +1. Multi-brand - shared code base requirements. ### **Opportunities include:** -1. Contextualising colour, giving it meaning, purpose and function. -2. Applying colour dynamically using code and automated tasks. +1. Contextualising colour, giving it meaning, purpose and function. +1. Applying colour dynamically using code and automated tasks. The Design System provides a flexible, multi-brand colour system which enables us to map each brand palette to a set of core contextual colours. Each of the core colours has a defined purpose and function. @@ -30,7 +30,7 @@ The practical application of the colour system encourages consistency across all The Colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario. -When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the _Primary colour_ in Westpac is #DA1710 (fig 1) however in Rams it’s #047DBC. Our application only needs to know that the _Primary colour_ is being used, the value of that colour is irrelevant. +When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the *Primary colour* in Westpac is #DA1710 (fig 1) however in Rams it’s #047DBC. Our application only needs to know that the *Primary colour* is being used, the value of that colour is irrelevant. ### **Secondary palette** From fe003739e09e0d90b2ebfede3058c027f25e449a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 09:57:23 +1100 Subject: [PATCH 012/130] Update src/content/articles/banking --- apps/site/src/content/articles/banking.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/banking.yaml b/apps/site/src/content/articles/banking.yaml index b073dccc9..e83525eaf 100644 --- a/apps/site/src/content/articles/banking.yaml +++ b/apps/site/src/content/articles/banking.yaml @@ -12,6 +12,9 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/patterns-banking-hero.png + alt: >- + Hero image depicting the word Patterns and a mans face with a quote "I just + want to get it done so I can get on with my day." height: 1028 width: 2400 author: Digital Experience From f8da3f31e59d1e2af9a9c8b01427408dd9a048fa Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:07:11 +1100 Subject: [PATCH 013/130] Update src/content/articles/originations-experience --- .../src/content/articles/originations-experience.yaml | 8 ++++---- .../content/articles/originations-experience/content.mdoc | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/originations-experience.yaml b/apps/site/src/content/articles/originations-experience.yaml index 30c8359e0..bca757eb8 100644 --- a/apps/site/src/content/articles/originations-experience.yaml +++ b/apps/site/src/content/articles/originations-experience.yaml @@ -9,8 +9,8 @@ description: >- replicate what works, so there’s no need to reinvent the wheel every time. thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695945747/cln3ub41e002cvd8idz6ld0k7.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/patterns-originations-hero.png\r" + alt: >- + Hero image depicting the word Patterns and a woman's face with a quote "I + don't want to answer the same questions." author: Digital Experience diff --git a/apps/site/src/content/articles/originations-experience/content.mdoc b/apps/site/src/content/articles/originations-experience/content.mdoc index a129a0e8d..84d41acdd 100644 --- a/apps/site/src/content/articles/originations-experience/content.mdoc +++ b/apps/site/src/content/articles/originations-experience/content.mdoc @@ -1,5 +1,5 @@ {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1687322520/clj589gfp001ibn8i12yhg237.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-experience-quote.png", alt: "We're putting customers at the heart of our solutions, reducing rework and supporting teams to deliver consistent customer journeys more effectively.", height: 249, width: 1093} type="body" /%} ### How to apply the Originations Conventions From de9c3446a103b40057034a9fa31cb2e5d05e2d7f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:10:08 +1100 Subject: [PATCH 014/130] Update src/content/articles/accessible-by-design --- apps/site/src/content/articles/accessible-by-design.yaml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/site/src/content/articles/accessible-by-design.yaml b/apps/site/src/content/articles/accessible-by-design.yaml index 06a4bd066..da68d2491 100644 --- a/apps/site/src/content/articles/accessible-by-design.yaml +++ b/apps/site/src/content/articles/accessible-by-design.yaml @@ -11,6 +11,9 @@ description: >- thumbnail: src: >- https://www.westpac.com.au/content/dam/public/gel/images/accessible-by-design-hero.png + alt: >- + Hero image depicting icons usually associate with accessibility, Eye, Ear + and Person on a wheelchair. height: 1212 width: 3168 smallDescription: >- @@ -20,6 +23,9 @@ smallDescription: >- image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/accessible-by-design-hero.png + alt: >- + Hero image depicting icons usually associate with accessibility, Eye, Ear + and Person on a wheelchair. height: 1212 width: 3168 author: Michael Colibraro From d57693b246fff51870f83e212363c533ba163d0a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:27:30 +1100 Subject: [PATCH 015/130] Update src/content/articles/banking-display-accounts --- apps/site/src/content/articles/banking-display-accounts.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml index 899966d8b..67f2c4f62 100644 --- a/apps/site/src/content/articles/banking-display-accounts.yaml +++ b/apps/site/src/content/articles/banking-display-accounts.yaml @@ -3,6 +3,7 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/banking-display-accounts-hero.png + alt: Stylised example image of a list of transactions. height: 1466 width: 2400 author: Digital Experience From 0eefb1d2573183892ccf8306fc95e251a88f532c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:28:51 +1100 Subject: [PATCH 016/130] Update src/content/articles/banking-display-transactions --- .../src/content/articles/banking-display-transactions.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/banking-display-transactions.yaml b/apps/site/src/content/articles/banking-display-transactions.yaml index fa89713e8..7541d84ea 100644 --- a/apps/site/src/content/articles/banking-display-transactions.yaml +++ b/apps/site/src/content/articles/banking-display-transactions.yaml @@ -3,6 +3,9 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/banking-display-transactions-hero.png + alt: >- + Stylised example image of a list of banking transactions as they would + appear on a mobile phone. height: 1466 width: 2400 author: Digital Experience From 2398455c7f1257ea5892a05a5373904e8b6ec17c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:29:08 +1100 Subject: [PATCH 017/130] Update src/content/articles/banking-display-accounts --- apps/site/src/content/articles/banking-display-accounts.yaml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml index 67f2c4f62..87eec5d1b 100644 --- a/apps/site/src/content/articles/banking-display-accounts.yaml +++ b/apps/site/src/content/articles/banking-display-accounts.yaml @@ -3,7 +3,9 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/banking-display-accounts-hero.png - alt: Stylised example image of a list of transactions. + alt: >- + Stylised example image of a list of banking accounts as they would appear on + a mobile phone. height: 1466 width: 2400 author: Digital Experience From 235e2a4abb347adf87bf9c62d04e696098caa528 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:33:02 +1100 Subject: [PATCH 018/130] Update src/content/articles/banking-hand-offs --- apps/site/src/content/articles/banking-hand-offs.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/banking-hand-offs.yaml b/apps/site/src/content/articles/banking-hand-offs.yaml index 8df0cdb94..ff1ea8a4c 100644 --- a/apps/site/src/content/articles/banking-hand-offs.yaml +++ b/apps/site/src/content/articles/banking-hand-offs.yaml @@ -3,6 +3,7 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/banking-hand-offs-hero.png + alt: Stylised example image of a page loading animation. height: 1468 width: 2400 author: Digital Experience From 8e2f927dee601d8033c97108b6076864b0097dd3 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:34:22 +1100 Subject: [PATCH 019/130] Update src/content/articles/banking-onboarding --- apps/site/src/content/articles/banking-onboarding.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/banking-onboarding.yaml b/apps/site/src/content/articles/banking-onboarding.yaml index bf9d69e79..29573108e 100644 --- a/apps/site/src/content/articles/banking-onboarding.yaml +++ b/apps/site/src/content/articles/banking-onboarding.yaml @@ -2,4 +2,7 @@ name: Onboarding thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-onboarding-hero.png\r" + alt: >- + Stylised example image of a banking onboarding screen as it would appear on + a mobile phone. author: Digital Experience From 2891d1bd2b86e9f813f23246eb85eb4562c548fe Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:37:48 +1100 Subject: [PATCH 020/130] Update src/content/articles/banking-tysk --- apps/site/src/content/articles/banking-tysk.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml index cafdf8958..ad87e78c0 100644 --- a/apps/site/src/content/articles/banking-tysk.yaml +++ b/apps/site/src/content/articles/banking-tysk.yaml @@ -2,4 +2,7 @@ name: Things you should kn - thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-tysk-hero.png\r" + alt: >- + Stylised example image of form fields and Things you should know text as + they would appear on a mobile phone. author: Digital Experience From 53a6e01c5aef2b7d2705fcb516594c15c07057f9 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:38:00 +1100 Subject: [PATCH 021/130] Update src/content/articles/banking-tysk --- apps/site/src/content/articles/banking-tysk.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml index ad87e78c0..1f1b4d807 100644 --- a/apps/site/src/content/articles/banking-tysk.yaml +++ b/apps/site/src/content/articles/banking-tysk.yaml @@ -1,4 +1,4 @@ -name: Things you should kn - +name: Things you should know thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/banking-tysk-hero.png\r" From e8cf7e2b45aad02896cce3ec2a51f350010a4758 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:45:46 +1100 Subject: [PATCH 022/130] Update src/content/articles/build-strong-brands --- apps/site/src/content/articles/build-strong-brands.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/build-strong-brands.yaml b/apps/site/src/content/articles/build-strong-brands.yaml index 4b93daa04..9406b8126 100644 --- a/apps/site/src/content/articles/build-strong-brands.yaml +++ b/apps/site/src/content/articles/build-strong-brands.yaml @@ -12,4 +12,7 @@ smallDescription: >- trust. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/build-strong-brands-hero.png\r" + alt: >- + Image of two signs on a wall with blurred people walking past. One sign says + 'a customer's perception of your brand' the second sign says 'is your brand' author: Marita Purins From 6a53f8de22b3fbd7298afacbff94bff8dd15c17b Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 10:50:55 +1100 Subject: [PATCH 023/130] Update src/content/articles/code-with-gel --- apps/site/src/content/articles/code-with-gel.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index 42cd18314..ee5b20c13 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -11,4 +11,7 @@ smallDescription: >- with our cutting edge code library. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/code-with-gel-hero.jpg\r" + alt: >- + Image of a piece of cardboard with a shape cut out and printed code showing + through from behind. The cardboard has the words GEL code printed on it. author: Marita Purins From 5c1e4219f8efdf2592e208a73a5269a58f912f1d Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 11:50:54 +1100 Subject: [PATCH 024/130] Update src/content/articles/collaborate-for-change --- apps/site/src/content/articles/collaborate-for-change.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/collaborate-for-change.yaml b/apps/site/src/content/articles/collaborate-for-change.yaml index 4a8590e30..bdb490a79 100644 --- a/apps/site/src/content/articles/collaborate-for-change.yaml +++ b/apps/site/src/content/articles/collaborate-for-change.yaml @@ -8,4 +8,5 @@ thumbnail: smallDescription: Considered change made collaboratively achieves the best results. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-hero.jpg\r" + alt: Image of a child pushing another child down the road on a billycart. author: Marita Purins From 71987111182be44a9bd75a97bd045d8147559f3a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 11:51:54 +1100 Subject: [PATCH 025/130] Update src/content/articles/colour --- apps/site/src/content/articles/colour.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/colour.yaml b/apps/site/src/content/articles/colour.yaml index c105230d9..094dc26c8 100644 --- a/apps/site/src/content/articles/colour.yaml +++ b/apps/site/src/content/articles/colour.yaml @@ -12,4 +12,5 @@ smallDescription: >- multi-brand colour system. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/colour-hero.png\r" + alt: Image of decorative illustration of coloured scales. author: Justin Spencer From cb3745e9813ded78b7da49bf9ad43b02c2a512c6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 12:07:05 +1100 Subject: [PATCH 026/130] Update src/content/articles/data-visualisation --- .../content/articles/data-visualisation.yaml | 8 ++---- .../articles/data-visualisation/content.mdoc | 28 +++++++++---------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation.yaml b/apps/site/src/content/articles/data-visualisation.yaml index f3a7b310e..275698fde 100644 --- a/apps/site/src/content/articles/data-visualisation.yaml +++ b/apps/site/src/content/articles/data-visualisation.yaml @@ -7,15 +7,13 @@ description: >- use it to create accessible, multi-brand graphs and charts. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1687413424/clj6qdu4q0027bn8i5zr512pk.png + https://www.westpac.com.au/content/dam/public/gel/images/data-visualisation-card.png height: 1212 width: 3168 smallDescription: >- The data visualisation system, how it works and how you can use it to create accessible, multi-brand charts. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1687499154/clj85faof003ibn8i8ib98gpx.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/data-visualisation-hero.png\r" + alt: Various graph styles and ways to visualise data. author: Justin Spencer diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 9a98b5d15..68fff5872 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -9,14 +9,14 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig1-.png\r", alt: "Horizontal bar chart showing an example data visualisation of annual spending."} caption="Fig.1 Data visualisation" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2-supporting.png\r", alt: "Example of the supporting data required to communicate this chart"} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} @@ -29,14 +29,14 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png\r", alt: "Image of pie chart with each section depicted in a different bright colour, this version of the pie chart is not accessible"} caption="Fig.3" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png\r", alt: "Image of a pie chart with each section depicted in a different colour grey, this version of the pie chart is not accessible"} caption="Fig.4" spacing="default" /%} {% /layout-area %} @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png\r", alt: "Image of a pie chart that does not provide supporting data, version of the pie chart is not accessible"} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png", height: 2070, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png\r", alt: "Image of the pie chart that does provide supporting data, this version of the pie chart is accessible."} caption="Fig.6" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png\r", alt: "A line graph chart displaying only one category, which does not require a key this chart is accessible"} caption="Fig.7" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", height: 1380, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", alt: "A bar chart displaying only one category, which does not require a key this chart is accessible", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png\r", alt: "Data visualisation colour chart for Westpac brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png\r", alt: "Data visualisation colour chart for St.George brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bom.png\r", alt: "Data visualisation colour chart for Bank of Melbourne brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png\r", alt: "Data visualisation colour chart for BankSA brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -119,13 +119,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png\r", alt: "Data visualisation colour chart for RAMS brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png\r", alt: "Data visualisation colour chart for Westpac Group brand showing six colours as 100% solid 50% tint and 30% opacity."} spacing="default" /%} {% /layout-area %} {% /layout %} From c4dc1cfaf6909ebe090b0ea4c213709c96d2be6d Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 12:13:55 +1100 Subject: [PATCH 027/130] Update content.mdoc --- apps/site/src/content/articles/data-visualisation/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 68fff5872..07dc20efc 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -125,7 +125,7 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png\r", alt: "Data visualisation colour chart for Westpac Group brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% /layout %} From 766644f3a2c56a54d6a12fec950ea69441d1d996 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 12:15:45 +1100 Subject: [PATCH 028/130] Update content.mdoc --- .../content/articles/data-visualisation/content.mdoc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 07dc20efc..9863a177e 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png\r", alt: "Data visualisation colour chart for Westpac brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png\r", alt: "Data visualisation colour chart for St.George brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bom.png\r", alt: "Data visualisation colour chart for Bank of Melbourne brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png\r", alt: "Data visualisation colour chart for BankSA brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -119,7 +119,7 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png\r", alt: "Data visualisation colour chart for RAMS brand showing six colours as 100% solid 50% tint and 30% opacity."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} From db24768f7c22ea9b3e512b0dbb9741bfcf56e74c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 12:30:25 +1100 Subject: [PATCH 029/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 9863a177e..9a98b5d15 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -9,14 +9,14 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig1-.png\r", alt: "Horizontal bar chart showing an example data visualisation of annual spending."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} caption="Fig.1 Data visualisation" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2-supporting.png\r", alt: "Example of the supporting data required to communicate this chart"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} @@ -29,14 +29,14 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png\r", alt: "Image of pie chart with each section depicted in a different bright colour, this version of the pie chart is not accessible"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png", height: 1620, width: 1125} caption="Fig.3" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png\r", alt: "Image of a pie chart with each section depicted in a different colour grey, this version of the pie chart is not accessible"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png", height: 1620, width: 1125} caption="Fig.4" spacing="default" /%} {% /layout-area %} @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png\r", alt: "Image of a pie chart that does not provide supporting data, version of the pie chart is not accessible"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png", height: 1620, width: 1125} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png\r", alt: "Image of the pie chart that does provide supporting data, this version of the pie chart is accessible."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png", height: 2070, width: 1125} caption="Fig.6" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png\r", alt: "A line graph chart displaying only one category, which does not require a key this chart is accessible"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png", height: 1380, width: 1125} caption="Fig.7" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", alt: "A bar chart displaying only one category, which does not require a key this chart is accessible", height: 1380, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} From 61b28016269746ca2029b68ba55863e9e91f3a29 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:00:50 +1100 Subject: [PATCH 030/130] Update src/content/articles/data-visualisation --- .../site/src/content/articles/data-visualisation/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 9a98b5d15..6e6454d1d 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -9,14 +9,14 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig1-.png", height: 1098, width: 1125} caption="Fig.1 Data visualisation" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2-supporting.png", height: 1098, width: 1125} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} From e283e3f52fd32cb252a41cdcdfabf60ee99e6b19 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:01:19 +1100 Subject: [PATCH 031/130] Update src/content/articles/data-visualisation --- .../site/src/content/articles/data-visualisation/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 6e6454d1d..d3af82655 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -29,14 +29,14 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png", height: 1620, width: 1125} caption="Fig.3" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png", height: 1620, width: 1125} caption="Fig.4" spacing="default" /%} {% /layout-area %} From 0c0a6b7488eafd038ee501138be80249ee39dd8e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:01:42 +1100 Subject: [PATCH 032/130] Update src/content/articles/data-visualisation --- .../site/src/content/articles/data-visualisation/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index d3af82655..51e1d70e3 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png", height: 1620, width: 1125} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png", height: 2070, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png", height: 2070, width: 1125} caption="Fig.6" spacing="default" /%} {% /layout-area %} From 08adf149fa2846e03e1a8411ca695fed08fe3163 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:01:56 +1100 Subject: [PATCH 033/130] Update src/content/articles/data-visualisation --- apps/site/src/content/articles/data-visualisation/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 51e1d70e3..d1e7248ee 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -69,7 +69,7 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png", height: 1380, width: 1125} caption="Fig.7" spacing="default" /%} {% /layout-area %} From 45fd17a9d310de1896b6f23d209652ba5749ab14 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:02:08 +1100 Subject: [PATCH 034/130] Update src/content/articles/data-visualisation --- apps/site/src/content/articles/data-visualisation/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index d1e7248ee..3ada42d1a 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -76,7 +76,7 @@ These charts only use one category and therefore do not require a key. Providing {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig8.png", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} From d3c1825e240557fffa83682ca6bf604f8c43aa0f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:03:28 +1100 Subject: [PATCH 035/130] Update src/content/articles/data-visualisation --- .../src/content/articles/data-visualisation/content.mdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 3ada42d1a..0dc6c959c 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} From 07196f99ad45b29f38335e38435e418012fffe31 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:03:53 +1100 Subject: [PATCH 036/130] Update src/content/articles/data-visualisation --- .../site/src/content/articles/data-visualisation/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 0dc6c959c..f9b512f9b 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -119,13 +119,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% /layout %} From 6588e2205e94cac7ae69ae95479d9a1d2a7b877f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:04:52 +1100 Subject: [PATCH 037/130] Update src/content/articles/data-visualisation --- .../content/articles/data-visualisation/content.mdoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index f9b512f9b..9b3b75837 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -137,14 +137,14 @@ To give you some context, the following examples show how these colours are appl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png\r"} caption="Fig.9" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png", alt: "Fig.10", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png\r"} caption="Fig.10" spacing="default" /%} {% /layout-area %} @@ -155,14 +155,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png\r"} caption="Fig.11" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png\r"} caption="Fig.12" spacing="reduced" /%} {% /layout-area %} @@ -171,14 +171,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png\r"} caption="Fig.13" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png\r"} caption="Fig.14" spacing="default" /%} {% /layout-area %} From 9b388a0d5e32915f61ac217f60d1b369da1296a5 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:10:47 +1100 Subject: [PATCH 038/130] Update content.mdoc --- .../src/content/articles/data-visualisation/content.mdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 9b3b75837..3b161407c 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -155,14 +155,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png", height: 1179, width: 1125} caption="Fig.11" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png", height: 1179, width: 1125} caption="Fig.12" spacing="reduced" /%} {% /layout-area %} @@ -171,14 +171,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png", height: 1179, width: 1125} caption="Fig.13" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png", height: 1179, width: 1125} caption="Fig.14" spacing="default" /%} {% /layout-area %} From 3a67d9fa726b173596cba4dffbc33eb5cab2370e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:11:53 +1100 Subject: [PATCH 039/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 3b161407c..9a98b5d15 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -9,14 +9,14 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig1-.png", height: 1098, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} caption="Fig.1 Data visualisation" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2-supporting.png", height: 1098, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} @@ -29,14 +29,14 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png", height: 1620, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png", height: 1620, width: 1125} caption="Fig.3" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png", height: 1620, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png", height: 1620, width: 1125} caption="Fig.4" spacing="default" /%} {% /layout-area %} @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png", height: 1620, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png", height: 1620, width: 1125} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png", height: 2070, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png", height: 2070, width: 1125} caption="Fig.6" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png", height: 1380, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png", height: 1380, width: 1125} caption="Fig.7" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig8.png", height: 1380, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png", height: 1012, width: 1276} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png", height: 1012, width: 1276} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", height: 729, width: 1125} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png", height: 1012, width: 1276} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -119,13 +119,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png", height: 1012, width: 1276} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png", height: 1012, width: 1276} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% /layout %} @@ -137,14 +137,14 @@ To give you some context, the following examples show how these colours are appl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png", height: 972, width: 1125} caption="Fig.9" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png\r"} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png", alt: "Fig.10", height: 972, width: 1125} caption="Fig.10" spacing="default" /%} {% /layout-area %} From a4d46865774ac2c95f25ac2cd3f9655154cecfcf Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:13:36 +1100 Subject: [PATCH 040/130] Update content.mdoc --- .../src/content/articles/data-visualisation/content.mdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 9a98b5d15..68f44329b 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -9,14 +9,14 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig1-.png", alt: "Horizontal bar chart showing an example data visualisation of annual spending", height: 1098, width: 1125} caption="Fig.1 Data visualisation" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} @@ -29,14 +29,14 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png", height: 1620, width: 1125} caption="Fig.3" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png", height: 1620, width: 1125} caption="Fig.4" spacing="default" /%} {% /layout-area %} From 275a42d8afc7be9003de42f51883f87784d17b02 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:17:56 +1100 Subject: [PATCH 041/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 68f44329b..62de14720 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -16,7 +16,7 @@ From an accessibility perspective supporting data is your friend. Put simply; su {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig2-supporting.png", alt: "Example of the supporting data required to communicate this chart.", height: 1098, width: 1125} caption="Fig.2 Supporting data" spacing="default" /%} {% /layout-area %} @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png", height: 1620, width: 1125} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png", height: 2070, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png", height: 2070, width: 1125} caption="Fig.6" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png", height: 1380, width: 1125} caption="Fig.7" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig8.png", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bom.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -119,13 +119,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% /layout %} From 30a11cba7dd423aec2e1f8cc1956ae8049d66909 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:20:07 +1100 Subject: [PATCH 042/130] Update content.mdoc --- .../content/articles/data-visualisation/content.mdoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 62de14720..f2ac684ff 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -137,14 +137,14 @@ To give you some context, the following examples show how these colours are appl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png", height: 972, width: 1125} caption="Fig.9" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png", alt: "Fig.10", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png", alt: "Fig.10", height: 972, width: 1125} caption="Fig.10" spacing="default" /%} {% /layout-area %} @@ -155,14 +155,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png", height: 1179, width: 1125} caption="Fig.11" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png", height: 1179, width: 1125} caption="Fig.12" spacing="reduced" /%} {% /layout-area %} @@ -171,14 +171,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png", height: 1179, width: 1125} caption="Fig.13" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png", height: 1179, width: 1125} caption="Fig.14" spacing="default" /%} {% /layout-area %} From b723e7f36969e8ec3c80af1e9edf290745840785 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:23:56 +1100 Subject: [PATCH 043/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index f2ac684ff..792908277 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -191,7 +191,7 @@ We just looked at where to use these colours. Now we’re going to look at when The first 4 colours (A–D) are the main set and should ALWAYS be the first choice. The last 2 colours (E–F) are backup colours and must ONLY be used as a last resort for charts that require more than 4 categories. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png", height: 610, width: 1544} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig15.png", height: 610, width: 1544} title="Fig.15" type="body" /%} @@ -210,14 +210,14 @@ Always use colours from the main set before using colours from the backup set. {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig16.png", height: 1869, width: 1125} caption="Fig.16" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig17.png", height: 1869, width: 1125} caption="Fig.17" spacing="default" /%} {% /layout-area %} @@ -230,14 +230,14 @@ Avoid using the tint (or transparent) variations on their own. As mentioned earl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig18.png", height: 2094, width: 1125} caption="Fig.18" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig19.png", height: 2094, width: 1125} caption="Fig.19" spacing="default" /%} {% /layout-area %} @@ -250,14 +250,14 @@ Only use the tint (and transparent) variations with their corresponding solid co {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig20.png", height: 2121, width: 1125} caption="Fig.20" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig21.png", height: 2121, width: 1125} caption="Fig.21" spacing="default" /%} {% /layout-area %} @@ -272,14 +272,14 @@ Fig.23 below shows a simple Westpac line graph. This graph uses colour C from th {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig23.png", height: 1557, width: 1125} caption="Fig.23" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig24.png", height: 1557, width: 1125} caption="Fig.24" spacing="default" /%} {% /layout-area %} @@ -292,13 +292,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391172/clag50yna003ef58i798k7yrj.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391183/clag517cj003ff58i627fcfbj.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -306,13 +306,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391236/clag52cle003gf58i43x19xll.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391253/clag52pd5003hf58i8t794c6h.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -320,13 +320,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391289/clag53gz8003if58ihj0gfy7n.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668391300/clag53pqs003jf58i27tl7pob.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% /layout %} From 5bdc09a4d7b7ab6e244e567371fa59ff88cb3fd1 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:25:05 +1100 Subject: [PATCH 044/130] Update content.mdoc --- .../site/src/content/articles/data-visualisation/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 792908277..b3802050d 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -336,14 +336,14 @@ If you want to take advantage of this system, using either of these colours (A o {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig25.png", height: 1557, width: 1125} caption="Fig.25" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig26.png", height: 1557, width: 1125} caption="Fig.26" spacing="default" /%} {% /layout-area %} From 4965ff72f9b9d336da3e72bbf77e110d4d5f28f4 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:29:58 +1100 Subject: [PATCH 045/130] Update content.mdoc --- apps/site/src/content/articles/data-visualisation/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index b3802050d..64e444efb 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -29,7 +29,7 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig3.png", alt: "Pie chart with each section depicted in a different bright colour, this version of the pie chart is not accessible", height: 1620, width: 1125} caption="Fig.3" spacing="default" /%} {% /layout-area %} From adcc54610812e1277044778458dbdf144c92f917 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:31:04 +1100 Subject: [PATCH 046/130] Update src/content/articles/data-visualisation --- apps/site/src/content/articles/data-visualisation/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 64e444efb..ceb0fa97c 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -36,7 +36,7 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig4.png", alt: "Pie chart with each section depicted in a different shades of grey, this version of the pie chart is not accessible", height: 1620, width: 1125} caption="Fig.4" spacing="default" /%} {% /layout-area %} From 8335c18124554203c8bb9578221b1a3c0ecf7333 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:39:37 +1100 Subject: [PATCH 047/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index ceb0fa97c..5ae4e81d7 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -49,14 +49,14 @@ To make our pie chart accessible we have to display the supporting data as shown {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png", height: 1620, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig5.png", alt: "Pie chart that does not provide supporting data, this version of the pie chart is not accessible", height: 1620, width: 1125} caption="Fig.5" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png", height: 2070, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig6.png", alt: "Pie chart that does provide supporting data, this version of the pie chart is accessible", height: 2070, width: 1125} caption="Fig.6" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ These charts only use one category and therefore do not require a key. Providing {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig7.png", alt: "A line graph chart displaying only one category, which does not require a key, this chart is accessible", height: 1380, width: 1125} caption="Fig.7" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig8.png", height: 1380, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig8.png", alt: "A line bar chart displaying only one category, which does not require a key, this chart is accessible", height: 1380, width: 1125} caption="Fig.8" spacing="default" /%} {% /layout-area %} @@ -91,13 +91,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbc.png", alt: "Data visualisation colour chart for Westpac brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-stg.png", alt: "Data visualisation colour chart for St.George brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -105,13 +105,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bom.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bom.png", alt: "Data visualisation colour chart for Bank of Melbourne brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-bsa.png", alt: "Data visualisation colour chart for BankSA brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -119,13 +119,13 @@ To assist designers with this we’ve created a data visualisation colour palett {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-rams.png", alt: "Data visualisation colour chart for RAMS brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png", height: 1012, width: 1276} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-wbg.png", alt: "Data visualisation colour chart for Westpac Group brand showing six colours as 100% solid 50% tint and 30% opacity.", height: 1012, width: 1276} spacing="default" /%} {% /layout-area %} {% /layout %} @@ -137,14 +137,14 @@ To give you some context, the following examples show how these colours are appl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png", alt: "COPY HERE", height: 972, width: 1125} caption="Fig.9" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png", alt: "Fig.10", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png", alt: "COPY HERE", height: 972, width: 1125} caption="Fig.10" spacing="default" /%} {% /layout-area %} @@ -155,14 +155,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png", alt: "COPY HERE", height: 1179, width: 1125} caption="Fig.11" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png", alt: "COPY HERE", height: 1179, width: 1125} caption="Fig.12" spacing="reduced" /%} {% /layout-area %} @@ -171,14 +171,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png", alt: "COPY HERE", height: 1179, width: 1125} caption="Fig.13" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png", alt: "COPY HERE", height: 1179, width: 1125} caption="Fig.14" spacing="default" /%} {% /layout-area %} @@ -191,7 +191,7 @@ We just looked at where to use these colours. Now we’re going to look at when The first 4 colours (A–D) are the main set and should ALWAYS be the first choice. The last 2 colours (E–F) are backup colours and must ONLY be used as a last resort for charts that require more than 4 categories. {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig15.png", height: 610, width: 1544} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig15.png", alt: "COPY HERE", height: 610, width: 1544} title="Fig.15" type="body" /%} @@ -210,14 +210,14 @@ Always use colours from the main set before using colours from the backup set. {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig16.png", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig16.png", alt: "COPY HERE", height: 1869, width: 1125} caption="Fig.16" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig17.png", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig17.png", alt: "COPY HERE", height: 1869, width: 1125} caption="Fig.17" spacing="default" /%} {% /layout-area %} @@ -230,14 +230,14 @@ Avoid using the tint (or transparent) variations on their own. As mentioned earl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig18.png", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig18.png", alt: "COPY HERE", height: 2094, width: 1125} caption="Fig.18" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig19.png", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig19.png", alt: "COPY HERE", height: 2094, width: 1125} caption="Fig.19" spacing="default" /%} {% /layout-area %} @@ -250,14 +250,14 @@ Only use the tint (and transparent) variations with their corresponding solid co {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig20.png", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig20.png", alt: "COPY HERE", height: 2121, width: 1125} caption="Fig.20" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig21.png", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig21.png", alt: "COPY HERE", height: 2121, width: 1125} caption="Fig.21" spacing="default" /%} {% /layout-area %} @@ -272,14 +272,14 @@ Fig.23 below shows a simple Westpac line graph. This graph uses colour C from th {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig23.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig23.png", alt: "COPY HERE", height: 1557, width: 1125} caption="Fig.23" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig24.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig24.png", alt: "COPY HERE", height: 1557, width: 1125} caption="Fig.24" spacing="default" /%} {% /layout-area %} @@ -292,13 +292,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", alt: "COPY HERE", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", alt: "COPY HERE", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -306,13 +306,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", alt: "COPY HERE", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", alt: "COPY HERE", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -320,13 +320,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", alt: "COPY HERE", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", alt: "COPY HERE", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% /layout %} @@ -336,14 +336,14 @@ If you want to take advantage of this system, using either of these colours (A o {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig25.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig25.png", alt: "COPY HERE", height: 1557, width: 1125} caption="Fig.25" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig26.png", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig26.png", alt: "COPY HERE", height: 1557, width: 1125} caption="Fig.26" spacing="default" /%} {% /layout-area %} From 3d4addd7cf680f881f2ce0e5bec3f0f77508435c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 13:56:08 +1100 Subject: [PATCH 048/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 5ae4e81d7..6c1e967ee 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -137,14 +137,14 @@ To give you some context, the following examples show how these colours are appl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png", alt: "COPY HERE", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig9.png", alt: "Pie chart using solid colours", height: 972, width: 1125} caption="Fig.9" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png", alt: "COPY HERE", height: 972, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig10.png", alt: "Colour swatches indicating which colours are solid", height: 972, width: 1125} caption="Fig.10" spacing="default" /%} {% /layout-area %} @@ -155,14 +155,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png", alt: "COPY HERE", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig11.png", alt: "Bar chart using solid a colour and it's respective tint", height: 1179, width: 1125} caption="Fig.11" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png", alt: "COPY HERE", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig12.png", alt: "Colour swatches indicating the solid and tint colour used in the bar graph in figure Fig.11", height: 1179, width: 1125} caption="Fig.12" spacing="reduced" /%} {% /layout-area %} @@ -171,14 +171,14 @@ The comparison chart in fig.11 shows how a tint is used with its corresponding s {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png", alt: "COPY HERE", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig13.png", alt: "Area chart using solid a colour and it's respective transparent version", height: 1179, width: 1125} caption="Fig.13" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png", alt: "COPY HERE", height: 1179, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig14.png", alt: "Colour swatches indicating the solid and transparent colour used in the area graph in figure Fig.13", height: 1179, width: 1125} caption="Fig.14" spacing="default" /%} {% /layout-area %} @@ -191,7 +191,7 @@ We just looked at where to use these colours. Now we’re going to look at when The first 4 colours (A–D) are the main set and should ALWAYS be the first choice. The last 2 colours (E–F) are backup colours and must ONLY be used as a last resort for charts that require more than 4 categories. {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig15.png", alt: "COPY HERE", height: 610, width: 1544} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig15.png", alt: "Colour swatches indicating main colours and backups", height: 610, width: 1544} title="Fig.15" type="body" /%} @@ -210,14 +210,14 @@ Always use colours from the main set before using colours from the backup set. {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig16.png", alt: "COPY HERE", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig16.png", alt: "Graph using main colours only, this is correct", height: 1869, width: 1125} caption="Fig.16" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig17.png", alt: "COPY HERE", height: 1869, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig17.png", alt: "Graph using backup colours when main colours are available, this is incorrect.", height: 1869, width: 1125} caption="Fig.17" spacing="default" /%} {% /layout-area %} @@ -230,14 +230,14 @@ Avoid using the tint (or transparent) variations on their own. As mentioned earl {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig18.png", alt: "COPY HERE", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig18.png", alt: "Bar graph using solid and respective tint or transparent colours, this is correct.", height: 2094, width: 1125} caption="Fig.18" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig19.png", alt: "COPY HERE", height: 2094, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig19.png", alt: "Bar graph using only tint or transparent colours, this is incorrect.", height: 2094, width: 1125} caption="Fig.19" spacing="default" /%} {% /layout-area %} @@ -292,13 +292,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", alt: "Data visualisation colour chart for Westpac brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", alt: "Data visualisation colour chart for St.George brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -306,13 +306,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", alt: "Data visualisation colour chart for Bank of Melbourne brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", alt: "Data visualisation colour chart for BankSA brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -320,13 +320,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", alt: "Data visualisation colour chart for RAMS brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", alt: "COPY HERE", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", alt: "Data visualisation colour chart for Westpac Group brand showing the first 2 accessible colours.", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% /layout %} From 5907bd9ff06525e87727a244933b2ddd1363f00a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:08:53 +1100 Subject: [PATCH 049/130] Update content.mdoc --- .../articles/data-visualisation/content.mdoc | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/site/src/content/articles/data-visualisation/content.mdoc b/apps/site/src/content/articles/data-visualisation/content.mdoc index 6c1e967ee..8f0c91ffe 100644 --- a/apps/site/src/content/articles/data-visualisation/content.mdoc +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -250,14 +250,14 @@ Only use the tint (and transparent) variations with their corresponding solid co {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig20.png", alt: "COPY HERE", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig20.png", alt: "Bar graph using solid and respective tint or transparent colours, this is correct.", height: 2121, width: 1125} caption="Fig.20" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig21.png", alt: "COPY HERE", height: 2121, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig21.png", alt: "Bar graph using solid and respective tint or transparent versions of a different colour, this is incorrect.", height: 2121, width: 1125} caption="Fig.21" spacing="default" /%} {% /layout-area %} @@ -272,14 +272,14 @@ Fig.23 below shows a simple Westpac line graph. This graph uses colour C from th {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig23.png", alt: "COPY HERE", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig23.png", alt: "Westpac branded line graph using colour C this is accessible", height: 1557, width: 1125} caption="Fig.23" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig24.png", alt: "COPY HERE", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig24.png", alt: "RAMS branded line graph using colour C this is not accessible", height: 1557, width: 1125} caption="Fig.24" spacing="default" /%} {% /layout-area %} @@ -287,18 +287,18 @@ Fig.23 below shows a simple Westpac line graph. This graph uses colour C from th If your chart needs to be multi-brand (and we’ll assume it does) you will need to ensure that whatever colour you choose is accessible in all of the brand palettes. -To make life easier we’ve structured the colour tokens to accomodate this scenario by making the first 2 colours (A & B) accessible in all brands. There are other accessible colours in these palettes, however, A and B are the only colours that are consistently accessible across each brand. +To make life easier we’ve structured the colour tokens to accommodate this scenario by making the first 2 colours (A & B) accessible in all brands. There are other accessible colours in these palettes, however, A and B are the only colours that are consistently accessible across each brand. {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", alt: "Data visualisation colour chart for Westpac brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbc.png", alt: "Data visualisation colour chart for Westpac brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", alt: "Data visualisation colour chart for St.George brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-stg.png", alt: "Data visualisation colour chart for St.George brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -306,13 +306,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", alt: "Data visualisation colour chart for Bank of Melbourne brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bom.png", alt: "Data visualisation colour chart for Bank of Melbourne brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", alt: "Data visualisation colour chart for BankSA brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-bsa.png", alt: "Data visualisation colour chart for BankSA brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="reduced" /%} {% /layout-area %} {% /layout %} @@ -320,13 +320,13 @@ To make life easier we’ve structured the colour tokens to accomodate this scen {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", alt: "Data visualisation colour chart for RAMS brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-rams.png", alt: "Data visualisation colour chart for RAMS brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", alt: "Data visualisation colour chart for Westpac Group brand showing the first 2 accessible colours.", height: 729, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-ally-wbg.png", alt: "Data visualisation colour chart for Westpac Group brand showing colours A, B, C, D, E, F. Colours A and B are accessible.", height: 729, width: 1125} spacing="default" /%} {% /layout-area %} {% /layout %} @@ -336,14 +336,14 @@ If you want to take advantage of this system, using either of these colours (A o {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig25.png", alt: "COPY HERE", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig25.png", alt: "Westpac branded line graph using colour A this is accessible", height: 1557, width: 1125} caption="Fig.25" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig26.png", alt: "COPY HERE", height: 1557, width: 1125} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/data-viz-fig26.png", alt: "RAMS branded line graph using colour A this is accessible", height: 1557, width: 1125} caption="Fig.26" spacing="default" /%} {% /layout-area %} From bf553e16852a253b209c2253f13e413d95aef385 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:11:18 +1100 Subject: [PATCH 050/130] Update src/content/articles/design-with-gel --- apps/site/src/content/articles/design-with-gel.yaml | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/design-with-gel.yaml b/apps/site/src/content/articles/design-with-gel.yaml index fc0de115f..87dbccd3e 100644 --- a/apps/site/src/content/articles/design-with-gel.yaml +++ b/apps/site/src/content/articles/design-with-gel.yaml @@ -6,14 +6,9 @@ description: >- and be on the cutting edge of the industry. How do you retain this enthusiasm while designing with a design system? thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666848508/cl9qmkbwp0003f58i11636bi6.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-card.png\r" smallDescription: Learn how to design digital applications within a large organisation. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667030991/cl9tn7jht000lf58i656j7yhf.jpg - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-hero.jpg\r" + alt: People pointing to a transparent whiteboard covered in post it notes. author: Mark Marshall From 98195b4fad854b3eec9779b523580ac959613d2e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:12:00 +1100 Subject: [PATCH 051/130] Update src/content/articles/figma-libraries --- .../site/src/content/articles/figma-libraries.yaml | 7 +++---- .../content/articles/figma-libraries/content.mdoc | 14 +++++++------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/articles/figma-libraries.yaml b/apps/site/src/content/articles/figma-libraries.yaml index fa98df916..77226036e 100644 --- a/apps/site/src/content/articles/figma-libraries.yaml +++ b/apps/site/src/content/articles/figma-libraries.yaml @@ -7,14 +7,13 @@ description: >- thumbnail: src: >- https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m4000yam8ifp387nfc.png + alt: Illustration of a painters pallet. height: 1212 width: 3168 smallDescription: >- Design using cloud based symbols. All the assets you need to create interfaces with the design system. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m2000xam8iaw7o4ols.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/figma-libraries-hero.png\r" + alt: Illustration of a painters pallet. author: Kate Macdonald diff --git a/apps/site/src/content/articles/figma-libraries/content.mdoc b/apps/site/src/content/articles/figma-libraries/content.mdoc index 10d35a999..b0561e4c6 100644 --- a/apps/site/src/content/articles/figma-libraries/content.mdoc +++ b/apps/site/src/content/articles/figma-libraries/content.mdoc @@ -2,21 +2,21 @@ The foundations of the GEL Figma Library ecosystem are the GEL Component Libraries. These libraries are made up of highly configurable components, patterns and styles that are an exact representation of what is available in the [GEL Design System](/design-system). -The following Figma libraries are _only_ available for designers working within the Westpac group organisation: +The following Figma libraries are *only* available for designers working within the Westpac group organisation: - [GEL WBC Components](https://www.figma.com/file/oyl5USuOmI86B1BIcrwG3o/GEL-WBC-Components) - [GEL STG Components](https://www.figma.com/file/U82PSQ4galbXGMTCqhAkZw/GEL-STG-Components) - [GEL BSA Components](https://www.figma.com/file/VpkWqS1jnlYi0HQIoJtjzK/GEL-BSA-Components) - [GEL BOM Components](https://www.figma.com/file/pHjPTlwvKBngtAdOk9A8pw/GEL-BOM-Components) - [GEL RAMS Components](https://www.figma.com/file/EMqLUSQpDckSaT5VQNYOz0/GEL-RAMS-Components) -- [GEL WBG (GROUP) Components]() +- [GEL WBG (GROUP) Components](https://www.figma.com/file/pKouqjpeCZb0JkuD0V5RwQ/GEL-WBG-\(GROUP\)-Components) - [GEL Icons](https://www.figma.com/file/5ksudv161S5nYyEGkgkXQa/GEL-Icons) - [GEL Pictograms](https://www.figma.com/file/sWRKQTkG8PyNtGNKwlLReo/GEL-Pictograms) - [GEL Logos & Symbols](https://www.figma.com/file/WojlFfS0UyU0i3BPvZiJf0/GEL-Logos-and-Symbols) Each of the Component libraries are identical, except for the colours, fonts and logos used within them, which are specific to each brand. This is how we manage the [multibrand](/articles/multi-brand-made-easy) system. -The components from the _GEL Icons_ and _GEL Logos & Symbols_ libraries are not brand specific. The _GEL Pictograms_ library contains the components for every brand in the one library. +The components from the *GEL Icons* and *GEL Logos & Symbols* libraries are not brand specific. The *GEL Pictograms* library contains the components for every brand in the one library. ## **Other Figma Libraries** @@ -24,11 +24,11 @@ The GEL Figma Library ecosystem also includes libraries that are specific to pla ## **Library access** -The GEL Component libraries are available to the entire _Westpac Figma Organisation_, so once you are a member you should automatically have access. +The GEL Component libraries are available to the entire *Westpac Figma Organisation*, so once you are a member you should automatically have access. -Figma libraries are accessed from within the Assets panel of each Figma design file, select the _Team Library_ book icon. This will open a panel that allows you to select which libraries you’d like to use within your file. For simplicity’s sake it’s best to have just the libraries you need selected per file –otherwise it can get overwhelming. +Figma libraries are accessed from within the Assets panel of each Figma design file, select the *Team Library* book icon. This will open a panel that allows you to select which libraries you’d like to use within your file. For simplicity’s sake it’s best to have just the libraries you need selected per file –otherwise it can get overwhelming. -Before you start using the libraries we recommend having a good look through [GEL site](/) and the [GEL Design System](/design-system). Familiarise yourself with the Design System and its elements. Play with the demo’s in the design system so you understand how the components work in a responsive environment. +Before you start using the libraries we recommend having a good look through [GEL site](/) and the [GEL Design System](/design-system). Familiarise yourself with the Design System and its elements. Play with the demo’s in the design system so you understand how the components work in a responsive environment. ## **The components** @@ -66,4 +66,4 @@ If you are trying to create something new, our general recommendation is to chec ### **Who do I contact for help?** -If you have any questions or want to share ideas, please [contact the GEL team](mailto:gel@westpac.com.au). There’s also loads of information and resources in the [GEL site](/) and in the [Teams Figma channel](https://teams.microsoft.com/l/channel/19%3af1d8ec67a5744fc2837dbeef6efd2720%40thread.tacv2/Figma?groupId=a39efb9d-1df0-4986-b16a-157876ad82a5&tenantId=57c64fd4-66ca-49f5-ab38-2e67ef58e724). +If you have any questions or want to share ideas, please [contact the GEL team](mailto:gel@westpac.com.au). There’s also loads of information and resources in the [GEL site](/) and in the [Teams Figma channel](https://teams.microsoft.com/l/channel/19%3af1d8ec67a5744fc2837dbeef6efd2720%40thread.tacv2/Figma?groupId=a39efb9d-1df0-4986-b16a-157876ad82a5&tenantId=57c64fd4-66ca-49f5-ab38-2e67ef58e724). From 50355533eb6e603d0d7c95ff78729d8de2191b62 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:12:47 +1100 Subject: [PATCH 052/130] Update src/content/articles/code-with-gel --- apps/site/src/content/articles/code-with-gel.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index ee5b20c13..662b61f66 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -6,6 +6,7 @@ description: >- libraries, languages and coding technologies. thumbnail: src: "https://www.westpac.com.au/content/dam/public/gel/images/code-with-gel-card.png\r" + alt: Stylist illustration coding terminal screen smallDescription: >- Automate your environment, scale your projects and speed up your work flow with our cutting edge code library. From f0915aaefe8eba90627093287ec168bbd0c8027a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:13:24 +1100 Subject: [PATCH 053/130] Update src/content/articles/collaborate-for-change --- apps/site/src/content/articles/collaborate-for-change.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/collaborate-for-change.yaml b/apps/site/src/content/articles/collaborate-for-change.yaml index bdb490a79..c2f0f29f2 100644 --- a/apps/site/src/content/articles/collaborate-for-change.yaml +++ b/apps/site/src/content/articles/collaborate-for-change.yaml @@ -5,6 +5,7 @@ description: >- or a pattern change so collaboration & early engagement are key. thumbnail: src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-card.png\r" + alt: Stylised illustration of a bike chain. smallDescription: Considered change made collaboratively achieves the best results. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-hero.jpg\r" From a8a1465ad72acb9c9d0b440aadf353087f2111f8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:13:40 +1100 Subject: [PATCH 054/130] Update src/content/articles/colour --- apps/site/src/content/articles/colour.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/colour.yaml b/apps/site/src/content/articles/colour.yaml index 094dc26c8..92f24844e 100644 --- a/apps/site/src/content/articles/colour.yaml +++ b/apps/site/src/content/articles/colour.yaml @@ -7,6 +7,7 @@ description: >- and how to apply it to your designs. thumbnail: src: "https://www.westpac.com.au/content/dam/public/gel/images/colour-card.png\r" + alt: Illustration of a rainbow smallDescription: >- Speed up your workflow, ensure you're on brand and stay accessible with our multi-brand colour system. From fdd59c7b4f39108f86d437a7cc669ecc09affc7c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:13:52 +1100 Subject: [PATCH 055/130] Update src/content/articles/data-visualisation --- apps/site/src/content/articles/data-visualisation.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/data-visualisation.yaml b/apps/site/src/content/articles/data-visualisation.yaml index 275698fde..ebcc16769 100644 --- a/apps/site/src/content/articles/data-visualisation.yaml +++ b/apps/site/src/content/articles/data-visualisation.yaml @@ -8,6 +8,7 @@ description: >- thumbnail: src: >- https://www.westpac.com.au/content/dam/public/gel/images/data-visualisation-card.png + alt: Illustration of a pie chart height: 1212 width: 3168 smallDescription: >- From f5122623eadef828234a586d3b9707e01ff017b7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:14:09 +1100 Subject: [PATCH 056/130] Update src/content/articles/design-with-gel --- apps/site/src/content/articles/design-with-gel.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/design-with-gel.yaml b/apps/site/src/content/articles/design-with-gel.yaml index 87dbccd3e..dd2afc8f1 100644 --- a/apps/site/src/content/articles/design-with-gel.yaml +++ b/apps/site/src/content/articles/design-with-gel.yaml @@ -7,6 +7,7 @@ description: >- while designing with a design system? thumbnail: src: "https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-card.png\r" + alt: Illustration of post it notes smallDescription: Learn how to design digital applications within a large organisation. image: src: "https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-hero.jpg\r" From 4693184d834196e5aac8a6bebc6cd0ba6ba973e8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:15:42 +1100 Subject: [PATCH 057/130] Update src/content/articles/gel-design-approach --- .../src/content/articles/gel-design-approach.yaml | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/gel-design-approach.yaml b/apps/site/src/content/articles/gel-design-approach.yaml index 03602d98f..ea9578c87 100644 --- a/apps/site/src/content/articles/gel-design-approach.yaml +++ b/apps/site/src/content/articles/gel-design-approach.yaml @@ -6,16 +6,12 @@ description: >- the customer experience. Using the GEL Design System also increases the consistency of our brand experiences across the entire brand ecosystem. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667099621/cl9us2ju9000wf58ie0m958i4.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/gel-design-approach-card.png\r" + alt: Illustration of a target with an arrow in the bullseye smallDescription: >- Adopt the design system with confidence. We think from big picture to minute detail. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667099383/cl9urxfbl000vf58i6q0d9q45.jpg - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/gel-design-approach-hero.jpg\r" + alt: Photograph of a dart board with three arrows in the bullseye. author: Marita Purins From 51f3e0f7aea336eae164ec86363e26c99c0492fd Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:18:19 +1100 Subject: [PATCH 058/130] Update src/content/articles/the-grid --- apps/site/src/content/articles/the-grid.yaml | 17 ++++++----------- .../src/content/articles/the-grid/content.mdoc | 2 +- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/apps/site/src/content/articles/the-grid.yaml b/apps/site/src/content/articles/the-grid.yaml index d7775b52a..914d22a64 100644 --- a/apps/site/src/content/articles/the-grid.yaml +++ b/apps/site/src/content/articles/the-grid.yaml @@ -7,19 +7,14 @@ description: >- sizes and resolutions. We can’t keep creating custom solutions for every device on the market. What do we do? thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666755403/cl9p34rfz0005u48ig6ub5p67.png - height: 1212 - width: 3168 -smallDescription: >- + src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-card.png\r" + alt: Stylist illustration of grid columns +smallDescription: > Design flexible, robust layouts for any device, screen size and operating system. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1716958040/Breakpoints_xcjnof.png + src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-hero.png\r" alt: >- - Image showing the 6 breakpoints and where they are likely to be applied ie. - Phone, Tablet, Laptop etc. - height: 1070 - width: 2718 + Illustration showing the 6 breakpoints and where they are likely to be + applied ie. Phone, Tablet, Laptop etc. author: Justin Spencer diff --git a/apps/site/src/content/articles/the-grid/content.mdoc b/apps/site/src/content/articles/the-grid/content.mdoc index 4fa65b3e6..ace5dfc71 100644 --- a/apps/site/src/content/articles/the-grid/content.mdoc +++ b/apps/site/src/content/articles/the-grid/content.mdoc @@ -30,7 +30,7 @@ The grid consists of 12 columns (see figure 1). A pre-defined gutter is applied As illustrated in figure 1. the number 12 is an extremely versatile composite number not least because it has 6 divisors - 1, 2, 3, 4 and 6. This versatility offers much more flexibility for layout options which is particularly useful when designing responsive applications. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666070755/cl9dridp8000ktc8i3uwr61eo.png", alt: "The different layout options available when using the 12 column grid", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig1-columns.png\r", alt: "The different layout options available when using the 12 column grid"} title="Figure 1. Using 12 columns offers many more options for layout configurations\" type=\"bodyWide" type="bodyWide" /%} From 503d073c4acd64a65927f47cddc807c4059ea297 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:24:21 +1100 Subject: [PATCH 059/130] Update content.mdoc --- apps/site/src/content/articles/the-grid/content.mdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/the-grid/content.mdoc b/apps/site/src/content/articles/the-grid/content.mdoc index ace5dfc71..cdc645ac5 100644 --- a/apps/site/src/content/articles/the-grid/content.mdoc +++ b/apps/site/src/content/articles/the-grid/content.mdoc @@ -30,7 +30,7 @@ The grid consists of 12 columns (see figure 1). A pre-defined gutter is applied As illustrated in figure 1. the number 12 is an extremely versatile composite number not least because it has 6 divisors - 1, 2, 3, 4 and 6. This versatility offers much more flexibility for layout options which is particularly useful when designing responsive applications. {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig1-columns.png\r", alt: "The different layout options available when using the 12 column grid"} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig1-columns.png", alt: "The different layout options available when using the 12 column grid", height: 1800, width: 1852} title="Figure 1. Using 12 columns offers many more options for layout configurations\" type=\"bodyWide" type="bodyWide" /%} @@ -39,7 +39,7 @@ As illustrated in figure 1. the number 12 is an extremely versatile composite nu When we design our layouts in a responsive environment we don’t use fixed pixel widths instead we use column spans and offsets. Rather than specifying the width of an element in pixels we specify the number of columns the element needs to span. We can then change the number of columns that element spans at different breakpoints. For example, suppose we have 2 elements A and B. In XS view we want A and B to each span 12 columns. This results in A and B stacking. However, on a larger viewport (e.g. SM) we don’t want A and B to stack instead we want to place them side by side. To achieve this, we would specify that A and B each span 6 columns at SM. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666070840/cl9drk7cd000ltc8i5lz82nsz.png", alt: "How the layout can change at different breakpoints", height: 798, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig2-layouts.png", alt: "How the layout can change at different breakpoints", height: 798, width: 1852} title="Figure 2. Using 12 columns offers many more options for layout configurations" type="bodyWide" /%} @@ -48,7 +48,7 @@ When we design our layouts in a responsive environment we don’t use fixed pixe Column offsets work in tandem with column spans. They allow designers to move content across the grid. For example, a text element may not need to span 12 columns in LG view. To reduce the width of the text element the designer could offset 2 columns and span 8. This would provide a narrower text element. Offsets also allow us to create more interesting asymmetric layouts which don’t follow the popular blog style design approach where everything is centred. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666070918/cl9drlvjq000mtc8i1n9jco9g.png", alt: "How elements can offset and span various columns", height: 1092, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig2-offsets.png", alt: "How elements can offset and span various columns", height: 1092, width: 1852} title="Figure 3. Column offsets" type="bodyWide" /%} @@ -57,7 +57,7 @@ Column offsets work in tandem with column spans. They allow designers to move co Nested grids offer even more flexibility for content layout. As the name suggests a nested grid is just another grid put into a container that’s already in the grid. There are 2 key things to remember when using nested grids. Whenever you add a grid it will always use 12 columns and there will always be the same margin between the columns no matter how small the container. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666070960/cl9drmrm7000ntc8ihxqwdojh.png", alt: "How nested grids work", height: 1092, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig4-nested.png", alt: "How nested grids work", height: 1092, width: 1852} title="Figure 4. Example of a nested grid" type="bodyWide" /%} From 0ef112b68df13652294b0da1706d8b980f91cece Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:27:47 +1100 Subject: [PATCH 060/130] Update src/content/articles/iconography --- apps/site/src/content/articles/iconography.yaml | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/iconography.yaml b/apps/site/src/content/articles/iconography.yaml index 9e1920271..0b67e8622 100644 --- a/apps/site/src/content/articles/iconography.yaml +++ b/apps/site/src/content/articles/iconography.yaml @@ -8,14 +8,13 @@ description: >- information about embedding, sizing and styling icons please refer to the Design System Iconography. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663138229/cl819k5u60009am8i687f9lc2.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-hero.png\r" + alt: Illustration of a flower icon smallDescription: Use our global visual language to communicate and engage with customers. image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1690447987/clkkx311z00034g8i2jjuhsdh.png + https://www.westpac.com.au/content/dam/public/gel/images/iconography-card.png + alt: Illustration of an upload icon height: 1080 width: 1920 author: Justin Spencer From 11e8a699d3d9acf3d6a4c4141528e37ebb5b0bf0 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:38:15 +1100 Subject: [PATCH 061/130] Update content.mdoc --- .../content/articles/iconography/content.mdoc | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc index de6e7bc85..4339783e8 100644 --- a/apps/site/src/content/articles/iconography/content.mdoc +++ b/apps/site/src/content/articles/iconography/content.mdoc @@ -11,7 +11,7 @@ User Interface icons are designed to communicate meaning and aid navigation. The Each icon in the library has 2 variants; filled and outlined as shown in the image below. These variants can be used to visually emphasise or de-emphasise a symbol. Designers can use a combination of filled and outlined icons to help draw attention to what’s important. This approach is similar to using font weights. When we want to emphasise a string of text we typically use a bolder font, this is a very simple and effective way to focus ones attention without the need for additional visual queues. Filled and outlined icons work in exactly the same way where the filled icon is bold and the outlined icon is light. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-filled-outlined.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} title="Icon variants, filled and outlined" type="bodyWide" /%} @@ -20,14 +20,14 @@ Filled and outlined variants are also useful when creating menus where the fille {% layout layout=[5, 5] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1693977523/clm7ah9ii0004vd8i5ukg1r0j.png", alt: "Image showing examples of icons that can't be filled.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-cant-fill.png", alt: "Image showing examples of icons that can't be filled.", height: 904, width: 902} caption="Examples of icons that can't be filled" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1693977532/clm7ahghh0005vd8ig3tybeky.png", alt: "Image showing examples of icons that can't be outlined.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-cant-outline.png", alt: "Image showing examples of icons that can't be outlined.", height: 904, width: 902} caption="Examples of icons that can't be outlined" spacing="default" /%} {% /layout-area %} @@ -48,14 +48,14 @@ The GEL design system also provides a library of Pictograms. Unlike icons Pictog {% layout layout=[5, 5] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1690447333/clkkwp1dg00014g8iashk6m6s.png", alt: "Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-sizes.png", alt: "Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.", height: 904, width: 902} caption="Icons should only be used at these sizes" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1690447449/clkkwrixm00024g8i7phj2zw3.png", alt: "Image showing the Pictogram sizing chart. Pictograms should only be used above 36px", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-pictogram-size.png", alt: "Image showing the Pictogram sizing chart. Pictograms should only be used above 36px", height: 904, width: 902} caption="Pictograms should always be larger that 36px" spacing="default" /%} {% /layout-area %} @@ -76,14 +76,14 @@ The icon grid has been developed to facilitate consistency while also offering a {% layout layout=[5, 5] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572062/cl88fupn9001cam8i7zrbcu4a.png", alt: "The 24px pixel grid at one thousand percent magnification.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-icon-grid-1000.png", alt: "The 24px pixel grid at one thousand percent magnification.", height: 904, width: 902} caption="1000% zoom" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572105/cl88fvn4e001dam8ie77vfy1c.png", alt: "The five icon sizes, 12, 18, 24, 36 and 42 pixels", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-icon-grid-100.png", alt: "The five icon sizes, 12, 18, 24, 36 and 42 pixels", height: 904, width: 902} caption="100% actual size" spacing="default" /%} {% /layout-area %} @@ -96,14 +96,14 @@ Legibility, consistency and simplicity are key design principals for all UI icon {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png", alt: "The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-key-aspects-list.png", alt: "The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.", height: 712, width: 712} caption="Key aspects of an icon" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png", alt: "Each of the six aspects of an icons anatomy.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-key-aspects-diagram.png", alt: "Each of the six aspects of an icons anatomy.", height: 712, width: 712} caption="800% zoom" spacing="default" /%} {% /layout-area %} @@ -116,14 +116,14 @@ To ensure icons maintain alignment with the pixel grid at 24, 36 and 48px, it is {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png", alt: "The use of even numbers to ensure that icons can be scaled correctly.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-fill-area-do.png", alt: "The use of even numbers to ensure that icons can be scaled correctly.", height: 712, width: 712} caption="Do - use even numbers" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png", alt: "Demonstration of why not to use odd numbers.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-fill-area-dont.png", alt: "Demonstration of why not to use odd numbers.", height: 712, width: 712} caption="Avoid - using odd numbers" spacing="default" /%} {% /layout-area %} @@ -136,14 +136,14 @@ A 2px corner radius is used on the fill area of the icon. Interior corners in th {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572714/cl88g8p4l001iam8i0eg93tj7.png", alt: "How the corner radius works on the fill area", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-corners-do.png", alt: "How the corner radius works on the fill area", height: 712, width: 712} caption="Fill area with 2px corner radius" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572720/cl88g8tqr001jam8i3kszd6ek.png", alt: "How the corner area does not use a corner radius.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-corners-dont.png", alt: "How the corner area does not use a corner radius.", height: 712, width: 712} caption="Counter area - no corners" spacing="default" /%} {% /layout-area %} @@ -156,14 +156,14 @@ Always use a 2px width for strokes and counter strokes. This includes curves and {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png", alt: "The stroke and counter stroke width", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-1.png", alt: "The stroke and counter stroke width", height: 712, width: 712} caption="Strokes and counter strokes are 2px" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png", alt: "The stroke width on curves and angles", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-2.png", alt: "The stroke width on curves and angles", height: 712, width: 712} caption="Curves and angles are 2px" spacing="reduced" /%} {% /layout-area %} @@ -172,14 +172,14 @@ Always use a 2px width for strokes and counter strokes. This includes curves and {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png", alt: "Example 1. The end of a stroke at 90 degrees.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-3.png", alt: "Example 1. The end of a stroke at 90 degrees.", height: 712, width: 712} caption="All strokes should have 90° square ends" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png", alt: "Example 2. The end of a stroke at 90 degrees.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-4.png", alt: "Example 2. The end of a stroke at 90 degrees.", height: 712, width: 712} caption="All strokes should have 90° square ends" spacing="default" /%} {% /layout-area %} @@ -192,14 +192,14 @@ Some scenarios may call for a little ‘artistic licence’ to break these guide {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573097/cl88ggwvt001qam8ibkw672ef.png", alt: "An example of where these guidelines may not work.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-artistic-licence-1.png", alt: "An example of where these guidelines may not work.", height: 712, width: 712} caption="Reduced border radius for wheels" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573106/cl88gh3g0001ram8i9sxthmfa.png", alt: "Another example of where these guidelines may not work.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-artistic-licence-2.png", alt: "Another example of where these guidelines may not work.", height: 712, width: 712} caption="Uses an odd number for legs" spacing="default" /%} {% /layout-area %} @@ -212,14 +212,14 @@ Consistency aids user comprehension of icons. Use the existing system icons when {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573350/cl88gmbly001sam8if1nx9agu.png", alt: "The correct use of strokes", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-weights-do.png", alt: "The correct use of strokes", height: 712, width: 712} caption="Do - use consistent stroke weights and squared stroke terminals" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573356/cl88gmg9a001tam8i2ihk6hny.png", alt: "The incorrect use of strokes", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-weights-dont.png", alt: "The incorrect use of strokes", height: 712, width: 712} caption="Don’t - use inconsistent stroke weights or rounded stroke terminals" spacing="reduced" /%} {% /layout-area %} @@ -228,14 +228,14 @@ Consistency aids user comprehension of icons. Use the existing system icons when {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573365/cl88gmniv001uam8i7jfa0yot.png", alt: "The correct geometric graphic style", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-dimension-do.png", alt: "The correct geometric graphic style", height: 712, width: 712} caption="Do - make icons simple, bold, flat shapes" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573371/cl88gms2x001vam8igy9e4rzl.png", alt: "The incorrect three dimensional graphic style", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-dimension-dont.png", alt: "The incorrect three dimensional graphic style", height: 712, width: 712} caption="Don’t - add unnecessary dimension" spacing="reduced" /%} {% /layout-area %} @@ -244,14 +244,14 @@ Consistency aids user comprehension of icons. Use the existing system icons when {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573383/cl88gn0yy001wam8idnvf2qmp.png", alt: "The correct geometric, simple graphic style", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-simple-do.png", alt: "The correct geometric, simple graphic style", height: 712, width: 712} caption="Do - use simple geometric shapes to construct icons. This adds clarity and legibility." spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573389/cl88gn5t0001xam8i54mp5lce.png", alt: "The incorrect organic graphic style", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-simple-dont.png", alt: "The incorrect organic graphic style", height: 712, width: 712} caption="Don’t - be too literal. Avoid adding complex details and organic shapes." spacing="reduced" /%} {% /layout-area %} @@ -260,14 +260,14 @@ Consistency aids user comprehension of icons. Use the existing system icons when {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573396/cl88gnbe0001yam8i8pprdypb.png", alt: "How icons align to the pixel grid", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-grid-do.png", alt: "How icons align to the pixel grid", height: 712, width: 712} caption="Do - use icons at one of the pre-defined sizes. Set sizes and position icons ‘on the pixel grid’." spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663573403/cl88gngdh001zam8i37xwbri1.png", alt: "What happens when icons are scaled and no longer align with the pixel grid.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-best-practice-grid-dont.png", alt: "What happens when icons are scaled and no longer align with the pixel grid.", height: 712, width: 712} caption="Don’t - scale icons to random sizes. This will cause them to fall off the grid and blur." spacing="default" /%} {% /layout-area %} From a6b8a16ccb003294cb45157ce8be039f492fe16e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:41:47 +1100 Subject: [PATCH 062/130] Update src/content/articles/journey-management --- .../src/content/articles/journey-management.yaml | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/site/src/content/articles/journey-management.yaml b/apps/site/src/content/articles/journey-management.yaml index a714f7c25..5e7730030 100644 --- a/apps/site/src/content/articles/journey-management.yaml +++ b/apps/site/src/content/articles/journey-management.yaml @@ -6,17 +6,13 @@ description: >- is key to creating improved customer experiences and driving strong business outcomes. thumbnail: - src: https://res.cloudinary.com/westpac-gel/image/upload/journey_map_card.png - alt: image of 2 circles with an arrow between them. - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/journey_map_card.png\r" + alt: Illustration of a circle with an arrow pointed to another circle smallDescription: >- Use storytelling to empathise with customers, articulate their pain points an define meaningful solutions. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1714714884/journey-map-hero.png - height: 1289 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/journey-map-hero.png\r" + alt: Feet standing on a circle with an arrow pointing into another circle. author: DX Journey Team -publishedAt: 2024-05-01T10:40 +publishedAt: 2024-05-01T10:40:00.000Z From 07ef8892e804a5dc89e2cb053f82571fa34153ea Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:43:51 +1100 Subject: [PATCH 063/130] Update src/content/articles/motion-principles --- apps/site/src/content/articles/motion-principles.yaml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/motion-principles.yaml b/apps/site/src/content/articles/motion-principles.yaml index 2af98517d..27a476823 100644 --- a/apps/site/src/content/articles/motion-principles.yaml +++ b/apps/site/src/content/articles/motion-principles.yaml @@ -5,7 +5,8 @@ description: >- accessible, and serve a purpose without following some guiding principles. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1687413365/clj6qckw70025bn8ibcno3r5j.png + https://www.westpac.com.au/content/dam/public/gel/images/motion-principles-card.png + alt: Simple illustration of a Newton's Cradle desk toy height: 1212 width: 3168 smallDescription: >- @@ -13,7 +14,8 @@ smallDescription: >- and serve a purpose. image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1687412203/clj6pnoev0022bn8ibs0s0wk6.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/motion-principles-hero.png + alt: Simple illustration of a Newton's Cradle desk toy + height: 1212 + width: 3168 author: Mark Marshall From bd675fce5b55d4f89505a02ee43ae6858817100a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:45:20 +1100 Subject: [PATCH 064/130] Update src/content/articles/multi-brand-made-easy --- .../src/content/articles/multi-brand-made-easy.yaml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/multi-brand-made-easy.yaml b/apps/site/src/content/articles/multi-brand-made-easy.yaml index 1e0c8695c..fad26c9d5 100644 --- a/apps/site/src/content/articles/multi-brand-made-easy.yaml +++ b/apps/site/src/content/articles/multi-brand-made-easy.yaml @@ -8,7 +8,8 @@ description: >- resources. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663137798/cl819awzl0007am8i6n47fcgj.png + https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-made-easy-card.png + alt: . height: 1212 width: 3168 smallDescription: >- @@ -16,7 +17,8 @@ smallDescription: >- knowledge, digital assets and business processes. image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667114301/cl9v0t61d000zf58ihp0j1odr.jpg - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-made-easy-hero.jpg + alt: Old-fashioned television with a St George dragon ad on the screen. + height: 1289 + width: 2400 author: Justin Spencer From c0715a3aa16584ce7178105be07ca15f9c621801 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 14:50:04 +1100 Subject: [PATCH 065/130] Update content.mdoc --- .../src/content/articles/multi-brand-made-easy/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc index bc812ccf0..319da3f11 100644 --- a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc +++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc @@ -13,7 +13,7 @@ Several years later on the cusp of the digital revolution the GEL Design System At its core the design system is made up of 4 sub-systems; colour, typography, iconography and layout. These are the foundations of our multi-brand system. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1667257636/cl9xe5c2t0015f58i4u4yd807.png", alt: "Graphic showing the design systems 4 sub-systems; Colour, Typography, Iconography and Layout.", height: 1152, width: 2000} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-principles-cards.png", alt: "Graphic showing the design systems 4 sub-systems; Colour, Typography, Iconography and Layout.", height: 1152, width: 2000} type="bodyWide" /%} ### Colour @@ -21,7 +21,7 @@ At its core the design system is made up of 4 sub-systems; colour, typography, i The colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1665358951/cl91zpy5o000rrq8ih082f3oh.png", alt: "Graphic to show the different colours that each brand use for their Primary colour.", height: 1096, width: 2321} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-colour.png", alt: "Graphic to show the different colours that each brand use for their Primary colour.", height: 1096, width: 2321} type="body" /%} When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the *Primary colour* in Westpac is #DA1710 however in Rams it’s #047DBC. Our application only needs to know that the *Primary colour* is being used, the value of that colour is irrelevant. From 0226c5ac91bdda0dc543b392a46677edd13f5a2b Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:36:39 +1100 Subject: [PATCH 066/130] Update src/content/articles/notifications --- apps/site/src/content/articles/notifications.yaml | 7 ++++--- apps/site/src/content/articles/notifications/content.mdoc | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/notifications.yaml b/apps/site/src/content/articles/notifications.yaml index a2191c91e..e4899526f 100644 --- a/apps/site/src/content/articles/notifications.yaml +++ b/apps/site/src/content/articles/notifications.yaml @@ -11,7 +11,8 @@ description: >- thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696380383/clnb12vrf003fvd8igcoj7goo.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/notifications-splash-hero.png + alt: Stylised example image of a splash page on mobile. + height: 1392 + width: 2400 author: Digital Experience diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index c4a1b9fb8..2ea139f7e 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -88,13 +88,13 @@ Some hints below: - Different notification types will have specific word or character limits. - Use language that is clear and easy to understand. -### Step 4: Review proposed Notifications   +### Step 4: Review proposed Notifications Prior to build, you must have your customer experience reviewed for Content, Legal, Accessibility, Brand and Design compliance. [Find out more about this process and getting support](https://www.figma.com/proto/XCsYG5gUYfeFQFi2lRiKJD/GEL-Patterns---Graphics?page-id=1%3A14811&type=design&node-id=103-14210&viewport=3875%2C1658%2C0.25&t=FxDW9hxQavw78gve-1&scaling=scale-down-width&mode=design). -### Step 5: Ensure your final build is accessible  +### Step 5: Ensure your final build is accessible At Westpac, we are committed to creating experiences that are accessible and inclusive for all. We have aligned the patterns with the accessibility standards. From 0708e0b46f3c09cd25d35d8575696a5c8a5f09c6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:43:00 +1100 Subject: [PATCH 067/130] Update src/content/articles/notifications --- apps/site/src/content/articles/notifications/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index 2ea139f7e..95ab86f20 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -1,5 +1,5 @@ {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695972923/cln4ahmh1002svd8i0c9v1a79.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-quote.png\r", alt: "We're putting customers at the heart of our solutions, reducing rework and supporting teams to deliver consistent customer journeys more effectively."} type="body" /%} ## What makes a good notification? @@ -59,7 +59,7 @@ The severity categories are: To make it easy to design your set of notifications, we have created four Sequences based on the Severity rating scale above. Our sequence are the most common solutions that cater to the majority of use cases within that category, presented as a flowchart and example screens. They are well-documented, researched and provide an effective and intuitive user experience. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695968990/cln485bof002pvd8i3dhvcax7.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-sequence.png\r", alt: "Diagram showing a the following sequence: 1. Urgent action, 2. Action recommended, 3. Action desired and 4. Informational."} type="bodyWide" /%} Begin with accessing your desired sequence, in the Figma files below. From 27476b54ac2836f16f738d0d85c61db6601c4a46 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:44:01 +1100 Subject: [PATCH 068/130] Update content.mdoc --- apps/site/src/content/articles/notifications/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index 95ab86f20..2ea139f7e 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -1,5 +1,5 @@ {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-quote.png\r", alt: "We're putting customers at the heart of our solutions, reducing rework and supporting teams to deliver consistent customer journeys more effectively."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695972923/cln4ahmh1002svd8i0c9v1a79.png", alt: "orginations", height: 1800, width: 1852} type="body" /%} ## What makes a good notification? @@ -59,7 +59,7 @@ The severity categories are: To make it easy to design your set of notifications, we have created four Sequences based on the Severity rating scale above. Our sequence are the most common solutions that cater to the majority of use cases within that category, presented as a flowchart and example screens. They are well-documented, researched and provide an effective and intuitive user experience. {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-sequence.png\r", alt: "Diagram showing a the following sequence: 1. Urgent action, 2. Action recommended, 3. Action desired and 4. Informational."} + image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695968990/cln485bof002pvd8i3dhvcax7.png", alt: "orginations", height: 1800, width: 1852} type="bodyWide" /%} Begin with accessing your desired sequence, in the Figma files below. From 321ae50d8242ad7d6dea58bd2ca4561cd6e1d0e2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:44:31 +1100 Subject: [PATCH 069/130] Update src/content/articles/notifications --- apps/site/src/content/articles/notifications.yaml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/notifications.yaml b/apps/site/src/content/articles/notifications.yaml index e4899526f..ede80d939 100644 --- a/apps/site/src/content/articles/notifications.yaml +++ b/apps/site/src/content/articles/notifications.yaml @@ -5,9 +5,10 @@ description: >- They are an integral part of the Banks communication strategy and are used to inform our customers about various events, updates or actions that require their attention. They can be one way, where we are informing the customer of something, or two-way, - where we ask the customer to take an action.  Through analysis and research, we’ve created - notifications conventions that we apply to our projects to achieve consistency across our digital channels. - Projects can replicate these solutions, so there’s no need to reinvent the wheel. + where we ask the customer to take an action.  Through analysis and research, we’ve created notifications conventions that we apply to our projects to achieve consistency across our digital channels. + + Projects can replicate these solutions, so there’s no need to reinvent the + wheel. thumbnail: {} image: src: >- From 5a6e4436706300c6d4ba8ec954a20bd05bad482f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:48:19 +1100 Subject: [PATCH 070/130] Update content.mdoc --- apps/site/src/content/articles/notifications/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index 2ea139f7e..c6620bed9 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -1,5 +1,5 @@ {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695972923/cln4ahmh1002svd8i0c9v1a79.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-quote.png", alt: "We're putting customers at the heart of our solutions, reducing rework and supporting teams to deliver consistent customer journeys more effectively.", height: 1800, width: 1852} type="body" /%} ## What makes a good notification? @@ -59,7 +59,7 @@ The severity categories are: To make it easy to design your set of notifications, we have created four Sequences based on the Severity rating scale above. Our sequence are the most common solutions that cater to the majority of use cases within that category, presented as a flowchart and example screens. They are well-documented, researched and provide an effective and intuitive user experience. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695968990/cln485bof002pvd8i3dhvcax7.png", alt: "orginations", height: 1800, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-sequence.png", alt: "Diagram showing the following sequence: 1. Urgent action, 2. Action recommended, 3. Action desired", 4. Informational", height: 1800, width: 1852} type="bodyWide" /%} Begin with accessing your desired sequence, in the Figma files below. From 0908abac48bfc100053f4e134ceee87c37bec43a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:49:09 +1100 Subject: [PATCH 071/130] Update src/content/articles/notifications-push --- apps/site/src/content/articles/notifications-push.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/notifications-push.yaml b/apps/site/src/content/articles/notifications-push.yaml index 857af7bc4..d7ae87ff0 100644 --- a/apps/site/src/content/articles/notifications-push.yaml +++ b/apps/site/src/content/articles/notifications-push.yaml @@ -1,8 +1,6 @@ name: Push thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695796155/cln1d8uxx001yvd8i50s50fdh.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-push-hero.png\r" + alt: Stylist illustration of a push notification on mobile. author: Digital Experience From f342b964a2fd46fd599d42cec0eca595a32b30f1 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:49:52 +1100 Subject: [PATCH 072/130] Update src/content/articles/notifications-secure-message --- .../src/content/articles/notifications-secure-message.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/notifications-secure-message.yaml b/apps/site/src/content/articles/notifications-secure-message.yaml index 9b5f35513..9f43df334 100644 --- a/apps/site/src/content/articles/notifications-secure-message.yaml +++ b/apps/site/src/content/articles/notifications-secure-message.yaml @@ -1,8 +1,6 @@ name: Secure message thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695796181/cln1d9er6001zvd8i33dt3zti.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-secure-message-hero.png\r" + alt: Stylised illustration of a secure message screen on mobile. author: Digital Experience From d20f5fd9d91796ca68e36aa8a8c859fae71c3d1b Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:50:36 +1100 Subject: [PATCH 073/130] Update src/content/articles/notifications-skinny-banner --- .../src/content/articles/notifications-skinny-banner.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/notifications-skinny-banner.yaml b/apps/site/src/content/articles/notifications-skinny-banner.yaml index b152d8443..5e0b85231 100644 --- a/apps/site/src/content/articles/notifications-skinny-banner.yaml +++ b/apps/site/src/content/articles/notifications-skinny-banner.yaml @@ -1,8 +1,6 @@ name: Skinny banner thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695796290/cln1dbqzb0022vd8i1msigjiu.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-skinny-banner-hero.png\r" + alt: Stylist illustration of a skinny banner message on mobile. author: Digital Experience From 5b8cfeaa9205e6681e93139a88895c684f3e7ee4 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:51:26 +1100 Subject: [PATCH 074/130] Update src/content/articles/notifications-sms --- apps/site/src/content/articles/notifications-sms.yaml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/notifications-sms.yaml b/apps/site/src/content/articles/notifications-sms.yaml index efbfa704d..82aa41c49 100644 --- a/apps/site/src/content/articles/notifications-sms.yaml +++ b/apps/site/src/content/articles/notifications-sms.yaml @@ -2,7 +2,8 @@ name: SMS thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695796200/cln1d9ttq0020vd8i33xl3xcg.png + https://www.westpac.com.au/content/dam/public/gel/images/notifications-sms-hero.png + alt: Styli image of an SMS message on mobile. height: 1080 - width: 1920 + width: 2400 author: Digital Experience From 0c15a492d752356044ed049e56c57b94f2b89bb1 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:52:22 +1100 Subject: [PATCH 075/130] Update src/content/articles/notifications-splash --- apps/site/src/content/articles/notifications-splash.yaml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/notifications-splash.yaml b/apps/site/src/content/articles/notifications-splash.yaml index 84afbbba1..8778c1330 100644 --- a/apps/site/src/content/articles/notifications-splash.yaml +++ b/apps/site/src/content/articles/notifications-splash.yaml @@ -1,8 +1,7 @@ name: Splash thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695796234/cln1dajis0021vd8i29um4dip.png - height: 1080 - width: 1920 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/notifications-splash-hero.png + alt: Stylised illustration of a splash notification screen on mobile. author: Digital Experience From 24c94e3f4bacd263e808ffd31ec484603400471b Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:52:34 +1100 Subject: [PATCH 076/130] Update src/content/articles/notifications-sms --- apps/site/src/content/articles/notifications-sms.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/notifications-sms.yaml b/apps/site/src/content/articles/notifications-sms.yaml index 82aa41c49..1c589d549 100644 --- a/apps/site/src/content/articles/notifications-sms.yaml +++ b/apps/site/src/content/articles/notifications-sms.yaml @@ -3,7 +3,7 @@ thumbnail: {} image: src: >- https://www.westpac.com.au/content/dam/public/gel/images/notifications-sms-hero.png - alt: Styli image of an SMS message on mobile. + alt: Styli illustration of an SMS message on mobile. height: 1080 width: 2400 author: Digital Experience From a780edca8da72932e4c775cbfd31be64d63f4085 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:54:24 +1100 Subject: [PATCH 077/130] Update src/content/articles/originations-business-address --- .../src/content/articles/originations-business-address.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-business-address.yaml b/apps/site/src/content/articles/originations-business-address.yaml index 1c05e1375..e67f69541 100644 --- a/apps/site/src/content/articles/originations-business-address.yaml +++ b/apps/site/src/content/articles/originations-business-address.yaml @@ -1,8 +1,6 @@ name: Business address thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/clmzj7hwq001mvd8iairl9yoy.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-business-address-hero.png\r" + alt: Stylised illustration of the business address pattern author: Digital Experience From 52fe6c1fa689f3fc9b994867f3c1d1cc2798f795 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:55:06 +1100 Subject: [PATCH 078/130] Update src/content/articles/originations-business-industry --- .../content/articles/originations-business-industry.yaml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/originations-business-industry.yaml b/apps/site/src/content/articles/originations-business-industry.yaml index 2e9b3f6c8..8d3b12169 100644 --- a/apps/site/src/content/articles/originations-business-industry.yaml +++ b/apps/site/src/content/articles/originations-business-industry.yaml @@ -2,7 +2,8 @@ name: Business industry thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685221/clmzj75p4001lvd8ih9cfa1hs.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/originations-business-industry-hero.png + alt: Stylised illustration of the business industry pattern + height: 1466 + width: 2400 author: Digital Experience From 0de828e59d75e85cc32e4b7cd5a3b9b5ee72e409 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:56:26 +1100 Subject: [PATCH 079/130] Update src/content/articles/originations-capture-contact-details --- .../articles/originations-capture-contact-details.yaml | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/articles/originations-capture-contact-details.yaml b/apps/site/src/content/articles/originations-capture-contact-details.yaml index c232c46c0..7e4438546 100644 --- a/apps/site/src/content/articles/originations-capture-contact-details.yaml +++ b/apps/site/src/content/articles/originations-capture-contact-details.yaml @@ -2,7 +2,9 @@ name: Contact details thumbnail: {} image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695948745/cln3w3dmk002evd8ie8zubqoj.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/originations-capture-contact + details-hero.png + alt: Stylised illustration of the capture contact details pattern + height: 1656 + width: 2400 author: Digital Experience From c5f1b5bbe6d7fee64c6afda5e9183f310c8341ac Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:56:58 +1100 Subject: [PATCH 080/130] Update src/content/articles/originations-celebration-moment --- .../content/articles/originations-celebration-moment.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-celebration-moment.yaml b/apps/site/src/content/articles/originations-celebration-moment.yaml index 903d2777f..3e4a0ebd6 100644 --- a/apps/site/src/content/articles/originations-celebration-moment.yaml +++ b/apps/site/src/content/articles/originations-celebration-moment.yaml @@ -1,8 +1,6 @@ name: Celebration moment thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695948709/cln3w2lu2002dvd8ighgxcxez.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-celebration-moment-hero.png\r" + alt: Stylised illustration of the celebration moment pattern. author: Digital Experience From 96560d84795b79b5b04d306e4c8d326e6afbb434 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:57:43 +1100 Subject: [PATCH 081/130] Update src/content/articles/originations-confirm-profile --- .../src/content/articles/originations-confirm-profile.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-confirm-profile.yaml b/apps/site/src/content/articles/originations-confirm-profile.yaml index 7fe013757..ee6b42471 100644 --- a/apps/site/src/content/articles/originations-confirm-profile.yaml +++ b/apps/site/src/content/articles/originations-confirm-profile.yaml @@ -1,8 +1,6 @@ name: Confirm profile thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685196/clmzj6mhn001kvd8ifngh2qks.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-confirm-profile-hero.png\r" + alt: Stylised illustration of the confirm profile pattern. author: Digital Experience From 2538d5ea6c1bd4f7a2ca4b1b187711d36bb2f5da Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:58:25 +1100 Subject: [PATCH 082/130] Update src/content/articles/originations-file-upload --- .../site/src/content/articles/originations-file-upload.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-file-upload.yaml b/apps/site/src/content/articles/originations-file-upload.yaml index c4357ce16..fcd71614a 100644 --- a/apps/site/src/content/articles/originations-file-upload.yaml +++ b/apps/site/src/content/articles/originations-file-upload.yaml @@ -1,8 +1,6 @@ name: File upload thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/File_upload_BizEdge_x7p1wf - height: 1464 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-file-upload-bizedge-hero.png\r" + alt: Stylised illustration of the file upload pattern. author: Business borrow team From b866dea59b8382f7b083cb69ba8f9cbfabe6be84 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:59:02 +1100 Subject: [PATCH 083/130] Update src/content/articles/originations-foreign-tax-residency --- .../articles/originations-foreign-tax-residency.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-foreign-tax-residency.yaml b/apps/site/src/content/articles/originations-foreign-tax-residency.yaml index bc162e34b..697d0b8c9 100644 --- a/apps/site/src/content/articles/originations-foreign-tax-residency.yaml +++ b/apps/site/src/content/articles/originations-foreign-tax-residency.yaml @@ -1,8 +1,6 @@ name: Foreign Tax Residency thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685171/clmzj6330001jvd8i5jiaat1g.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-foriegn-tax-residency-hero.png\r" + alt: Stylised illustration of the foreign tax residency pattern author: Digital Experience From cb031237641c82223b647fe2fd7cb01b88ec0e85 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 15:59:39 +1100 Subject: [PATCH 084/130] Update src/content/articles/originations-future-financial-changes --- .../articles/originations-future-financial-changes.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-future-financial-changes.yaml b/apps/site/src/content/articles/originations-future-financial-changes.yaml index 9e75cca74..db003d616 100644 --- a/apps/site/src/content/articles/originations-future-financial-changes.yaml +++ b/apps/site/src/content/articles/originations-future-financial-changes.yaml @@ -1,8 +1,6 @@ name: Future financial changes thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Future_financial_changes_bppwfu - height: 1464 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-future-financial-changes-hero.png\r" + alt: Stylised illustration of the future financial changes pattern. author: Borrow team From 8f4eb8ebfb9603ba96d827309e6ccd9756061af2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:00:16 +1100 Subject: [PATCH 085/130] Update src/content/articles/originations-retrieve-application --- .../content/articles/originations-retrieve-application.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-retrieve-application.yaml b/apps/site/src/content/articles/originations-retrieve-application.yaml index da5d4034a..76020b8fc 100644 --- a/apps/site/src/content/articles/originations-retrieve-application.yaml +++ b/apps/site/src/content/articles/originations-retrieve-application.yaml @@ -1,8 +1,6 @@ name: Retrieve application thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685156/clmzj5r5w001ivd8iadshc9c7.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-retrieve-application-hero.png\r" + alt: Stylised illustration of the retrieve application pattern. author: Digital Experience From 60d06fba10e381305fcaafc628695a4b648c4752 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:01:45 +1100 Subject: [PATCH 086/130] Update src/content/articles/originations-review-update-indicator --- .../articles/originations-review-update-indicator.yaml | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/originations-review-update-indicator.yaml b/apps/site/src/content/articles/originations-review-update-indicator.yaml index bb905c3f0..ce9a7a6a8 100644 --- a/apps/site/src/content/articles/originations-review-update-indicator.yaml +++ b/apps/site/src/content/articles/originations-review-update-indicator.yaml @@ -1,10 +1,6 @@ name: Review with update indicator thumbnail: {} -smallDescription: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Review_update_indicator_b5fjki image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Review_update_indicator_b5fjki - height: 1464 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-business-update-indicator-hero.png\r" + alt: "\bStylised illustration of the upload indicator pattern." author: Business borrow team From d82268f078a88b1e3a8f08e5fd1fc945e3c99a35 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:05:03 +1100 Subject: [PATCH 087/130] Update src/content/articles/originations-select-business --- .../src/content/articles/originations-select-business.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-select-business.yaml b/apps/site/src/content/articles/originations-select-business.yaml index 30e17e077..ec6f26f9a 100644 --- a/apps/site/src/content/articles/originations-select-business.yaml +++ b/apps/site/src/content/articles/originations-select-business.yaml @@ -1,8 +1,6 @@ name: Select business thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685126/clmzj54e9001hvd8i1hynfyle.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-business-select-business-hero.png\r" + alt: Stylised illustration of the select business pattern. author: Digital Experience From 3173d1933fe0ca3b78a6835bc94942a315e50191 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:10:26 +1100 Subject: [PATCH 088/130] Update src/content/articles/originations-sequence --- .../src/content/articles/originations-sequence.yaml | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/originations-sequence.yaml b/apps/site/src/content/articles/originations-sequence.yaml index e765e3b87..1107e6335 100644 --- a/apps/site/src/content/articles/originations-sequence.yaml +++ b/apps/site/src/content/articles/originations-sequence.yaml @@ -1,7 +1,9 @@ name: Originations sequence -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695949021/cln3w9anq002gvd8i3jjxay25.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-sequence-hero.png\r" + alt: >- + Diagram of the following sequence: Product choice and entry, + Pre-application, Customer details, Business details, Identity check, Product + config, Finance, Review, Post-application. +author: Digital Experience From 1b40df5ec5b7c2b9bf0288c3a7fcac09f45ce66f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:11:13 +1100 Subject: [PATCH 089/130] Update src/content/articles/originations-set-up-online-banking --- .../articles/originations-set-up-online-banking.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-set-up-online-banking.yaml b/apps/site/src/content/articles/originations-set-up-online-banking.yaml index 2c640e585..c78bf232d 100644 --- a/apps/site/src/content/articles/originations-set-up-online-banking.yaml +++ b/apps/site/src/content/articles/originations-set-up-online-banking.yaml @@ -1,8 +1,6 @@ name: Set up Online Banking thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695953272/cln3ysf15002jvd8i9yh335uk.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-set-up-online-banking-hero.png\r" + alt: Stylised illustration of the setup online banking pattern. author: Digital Experience From 79fa65987b89a44c4614ea429d6f84ec70275542 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:11:44 +1100 Subject: [PATCH 090/130] Update src/content/articles/originations-source-funds-and-wealth --- .../articles/originations-source-funds-and-wealth.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml b/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml index 09a4e07b3..3db8bf828 100644 --- a/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml +++ b/apps/site/src/content/articles/originations-source-funds-and-wealth.yaml @@ -1,8 +1,6 @@ name: Source of funds & wealth thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Source_of_funds_and_wealth_dknao2 - height: 1464 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-source-wealth-funds-hero.png\r" + alt: Stylised illustration of the source of wealth and funds pattern. author: Borrow team From fb57d0dc1ac0e6bd501a82a10a7de4f9d0589425 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:12:22 +1100 Subject: [PATCH 091/130] Update src/content/articles/originations-third-party-intro --- .../content/articles/originations-third-party-intro.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-third-party-intro.yaml b/apps/site/src/content/articles/originations-third-party-intro.yaml index 35ff14110..a9660d644 100644 --- a/apps/site/src/content/articles/originations-third-party-intro.yaml +++ b/apps/site/src/content/articles/originations-third-party-intro.yaml @@ -1,8 +1,6 @@ name: Third-party intro thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695953393/cln3yv06g002kvd8id5957qzu.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/originations-third-party-intro-hero.png\r" + alt: Stylised illustration of the third-party intro pattern. author: Digital Experience From e2363574a0be79a3a9a2c449de0f300c7028a1e0 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:13:17 +1100 Subject: [PATCH 092/130] Update src/content/articles/originations-verify-ID --- apps/site/src/content/articles/originations-verify-ID.yaml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/originations-verify-ID.yaml b/apps/site/src/content/articles/originations-verify-ID.yaml index d328801df..0a0d345e7 100644 --- a/apps/site/src/content/articles/originations-verify-ID.yaml +++ b/apps/site/src/content/articles/originations-verify-ID.yaml @@ -1,8 +1,7 @@ name: Verify ID thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695965746/cln467r9e002nvd8ie7toail5.png - height: 1080 - width: 1920 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/originations-verify-id-banking-hero.png + alt: Stylised illustration of the verify ID pattern. author: Digital Experience From 03d9fae3cdd1113a645d676d26eef6de766643ff Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:15:38 +1100 Subject: [PATCH 093/130] Update src/content/articles/patterns --- apps/site/src/content/articles/patterns.yaml | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/patterns.yaml b/apps/site/src/content/articles/patterns.yaml index 79db3dabd..1d03d0290 100644 --- a/apps/site/src/content/articles/patterns.yaml +++ b/apps/site/src/content/articles/patterns.yaml @@ -10,16 +10,15 @@ description: >- and consistent designs that contribute to a more cohesive customer experience across our entire digital channel. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695970092/cln48sxiz002qvd8iblpm5zvt.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/patterns-card.png\r" + alt: Illustration showing coloured dots in a grid smallDescription: >- A library of tried and tested patterns to help you quickly create more consistent digital experiences. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695697952/clmzqrzyz001nvd8i064s69ad.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/patterns-hero.png\r" + alt: >- + An image displaying different patterned panels and the words, Pattern - a + regular and intelligible form or sequence discernible in the way in which + something happens or is done. author: Digital Experience From 7f3a2a47f8fc314a99f3999051baaae6583a95c8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:16:14 +1100 Subject: [PATCH 094/130] Update src/content/articles/system-empty-states --- apps/site/src/content/articles/system-empty-states.yaml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/system-empty-states.yaml b/apps/site/src/content/articles/system-empty-states.yaml index 4f4c831c3..ee46b84b0 100644 --- a/apps/site/src/content/articles/system-empty-states.yaml +++ b/apps/site/src/content/articles/system-empty-states.yaml @@ -1,9 +1,7 @@ name: Empty states thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1721090165/Empty_states_pattern_jfonpj.png + src: > + https://www.westpac.com.au/content/dam/public/gel/images/staff-system-empty-states-hero.png alt: Simplified image of empty states pattern. - height: 1464 - width: 2400 author: Business borrow team From 21a1821d07a47cc87b2766fef60a5fd5bfb5eecf Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:16:50 +1100 Subject: [PATCH 095/130] Update src/content/articles/system-error-screens --- apps/site/src/content/articles/system-error-screens.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/system-error-screens.yaml b/apps/site/src/content/articles/system-error-screens.yaml index 7854719ee..82949eea7 100644 --- a/apps/site/src/content/articles/system-error-screens.yaml +++ b/apps/site/src/content/articles/system-error-screens.yaml @@ -1,9 +1,7 @@ name: Error screens thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/Error_screens_veatop - alt: Simplified image of Error screens pattern. - height: 1464 - width: 2400 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/system-error-screens-hero.png + alt: Simplified image of error screen pattern. author: Borrow team From 0677c70db1f91a6c7a805b4b2050891e23f520b6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:18:44 +1100 Subject: [PATCH 096/130] Update src/content/articles/think-responsive --- .../src/content/articles/think-responsive.yaml | 15 +++++++-------- .../articles/think-responsive/content.mdoc | 2 +- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/apps/site/src/content/articles/think-responsive.yaml b/apps/site/src/content/articles/think-responsive.yaml index f575fcba6..349a23ef5 100644 --- a/apps/site/src/content/articles/think-responsive.yaml +++ b/apps/site/src/content/articles/think-responsive.yaml @@ -6,16 +6,15 @@ description: >- creating custom solutions for every device that hits the market. So, how do we deal with the situation? thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663226815/cl82qavnr000qam8ig48k4mun.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/think-responsively-card.png\r" + alt: Illustration of a simplified head with a brain. smallDescription: >- Future proof your design to ensure that our customers banking needs are always catered for, any time, any place. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663911160/cl8e1qqal0000rq8ihn1jcxx1.jpg - height: 1080 - width: 1920 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/think-responsively-hero.jpg + alt: >- + Image showing a row of people sitting on a couch with their legs crossed + looking at different devices. author: Justin Spencer diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc index 152267b19..c8e7b7b10 100644 --- a/apps/site/src/content/articles/think-responsive/content.mdoc +++ b/apps/site/src/content/articles/think-responsive/content.mdoc @@ -10,7 +10,7 @@ Responsive web design suggests that the user interface should respond to the use Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies are using “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy. -_Ethan Marcotte. A list apart_ +*Ethan Marcotte. A list apart* Transplant this discipline into web design, and we have a similar yet whole new idea. Why should we create a custom interface design for each group of users; after all, architects don’t design a different building for each type of visitor. Like responsive architecture, interface design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users. From a0ebd021c60a6812341071263d50e255b1af68b2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:19:46 +1100 Subject: [PATCH 097/130] Update content.mdoc --- apps/site/src/content/articles/think-responsive/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/think-responsive/content.mdoc b/apps/site/src/content/articles/think-responsive/content.mdoc index c8e7b7b10..c6a06952b 100644 --- a/apps/site/src/content/articles/think-responsive/content.mdoc +++ b/apps/site/src/content/articles/think-responsive/content.mdoc @@ -3,7 +3,7 @@ Responsive web design suggests that the user interface should respond to the user’s behaviour and environment based on screen size, platform and orientation. This practice consists of a mix of flexible grids and CSS media queries. As the user switches from one device to another, the interface should automatically respond and accommodate for layout, resolution, media size, content and interactions. In other words, the interface should have the smarts to automatically respond to the user’s preferences. This eliminates the need for a different design and development phase for each new gadget on the market. Responsive web design is not only about adjustable screen layouts and fluid images, but rather a whole new approach to design delivery. Achieving user interface design and code quality must be a priority — to do this greater emphasis on design and front-end development skills and collaboration is paramount. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666585315/cl9m9v70f0014tc8ih17u372r.png", alt: "Illustration showing different devices and orientations and how this affects the viewport size", height: 930, width: 2393} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/think-responsive-devices.png", alt: "Illustration showing different devices and orientations and how this affects the viewport size", height: 930, width: 2393} type="bodyWide" /%} ## Responsive architecture From b943d7373a2d9b18e54c2b313cc5b342907f11c7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:21:50 +1100 Subject: [PATCH 098/130] Update src/content/articles/typography --- apps/site/src/content/articles/typography.yaml | 12 ++++-------- .../src/content/articles/typography/content.mdoc | 2 +- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/site/src/content/articles/typography.yaml b/apps/site/src/content/articles/typography.yaml index 6705340b6..ead92ceff 100644 --- a/apps/site/src/content/articles/typography.yaml +++ b/apps/site/src/content/articles/typography.yaml @@ -2,16 +2,12 @@ name: Typography cardTitle: Typography description: "There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice. This article explains how we use typography as part of our multi-brand system.\L\L" thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5k000iam8ib3zxgea6.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/typography-card.png\r" + alt: Simple illustration of a capital letter A. smallDescription: >- Use the multi-brand typography system to echo the personality and voice of our brands. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5i000ham8i7wst4zeg.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/typography-hero.png\r" + alt: Illustration depicting the different aspects of a font type. author: Justin Spencer diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc index 783e1cc21..6c36c85d5 100644 --- a/apps/site/src/content/articles/typography/content.mdoc +++ b/apps/site/src/content/articles/typography/content.mdoc @@ -18,7 +18,7 @@ The body font is the companion to the brand font and used for all UI elements an ### The font stack -To implement fonts in our web sites and applications we use two CSS font stacks. One for the _brand font_ and one for the _body font_. Put simply a font stack is a list of typefaces. When customers view a website or application their device goes through this list and selects the font best suited to the operating system. +To implement fonts in our web sites and applications we use two CSS font stacks. One for the *brand font* and one for the *body font*. Put simply a font stack is a list of typefaces. When customers view a website or application their device goes through this list and selects the font best suited to the operating system. The body font stack is a list of system fonts found in each operating system iOS, Android, Windows etc. When customers view a website or application their device goes through this list and selects the corresponding system font. From c0e9949fdc0096a8a43045e2f33ed9d2b889dc44 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:22:56 +1100 Subject: [PATCH 099/130] Update content.mdoc --- apps/site/src/content/articles/typography/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc index 6c36c85d5..33f24920f 100644 --- a/apps/site/src/content/articles/typography/content.mdoc +++ b/apps/site/src/content/articles/typography/content.mdoc @@ -29,7 +29,7 @@ The brand font stack is also a list of typefaces with the web-font being the fir Font weights allow us to add more visual appeal and hierarchy to our designs. Designers can use the available weights as they see fit however they must consider the brands design direction and guidelines. As we use the font stack to establish the correct typeface developers must always use numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light version of whatever typeface the device is using (providing this weight is available). Unavailable weights display the logically closest weight. **Font weights should always be used in alignment with the GUIs and the digital brand guidelines.** {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666139429/cl9eweb04000otc8i5h3k3ep6.png", alt: "The different font weights available.", height: 1382, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/typography-weights.png", alt: "The different font weights available.", height: 1382, width: 1852} type="bodyWide" /%} ### Type scale @@ -42,7 +42,7 @@ Our typographic scale has a limited set of sizes that work together to help main We’re hoping to establish a more robust system of spacing for our Typography system however this is easier said than done due to the volume and variation of our digital products and services. We’re also aware that good typography is a craft not an exact science. Baseline grids, tracking, kerning, leading etc are all features used by designers to massage letters and words into visually appealing shapes. With this in mind we are reluctant to apply too many rules to the type system opting instead to let designers work their magic armed with their knowledge, experience and of course the brand guidelines. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png", alt: "The font sizes available in the design system", height: 1382, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/typography-scale.png", alt: "The font sizes available in the design system", height: 1382, width: 1852} type="bodyWide" /%} [Access the design system fonts](/foundation/font) From e70174a3401d31ae891fe0cfb9ae950efdc0cab9 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:24:36 +1100 Subject: [PATCH 100/130] Update src/content/articles/using-fonts --- apps/site/src/content/articles/using-fonts.yaml | 13 +++++-------- .../src/content/articles/using-fonts/content.mdoc | 4 ++-- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/apps/site/src/content/articles/using-fonts.yaml b/apps/site/src/content/articles/using-fonts.yaml index afb5f7a33..8f412122b 100644 --- a/apps/site/src/content/articles/using-fonts.yaml +++ b/apps/site/src/content/articles/using-fonts.yaml @@ -6,17 +6,14 @@ description: >- article explains the different types of fonts we need, where to get these fonts and how to use them in your websites and apps. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1687413009/clj6q4xmg0024bn8i4qjpblt2.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/using-fonts-card.png\r" + alt: Illustration of three different letter As of different fonts. smallDescription: >- Using fonts today is fairly straight forward, however there are some requirements that should be considered before jumping in. This article talks about where to get them, how to use them and everything in-between. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666932237/cl9s0evvm000ef58iet3e8acb.jpg - height: 1080 - width: 1920 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/using-fonts-hero.jpg + alt: Photograph of old-fashioned printing blocks. author: Justin Spencer diff --git a/apps/site/src/content/articles/using-fonts/content.mdoc b/apps/site/src/content/articles/using-fonts/content.mdoc index 8971a885d..58991ecf5 100644 --- a/apps/site/src/content/articles/using-fonts/content.mdoc +++ b/apps/site/src/content/articles/using-fonts/content.mdoc @@ -34,9 +34,9 @@ Many brands now create their own custom fonts, this not only provides more diffe Wether you’re licensing an existing font or designing a custom font it’s important to understand two key requirements; Geometry and Hinting. -**Geometry** is the physical shape of each glyph (character). Typically fonts with higher x heights are more legible at small sizes. This is crucial given the ever increasing pixel density of modern screen resolutions. Fonts in the humanist family are characterised by low contrast between thin and thick strokes, loose letter spacing, and wide counters, making them more legible for small-sized text. +**Geometry** is the physical shape of each glyph (character). Typically fonts with higher x heights are more legible at small sizes. This is crucial given the ever increasing pixel density of modern screen resolutions. Fonts in the humanist family are characterised by low contrast between thin and thick strokes, loose letter spacing, and wide counters, making them more legible for small-sized text. -**Hinting** is the process of applying mathematical instructions to each character in a typeface to adjust the display of its outline so that it lines up with a rasterised grid. At low screen resolutions, hinting is critical for producing clear, legible text on all devices. +**Hinting** is the process of applying mathematical instructions to each character in a typeface to adjust the display of its outline so that it lines up with a rasterised grid. At low screen resolutions, hinting is critical for producing clear, legible text on all devices. Some typefaces simply don’t lend themselves to screen legibility, others are badly crafted and render poorly on all but the highest definition screens. Brand agencies should collaborate with the GEL team to ensure that web fonts are of a sufficient quality for use on all supported operating systems and screen resolutions. From de715cbc9592193e728a166273a6a4a1fdeb5ad8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:27:10 +1100 Subject: [PATCH 101/130] Update src/content/articles/value-of-a-design-system --- .../articles/value-of-a-design-system.yaml | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/value-of-a-design-system.yaml b/apps/site/src/content/articles/value-of-a-design-system.yaml index cfc29ca1d..03bc64570 100644 --- a/apps/site/src/content/articles/value-of-a-design-system.yaml +++ b/apps/site/src/content/articles/value-of-a-design-system.yaml @@ -5,16 +5,15 @@ description: >- and construction dating back centuries. In our digital world, and for Westpac Group specifically, the value is attributed across four core drivers. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1666848438/cl9qmit0m0001f58i7e4bevq2.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/value-design-system-card.png\r" + alt: Illustration of lego blocks. smallDescription: >- Design systems are helping to shape our digital world so we can deliver quality experiences faster. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1667030117/cl9tmott9000jf58ib5ko3252.png - height: 1080 - width: 1920 + src: > + https://www.westpac.com.au/content/dam/public/gel/images/value-design-system-hero.png + alt: >- + Illustration depicting different device types. Design and build one project + output in six brands view on all platforms and all devices. author: Marita Purins From e7ac09a00cdfd74f720e3ba176558112753e6ce4 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:38:16 +1100 Subject: [PATCH 102/130] Update src/content/articles/website --- apps/site/src/content/articles/website.yaml | 12 +++++++----- apps/site/src/content/articles/website/content.mdoc | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/website.yaml b/apps/site/src/content/articles/website.yaml index 2b712d503..2cbae7dc0 100644 --- a/apps/site/src/content/articles/website.yaml +++ b/apps/site/src/content/articles/website.yaml @@ -1,7 +1,9 @@ name: Website -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1695867630/cln2jssqi0024vd8i08zjelvv.png - height: 1080 - width: 1920 \ No newline at end of file + src: > + https://www.westpac.com.au/content/dam/public/gel/images/patterns-website-hero.png + alt: >- + Hero image depicting the word Patterns and a woman's face with a quote + "Finding the content that's relevant to me and my needs." +author: Digital Experience diff --git a/apps/site/src/content/articles/website/content.mdoc b/apps/site/src/content/articles/website/content.mdoc index 752d49bec..7f462aa83 100644 --- a/apps/site/src/content/articles/website/content.mdoc +++ b/apps/site/src/content/articles/website/content.mdoc @@ -22,7 +22,7 @@ Ensuring every page on the website provides a seamless customer experience, with To align our teams on delivering website experiences, we’ve created a set of page patterns built on the AEM platform. -**_“Using the patterns will save you time and effort. You’ll gain speed to market and you’ll contribute to a more consistent customer experience.”_** +***“Using the patterns will save you time and effort. You’ll gain speed to market and you’ll contribute to a more consistent customer experience.”*** ### What are page patterns? From 0bd1cf341a702e42241b082a82daee9bd48fffcd Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:40:36 +1100 Subject: [PATCH 103/130] Update src/content/articles/notifications --- apps/site/src/content/articles/notifications.yaml | 9 ++++----- .../site/src/content/articles/notifications/content.mdoc | 4 +--- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/notifications.yaml b/apps/site/src/content/articles/notifications.yaml index ede80d939..d691e9e7a 100644 --- a/apps/site/src/content/articles/notifications.yaml +++ b/apps/site/src/content/articles/notifications.yaml @@ -11,9 +11,8 @@ description: >- wheel. thumbnail: {} image: - src: >- - https://www.westpac.com.au/content/dam/public/gel/images/notifications-splash-hero.png - alt: Stylised example image of a splash page on mobile. - height: 1392 - width: 2400 + src: "https://www.westpac.com.au/content/dam/public/gel/images/patterns-notifications-hero.png\r" + alt: >- + Hero image depicting the word Patterns and a woman's face with a quote "I + want to know if there's a problem with my accounts. author: Digital Experience diff --git a/apps/site/src/content/articles/notifications/content.mdoc b/apps/site/src/content/articles/notifications/content.mdoc index c6620bed9..e17f7827e 100644 --- a/apps/site/src/content/articles/notifications/content.mdoc +++ b/apps/site/src/content/articles/notifications/content.mdoc @@ -58,9 +58,7 @@ The severity categories are: To make it easy to design your set of notifications, we have created four Sequences based on the Severity rating scale above. Our sequence are the most common solutions that cater to the majority of use cases within that category, presented as a flowchart and example screens. They are well-documented, researched and provide an effective and intuitive user experience. -{% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-sequence.png", alt: "Diagram showing the following sequence: 1. Urgent action, 2. Action recommended, 3. Action desired", 4. Informational", height: 1800, width: 1852} - type="bodyWide" /%} +{% articleBodyImage image={src: "https://www.westpac.com.au/content/dam/public/gel/images/notifications-sequence.png", alt: "Diagram showing the following sequence: 1. Urgent action, 2. Action recommended, 3. Action desired", 4. Informational", height: 1800, width: 1852} type="bodyWide" /%} Begin with accessing your desired sequence, in the Figma files below. From b857047b6fad79c27e7339108af839fa856f1663 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:52:08 +1100 Subject: [PATCH 104/130] Update src/content/articles/website-article --- apps/site/src/content/articles/website-article.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/website-article.yaml b/apps/site/src/content/articles/website-article.yaml index 04a472147..66d388535 100644 --- a/apps/site/src/content/articles/website-article.yaml +++ b/apps/site/src/content/articles/website-article.yaml @@ -1,7 +1,5 @@ name: Article page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696382253/clnb26ypl003hvd8ibzdhboh0.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-article-page-hero.png\r" +author: Digital Experience From 0411b5b48a511defe304ad1ab5c77646180171f7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:52:21 +1100 Subject: [PATCH 105/130] Update src/content/articles/website-feature --- apps/site/src/content/articles/website-feature.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/website-feature.yaml b/apps/site/src/content/articles/website-feature.yaml index a46011c43..795d0176a 100644 --- a/apps/site/src/content/articles/website-feature.yaml +++ b/apps/site/src/content/articles/website-feature.yaml @@ -1,7 +1,5 @@ name: Feature page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696383184/clnb2qwu6003mvd8i59s27frn.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-feature-page-hero.png\r" +author: Digital Experience From 53937fc93f550a05a6a9ff5b0d0c467d54925874 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:52:33 +1100 Subject: [PATCH 106/130] Update src/content/articles/website-offer --- apps/site/src/content/articles/website-offer.yaml | 8 +++----- apps/site/src/content/articles/website-offer/content.mdoc | 8 ++++---- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/site/src/content/articles/website-offer.yaml b/apps/site/src/content/articles/website-offer.yaml index f7f92b5e8..ba38a7ee9 100644 --- a/apps/site/src/content/articles/website-offer.yaml +++ b/apps/site/src/content/articles/website-offer.yaml @@ -1,7 +1,5 @@ name: Offer page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696383033/clnb2np5x003lvd8i2obfh7cm.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-offer-page-hero.png\r" +author: Digital Experience diff --git a/apps/site/src/content/articles/website-offer/content.mdoc b/apps/site/src/content/articles/website-offer/content.mdoc index 8249c89fd..21cfd2456 100644 --- a/apps/site/src/content/articles/website-offer/content.mdoc +++ b/apps/site/src/content/articles/website-offer/content.mdoc @@ -4,7 +4,7 @@ Use this pattern to promote a product offer. The pattern could be used for: - Campaigns - Email landing pages -## What’s happening here? +## What’s happening here? ### Page variations @@ -32,7 +32,7 @@ For offers where a customer needs additional information to help them make an in ### Page sections -Each variation of the Offer page pattern is split into sections. The sections are prioritised to align with the purpose of the page, to help our customers understand the offer. +Each variation of the Offer page pattern is split into sections. The sections are prioritised to align with the purpose of the page, to help our customers understand the offer. There are mandatory sections that must be included to support our customers on their journey. There are also some optional sections to help our customers learn more about the offer. @@ -56,9 +56,9 @@ For offers this may include: “It’s clear this offer suits my needs.” -## Looking for detailed designs? +## Looking for detailed designs? -Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: +Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees: [Offer page detailed guidelines](https://www.figma.com/proto/Q8MFisiVbOUNEARIRpCRX9/AEM-UX-Patterns-%26-guiding-principles%3A-GTM-PAGE-DEFINITION?page-id=1168%3A94489&type=design&node-id=2376-109735&viewport=-224%2C-847%2C0.06&t=gZBAmppWxcve8WZz-1&scaling=scale-down-width&starting-point-node-id=2281%3A41339&mode=design) From 1839252e8bb1ef672f9c72c6ddbf95dfb091ab30 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:53:13 +1100 Subject: [PATCH 107/130] Update src/content/articles/website-service --- apps/site/src/content/articles/website-service.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/website-service.yaml b/apps/site/src/content/articles/website-service.yaml index e3d1bc451..315dbd3dd 100644 --- a/apps/site/src/content/articles/website-service.yaml +++ b/apps/site/src/content/articles/website-service.yaml @@ -1,7 +1,5 @@ name: Service page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696383939/clnb3743w003nvd8i74tm5tl6.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-service-page-hero.png\r" +author: Digital Experience From 6c60101359094884241e81423160fa28922764ca Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:53:24 +1100 Subject: [PATCH 108/130] Update src/content/articles/website-sponsorship --- apps/site/src/content/articles/website-sponsorship.yaml | 9 ++++----- .../content/articles/website-sponsorship/content.mdoc | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/website-sponsorship.yaml b/apps/site/src/content/articles/website-sponsorship.yaml index dbad6cddc..7961cd6c2 100644 --- a/apps/site/src/content/articles/website-sponsorship.yaml +++ b/apps/site/src/content/articles/website-sponsorship.yaml @@ -1,7 +1,6 @@ name: Sponsorship page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696382757/clnb2hs30003jvd8ie7m2bhcy.png - height: 1080 - width: 1920 \ No newline at end of file + src: > + https://www.westpac.com.au/content/dam/public/gel/images/website-sponsorship-page-hero.png +author: Digital Experience diff --git a/apps/site/src/content/articles/website-sponsorship/content.mdoc b/apps/site/src/content/articles/website-sponsorship/content.mdoc index da67852fc..8fd8a5512 100644 --- a/apps/site/src/content/articles/website-sponsorship/content.mdoc +++ b/apps/site/src/content/articles/website-sponsorship/content.mdoc @@ -25,7 +25,7 @@ For sponsorships that need a basic level of information, such as: ### Page sections -Each variation of the Sponsorship page pattern is split into sections. The sections are prioritised to align with the purpose of the page, primarily to help our customers understand what’s unique about the sponsorship. +Each variation of the Sponsorship page pattern is split into sections. The sections are prioritised to align with the purpose of the page, primarily to help our customers understand what’s unique about the sponsorship. There are mandatory sections that must be included to support our customers on their journey. There are also some optional sections to help our customers learn more about the sponsorship. From c4606d34cfdedbb121e01fde4c7f08f93c1b20ba Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:53:33 +1100 Subject: [PATCH 109/130] Update src/content/articles/website-price-change --- apps/site/src/content/articles/website-price-change.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/website-price-change.yaml b/apps/site/src/content/articles/website-price-change.yaml index a41d79a96..c54bd23db 100644 --- a/apps/site/src/content/articles/website-price-change.yaml +++ b/apps/site/src/content/articles/website-price-change.yaml @@ -1,7 +1,5 @@ name: Price change page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696384015/clnb38qev003ovd8ieiro5kby.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-price-change-page-hero.png\r" +author: Digital Experience From 78588e4a8904e8bb9871ab7992853ff8476990ba Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:53:35 +1100 Subject: [PATCH 110/130] Update src/content/articles/website-product-page --- apps/site/src/content/articles/website-product-page.yaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/articles/website-product-page.yaml b/apps/site/src/content/articles/website-product-page.yaml index de270a1c6..e2ff4ae72 100644 --- a/apps/site/src/content/articles/website-product-page.yaml +++ b/apps/site/src/content/articles/website-product-page.yaml @@ -1,7 +1,5 @@ name: Product page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696382665/clnb2fs6u003ivd8ige7c6ezv.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-product-page-hero.png\r" +author: Digital Experience From fb87a2ec14f42929616e698208462015543a68f6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:53:38 +1100 Subject: [PATCH 111/130] Update src/content/articles/website-partnership --- apps/site/src/content/articles/website-partnership.yaml | 8 +++----- .../src/content/articles/website-partnership/content.mdoc | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/website-partnership.yaml b/apps/site/src/content/articles/website-partnership.yaml index 2429f27ae..b32f37907 100644 --- a/apps/site/src/content/articles/website-partnership.yaml +++ b/apps/site/src/content/articles/website-partnership.yaml @@ -1,7 +1,5 @@ name: Partnership page -author: Digital Experience +thumbnail: {} image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696382845/clnb2jnlg003kvd8ihtb5cgzb.png - height: 1080 - width: 1920 \ No newline at end of file + src: "https://www.westpac.com.au/content/dam/public/gel/images/website-partnership-page-hero.png\r" +author: Digital Experience diff --git a/apps/site/src/content/articles/website-partnership/content.mdoc b/apps/site/src/content/articles/website-partnership/content.mdoc index dd6287f21..cd627fcce 100644 --- a/apps/site/src/content/articles/website-partnership/content.mdoc +++ b/apps/site/src/content/articles/website-partnership/content.mdoc @@ -25,7 +25,7 @@ For partnerships that need additional information, such as: ### Page sections -Each variation of the Partnership page pattern is split into sections. The sections are prioritised to align with the purpose of the page, to help our customers understand what’s unique about this partnership. +Each variation of the Partnership page pattern is split into sections. The sections are prioritised to align with the purpose of the page, to help our customers understand what’s unique about this partnership. There are mandatory sections that must be included to support our customers on their journey. There are also some optional sections to help our customers learn more about the partnership. From ef8a22908eff9ca53a2b23e2a7a78dc8a4f74d34 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:54:37 +1100 Subject: [PATCH 112/130] Update src/content/articles/website-feature --- apps/site/src/content/articles/website-feature.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-feature.yaml b/apps/site/src/content/articles/website-feature.yaml index 795d0176a..e17e864a0 100644 --- a/apps/site/src/content/articles/website-feature.yaml +++ b/apps/site/src/content/articles/website-feature.yaml @@ -2,4 +2,7 @@ name: Feature page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-feature-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website feature page + template. author: Digital Experience From 75412824ee2cce0c0b311284745fc2a9f42ceef5 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:54:47 +1100 Subject: [PATCH 113/130] Update src/content/articles/website-offer --- apps/site/src/content/articles/website-offer.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-offer.yaml b/apps/site/src/content/articles/website-offer.yaml index ba38a7ee9..e8fa84755 100644 --- a/apps/site/src/content/articles/website-offer.yaml +++ b/apps/site/src/content/articles/website-offer.yaml @@ -2,4 +2,7 @@ name: Offer page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-offer-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website offer page + template. author: Digital Experience From 246ca2f4560801c84dda1ef33c5e304fbfd131ef Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:54:59 +1100 Subject: [PATCH 114/130] Update src/content/articles/website-partnership --- apps/site/src/content/articles/website-partnership.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-partnership.yaml b/apps/site/src/content/articles/website-partnership.yaml index b32f37907..60db3a61c 100644 --- a/apps/site/src/content/articles/website-partnership.yaml +++ b/apps/site/src/content/articles/website-partnership.yaml @@ -2,4 +2,7 @@ name: Partnership page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-partnership-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website partnership page + template. author: Digital Experience From f4b5e5cdf303c2667853e28d59f964dd376906fe Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:55:08 +1100 Subject: [PATCH 115/130] Update src/content/articles/website-price-change --- apps/site/src/content/articles/website-price-change.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-price-change.yaml b/apps/site/src/content/articles/website-price-change.yaml index c54bd23db..d767a6c9a 100644 --- a/apps/site/src/content/articles/website-price-change.yaml +++ b/apps/site/src/content/articles/website-price-change.yaml @@ -2,4 +2,7 @@ name: Price change page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-price-change-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website price change page + template. author: Digital Experience From 55c282174584b159f0000ef2d2709195eeb835fd Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:55:23 +1100 Subject: [PATCH 116/130] Update src/content/articles/website-product-page --- apps/site/src/content/articles/website-product-page.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-product-page.yaml b/apps/site/src/content/articles/website-product-page.yaml index e2ff4ae72..608182e7b 100644 --- a/apps/site/src/content/articles/website-product-page.yaml +++ b/apps/site/src/content/articles/website-product-page.yaml @@ -2,4 +2,7 @@ name: Product page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-product-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website product page + template. author: Digital Experience From cc2d398dfadf9dc24f1efe70a5259eafd2d95bb8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:55:34 +1100 Subject: [PATCH 117/130] Update src/content/articles/website-service --- apps/site/src/content/articles/website-service.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-service.yaml b/apps/site/src/content/articles/website-service.yaml index 315dbd3dd..21c7fcfe0 100644 --- a/apps/site/src/content/articles/website-service.yaml +++ b/apps/site/src/content/articles/website-service.yaml @@ -2,4 +2,7 @@ name: Service page thumbnail: {} image: src: "https://www.westpac.com.au/content/dam/public/gel/images/website-service-page-hero.png\r" + alt: >- + Diagram showing all of the modules required on a website serice page + template. author: Digital Experience From cc2ed99f4909cf1892862705e116cc995f8a588f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:55:48 +1100 Subject: [PATCH 118/130] Update src/content/articles/website-sponsorship --- apps/site/src/content/articles/website-sponsorship.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/src/content/articles/website-sponsorship.yaml b/apps/site/src/content/articles/website-sponsorship.yaml index 7961cd6c2..a1927adac 100644 --- a/apps/site/src/content/articles/website-sponsorship.yaml +++ b/apps/site/src/content/articles/website-sponsorship.yaml @@ -3,4 +3,7 @@ thumbnail: {} image: src: > https://www.westpac.com.au/content/dam/public/gel/images/website-sponsorship-page-hero.png + alt: >- + Diagram showing all of the modules required on a website sponsorship page + template. author: Digital Experience From 44eb336ad83ca903d0cedb9ba41c638c27730147 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:56:52 +1100 Subject: [PATCH 119/130] Update src/content/articles/what-is-gel --- apps/site/src/content/articles/what-is-gel.yaml | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/site/src/content/articles/what-is-gel.yaml b/apps/site/src/content/articles/what-is-gel.yaml index b1c642feb..8e5481198 100644 --- a/apps/site/src/content/articles/what-is-gel.yaml +++ b/apps/site/src/content/articles/what-is-gel.yaml @@ -6,16 +6,11 @@ description: >- and deliver consistent, coherent customer experiences across our entire digital landscape faster, and with less effort. thumbnail: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1662699957/cl7u0mgxx000f808i0mjx43a8.png - height: 1212 - width: 3168 + src: "https://www.westpac.com.au/content/dam/public/gel/images/what-is-gel-card.png\r" smallDescription: >- GEL is our Global Experience Language, the foundation for all digital design at Westpac and so much more. image: - src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663303769/cl84049030019am8i5gx94qoy.png - height: 1080 - width: 1920 + src: "https://www.westpac.com.au/content/dam/public/gel/images/what-is-gel-hero.png\r" + alt: Window cleaner hanging in front of a big wall that says 'The big picture'. author: Marita Purins From ba8ea2b29f165d2e678212d26329523bcf71a93c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:57:01 +1100 Subject: [PATCH 120/130] Update src/content/articles/what-is-gel --- apps/site/src/content/articles/what-is-gel.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/what-is-gel.yaml b/apps/site/src/content/articles/what-is-gel.yaml index 8e5481198..d8c2c1950 100644 --- a/apps/site/src/content/articles/what-is-gel.yaml +++ b/apps/site/src/content/articles/what-is-gel.yaml @@ -7,6 +7,7 @@ description: >- digital landscape faster, and with less effort. thumbnail: src: "https://www.westpac.com.au/content/dam/public/gel/images/what-is-gel-card.png\r" + alt: GEL logo smallDescription: >- GEL is our Global Experience Language, the foundation for all digital design at Westpac and so much more. From 7d30a0aa1365f622c3f62758e609f345947ec528 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 16:59:56 +1100 Subject: [PATCH 121/130] Update content.mdoc --- apps/site/src/content/articles/what-is-gel/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/what-is-gel/content.mdoc b/apps/site/src/content/articles/what-is-gel/content.mdoc index ec37e6891..747df6f07 100644 --- a/apps/site/src/content/articles/what-is-gel/content.mdoc +++ b/apps/site/src/content/articles/what-is-gel/content.mdoc @@ -6,7 +6,7 @@ We put the customer at the centre of everything we do and so we take a customer - Design the thing right - use common tools to ensure individual projects across the organisation deliver on brand and connected customer experiences optimised for the digital channel {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1665987289/cl9cdteon0006tc8i43v63pe8.png", alt: "The 3 core aspects of GEL - Approach, Delivery and Collaboration", height: 1214, width: 2056} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/what-is-gel-heart.png", alt: "The 3 core aspects of GEL - Approach, Delivery and Collaboration", height: 1214, width: 2056} type="bodyWide" /%} At the heart of the GEL is the Westpac Group enterprise design system. The design system is delivered via Figma libraries and a React JS coding framework, supported by documentation and serviced through consultation. GEL is at the intersection of Brand, Design, and Technology to ensure maximum value can be achieved and integration is feasible. @@ -14,7 +14,7 @@ At the heart of the GEL is the Westpac Group enterprise design system. The desig The GEL Design System provides 3 core outputs that connect our business. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1667029763/cl9tmh823000hf58i5a513mgf.png", alt: "The 3 core outputs that connect our business. Digital brand clarity and direction, reusable library of components and a robust coding framework.", height: 1213, width: 2176} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/what-is-gel-outputs.png", alt: "The 3 core outputs that connect our business. Digital brand clarity and direction, reusable library of components and a robust coding framework.", height: 1213, width: 2176} type="bodyWide" /%} GEL is governed by a centralised specialist team who manage the tools and provide support for our teams to adopt the system and to realise the customer and business benefits that the system and framework have to offer. From b3597708ede19d415625ac48382cb44061abb9de Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:16:07 +1100 Subject: [PATCH 122/130] Update content.mdoc --- .../master-reference-page/content.mdoc | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/site/src/content/articles/master-reference-page/content.mdoc b/apps/site/src/content/articles/master-reference-page/content.mdoc index 6b4e898db..8e362145c 100644 --- a/apps/site/src/content/articles/master-reference-page/content.mdoc +++ b/apps/site/src/content/articles/master-reference-page/content.mdoc @@ -9,14 +9,14 @@ The icon grid has been developed to facilitate consistency while also offering a {% layout layout=[5, 5] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1693977523/clm7ah9ii0004vd8i5ukg1r0j.png", alt: "Image showing examples of icons that can't be filled.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-fill-area-do.png", alt: "Image showing examples of icons that can't be filled.", height: 904, width: 902} caption="Examples of icons that can't be filled" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1693977532/clm7ahghh0005vd8ig3tybeky.png", alt: "Image showing examples of icons that can't be outlined.", height: 904, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-fill-area-do.png", alt: "Image showing examples of icons that can't be outlined.", height: 904, width: 902} caption="Examples of icons that can't be outlined" spacing="default" /%} {% /layout-area %} @@ -29,14 +29,14 @@ Legibility, consistency and simplicity are key design principals for all UI icon {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png", alt: "The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-2.png", alt: "The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.", height: 712, width: 712} caption="Key aspects of an icon" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png", alt: "Each of the six aspects of an icons anatomy.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-2.png", alt: "Each of the six aspects of an icons anatomy.", height: 712, width: 712} caption="800% zoom" spacing="default" /%} {% /layout-area %} @@ -49,14 +49,14 @@ Legibility, consistency and simplicity are key design principals for all UI icon {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png", alt: "The use of even numbers to ensure that icons can be scaled correctly.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-2.png", alt: "The use of even numbers to ensure that icons can be scaled correctly.", height: 712, width: 712} caption="Do - use even numbers" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png", alt: "Demonstration of why not to use odd numbers.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-2.png", alt: "Demonstration of why not to use odd numbers.", height: 712, width: 712} caption="Avoid - using odd numbers" spacing="default" /%} {% /layout-area %} @@ -69,14 +69,14 @@ Always use a 2px width for strokes and counter strokes. This includes curves and {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png", alt: "The stroke and counter stroke width", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-1.png", alt: "The stroke and counter stroke width", height: 712, width: 712} caption="Strokes and counter strokes are 2px" spacing="reduced" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png", alt: "The stroke width on curves and angles", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-1.png", alt: "The stroke width on curves and angles", height: 712, width: 712} caption="Curves and angles are 2px" spacing="reduced" /%} {% /layout-area %} @@ -85,14 +85,14 @@ Always use a 2px width for strokes and counter strokes. This includes curves and {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png", alt: "Example 1. The end of a stroke at 90 degrees.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-1.png", alt: "Example 1. The end of a stroke at 90 degrees.", height: 712, width: 712} caption="All strokes should have 90° square ends" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png", alt: "Example 2. The end of a stroke at 90 degrees.", height: 712, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-strokes-1.png", alt: "Example 2. The end of a stroke at 90 degrees.", height: 712, width: 712} caption="All strokes should have 90° square ends" spacing="default" /%} {% /layout-area %} @@ -103,7 +103,7 @@ Always use a 2px width for strokes and counter strokes. This includes curves and Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-filled-outlined.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} title="Icon variants, filled and outlined" type="body" /%} @@ -112,7 +112,7 @@ Some scenarios may call for a little ‘artistic licence’ to break these guide Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms. {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} + image={src: "*https://www.westpac.com.au/content/dam/public/gel/images/iconography-filled-outlined.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} title="Icon variants, filled and outlined" type="bodyWide" /%} From 71b1887c256623652d2f346b237ef4d661fe95e7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:17:57 +1100 Subject: [PATCH 123/130] Update src/content/articles/master-reference-page --- apps/site/src/content/articles/master-reference-page.yaml | 8 ++++---- .../content/articles/master-reference-page/content.mdoc | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/articles/master-reference-page.yaml b/apps/site/src/content/articles/master-reference-page.yaml index 6890e62ed..4a201609f 100644 --- a/apps/site/src/content/articles/master-reference-page.yaml +++ b/apps/site/src/content/articles/master-reference-page.yaml @@ -9,13 +9,13 @@ description: >- Design System Iconography. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663138229/cl819k5u60009am8i687f9lc2.png + https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-card.png height: 1212 width: 3168 smallDescription: Use our global visual language to communicate and engage with customers. image: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1690447987/clkkx311z00034g8i2jjuhsdh.png - height: 1080 - width: 1920 + https://www.westpac.com.au/content/dam/public/gel/images/design-with-gel-card.png + height: 1212 + width: 3168 author: Justin Spencer diff --git a/apps/site/src/content/articles/master-reference-page/content.mdoc b/apps/site/src/content/articles/master-reference-page/content.mdoc index 8e362145c..022586a62 100644 --- a/apps/site/src/content/articles/master-reference-page/content.mdoc +++ b/apps/site/src/content/articles/master-reference-page/content.mdoc @@ -128,7 +128,7 @@ Some Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing ### Another heading three 1. This is the first numbered item -2. And this is the second numbered item +1. And this is the second numbered item Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. @@ -138,7 +138,7 @@ Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Some article body text, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 1. This is the first numbered item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. -2. And this is the second numbered item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. +1. And this is the second numbered item with long content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. #### I'm a heading four From caa888f1aa557e72187c4b0a80448caa3077ad39 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:18:50 +1100 Subject: [PATCH 124/130] Update content.mdoc --- .../src/content/articles/master-reference-page/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/master-reference-page/content.mdoc b/apps/site/src/content/articles/master-reference-page/content.mdoc index 022586a62..cfaee850a 100644 --- a/apps/site/src/content/articles/master-reference-page/content.mdoc +++ b/apps/site/src/content/articles/master-reference-page/content.mdoc @@ -112,7 +112,7 @@ Some scenarios may call for a little ‘artistic licence’ to break these guide Some scenarios may call for a little ‘artistic licence’ to break these guidelines to aid legibility of an icon. In spite of this it remains important to only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms. {% articleBodyImage - image={src: "*https://www.westpac.com.au/content/dam/public/gel/images/iconography-filled-outlined.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-filled-outlined.png", alt: "Image showing filled and outlined icons.", height: 1012, width: 2024} title="Icon variants, filled and outlined" type="bodyWide" /%} From a7e19ee418251792dca3065083fa38189ad957af Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:24:26 +1100 Subject: [PATCH 125/130] Update src/content/articles/figma-libraries --- apps/site/src/content/articles/figma-libraries.yaml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/site/src/content/articles/figma-libraries.yaml b/apps/site/src/content/articles/figma-libraries.yaml index 77226036e..456b95559 100644 --- a/apps/site/src/content/articles/figma-libraries.yaml +++ b/apps/site/src/content/articles/figma-libraries.yaml @@ -6,8 +6,7 @@ description: >- digital touchpoints. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m4000yam8ifp387nfc.png - alt: Illustration of a painters pallet. + https://www.westpac.com.au/content/dam/public/gel/images/figma-libraries-hero.png height: 1212 width: 3168 smallDescription: >- From caee171286c7f13f2b205e9d86fb70510ec842a9 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:24:36 +1100 Subject: [PATCH 126/130] Update src/content/articles/figma-libraries --- apps/site/src/content/articles/figma-libraries.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/content/articles/figma-libraries.yaml b/apps/site/src/content/articles/figma-libraries.yaml index 456b95559..5a2632e9d 100644 --- a/apps/site/src/content/articles/figma-libraries.yaml +++ b/apps/site/src/content/articles/figma-libraries.yaml @@ -7,6 +7,7 @@ description: >- thumbnail: src: >- https://www.westpac.com.au/content/dam/public/gel/images/figma-libraries-hero.png + alt: Illustration of a painters pallet. height: 1212 width: 3168 smallDescription: >- From 083a0e528bd7872f0b4502e5a1ae084d947f56fa Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:31:04 +1100 Subject: [PATCH 127/130] Update src/content/articles/iconography --- apps/site/src/content/articles/iconography.yaml | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/iconography.yaml b/apps/site/src/content/articles/iconography.yaml index 0b67e8622..9196190f3 100644 --- a/apps/site/src/content/articles/iconography.yaml +++ b/apps/site/src/content/articles/iconography.yaml @@ -8,13 +8,16 @@ description: >- information about embedding, sizing and styling icons please refer to the Design System Iconography. thumbnail: - src: "https://www.westpac.com.au/content/dam/public/gel/images/iconography-hero.png\r" - alt: Illustration of a flower icon + src: >- + https://www.westpac.com.au/content/dam/public/gel/images/iconography-card.png + alt: Illustration of flower icon + height: 1212 + width: 3168 smallDescription: Use our global visual language to communicate and engage with customers. image: src: >- - https://www.westpac.com.au/content/dam/public/gel/images/iconography-card.png - alt: Illustration of an upload icon + https://www.westpac.com.au/content/dam/public/gel/images/iconography-hero.png + alt: Illustration of upload icon height: 1080 width: 1920 author: Justin Spencer From e20f76b57269a6109151588453eaf955b6988ee7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:33:09 +1100 Subject: [PATCH 128/130] Update content.mdoc --- .../src/content/articles/collaborate-for-change/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/collaborate-for-change/content.mdoc b/apps/site/src/content/articles/collaborate-for-change/content.mdoc index ff523d3a6..8d526747f 100644 --- a/apps/site/src/content/articles/collaborate-for-change/content.mdoc +++ b/apps/site/src/content/articles/collaborate-for-change/content.mdoc @@ -28,7 +28,7 @@ When proposing a component change a strong business case is required as change m - Adoption across projects, touch-points and platforms {% articleBodyImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png", alt: "The 5 stages of the process; request, review, feedback, approval and build.", height: 1064, width: 2376} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/collaborate-for-change-process.png", alt: "The 5 stages of the process; request, review, feedback, approval and build.", height: 1064, width: 2376} type="bodyWide" /%} ## Requesting component and pattern change From 28906aa546f9238786b2319abd663324d7a1c57b Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:43:44 +1100 Subject: [PATCH 129/130] Update content.mdoc --- .../content/articles/multi-brand-made-easy/content.mdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc index 319da3f11..d4e438c07 100644 --- a/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc +++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc @@ -39,14 +39,14 @@ For example, the *Brand font* in St.George (fig. 2) is Dragon Bold, Bank of Melb {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1664939880/cl8v27szo000nrq8ie1ogbach.png", alt: "Graphic to show what the St.George brand font looks like.", height: 744, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-typography-stg.png", alt: "Graphic to show what the St.George brand font looks like.", height: 744, width: 712} caption="Fig. 2" spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1664939898/cl8v286s6000orq8ihhl2dkch.png", alt: "Graphic to show what the Bank of Melbourne brand font looks like.", height: 744, width: 712} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-typography-bom.png", alt: "Graphic to show what the Bank of Melbourne brand font looks like.", height: 744, width: 712} caption="Fig. 3" spacing="default" /%} {% /layout-area %} @@ -71,13 +71,13 @@ For more in-depth information on the Iconography system see the article [Iconogr {% layout layout=[4, 4] %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1665119556/cl8y16vr3000prq8i58486coh.png", alt: "Graphic to show how an icon aligns to the 24px grid.", height: 939, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-iconography-grid.png", alt: "Graphic to show how an icon aligns to the 24px grid.", height: 939, width: 902} spacing="default" /%} {% /layout-area %} {% layout-area %} {% articleImage - image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1665119583/cl8y17gmw000qrq8id59z6n51.png", alt: "Graphic to show the different sizes of icons available in the design system.", height: 939, width: 902} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/multi-brand-iconography-sizes.png", alt: "Graphic to show the different sizes of icons available in the design system.", height: 939, width: 902} spacing="default" /%} {% /layout-area %} {% /layout %} From a2b1dc28d836b3690256a87abdaf3e7f9e9a7ce0 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 4 Dec 2024 18:48:41 +1100 Subject: [PATCH 130/130] Update content.mdoc --- apps/site/src/content/articles/the-grid/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/articles/the-grid/content.mdoc b/apps/site/src/content/articles/the-grid/content.mdoc index cdc645ac5..0a5626689 100644 --- a/apps/site/src/content/articles/the-grid/content.mdoc +++ b/apps/site/src/content/articles/the-grid/content.mdoc @@ -48,7 +48,7 @@ When we design our layouts in a responsive environment we don’t use fixed pixe Column offsets work in tandem with column spans. They allow designers to move content across the grid. For example, a text element may not need to span 12 columns in LG view. To reduce the width of the text element the designer could offset 2 columns and span 8. This would provide a narrower text element. Offsets also allow us to create more interesting asymmetric layouts which don’t follow the popular blog style design approach where everything is centred. {% articleBodyImage - image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig2-offsets.png", alt: "How elements can offset and span various columns", height: 1092, width: 1852} + image={src: "https://www.westpac.com.au/content/dam/public/gel/images/grid-fig3-offsets.png", alt: "How elements can offset and span various columns", height: 1092, width: 1852} title="Figure 3. Column offsets" type="bodyWide" /%}