diff --git a/apps/site/src/content/articles/accessible-by-design.yaml b/apps/site/src/content/articles/accessible-by-design.yaml index c7693cc78..da68d2491 100644 --- a/apps/site/src/content/articles/accessible-by-design.yaml +++ b/apps/site/src/content/articles/accessible-by-design.yaml @@ -10,7 +10,10 @@ 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 + alt: >- + Hero image depicting icons usually associate with accessibility, Eye, Ear + and Person on a wheelchair. height: 1212 width: 3168 smallDescription: >- @@ -19,7 +22,10 @@ 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 + alt: >- + Hero image depicting icons usually associate with accessibility, Eye, Ear + and Person on a wheelchair. + height: 1212 + width: 3168 author: Michael Colibraro diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml index 9c1264429..87eec5d1b 100644 --- a/apps/site/src/content/articles/banking-display-accounts.yaml +++ b/apps/site/src/content/articles/banking-display-accounts.yaml @@ -2,7 +2,10 @@ 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 + 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 diff --git a/apps/site/src/content/articles/banking-display-transactions.yaml b/apps/site/src/content/articles/banking-display-transactions.yaml index 92bf603d2..7541d84ea 100644 --- a/apps/site/src/content/articles/banking-display-transactions.yaml +++ b/apps/site/src/content/articles/banking-display-transactions.yaml @@ -2,7 +2,10 @@ 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 + 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 diff --git a/apps/site/src/content/articles/banking-hand-offs.yaml b/apps/site/src/content/articles/banking-hand-offs.yaml index e83433dcc..ff1ea8a4c 100644 --- a/apps/site/src/content/articles/banking-hand-offs.yaml +++ b/apps/site/src/content/articles/banking-hand-offs.yaml @@ -2,7 +2,8 @@ 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 + alt: Stylised example image of a page loading animation. + height: 1468 + width: 2400 author: Digital Experience diff --git a/apps/site/src/content/articles/banking-onboarding.yaml b/apps/site/src/content/articles/banking-onboarding.yaml index 2049251eb..29573108e 100644 --- a/apps/site/src/content/articles/banking-onboarding.yaml +++ b/apps/site/src/content/articles/banking-onboarding.yaml @@ -1,8 +1,8 @@ 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" + alt: >- + Stylised example image of a banking onboarding screen as it would appear on + a mobile phone. author: Digital Experience diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml index a9c254a75..1f1b4d807 100644 --- a/apps/site/src/content/articles/banking-tysk.yaml +++ b/apps/site/src/content/articles/banking-tysk.yaml @@ -1,8 +1,8 @@ -name: Things you should kn - +name: Things you should know 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" + alt: >- + Stylised example image of form fields and Things you should know text as + they would appear on a mobile phone. author: Digital Experience diff --git a/apps/site/src/content/articles/banking.yaml b/apps/site/src/content/articles/banking.yaml index ac8bf579c..e83525eaf 100644 --- a/apps/site/src/content/articles/banking.yaml +++ b/apps/site/src/content/articles/banking.yaml @@ -11,7 +11,10 @@ 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 + 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 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.  diff --git a/apps/site/src/content/articles/build-strong-brands.yaml b/apps/site/src/content/articles/build-strong-brands.yaml index 2b9587a7b..9406b8126 100644 --- a/apps/site/src/content/articles/build-strong-brands.yaml +++ b/apps/site/src/content/articles/build-strong-brands.yaml @@ -6,16 +6,13 @@ 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" + 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 diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml index 9efd86585..662b61f66 100644 --- a/apps/site/src/content/articles/code-with-gel.yaml +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -1,16 +1,18 @@ 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" + 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. 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" + 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 diff --git a/apps/site/src/content/articles/collaborate-for-change.yaml b/apps/site/src/content/articles/collaborate-for-change.yaml index 79755693e..c2f0f29f2 100644 --- a/apps/site/src/content/articles/collaborate-for-change.yaml +++ b/apps/site/src/content/articles/collaborate-for-change.yaml @@ -4,14 +4,10 @@ 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" + alt: Stylised illustration of a bike chain. 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" + alt: Image of a child pushing another child down the road on a billycart. author: Marita Purins 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 diff --git a/apps/site/src/content/articles/colour.yaml b/apps/site/src/content/articles/colour.yaml index 0dc6b5806..92f24844e 100644 --- a/apps/site/src/content/articles/colour.yaml +++ b/apps/site/src/content/articles/colour.yaml @@ -6,16 +6,12 @@ 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" + alt: Illustration of a rainbow 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" + alt: Image of decorative illustration of coloured scales. 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** diff --git a/apps/site/src/content/articles/data-visualisation.yaml b/apps/site/src/content/articles/data-visualisation.yaml index f3a7b310e..ebcc16769 100644 --- a/apps/site/src/content/articles/data-visualisation.yaml +++ b/apps/site/src/content/articles/data-visualisation.yaml @@ -7,15 +7,14 @@ 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 + alt: Illustration of a pie chart 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..8f0c91ffe 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-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 %} @@ -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", 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 %} {% 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", 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 %} @@ -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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", alt: "Pie chart using solid colours", 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: "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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", alt: "Bar graph using only tint or transparent colours, this is incorrect.", 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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", 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://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", alt: "RAMS branded line graph using colour A this is accessible", height: 1557, width: 1125} caption="Fig.26" spacing="default" /%} {% /layout-area %} diff --git a/apps/site/src/content/articles/design-with-gel.yaml b/apps/site/src/content/articles/design-with-gel.yaml index fc0de115f..dd2afc8f1 100644 --- a/apps/site/src/content/articles/design-with-gel.yaml +++ b/apps/site/src/content/articles/design-with-gel.yaml @@ -6,14 +6,10 @@ 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" + alt: Illustration of post it notes 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 diff --git a/apps/site/src/content/articles/figma-libraries.yaml b/apps/site/src/content/articles/figma-libraries.yaml index fa98df916..5a2632e9d 100644 --- a/apps/site/src/content/articles/figma-libraries.yaml +++ b/apps/site/src/content/articles/figma-libraries.yaml @@ -6,15 +6,14 @@ description: >- digital touchpoints. thumbnail: src: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m4000yam8ifp387nfc.png + 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: >- 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). 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 diff --git a/apps/site/src/content/articles/iconography.yaml b/apps/site/src/content/articles/iconography.yaml index 9e1920271..9196190f3 100644 --- a/apps/site/src/content/articles/iconography.yaml +++ b/apps/site/src/content/articles/iconography.yaml @@ -9,13 +9,15 @@ 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/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://res.cloudinary.com/westpac-gel/image/upload/v1690447987/clkkx311z00034g8i2jjuhsdh.png + 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 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 %} 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 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 6b4e898db..cfaee850a 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" /%} @@ -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 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 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 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..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 @@ -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. @@ -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 %} 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 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 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 diff --git a/apps/site/src/content/articles/notifications-sms.yaml b/apps/site/src/content/articles/notifications-sms.yaml index efbfa704d..1c589d549 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 illustration of an SMS message on mobile. height: 1080 - width: 1920 + width: 2400 author: Digital Experience 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 diff --git a/apps/site/src/content/articles/notifications.yaml b/apps/site/src/content/articles/notifications.yaml index a2191c91e..d691e9e7a 100644 --- a/apps/site/src/content/articles/notifications.yaml +++ b/apps/site/src/content/articles/notifications.yaml @@ -5,13 +5,14 @@ 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: >- - https://res.cloudinary.com/westpac-gel/image/upload/v1696380383/clnb12vrf003fvd8igcoj7goo.png - height: 1080 - width: 1920 + 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 c4a1b9fb8..e17f7827e 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? @@ -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://res.cloudinary.com/westpac-gel/image/upload/v1695968990/cln485bof002pvd8i3dhvcax7.png", alt: "orginations", 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. @@ -88,13 +86,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. 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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..0a5626689 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", 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-fig3-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" /%} 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..c6a06952b 100644 --- a/apps/site/src/content/articles/think-responsive/content.mdoc +++ b/apps/site/src/content/articles/think-responsive/content.mdoc @@ -3,14 +3,14 @@ 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 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. 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..33f24920f 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. @@ -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) 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. 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 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 diff --git a/apps/site/src/content/articles/website-feature.yaml b/apps/site/src/content/articles/website-feature.yaml index a46011c43..e17e864a0 100644 --- a/apps/site/src/content/articles/website-feature.yaml +++ b/apps/site/src/content/articles/website-feature.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website feature page + template. +author: Digital Experience diff --git a/apps/site/src/content/articles/website-offer.yaml b/apps/site/src/content/articles/website-offer.yaml index f7f92b5e8..e8fa84755 100644 --- a/apps/site/src/content/articles/website-offer.yaml +++ b/apps/site/src/content/articles/website-offer.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website offer page + template. +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) diff --git a/apps/site/src/content/articles/website-partnership.yaml b/apps/site/src/content/articles/website-partnership.yaml index 2429f27ae..60db3a61c 100644 --- a/apps/site/src/content/articles/website-partnership.yaml +++ b/apps/site/src/content/articles/website-partnership.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website partnership page + template. +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. diff --git a/apps/site/src/content/articles/website-price-change.yaml b/apps/site/src/content/articles/website-price-change.yaml index a41d79a96..d767a6c9a 100644 --- a/apps/site/src/content/articles/website-price-change.yaml +++ b/apps/site/src/content/articles/website-price-change.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website price change page + template. +author: Digital Experience diff --git a/apps/site/src/content/articles/website-product-page.yaml b/apps/site/src/content/articles/website-product-page.yaml index de270a1c6..608182e7b 100644 --- a/apps/site/src/content/articles/website-product-page.yaml +++ b/apps/site/src/content/articles/website-product-page.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website product page + template. +author: Digital Experience diff --git a/apps/site/src/content/articles/website-service.yaml b/apps/site/src/content/articles/website-service.yaml index e3d1bc451..21c7fcfe0 100644 --- a/apps/site/src/content/articles/website-service.yaml +++ b/apps/site/src/content/articles/website-service.yaml @@ -1,7 +1,8 @@ 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" + alt: >- + Diagram showing all of the modules required on a website serice page + template. +author: Digital Experience diff --git a/apps/site/src/content/articles/website-sponsorship.yaml b/apps/site/src/content/articles/website-sponsorship.yaml index dbad6cddc..a1927adac 100644 --- a/apps/site/src/content/articles/website-sponsorship.yaml +++ b/apps/site/src/content/articles/website-sponsorship.yaml @@ -1,7 +1,9 @@ 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 + alt: >- + Diagram showing all of the modules required on a website sponsorship page + template. +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. 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? diff --git a/apps/site/src/content/articles/what-is-gel.yaml b/apps/site/src/content/articles/what-is-gel.yaml index b1c642feb..d8c2c1950 100644 --- a/apps/site/src/content/articles/what-is-gel.yaml +++ b/apps/site/src/content/articles/what-is-gel.yaml @@ -6,16 +6,12 @@ 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" + alt: GEL logo 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 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.