diff --git a/apps/site/keystatic.config.ts b/apps/site/keystatic.config.ts index c42367322..142ac538d 100644 --- a/apps/site/keystatic.config.ts +++ b/apps/site/keystatic.config.ts @@ -200,6 +200,12 @@ export default config({ directory: 'public/images/articles', publicPath: '/images/articles', }), + smallDescription: fields.image({ + label: 'Small description', + description: 'Small description that goes along with the thumbnail', + directory: 'public/images/articles', + publicPath: '/images/articles', + }), image: fields.image({ label: 'Main Image', description: 'Main image', diff --git a/apps/site/next.config.js b/apps/site/next.config.js index a1bc76baf..7a2dc3d02 100644 --- a/apps/site/next.config.js +++ b/apps/site/next.config.js @@ -1,4 +1,7 @@ /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: false, + images: { + domains: ['res.cloudinary.com'], + }, }; diff --git a/apps/site/package.json b/apps/site/package.json index 62b09347c..84e53864a 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -7,6 +7,7 @@ "dev": "next dev", "start": "next start", "lint": "next lint", + "lint:fix": "next lint --fix", "check-types": "tsc --noemit --emitDeclarationOnly false" }, "dependencies": { diff --git a/apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx b/apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx index abcc92cf2..cc49fc92a 100644 --- a/apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx +++ b/apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx @@ -18,7 +18,7 @@ export function ArticleTile({ article, slug, className, layout, index }: Article )}

{article.name}

-

{article.description}

+

{article.smallDescription}

diff --git a/apps/site/src/content/articles/accessible-by-design.yaml b/apps/site/src/content/articles/accessible-by-design.yaml index c1c0684b6..b523e3a4c 100644 --- a/apps/site/src/content/articles/accessible-by-design.yaml +++ b/apps/site/src/content/articles/accessible-by-design.yaml @@ -1,8 +1,18 @@ name: Accessible By Design description: >- + Let’s change the way we think about accessibility. Westpac’s Access and + Inclusion Director, Majella Knobel notes “People assume accessibility is only + about the 18% of people with disability. But everyone, to some extent, will + experience what it’s like to live with disability. It could be a change in + eyesight, an injured wrist or a recovery from surgery. Disability and + accessibility requirements will impact all of us at some point in our + lifetime.” +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666333819/cl9i44qb7000wtc8ihnxv08ex.png +smallDescription: >- The Westpac Group is committed to creating products that are perceivable, operable, understandable, and robust for all users. Inclusive design is part of our dna. -thumbnail: /images/articles/accessible-by-design/thumbnail.png -image: /images/articles/accessible-by-design/image.png +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666333853/cl9i45goa000xtc8i8wgx5cu2.png author: michael-colibraro diff --git a/apps/site/src/content/articles/build-strong-brands.yaml b/apps/site/src/content/articles/build-strong-brands.yaml new file mode 100644 index 000000000..d94c76d7b --- /dev/null +++ b/apps/site/src/content/articles/build-strong-brands.yaml @@ -0,0 +1,14 @@ +name: Build strong brands +description: >- + We take a digital first approach to brand design including meeting + accessibility standards to ensure our brands are optimised for all of our + customers. This approach helps us to deliver consistent brand experiences + across all channels. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667097999/cl9ur3rp6000tf58i5s7y3ote.png +smallDescription: >- + Create consistent, on brand journeys to strengthen brand recognition and + trust. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1665993797/cl9chovs7000htc8igwry11s4.jpg +author: marita-purins diff --git a/apps/site/src/content/articles/build-strong-brands/content.mdoc b/apps/site/src/content/articles/build-strong-brands/content.mdoc new file mode 100644 index 000000000..beb9cdb66 --- /dev/null +++ b/apps/site/src/content/articles/build-strong-brands/content.mdoc @@ -0,0 +1,36 @@ +Our digital brands have been designed using a multi-brand, responsive and accessible design system. + +The foundations of our digital brands such as [colours](/articles/colour), [fonts](/articles/typography), [icons](/articles/iconography), [pictograms](/articles/pictograms) and the [responsive grid](/articles/the-grid), along with the most commonly used interface elements, are specified in the design system, which is the single source of truth for the Groups brands within the digital space. + +The design system delivers our digital brands in React, Vanilla HTML CSS and tokens to help us efficiently manage 6 brands and service multiple technologies and platforms across the organisation. Each brand’s code can also be leveraged by front-end developers to build multi-brand, responsive and accessible solutions with greater brand consistency and quality at speed, with less effort. + +Digital brand compliance +------------------------ + +We have 3 approaches to achieve digital brand compliance. This gives projects the flexibility to tailor the GEL features that best suit their requirements. For example; Project X is using a 3rd party web service with it's own codebase, therefore a Level 1 engagement is probably all that's required. + +### Level 1 + +Getting the basics right. All projects need to align with Level 1 to be visually brand compliant. To achieve this level means you have used the correct colours, fonts and basic UI elements - presenting our brands to customers more consistently across different platforms and touch-points. + +Aligning to these design guidelines means no more wasted time determining or discussing button colours and corner radiuses – its all taken care of. + +Native apps tend to use this level so they can optimise their solutions using the native platform controls. + +### Level 2 + +This is where you start realising the benefits of using the design system. When implemented correctly, the design system supports you to design a solution once and have it will work across any brand (with some small tweaks). + +Using the grid to create responsive designs will mean your project can also work on almost any screen size. This ensures efficiency, scalability and most of all productivity. + +One design, multiple brands and multiple devices. + +This is used by web based projects that need to create and configure their own code rather than consuming code directly from the GEL design system. + +### Level 3 + +This is where things get really interesting. At level 3, not only are you fully brand aligned, multi-brand and responsive; by integrating with the GEL design system you’ll also benefit from the use of the developer tool kits and the ability to use code straight from the design system. + +So, as well as increasing the speed which your project can be created, it also means that any future branding and accessibility updates can be simpler, save time and money now and in the future. + +[Access the design system for the digital brand foundationsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours) \ No newline at end of file diff --git a/apps/site/src/content/articles/code-with-gel.yaml b/apps/site/src/content/articles/code-with-gel.yaml new file mode 100644 index 000000000..3130f3ec6 --- /dev/null +++ b/apps/site/src/content/articles/code-with-gel.yaml @@ -0,0 +1,13 @@ +name: 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: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png +smallDescription: >- + Automate your environment, scale your projects and speed up your work flow + with our cutting edge code library. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg +author: marita-purins diff --git a/apps/site/src/content/articles/code-with-gel/content.mdoc b/apps/site/src/content/articles/code-with-gel/content.mdoc new file mode 100644 index 000000000..5479726a7 --- /dev/null +++ b/apps/site/src/content/articles/code-with-gel/content.mdoc @@ -0,0 +1,40 @@ +The GEL design system provides the foundations you need to build accessible, multi-brand solutions that work across any device. + +**ReactJS** + +Prefabricated components, optimised for performance, scalability and accessibility. + +**HTML CSS** + +Vanilla solution to support teams to integrate with their preferred JavaScript language. + +**Design tokens** + +Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS.  + +There are 3 levels of GEL design system adoption +------------------------------------------------ + +#### Level 1: Follow the specifications + +Achieve brand compliance. + +In this scenario, you can use the GEL design system documentation and design tokens to achieve brand compliance. + +#### Level 2: Adopt the design system and principles + +Achieve brand compliance and scalability. + +In this scenario, you can use the design system docs and apply the multi-brand, responsive principles to achieve scalability and brand consistency in your project. + +#### Level 3: Integrate with the framework + +Achieve brand compliance, scalability and speed. + +In this scenario, you can consume the React JS or vanilla HTML code in your project to increase the speed at which your project can be created, and simplify future branding and accessibility updates. + +[Read more about the levels of design system adoption](/articles/build-strong-brands) + +[Access the design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system) + +[Get started using the GEL design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC) \ No newline at end of file diff --git a/apps/site/src/content/articles/collaborate-for-change.yaml b/apps/site/src/content/articles/collaborate-for-change.yaml new file mode 100644 index 000000000..ee00430a0 --- /dev/null +++ b/apps/site/src/content/articles/collaborate-for-change.yaml @@ -0,0 +1,10 @@ +name: 'Collaborate for change ' +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: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666855413/cl9qqobm6000cf58idusod3xr.png +smallDescription: Considered change made collaboratively achieves the best results. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663227077/cl82qghhn000tam8ia8c6gxjs.jpg +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 new file mode 100644 index 000000000..e5ab4bfb6 --- /dev/null +++ b/apps/site/src/content/articles/collaborate-for-change/content.mdoc @@ -0,0 +1,77 @@ +Change impacts the customer journey and brand experience as well as project funding and prioritisation. Since many platforms, touch-points and teams are impacted, we take an evidence based approach to global change to prove the value of making change across the Group. + +Balancing many perspectives +--------------------------- + +The enterprise GEL Design System is created in collaboration with teams across the Group to ensure it balances the various requirements of the business including branding, accessibility, experience design and usability, technology and operations. + +We work with Brand to ensure that our brand changes are optimised for digital so that we can achieve a more consistent brand experience across the entire brand ecosystem including non-digital channels. + +We also help brands to meet accessibility standards to ensure that we optimise our brands for all customers including those with vision impairments. Digital and accessibility first design ensures that all channels can provide a consistent and aligned brand experience. + +Working with the Experience Design, Access & Inclusion and Technology teams, we can understand individual touchpoint and platform considerations so that we can achieve global solutions which can significantly increase project team velocity and ability to scale solutions. + +The system evolves to include valuable global components and patterns to serve many teams across the enterprise. + +We facilitate the exploration of shared design and development problems across the digital channel. Our intention is to align teams to and provide a truly global, best practice solution for inclusion in the system, to continue to deliver customer and business value. + +Governing change +---------------- + +Since multiple teams across the Bank are impacted by change in the design system, these teams are key to driving change decisions to ensure we maintain a strategic, enterprise approach. Change requests will go through a process and will also need to meet GEL quality standards to be accepted. + +When proposing a component change a strong business case is required as change must go through a comprehensive process of: + +* Senior stakeholder engagement and approval +* Accessibility testing +* Requirements and co-design with impacted teams +* Technical build in the design system +* Technical build in platform component libraries  +* Adoption across projects, touch-points and platforms + +![The 5 stages of the process; request, review, feedback, approval and build.](https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png) + +Requesting component and pattern change +--------------------------------------- + +To consider a global component change would need to determine if there is a business or customer challenge to solve proven through data and research insights and if there is a usability or accessibility issue presenting an application risk down the line. + +### Research & insights + +To make a global change due diligence must be completed as change impacts many teams. When we have evidence of the problem or opportunity, proposed change can be assessed and value versus effort understood. This helps our impacted teams to agree a way forward. + +We must have data to qualify a problem as change not impacts many other projects, platforms and stakeholders, for the investment made in change we need to be able to measure success. + +For this we would need to take an objective approach and identify how we can gather evidence to validate the problem. + +We need to understand the behaviour you are trying to influence, the different customer types and the context the customer is operating in. + +### Accessibility standards + +If a problem is validated with evidence, the GEL team can facilitate accessibility testing to assist us to meet the Group commitment. We must ensure that all customers can apply for products and access the digital banking platforms. This will take priority in our approach. + +### GEL collaborative approach + +If a problem is validated with evidence, as part of standard process, we would include other teams in the conversation to ensure their requirements are met and the best global solution is agreed. + +We take a rigorous, best practice, production & development inclusive approach to interface design, prioritising criteria such as: + +* Masterbrand alignment and brand consistency +* Group accessibility goals and standards +* Re-usable design and code +* Modular design +* Product and context agnostic design +* Usability principles +* Multi-brand +* Scalability +* Optimise for build and maintenance efficiencies +* Performance +* Browser compliance +* Multi-lingual +* Legibility + +If you have a design problem you think is a problem shared we’ll investigate its potential to become a global solution. + +You can help us improve and evolve the Design System by raising bugs and suggestions in our [Github pageCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://github.com/WestpacGEL/GEL/issues). + +To help us continuously improve our design patterns you can send your feedback to [gel@westpac.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au). \ No newline at end of file diff --git a/apps/site/src/content/articles/colour.yaml b/apps/site/src/content/articles/colour.yaml new file mode 100644 index 000000000..afb9e3928 --- /dev/null +++ b/apps/site/src/content/articles/colour.yaml @@ -0,0 +1,14 @@ +name: Colour +description: >- + Colour plays an important role in our lives. Our minds are programmed to + respond to colour. We stop our cars for red lights and go on green. We see + colour before we see form. This article explains why we have a colour system + and how to apply it to your designs. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666755294/cl9p32exi0004u48idenu5zh8.png +smallDescription: >- + Speed up your workflow, ensure you're on brand and stay accessible with our + multi-brand colour system. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666069890/cl9dqztwo000jtc8iarv46fe1.png +author: justin-spencer diff --git a/apps/site/src/content/articles/colour/content.mdoc b/apps/site/src/content/articles/colour/content.mdoc new file mode 100644 index 000000000..a976cd5cc --- /dev/null +++ b/apps/site/src/content/articles/colour/content.mdoc @@ -0,0 +1,56 @@ +**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)_ + +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. + +**Colour in the user interface** +-------------------------------- + +Applying each of the brand colour palettes in the the digital space comes with its own set of design challenges and opportunities. + +### **Challenges include:** + +1. Accessibility requirements. +2. 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. + +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. + +Using the colour system (as part of the Design System) allows us to automate the rollout of multi-brand applications. Being an automated system, design and development time is significantly reduced, as is the margin for error. + +Further more, in the event of a re-brand or brand refresh the colour system allows us to quickly and accurately update and deploy new colour palettes. The same would apply when adding new brands to the system. However, for any of this to work effectively it’s important that brand agencies collaborate with the Digital Design Quality team. + +The practical application of the colour system encourages consistency across all user interfaces which strengthens brand recognition, creates a consistent user journey and provides a positive customer experience. + +**How it works** +---------------- + +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. + +### **Secondary palette** + +Some of the brands also use a secondary palette however the colour system does not currently map the secondary palette. These colours are bespoke and can be used in many different ways depending on the brand guidelines. Typically the secondary palette is used for things like data visualisation, graphs, charts, illustration etc. The guidelines around the correct use of the secondary palette are brand specific. + +### **Reserved Colours** + +The Westpac group has a set of reserved, contextual colours used only for messaging (success, information, warning and danger). These colours are used across all our brands. They’re purely functional and have no relevance to the brand. They should never be used for anything other than messaging. + +### **Tints** + +Each brand has a neutral colour with a set of 11 tints for subtle colouring. Several of these tints are already used in the primary palette for borders and backgrounds etc. The remaining tints can be used for additional colouring if required. + +[View the colour systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours) + +### **Accessibility** + +The Westpac group have committed to comply with WCAG 2.1 AA standards. This is both a social responsibility and a legal requirement. As a result, key colours and colour combinations have been rigorously tested to ensure contrast ratios comply with WCAG standards. The Design System’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to always check colour contrast ratios during the design phase. The [Colour Contrast AnalyserCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.paciellogroup.com/resources/contrastanalyser/) is a useful tool for this purpose. + +The [Accessibility Matters](/articles/accessible-by-design) article provides more in-depth information on accessibility. \ No newline at end of file diff --git a/apps/site/src/content/articles/data-visualisation.yaml b/apps/site/src/content/articles/data-visualisation.yaml new file mode 100644 index 000000000..da7481803 --- /dev/null +++ b/apps/site/src/content/articles/data-visualisation.yaml @@ -0,0 +1,14 @@ +name: Data visualisation +description: >- + In recent years our appetite for data has increased significantly. So too has + the need for a consistent approach to data visualisation. This article is an + introduction to the data visualisation system, how it works and how you can + use it to create accessible, multi-brand graphs and charts. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1687413424/clj6qdu4q0027bn8i5zr512pk.png +smallDescription: >- + The data visualisation system, how it works and how you can use it to create + accessible, multi-brand charts. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1687499154/clj85faof003ibn8i8ib98gpx.png +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 new file mode 100644 index 000000000..72c905ddf --- /dev/null +++ b/apps/site/src/content/articles/data-visualisation/content.mdoc @@ -0,0 +1,200 @@ +Accessibility +------------- + +Ensuring that your graphs and charts comply with WCAG’s AA accessibility standards is the number one priority. The data visualisation system has catered for this using several methods. + +### Supporting data + +From an accessibility perspective supporting data is your friend. Put simply; supporting data is the information used in a graph or chart. This includes the data itself and (if possible) a caption to describe the key findings. As a best practice, all charts must contain supporting data within the meta tags, this allows screen readers to relay the information however, it does not necessarily make your chart accessible. + +![Horizontal bar chart showing an example data visualisation of annual spending](https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png) + +Fig.1 Data visualisation + +![Example of the supporting data required to communicate this chart.](https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png) + +Fig.2 Supporting data + +To further meet our accessibility requirements, any charts which use multiple categories must also display supporting data. Simply relying on the data being stored in the meta tags is not enough, we must also show it on screen. The example below demonstrates why this is the case. + +Fig.3 (below) shows our lovely colourful pie chart. All the colours in this chart pass the 3:1 contrast ratio. To all intents and purposes this chart would seem to be accessible, sadly this is not the case. Fig.4 demonstrates what a vision impaired customer would see. This is known as Achromatopsia (total colour blindness). + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png) + +Fig.3 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png) + +Fig.4 + +The issue lies in the key (fig.4). There is not enough contrast in these greys to identify each category so it’s a fail. To meet our accessibility requirements supporting data must be displayed with this chart. + +To make our pie chart accessible we have to display the supporting data as shown below (fig.6) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png) + +Fig.5 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png) + +Fig.6 + +The exception to this rule is where charts only display a single category as shown below (fig.7 and fig.8). + +These charts only use one category and therefore do not require a key. Providing the colour used in these charts passes the 3:1 minimum contrast ratio there is no need to display supporting data. We’ll cover this in more detail later. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png) + +Fig.7 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png) + +Fig.8 + +The colour system +----------------- + +From a multi-brand perspective the colour system is our friend. As a rule of thumb we recommend designers always assume that their chart (or indeed anything they design at Westpac) will at some stage need to be multi-brand. + +To assist designers with this we’ve created a data visualisation colour palette. Each brand provides 6 colours (A-F) for designers to use in their charts. Each colour has a corresponding 50% tint and 30% opacity. This set of 18 colours provides enormous scope and flexibility for a wide range of complex data visualisations. With that in mind, please avoid using additional colours, tints and opacities. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059531/claankr800028f58i36nsbcn0.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059544/claanl1530029f58ihx71759r.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059613/claanmim7002af58i7ate4iat.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059625/claanmr8j002bf58i16ev1t2i.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059657/claannged002cf58id4x5dq9o.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668059668/claannokx002df58igzw175tj.png) + +Examples +-------- + +To give you some context, the following examples show how these colours are applied. Circular swatches indicate the colours used in the graph. In fig.9 below the pie chart uses the solid colours A-D as shown in fig.10. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png) + +Fig.9 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png) + +Fig.10 + +The comparison chart in fig.11 shows how a tint is used with its corresponding solid colour (fig.12) and the area chart in fig.13 shows how the transparent colours are used with their corresponding solid colours (fig 14). + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png) + +Fig.11 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png) + +Fig.12 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png) + +Fig.13 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png) + +Fig.14 + +Colour hierarchy +---------------- + +We just looked at where to use these colours. Now we’re going to look at when to use them. As mentioned earlier, each brand provides 6 colours for designers to use in their charts. See fig.15 below. + +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. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png) + +Fig.15 + +Incorrect use of these colours will dilute the consistency and integrity of the brand. If you’re unsure how to apply these colours or have any concerns please ask your design principle for help. We also recommend informing the business whenever you use the backup colours in charts as they are strictly governed, and only for use in edge-case scenarios. + +Do’s and don’ts +--------------- + +There are 4 key principles that guide the correct use of this colour system. Applying these principles will ensure that your charts are on-brand, accessible and systemised allowing you to re-use the chart in any of our Westpac Group brands. Not only will this save time, it will also reduce the margin for error and increase consistency. + +### 1\. Use the main set first + +Always use solid colours from the main set before using colours from the backup set. The chart below (fig.16) uses the first 4 colours in the set (A–D), this is correct. The chart on the right (fig.17) uses the orange (colour F) from the backup set before exhausting the first 4 colours. This is not correct and will damage the integrity of the brand. + +Always use colours from the main set before using colours from the backup set. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png) + +Fig.16 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png) + +Fig.17 + +### 2\. Don't use tints on their own + +Avoid using the tint (or transparent) variations on their own. As mentioned earlier, these variations are intended to be used in conjunction with their corresponding solid colour. They should not be used in isolation. The comparison chart below (fig.18) shows the correct use of a solid colour with its corresponding tint, whereas fig.19 is an example of incorrect use of the tints. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png) + +Fig.18 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png) + +Fig.19 + +### 3\. Don't mix and match + +Only use the tint (and transparent) variations with their corresponding solid colours (as shown in fig.20). Never use tint or transparent variations with an alternative solid colour (fig.21). Tints and transparencies must only be used with their corresponding solid colours. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png) + +Fig 20 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png) + +Fig.21 + +### 4\. Know the accessible colours + +As mentioned earlier, simple charts that use a single category are not required to display their supporting data, however they must use an accessible colour that passes the minimum 3:1 contrast ratio for UI components and graphical objects. + +Fig.23 below shows a simple Westpac line graph. This graph uses colour C from the Westpac data visualisation palette. When this graph is converted to Rams (fig.24) it automatically applies colour C from the Rams palette. Unfortunately the Rams colour is not accessible and therefore the graph will fail to meet accessibility requirements. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png) + +Fig.23 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png) + +Fig.24 + +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. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391172/clag50yna003ef58i798k7yrj.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391183/clag517cj003ff58i627fcfbj.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391236/clag52cle003gf58i43x19xll.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391253/clag52pd5003hf58i8t794c6h.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391289/clag53gz8003if58ihj0gfy7n.png) + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668391300/clag53pqs003jf58i27tl7pob.png) + +If you want to take advantage of this system, using either of these colours (A or B) will ensure that the charts are both accessible and multi-brand with no additional re-work. Fig.25 shows our updated Westpac line graph which now uses colour A. When this graph is converted to Rams (Fig.26) it automatically applies colour A from the Rams palette which is also accessible. + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png) + +Fig.25 + +![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png) + +Fig.26 + +Hopefully this has given you some direction on how to create data visualisations. At the time of writing this system was in its infancy, we'd love to see what you do with this and get your feedback, comments and ideas so we can continue to improve the way we display and communicate data to our customers. \ No newline at end of file diff --git a/apps/site/src/content/articles/design-with-gel.yaml b/apps/site/src/content/articles/design-with-gel.yaml new file mode 100644 index 000000000..4ebfdd192 --- /dev/null +++ b/apps/site/src/content/articles/design-with-gel.yaml @@ -0,0 +1,12 @@ +name: Design with GEL +description: >- + You’ve got grand ideas! You’re up to speed on all the latest AI, AR, VR, and + hardware technology. You’re excited to push the boundaries of what’s possible + and be on the cutting edge of the industry. How do you retain this enthusiasm + while designing with a design system? +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666848508/cl9qmkbwp0003f58i11636bi6.png +smallDescription: Learn how to design digital applications within a large organisation. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667030991/cl9tn7jht000lf58i656j7yhf.jpg +author: mark-marshall diff --git a/apps/site/src/content/articles/design-with-gel/content.mdoc b/apps/site/src/content/articles/design-with-gel/content.mdoc new file mode 100644 index 000000000..9a86f198d --- /dev/null +++ b/apps/site/src/content/articles/design-with-gel/content.mdoc @@ -0,0 +1,74 @@ +It’s a design mindset +--------------------- + +If you’re new to enterprise design, you’ll soon find it requires a different mindset to agency, consulting, or startups. It’s not so much about pushing the latest trends live, gaining billable hours, or speed to market (although this is still important). + +Enterprise design requires consideration for multiple streams of work, often dealing with legacy systems, and with the challenge of traditional corporate structures creating silos with co mpeting interests. Because of this, standardisation and efficiencies in design and delivery become increasingly vital, and this where a design system can help. + +Actually, what is a design system? +---------------------------------- + +We describe our design system, the Global Experience Language (GEL), as: + +The Global Experience Language (GEL) is our single source of truth, providing everything you need to deliver our brand promises and create consistent, cohesive customer experiences across our entire digital landscape faster, and with less effort. + +In practical terms and in its simplest form, it's a set of assets and guidelines which meet brand, CX, UX, UI, and development criteria, designed to be reused in order to realise the benefits mentioned. + +Right, how do I use it? +----------------------- + +First and foremost, usability and accessibility has to be the foundation from which we design. Luckily, GEL elements, components, and patterns are all user tested and accessibility tested. Bonus! However, it’s important to remember that context can change many things as can the way products are built in code, so user and accessibility testing should always be part of your project. + +UX designers can access component and pattern rationale through Confluence, use tools like the Forms paper prototyping sheets to rapidly prototype low fidelity user journeys and screens, and see forms components and patterns in action through [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform). + +UI designers can access design assets from the [Figma Libraries](/articles/figma-libraries), and get up to speed on our brand and design standards such as [Typography](/articles/typography) and [Colour](/articles/colour) elsewhere on the GEL website. Assemble high quality mock-ups and prototypes using the [Figma Libraries](/articles/figma-libraries) while [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform) is another useful tool for seeing the behaviour of components and patterns. + +Developers can go straight to the [design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system) to read implementation guidelines and access code, while also referencing [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform), our interactive demonstration of common form patterns. [ProtoformCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/protoform) provides best-practice consideration for responsive layout, WCAG accessibility compliance, user experience and brand requirements. + +I want to design the interface my way +------------------------------------- + +The GEL tools are not about stifling creativity, they are about creating opportunity and ensuring scalability and compliance. There’s no denying the benefits for the business and customer of reusing design and code and by doing so you’re freeing up yourself and your team to solving other more important problems or adding value elsewhere in the experience. + +GEL elements, components, and patterns look and behave the way they do because they factor in so many criteria to be useful across multiple scenarios and multiple brands. The more the design system is used on your project, the more efficiencies you inherit, and the more risk is reduced. + +I’ve got a really cool idea, can I use it? +------------------------------------------ + +Sure! While we actively encourage use of the design system, it’s up to your team to decide to deviate, however there are a few things you should be aware of if you decide to do so. + +Consider these things first: + +* What customer problem are you trying to solve? +* Is there an existing component or pattern to serve this need? +* Have you considered other ways to solve the problem other than through the interface +* Is it scalable? +* Is there scope for a new design in your project? +* What is the cost to build? +* How much time will it take to build? +* Does it integrate with existing system architecture? +* Is this of value to the customer or just a ‘cool new thing’? + +And when it comes to designing for enterprise, is it: + +* Responsive +* Reusable +* Multi-brand +* Accessible +* Meeting usability standards + +How do I suggest an improvement or iteration? +--------------------------------------------- + +Improvement is what we’re all about. Build, test, deliver, learn, repeat, right? If you feel you have a better way of doing something or have a new pattern for consideration by all means let us know. + +[Contact the GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au) + +Reframing your approach +----------------------- + +Designing with a design system isn’t hard. When you realise by designing with a design system you’re contributing to something bigger than a single page or screen, it all makes sense. + +This all results in consistent customer experiences increasing NPS, brand recall and integrity. + +It’s about shifting your priorities and focus from solving isolated problems to owning the solution from a holistic approach. \ No newline at end of file diff --git a/apps/site/src/content/articles/figma-libraries.yaml b/apps/site/src/content/articles/figma-libraries.yaml new file mode 100644 index 000000000..102c54f2f --- /dev/null +++ b/apps/site/src/content/articles/figma-libraries.yaml @@ -0,0 +1,13 @@ +name: Figma Libraries +description: >- + The Figma Libraries are a complete set of multi-brand, accessible design + assets to help you create high quality, consistent, experiences across all our + digital touchpoints. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m4000yam8ifp387nfc.png +smallDescription: >- + Design using cloud based symbols. All the assets you need to create interfaces + with the design system. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663227299/cl82ql8m2000xam8iaw7o4ols.png +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 new file mode 100644 index 000000000..4a0348364 --- /dev/null +++ b/apps/site/src/content/articles/figma-libraries/content.mdoc @@ -0,0 +1,78 @@ +**Figma Library Foundations** +----------------------------- + +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: + +* [GEL WBC ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/oyl5USuOmI86B1BIcrwG3o/GEL-WBC-Components) +* [GEL STG ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/U82PSQ4galbXGMTCqhAkZw/GEL-STG-Components) +* [GEL BSA ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/VpkWqS1jnlYi0HQIoJtjzK/GEL-BSA-Components) +* [GEL BOM ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/pHjPTlwvKBngtAdOk9A8pw/GEL-BOM-Components) +* [GEL RAMS ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/EMqLUSQpDckSaT5VQNYOz0/GEL-RAMS-Components) +* [GEL WBG (GROUP) ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/pKouqjpeCZb0JkuD0V5RwQ/GEL-WBG-(GROUP)-Components) +* [GEL IconsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/5ksudv161S5nYyEGkgkXQa/GEL-Icons) +* [GEL PictogramsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/file/sWRKQTkG8PyNtGNKwlLReo/GEL-Pictograms) +* [GEL Logos & SymbolsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](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](/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. + +**Other Figma Libraries** +------------------------- + +The GEL Figma Library ecosystem also includes libraries that are specific to platforms and sometimes to projects. These Libraries contain more complex components and lay-outs that are made using the GEL Components. This ensures they remain consistent, easy to update and linked to the Design System. There are other libraries that do not have such a strong link to the Design System for reasons usually to do with legacy brand implantations i.e. systems that have not yet been updated to represent the latest brand. + +**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. + +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. + +**The components** +------------------ + +To get an overview of an entire library, you can open and view the library file. To use the components in your design, drag them onto the page via the Assets panel within your file. + +Each component is highly configurable. To achieve all the component states you’d find in the GEL Design System, select the instance of the component and use the Properties panel on the right of the screen to configure. The components also use hidden layers as another way to extend the component configuration (Look for the 'hidden-layer' indicator in the component description). + +Where possible, elements and components are responsive making them easier to resize for each of the breakpoints. There are also some components that have a property for a mobile specific version, this is usually available if the component has different padding or font size at the XS breakpoint. + +**The styles** +-------------- + +The component libraries use Styles to manage colours and some typography. The colour styles are aligned with the [colour palettes](/design-system/foundation/colours) of the GEL Design System. Sticking to these styles (rather than using hex values) will help ensure your design is on brand. It will also allow you to use the Themer plugin to easily switch your design to a different brand. See more about Themer below. + +**Fonts** +--------- + +Read the [Using fonts](/articles/using-fonts) article for information on how we manages fonts. + +**Going multi-brand** +--------------------- + +Sometimes you will be required to produce the same design across multiple brands. A quick way to do this is to use the Figma plugin Themer. It allows you to instantly switch the styles used in your design (colours and fonts) to those of a different brand. Even though there will be some components (logos or pictograms) that will have to be switched manually, this is a very simple process. + +Follow the instructions on the [Themer pageCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.figma.com/community/plugin/731176732337510831/Themer) to install the plugin. We have GEL specific configuration that connects to GEL styles, this requires an **API Key** and **Bin URL** that need to be entered into the Themer admin window. You will find these in the notes of the [Themer set-up videoCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://web.microsoftstream.com/video/825ca04e-973f-4612-848c-c98ef62221df). + +**Updates** +----------- + +As our brands evolve, we’re constantly updating and refining the Figma Libraries. When a component or style has changed, Figma will display a notification indicating that an instance used in the open file has a newer version available. Take care when accepting updates - especially on shared files. We try to ensue that any changes we make will not adversely affect existing instances, however this sometimes can’t be helped and a component might revert back to blank state. Make sure you read the update description, any risky updates will be highlighted. You do not have to apply all updates to existing designs. Any new instance of the component used will automatically use the newest version. + +**Frequently asked questions** +------------------------------ + +### **What if the element I need is not in the Figma Library?** + +The Design System covers the core UI elements common to most user interfaces. The majority of the elements you need should be available. However, every project is different and sometimes requires bespoke elements that are not available in the Design System. If that’s the case, of course you can create what you need, just use the brand colour palette, and don’t 'adjust' existing components. + +If you are trying to create something new, our general recommendation is to check with other projects or teams to see if they have done something similar. If the problem has already been solved elsewhere, don’t re-invent the wheel. Also, if this is something that other projects require, it might be candidate for a new Global GEL component. Read more about [how to request a new component.](/articles/collaboration-is-key) + +### **Who do I contact for help?** + +If you have any questions or want to share ideas, please [contact the GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au). There’s also loads of information and resources in the [GEL site](/) and in the [Teams Figma channelCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://teams.microsoft.com/l/channel/19%3af1d8ec67a5744fc2837dbeef6efd2720%40thread.tacv2/Figma?groupId=a39efb9d-1df0-4986-b16a-157876ad82a5&tenantId=57c64fd4-66ca-49f5-ab38-2e67ef58e724). \ No newline at end of file diff --git a/apps/site/src/content/articles/gel-design-approach.yaml b/apps/site/src/content/articles/gel-design-approach.yaml new file mode 100644 index 000000000..d9f9ad38e --- /dev/null +++ b/apps/site/src/content/articles/gel-design-approach.yaml @@ -0,0 +1,14 @@ +name: GEL design approach +description: >- + The greatest value the GEL Design System can offer is re-use and consistency. + We provide quality, re-usable solutions so that you have more time to focus on + the customer experience. Using the GEL Design System also increases the + consistency of our brand experiences across the entire brand ecosystem. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667099621/cl9us2ju9000wf58ie0m958i4.png +smallDescription: >- + Adopt the design system with confidence. We think from big picture to minute + detail. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667099383/cl9urxfbl000vf58i6q0d9q45.jpg +author: marita-purins diff --git a/apps/site/src/content/articles/gel-design-approach/content.mdoc b/apps/site/src/content/articles/gel-design-approach/content.mdoc new file mode 100644 index 000000000..f01f05dec --- /dev/null +++ b/apps/site/src/content/articles/gel-design-approach/content.mdoc @@ -0,0 +1,73 @@ +Think big picture +----------------- + +Each feature, function or experience delivered by a project is only part of the customer journey. If the design isn’t consistent with other touch-points experienced by the customer, the journey has become fragmented, and the brand experience diluted. + +We think big picture, providing a foundational brand design and a core set of components that have been created with all touch-points in mind. When using the latest version of the design system, you can deliver consistent experiences in any touch-point across the digital ecosystem even when delivering in project siloes. + +Think about how your design stitches together with other parts of the customer journey. Where will customers come from before they reach your design solution and where will they be directed afterwards? + +Reflect the brand intent +------------------------ + +Consistent brand experiences increase brand recognition, authenticity and trust. All our digital brands have been designed in alignment with the master brand. Using the GEL assets, designers can create consistent customer journeys across our digital landscape while maintaining the integrity of the brand. + +When putting together your designs, ensure you follow the guidelines and keep an eye on how your design will impact overall the integrity of the brand. + +Plan to scale +------------- + +We take a multi-brand, responsive approach to creating global components. + +These components are product agnostic allowing them to be re-used in multiple applications throughout the customer journey. + +Using the GEL Design System, projects can design a single solution and output it across all 6 Group brands, across any device and operating system. + +An added benefit of taking this responsive approach is to future proof our solutions, meaning that when a new smart device hits the market, our banking solutions can be made available faster. + +When designing a new feature or experience, try not to design yourself into a corner. Think about how your design will play out across brands and on different viewports. + +Be modular +---------- + +Taking a modular design approach, we can break a component down into an independent part which can be used across multiple contexts. Designing and developing components this way supports teams using the components to maintain a lean solution where re-use is optimised simplifying future change through incremental upgrades. + +Taking a modular approach also increases our speed to market, supporting teams to more rapidly assemble and deliver new experiences. + +Consider all customers +---------------------- + +It’s important that we deliver our brands and experiences inconsideration of all our customers’ needs, including those with impairments that need to be accommodated in a digital experience. + +We put each component and digital asset through a rigorous accessibility testing process during brand and visual design, component interaction design and component development to meet the latest WCAG standards. + +Accessibility is a requirement that should be weaved into the core activities of a project from inclusive design to development and testing as all team decisions have the potential to impact accessibility at all stages of product delivery. + +The Westpac Group takes a digital first approach to brand design which significantly increases our ability to create accessible brands increasing our ability to design more accessible experiences and deliver the brands as intended not just in the digital ecosystem but every channel. + +The GEL React component code provides compliant accessibility features tested with assistive technologies. When the code is re-used, projects benefit from an out of the box accessible component that reduces the volume of accessibility concerns. + +Teams can then focus on and invest in testing the overall experience against accessibility standards. + +Stay lean +--------- + +When adding elements to the design system we take a rigorous, best practice approach to interface design and development. This ensures ­­we provide high quality, robust, re-usable assets, making it easier to design, build and maintain our digital products and services. + +Staying lean means that change is easier and design and tech debt is reduced awarding time to focus on continuously improving our customer experiences. + +Quality is important +-------------------- + +To ensure that we represent our brands with the highest visual integrity, we carefully design each asset to accommodate a multi-brand scenario. Every design decision we make no matter how small, considers each of our brands. A rigorous testing process and relentless attention to detail ensures that every asset is perfectly crafted to a world class standard. + +Optimise for build efficiencies +------------------------------- + +We think about the things that are important to developers to meet their goals. We aim to increase performance and simplify maintainability. + +Providing a single source of code for development builds to maintain multiple brands and devices, makes change much simpler for our development teams. + +We style dynamically using code**.** By using code to style the components, we can keep things lean and increase performance of our digital experiences. + +We also use 2 CSS font stacks. One for the brand font and one for the body font. The font stack allows the device to select the most appropriate font to render for the device. This increases legibility and performance. Using a font stack also supports us to translate our solutions into multi-lingual experiences with less effort. \ No newline at end of file diff --git a/apps/site/src/content/articles/iconography.yaml b/apps/site/src/content/articles/iconography.yaml new file mode 100644 index 000000000..e8ee10b87 --- /dev/null +++ b/apps/site/src/content/articles/iconography.yaml @@ -0,0 +1,14 @@ +name: Iconography +description: >- + Our global visual language is shared across all our brands. We have a library + of carefully crafted user interface icons for use in our designs. This article + discusses the iconography design principles and provides usage guidelines to + ensure that we design icons consistently and use them correctly. For + information about embedding, sizing and styling icons please refer to the + Design System Iconography. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663138229/cl819k5u60009am8i687f9lc2.png +smallDescription: Use our global visual language to communicate and engage with customers. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1690447987/clkkx311z00034g8i2jjuhsdh.png +author: justin-spencer diff --git a/apps/site/src/content/articles/iconography/content.mdoc b/apps/site/src/content/articles/iconography/content.mdoc new file mode 100644 index 000000000..33870a003 --- /dev/null +++ b/apps/site/src/content/articles/iconography/content.mdoc @@ -0,0 +1,176 @@ +Usage Guidelines +---------------- + +These guidelines are designed to assist you in the correct use of icons. We have a library of almost 300 icons for use in your designs. For those using Figma, every icon has now been tagged with relevant keywords making it easy to find exactly what you're looking for. Please note: These guidelines are high level and may be updated to cater for evolving design and business requirements. If you have any questions or need help please don’t hesitate to contact the [GEL team.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au) + +### When to use icons + +User Interface icons are designed to communicate meaning and aid navigation. They can symbolise a command, file, device or directory. They’re also used to represent common actions like search, print and edit. First and foremost icons are functional, designed to be legible at very small sizes we use them in UI components to assist usability. Icons are not intended to be used as embellishment where the sole purpose is to make something look pretty. + +### Icon styles + +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. + +![Image showing filled and outlined icons](https://res.cloudinary.com/westpac-gel/image/upload/v1690446706/clkkwblfl00004g8i4c575yvt.png) + +Icon variants, filled and outlined + +Filled and outlined variants are also useful when creating menus where the filled variant can represent the selected state, however its important to note that not all icons can have a fill (eg. link) and not all icons can have an outline (eg. accessibility). It's important to consider this before designing a menu that uses icons to indicate selected and unselected states. + +![Image showing examples of icons that can't be filled.](https://res.cloudinary.com/westpac-gel/image/upload/v1693977523/clm7ah9ii0004vd8i5ukg1r0j.png) + +Examples of icons that can't be filled + +![Image showing examples of icons that can't be outlined.](https://res.cloudinary.com/westpac-gel/image/upload/v1693977532/clm7ahghh0005vd8ig3tybeky.png) + +Examples of icons that can't be outlined + +### Icon labels + +Icons should always be accompanied by a label, however in some cases where the icon has become a globally recognised symbol, a label may not be required. For example a house is now the globally recognised symbol for home. + +### Icon overload + +Icons should be used sparingly. Too many icons add clutter and confusion to the interface. The use of UI icons purely as page embellishment is also not recommended, Pictograms would be a better choice in this scenario. + +### Icons v Pictograms + +The GEL design system also provides a library of Pictograms. Unlike icons Pictograms are not intended to aid navigation or represent common actions like search and print. The primary purpose of Pictograms is brand embellishment. They’re designed to enhance the brand at specific points in the customer journey, we call these “brand moments”. Given their primary function Pictograms are not designed to be used at small sizes. They’re not drawn on the pixel grid and depending on the brand they may use colours that are not accessible. As a result Pictograms must always be larger than 36px. For more information and downloads please refer to the Design System [PictogramsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/pictograms?b=WBC) + +![Image showing the icon sizing chart. Available sizes are: 12, 18, 24, 36 and 48 pixels.](https://res.cloudinary.com/westpac-gel/image/upload/v1690447333/clkkwp1dg00014g8iashk6m6s.png) + +Icons should only be used at these sizes + +![Image showing the Pictogram sizing chart. Pictograms should only be used above 36px](https://res.cloudinary.com/westpac-gel/image/upload/v1690447449/clkkwrixm00024g8i7phj2zw3.png) + +Pictograms should always be larger that 36px + +Design Principles +----------------- + +If you cannot find an icon in the library to suit your needs it’s likely that you’ll need to create your own bespoke icon. The principles below explain how to design and craft icons correctly - aligning to the grid, using the correct corner radius, stroke widths etc. Note: before deciding to design new icons we recommend contacting the [GEL teamCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:gel@westpac.com.au) or speaking to your Principle as we may be able to assist with finding a suitable library icon. + +### Simplicity + +Simplicity is the key design requirement for UI icons. Using simple geometric shapes each icon in the library is reduced to its minimal form, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the vector file size by limiting the number of points required to draw the graphic. + +### Icon grid + +The icon grid has been developed to facilitate consistency while also offering a certain amount of flexibility. All the icons in this library have been designed and crafted on a 24px grid. This allows us to use the icons at the following sizes: XSmall (12px), Small (18px), Medium (24px), Large (36px) and XLarge (48px). Using the icons at these pre-defined sizes will ensure that horizontal and vertical edges align with the pixel grid, with the exception of the Small (18px). This results in a sharper more legible graphic. If icons are not used at these intended sizes they will no longer align to the pixel grid which will result in a blurred effect. Using a fixed set of icon sizes also helps us to maintain consistency across all our applications. + +![The 24px pixel grid at one thousand percent magnification.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572062/cl88fupn9001cam8i7zrbcu4a.png) + +1000% zoom + +![The five icon sizes, 12, 18, 24, 36 and 42 pixels](https://res.cloudinary.com/westpac-gel/image/upload/v1663572105/cl88fvn4e001dam8ie77vfy1c.png) + +100% actual size + +### Icon anatomy + +Legibility, consistency and simplicity are key design principals for all UI icons. We use simple geometric shapes to construct icons. This gives them a unified symmetry and visual consistency. + +![The six aspects of an icons anatomy. Fill area, Counter area, Corner, Stroke, Counter stroke and bounding area.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572294/cl88fzomk001eam8ibfnv8odm.png) + +Key aspects of an icon + +![Each of the six aspects of an icons anatomy.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572302/cl88fzunq001fam8i284s4twi.png) + +800% zoom + +### Fill area + +To ensure icons maintain alignment with the pixel grid at 24, 36 and 48px, it is important to use even numbers for both the position, width and height of shapes (positive and negative). + +![The use of even numbers to ensure that icons can be scaled correctly.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572494/cl88g3z6f001gam8i276jhqo7.png) + +Do - use even numbers + +![demonstration of why not to use odd numbers. ](https://res.cloudinary.com/westpac-gel/image/upload/v1663572500/cl88g43sz001ham8i3x56d83z.png) + +Avoid - using odd numbers + +### Corners + +A 2px corner radius is used on the fill area of the icon. Interior corners in the counter area should always be square. Do not round the corners of strokes that are 2px wide or less. + +![How the corner radius works on the fill area](https://res.cloudinary.com/westpac-gel/image/upload/v1663572714/cl88g8p4l001iam8i0eg93tj7.png) + +Fill area with 2px corner radius + +![How the corner area does not use a corner radius.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572720/cl88g8tqr001jam8i3kszd6ek.png) + +Counter area - no corners + +### Strokes + +Always use a 2px width for strokes and counter strokes. This includes curves and angles, interior and exterior. + +![The stroke and counter stroke width](https://res.cloudinary.com/westpac-gel/image/upload/v1663572956/cl88gdv6j001mam8i4zxwc9wj.png) + +Strokes and counter strokes are 2px + +![The stroke width on curves and angles](https://res.cloudinary.com/westpac-gel/image/upload/v1663572962/cl88ge09h001nam8i5nnm3dlw.png) + +Curves and angles are 2px + +![Example 1. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572970/cl88ge6uu001oam8ihfeea8qi.png) + +All strokes should have 90° square ends + +![Example 2. The end of a stroke at 90 degrees.](https://res.cloudinary.com/westpac-gel/image/upload/v1663572980/cl88gedy1001pam8iazws3qeg.png) + +All strokes should have 90° square ends + +### Artistic licence + +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. + +![An example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573097/cl88ggwvt001qam8ibkw672ef.png) + +Reduced border radius for wheels + +![Another example of where these guidelines may not work.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573106/cl88gh3g0001ram8i9sxthmfa.png) + +Uses an odd number for legs + +### Best practice + +Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications. If you have to create additional icons for your project here are some dos and don’ts. + +![The correct use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573350/cl88gmbly001sam8if1nx9agu.png) + +Do - use consistent stroke weights and squared stroke terminals + +![The incorrect use of strokes](https://res.cloudinary.com/westpac-gel/image/upload/v1663573356/cl88gmg9a001tam8i2ihk6hny.png) + +Don’t - use inconsistent stroke weights or rounded stroke terminals + +![The correct geometric graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573365/cl88gmniv001uam8i7jfa0yot.png) + +Do - make icons simple, bold, flat shapes + +![The incorrect three dimensional graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573371/cl88gms2x001vam8igy9e4rzl.png) + +Don’t - add unnecessary dimension + +![The correct geometric, simple graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573383/cl88gn0yy001wam8idnvf2qmp.png) + +Do - use simple geometric shapes to construct icons. This adds clarity and legibility. + +![The incorrect organic graphic style](https://res.cloudinary.com/westpac-gel/image/upload/v1663573389/cl88gn5t0001xam8i54mp5lce.png) + +Don’t - be too literal. Avoid adding complex details and organic shapes. + +![How icons align to the pixel grid](https://res.cloudinary.com/westpac-gel/image/upload/v1663573396/cl88gnbe0001yam8i8pprdypb.png) + +Do - use icons at one of the pre-defined sizes. Set sizes and position icons ‘on the pixel grid’. + +![What happens when icons are scaled and no longer align with the pixel grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1663573403/cl88gngdh001zam8i37xwbri1.png) + +Don’t - scale icons to random sizes. This will cause them to fall off the grid and blur. + +SVG icons +--------- + +With the release of the GEL Design System v2.0 we superseded the icon font in favour of an SVG (scalable vector graphics) implementation. Using SVGs ensures the highest quality rendering on all devices both now and into the future. SVGs can also be styled using code avoiding the need for multiple versions of the same icon. SVGs also comply with AA accessibility requirements. This is a more flexible and accessible approach. For more technical information (embedding, styling, sizing etc) and to download the SVG icons please refer to the Design System [Iconography.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/icons) \ No newline at end of file diff --git a/apps/site/src/content/articles/motion-principles.yaml b/apps/site/src/content/articles/motion-principles.yaml new file mode 100644 index 000000000..f7e92f4cb --- /dev/null +++ b/apps/site/src/content/articles/motion-principles.yaml @@ -0,0 +1,12 @@ +name: Motion principles +description: >- + It can be difficult to deliver consistent experiences that feel on-brand, are + accessible, and serve a purpose without following some guiding principles. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1687413365/clj6qckw70025bn8ibcno3r5j.png +smallDescription: >- + Use these principles to create experiences that feel on-brand, are accessible, + and serve a purpose. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1687412203/clj6pnoev0022bn8ibs0s0wk6.png +author: mark-marshall diff --git a/apps/site/src/content/articles/motion-principles/content.mdoc b/apps/site/src/content/articles/motion-principles/content.mdoc new file mode 100644 index 000000000..3c7e31bb8 --- /dev/null +++ b/apps/site/src/content/articles/motion-principles/content.mdoc @@ -0,0 +1,34 @@ +Principles for designing with motion +------------------------------------ + +### It must serve a purpose + +What’s the user value of adding motion into your solution? + +### It must assist but never be relied upon—the rest of the design must work without it + +Don’t make your message or experience dependent on motion as it can be reduced at the OS and browser level. + +### It must not slow down user progress or task completion + +Users shouldn’t have to wait for your animation to play out, the majority of the time they will be task driven. + +### It must feel on-brand + +Are you using the right colours and fonts? Does it align with the overarching brand experience? + +### It must feel cohesive with other micro-interactions + +Making something that feels at odds with existing interactions will be disruptive and impact trust in the brand and application. + +### It must consistently perform the same task and be designed for reuse + +If there’s a defined micro-interaction for something, use the same mechanisms and reuse as much as possible. + +### Design an accessible fallback for “reduce motion” capability + +Reduce motion functions in operating systems and browsers help those with vestibular disorders in particular. A fallback needs to be designed from the beginning. + +### It must encourage positive behaviour and provide delight + +Use opportunities to provide delightful moments, and promote positive feedback and behaviour. \ No newline at end of file diff --git a/apps/site/src/content/articles/multi-brand-made-easy.yaml b/apps/site/src/content/articles/multi-brand-made-easy.yaml new file mode 100644 index 000000000..ba951d537 --- /dev/null +++ b/apps/site/src/content/articles/multi-brand-made-easy.yaml @@ -0,0 +1,15 @@ +name: Multi-brand made easy +description: >- + We’re a truly multi-brand organisation, which is why being able to create + individually branded customer experiences while re-using our technical + knowledge, digital assets and business processes is so important. This article + explains how we achieve this using the GEL Design System, its tools and + resources. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663137798/cl819awzl0007am8i6n47fcgj.png +smallDescription: >- + Create individually branded customer experiences while re-using our technical + knowledge, digital assets and business processes. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667114301/cl9v0t61d000zf58ihp0j1odr.jpg +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 new file mode 100644 index 000000000..4aed0a361 --- /dev/null +++ b/apps/site/src/content/articles/multi-brand-made-easy/content.mdoc @@ -0,0 +1,98 @@ +Preface +------- + +Before launching into the detail its important to first understand what we mean by “multi-brand”. + +In 2008 Westpac merged with the St.George Group. Each business in the group had its own unique brand and loyal customer base. Years of work had gone into establishing this heritage, building trust and forging relationships. For Westpac the opportunity lied in leveraging these brands and growing their business. + +So we needed a solution that would not only maintain the consistency of all these brands but also facilitate an efficient workflow that would ensure the brands integrity and authenticity was not lost or diluted both now and as they evolve into the future. + +Several years later on the cusp of the digital revolution the GEL Design System was born. For almost a decade this system has been the foundation of our digital brands. Everything in the system can be used by all our brands ensuring **quality** by empowering us to deliver on our brand promises, **efficiency** through a single source of truth and **consistency** through design clarity and direction. Using this approach has given us the capacity and confidence to focus on solving real business problems and to design delightful customer experiences. + +The 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. + +![Graphic showing the design systems 4 sub-systems; Colour, Typography, Iconography and Layout.](https://res.cloudinary.com/westpac-gel/image/upload/v1667257636/cl9xe5c2t0015f58i4u4yd807.png) + +### Colour + +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. + +![Graphic to show the different colours that each brand use for their Primary colour.](https://res.cloudinary.com/westpac-gel/image/upload/v1665358951/cl91zpy5o000rrq8ih082f3oh.png) + +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. + +For more in-depth information on the colour system see the article [Colour](/articles/colour) + +### Typography + +The typography system works in the same way as the colour system. Each brand is assigned two variables we call; _Brand font_ and _Body font_. + +When we reference these fonts in our applications we don’t specify the actual font name. Instead we reference the fonts variable name. + +For example, the _Brand font_ in St.George (fig. 2) is Dragon Bold, Bank of Melbourne’s _Brand font_ is LL Brown (fig. 3). Our application only needs to know that the _Brand font_ is being used, the actual typeface used to display the text is irrelevant. + +![Graphic to show what the St.George brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939880/cl8v27szo000nrq8ie1ogbach.png) + +Fig. 2 + +![Graphic to show what the Bank of Melbourne brand font looks like.](https://res.cloudinary.com/westpac-gel/image/upload/v1664939898/cl8v286s6000orq8ihhl2dkch.png) + +Fig. 3 + +Using variable value pairs to separate the visual layer from the code allows us to theme our applications dynamically which saves time, increases consistency and vastly reduces the margin for error. + +For more in-depth information on the typography system see the articles [Typography](/articles/typography) and [Using fonts.](/articles/using-fonts) + +### Iconography + +Also referred to as our _Global Visual Language_ the iconography system is a library of carefully crafted user interface icons shared by all our brands. + +Designed to aid navigation and legibility each icon is reduced to its minimal form to ensure readability and clarity at small sizes. + +Implemented as SVG (scaleable vector graphics) the icons are both resolution independent and accessible ensuing the highest quality and legibility both now and into the future. + +The SVG format also allows us to dynamically control the styling of the icon which means we can apply the colour system to our icons when we need to switch brands. + +For more in-depth information on the Iconography system see the article [Iconography](/articles/iconography) + +![Graphic to show how an icon aligns to the 24px grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1665119556/cl8y16vr3000prq8i58486coh.png) + +![Graphic to show the different sizes of icons available in the design system.](https://res.cloudinary.com/westpac-gel/image/upload/v1665119583/cl8y17gmw000qrq8id59z6n51.png) + +### Layout + +Layout is arguably the most powerful of these sub-systems in part because it uses a mathematical formula based on the number 12. We chose 12 because it’s a highly composite number, divisible by 2, 3, 4, and 6, making it much more flexible than its neighbours. Every aspect of the GEL Design System uses a multiple or divisor of 12 from the number of columns in the responsive grid to the height of a button. This is the key to creating a consistent scale and rhythm throughout the customer journey. It also speeds up the design process and reduces the margin for error during build. + +For more in-depth information on the layout system see the article [The Grid](/articles/the-grid) + +Embellishment +------------- + +In order to differentiate themselves from the competition brands continually strive to be unique. This often conflicts with the idea of a multi-brand design system which focuses on re-use and automation to increase efficiency, consistency and quality. + +To cater for this (in digital) we use a layered approach which separates content that can be styled dynamically (using the design system) from content that is brand specific. We call this the embellishment layer. + +The embellishment layer makes up approximately 10% of the application. It consists of bespoke graphics, animations, and brand moments typically used in home pages, landing screens, onboarding flows etc. This type of content can not (and should not) be systemised. It’s our opportunity to provide a strong visual link to the master brand across all mediums from point of sale to TVC’s. + +The remaining 90% of our applications are made up of hundreds of highly functional screens where customers are typically completing tasks such as applying for a credit card or making a payment. Our main focus here is the customer experience. This is where the power of the design system comes into its own. Not only does it provide tools and resources to quickly design and build these applications but it also provides the ability to roll them out in all brands at the flick of a switch. + +In summary; The design system can re-brand 90% of your application instantly. The remaining 10% is unique, brand specific content that should be carefully considered to cater for each brand individually. + +Tools +----- + +As mentioned, the GEL provides a suite of highly crafted tools and resources. Available to everyone in the organisation these assets are designed to assist you in the creation of amazing digital experiences. + +For designers there's the [Figma Libraries.](/articles/figma-libraries) A complete set of multi-brand, accessible design assets to help you create high quality, consistent, experiences across all our digital touch-points. + +For developers there's the [Front End Development Framework.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system) This extensive (React) code base is a mirror image of the Figma library. All assets are categorised and labeled in exactly the same way to ensure that we're all speaking the same language. + +Both the Figma Library and the FED Framework use automated multi-brand features to leverage the power of the Design Systems theming capability. Not only does this automation significantly reduce the time and effort required to roll out an experience across all our brands it also removes the margin for error and maintains consistency throughout the customer journey. + +A digital first brand +--------------------- + +The design system has been so successful it now influences the design direction of all Westpac Group re-brands. From accessible colour pallets to font pairing, every brand is mapped to the system. This momentous cultural shift towards a digital first brand can be largely attributed to the design system and it’s suite of powerful sub-systems, tools and resources. \ No newline at end of file diff --git a/apps/site/src/content/articles/patterns.yaml b/apps/site/src/content/articles/patterns.yaml new file mode 100644 index 000000000..aed4c1bcd --- /dev/null +++ b/apps/site/src/content/articles/patterns.yaml @@ -0,0 +1,18 @@ +name: Patterns +description: >- + UX and UI patterns, are recurring design solutions and best practices that + address common problems and challenges in user interface and interaction + design. These patterns have evolved over time as our designers and researchers + have identified effective ways to enhance the user experience and solve + specific usability issues. Our patterns serve as guidelines and templates for + designing user interfaces, making it easier for projects to create intuitive + and consistent designs that contribute to a more cohesive customer experience + across our entire digital channel. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695970092/cln48sxiz002qvd8iblpm5zvt.png +smallDescription: >- + A library of tried and tested patterns to help you quickly create more + consistent digital experiences. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1695697952/clmzqrzyz001nvd8i064s69ad.png +author: digital-experience diff --git a/apps/site/src/content/articles/patterns/content.mdoc b/apps/site/src/content/articles/patterns/content.mdoc new file mode 100644 index 000000000..9f81215ac --- /dev/null +++ b/apps/site/src/content/articles/patterns/content.mdoc @@ -0,0 +1,29 @@ +We have a range of patterns across multiple projects and streams of work. Each pattern follows a rigorous design process and is tried and tested before being added to the library. + +Originations +------------ + +Apply these patterns when creating application forms. + +[See the Originations patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/originations-experience) + +Banking +------- + +Apply these patterns when delivering features and experiences in our online banking applications.  + +[See the Banking patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/banking) + +Website +------- + +Apply these patterns when you are delivering a page on the website. + +[https://gel.westpacgroup.com.au/articles/websiteCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/website) + +Notifications +------------- + +Apply these patterns when you are delivering a message to customers using our notification channels.  + +[See the Notifications patterns.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/articles/notifications) \ No newline at end of file diff --git a/apps/site/src/content/articles/the-grid.yaml b/apps/site/src/content/articles/the-grid.yaml new file mode 100644 index 000000000..a7b9bc005 --- /dev/null +++ b/apps/site/src/content/articles/the-grid.yaml @@ -0,0 +1,15 @@ +name: The Grid +description: >- + In recent years we’ve seen a fundamental shift in the hardware our customers + use to access information and services online. New devices are being + introduced every day. These devices come in a plethora of different screen + sizes and resolutions. We can’t keep creating custom solutions for every + device on the market. What do we do? +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666755403/cl9p34rfz0005u48ig6ub5p67.png +smallDescription: >- + Design flexible, robust layouts for any device, screen size and operating + system. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663138770/cl819vrci000eam8id8qd2k5d.png +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 new file mode 100644 index 000000000..c42f27f7a --- /dev/null +++ b/apps/site/src/content/articles/the-grid/content.mdoc @@ -0,0 +1,101 @@ +**Responsive design** +--------------------- + +Responsive design suggests that a single user interface should respond to the screen size and orientation of the user’s device, by expanding, contracting and re-ordering the elements on the screen. This practice consists of a mix of flexible grids and CSS media queries or more specifically ‘breakpoints’. + +Some designers find the responsive grid difficult to get to grips with especially if they’re not familiar with HTML and CSS. In this article we’ll explain how the grid works and how it will help you design responsive web sites and applications. We’re only going to cover the basics, when you’re comfortable with this the best way to learn more is roll up your sleeves and get stuck in. + +**Yeah but how wide is it?** +---------------------------- + +The first hurdle in responsive design is to accept that you never know the exact width of the browser window (viewport). You’re no longer dealing with specific pixel widths, rather the width of an element is dictated by how many columns it spans. Each breakpoint gives you the opportunity to change the number of columns an element spans (amongst other things). Note: you can still use fixed width elements within your design but you’ll need to keep an eye on what happens to these elements at different viewport sizes. + +**Breakpoints** +--------------- + +A ‘breakpoint’ is a predefined viewport width. The Design System utilises 5 breakpoints. At each breakpoint we have the option to make adjustments to the interface design or layout using CSS. For example, we can adjust how many columns an element should span, the size of the text, its colour, visibility etc. + +This is how we define each of the 5 breakpoints: + +* **XS** \- The Extra Small breakpoint begins at 0px and goes to 575px. (Note: Our minimum supported viewport is 320px) +* **XSL** - Commonly known as the Phablet this breakpoint, begins at 576px and goes to 767px +* **SM** \- The Small breakpoint begins at 768px and goes to 991px +* **MD** \- The Medium breakpoint begins at 992px and goes to 1199px +* **LG** \- The Large breakpoint begins at 1200px and keeps going (Note: We cap this width at 1224px by applying a max-width to the container). + +As shown in the graphic above it’s important to understand that a breakpoint indicates a range value. For example, if you set an element to span 12 columns in XS view this will remain the case while the viewport is between 0px and 575px wide. Once the viewport has reached the XSL breakpoint you now have the option to change how many columns your element spans (amongst other things). + +**Columns** +----------- + +The grid consists of 12 columns (see figure 1). A pre-defined gutter is applied to separate each column. Column widths are defined using a percentage value, this approach is commonly referred to as a “fluid grid”. Using a fluid grid allows us to utilise all available real estate at any viewport size. At each breakpoint we have the opportunity to adjust how content is displayed in the grid. + +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. + +![The different layout options available when using the 12 column grid.](https://res.cloudinary.com/westpac-gel/image/upload/v1666070755/cl9dridp8000ktc8i3uwr61eo.png) + +Figure 1. Using 12 columns offers many more options for layout configurations + +**Column spans** +---------------- + +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. + +![How the layout can change at different breakpoints.](https://res.cloudinary.com/westpac-gel/image/upload/v1666070840/cl9drk7cd000ltc8i5lz82nsz.png) + +Figure 2. Using 12 columns offers many more options for layout configurations + +**Column offsets** +------------------ + +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. + +![How elements can offset and span various columns.](https://res.cloudinary.com/westpac-gel/image/upload/v1666070918/cl9drlvjq000mtc8i1n9jco9g.png) + +Figure 3. Column offsets + +**Nested grids** +---------------- + +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. + +![How nested grids work.](https://res.cloudinary.com/westpac-gel/image/upload/v1666070960/cl9drmrm7000ntc8ihxqwdojh.png) + +Figure 4. Example of a nested grid + +**Design assets** +----------------- + +The [Figma Library](/articles/figma-libraries) provides templates showing the grid at all 5 breakpoints. These templates are a good starting point but while you’re designing bear in mind that the viewport could be anywhere between these sizes. + +**Collaboration** +----------------- + +Responsive design is difficult. The days of doing a fixed width design and throwing it over the fence for build are long gone. Creating robust layouts that respond elegantly to any device requires real collaboration between both designer and developer. The designer isn’t going to visualise what happens to every element at every possible viewport. Some things will be missed; some things may not work as expected. Working with the developer these issues can be identified and fixed very quickly. + +**Frequently asked questions** +------------------------------ + +#### **Do I need to know HTML and CSS?** + +Not really but it certainly helps if you do. This article only covers the basic principles. The best way to get your head around the grid is to get stuck in and have a play. + +#### **Do I design mobile first?** + +When responsive design took off it quickly became apparent that designing mobile first was the best approach. Designing for the smallest viewport and working up would seem like the obvious thing to do. However, in our experience this approach also comes with drawbacks. Designers often focus too much on the mobile (XS view) and struggle to make their mobile designs work in the larger views. The same applies when designers focus too much on the desktop (LG view) then struggle to make the design work in smaller views. In reality when designing a responsive interface, designers should consider all breakpoints when making any design decision. + +#### **Do I design for every breakpoint?** + +This depends on your design. Complex layouts will require more rigorous design support. The more design you do upfront the fewer issues you’ll have in build. For large projects, we normally design re-usable components and provide component libraries where each component is designed at all 4 breakpoints. This allows developers to focus on building robust, responsive components that can then be assembled into templates. + +#### **Do I have to use the grid?** + +We recommend using the grid not just because it works well but also for consistency throughout the customer journey. Using the grid will help maintain consistent spacing, scale and rhythm across all our digital touch points. Using the grid also removes a lot of the potential cross browser bugs often encountered when designing responsive applications. + +#### **Can elements break out of the grid?** + +Yes, page furniture like headers, footers, navigation and background images often break out of the grid. + +#### **What about content?** + +You should definitely have an awareness of how your content will appear across all break points. However, designing a content strategy for your responsive design is a whole different topic and beyond the scope of this article. \ No newline at end of file diff --git a/apps/site/src/content/articles/think-responsive.yaml b/apps/site/src/content/articles/think-responsive.yaml new file mode 100644 index 000000000..51699fbfb --- /dev/null +++ b/apps/site/src/content/articles/think-responsive.yaml @@ -0,0 +1,14 @@ +name: Think responsive +description: >- + An increasing number of people are accessing information and services on their + mobile devices. New devices are being introduced every day. We can’t keep + creating custom solutions for every device that hits the market. So, how do we + deal with the situation? +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663226815/cl82qavnr000qam8ig48k4mun.png +smallDescription: >- + Future proof your design to ensure that our customers banking needs are always + catered for, any time, any place. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663911160/cl8e1qqal0000rq8ihn1jcxx1.jpg +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 new file mode 100644 index 000000000..43378038a --- /dev/null +++ b/apps/site/src/content/articles/think-responsive/content.mdoc @@ -0,0 +1,21 @@ +A different approach +-------------------- + +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. + +![Illustration showing different devices and orientations and how this affects the viewport size.](https://res.cloudinary.com/westpac-gel/image/upload/v1666585315/cl9m9v70f0014tc8ih17u372r.png) + +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_ + +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. + +Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive web design requires a more abstract way of thinking. This has given rise to processes and technology such as fluid grids, media queries and breakpoints. These enable us to reformat screens and content effortlessly and are now embedded in the best practice principles when designing and building a digital user interface. + +[Read about the grid and how it helps achieve responsive design](/articles/the-grid) + +[Access the grid from the design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/grid) \ No newline at end of file diff --git a/apps/site/src/content/articles/typography.yaml b/apps/site/src/content/articles/typography.yaml new file mode 100644 index 000000000..1ca2a0f85 --- /dev/null +++ b/apps/site/src/content/articles/typography.yaml @@ -0,0 +1,10 @@ +name: 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: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5k000iam8ib3zxgea6.png +smallDescription: >- + Use the multi-brand typography system to echo the personality and voice of our + brands. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5i000ham8i7wst4zeg.png +author: justin-spencer diff --git a/apps/site/src/content/articles/typography/content.mdoc b/apps/site/src/content/articles/typography/content.mdoc new file mode 100644 index 000000000..454c44375 --- /dev/null +++ b/apps/site/src/content/articles/typography/content.mdoc @@ -0,0 +1,45 @@ +The typography system +--------------------- + +The typography system allows each brand to designate two typefaces: A display font for headings etc. and a body font for editorial and UI elements. Similar to the colour system, a reference (variable) is created for each font; Brand and Body. By using this reference rather than the physical name of the font we can quickly and efficiently implement brand specific typography across multiple applications and brands. + +### The brand font + +The brand font is a crucial part of the digital brand. Correct use of the brand font provides invaluable brand recognition, consistency and authenticity. Incorrect use of the brand font has the opposite effect. + +To differentiate themselves brands typically choose (or create) unique typefaces. These are generally display faces, used for headlines and marketing messages etc. They may also include multiple weights like bold, regular, light etc. We can not guarantee that brand fonts are installed on every users system. To get around this we provide a web version of the typeface. This is known as a web-font. + +### The body font + +The body font is the companion to the brand font and used for all UI elements and body text. This typeface has to be extremely flexible and functional. As a result we encourage brands to use system fonts rather than bespoke web-fonts for the body. There are several key reasons we use system fonts for body text and UI elements: + +1. Page weight and download speeds: Similar to images, web-fonts have to be downloaded. When it comes to online banking every byte counts. Using a system font boosts performance because the browser doesn't have to download any font files. +2. Multi-lingual applications: Our sites and applications are often multi-lingual and include double-byte character sets (Chinese, Japanese, Korean etc). These fonts use thousands of glyphs which creates huge font files. Using system fonts we have automatic access to these character sets when switching languages. +3. Leveraging the smarts: Modern system fonts are specifically designed and created to aid legibility on screen. The geometry, hinting and logic that goes into each glyph works in conjunction with the operating system to ensure that the user always has an optimal reading experience. + +### 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. + +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. + +The brand font stack is also a list of typefaces with the web-font being the first entry and thus taking priority. All other fonts are simply backup system fonts in-case for some reason the web-font is not available. + +### Font weights + +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.** + +![The different font weights available.](https://res.cloudinary.com/westpac-gel/image/upload/v1666139429/cl9eweb04000otc8i5h3k3ep6.png) + +### Type scale + +Our typographic scale has a limited set of sizes that work together to help maintain a consistent scale and rhythm across all digital touch-points. Designers can use these sizes as they see fit however they must consider the brands design direction and guidelines. We also have a few practical rules around the use of type sizes. + +1. Line height: As a rule of thumb we generally use a proportional line height of 1.2 for headings and 1.4 for body text. +2. Responsive text: When reducing the size of headings for use in smaller breakpoints we typically use increments of 6px. For example a heading size of 36px in the sm breakpoint can be reduced to 30px in xs. This simple rule generally works well. + +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. + +![The font sizes available in the design system.](https://res.cloudinary.com/westpac-gel/image/upload/v1666141371/cl9exjwys000ptc8i1ki2fsxh.png) + +[Access the design system fontsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/fonts) \ No newline at end of file diff --git a/apps/site/src/content/articles/using-fonts.yaml b/apps/site/src/content/articles/using-fonts.yaml new file mode 100644 index 000000000..8df65f7ed --- /dev/null +++ b/apps/site/src/content/articles/using-fonts.yaml @@ -0,0 +1,15 @@ +name: Using Fonts +description: >- + Using fonts today is fairly straight forward, however there are some + complexities and requirements that should be addressed before jumping in. This + 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: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1687413009/clj6q4xmg0024bn8i4qjpblt2.png +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: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666932237/cl9s0evvm000ef58iet3e8acb.jpg +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 new file mode 100644 index 000000000..46074481e --- /dev/null +++ b/apps/site/src/content/articles/using-fonts/content.mdoc @@ -0,0 +1,69 @@ +The design system uses 3 specific types of fonts (or font formats) know as; Desktop fonts, System fonts and Web fonts. Each font type serves a specific purpose. + +System fonts +------------ + +System fonts are part of your devices operating system. They’re pre-installed on your computer, phone, watch, fridge etc. In the early days of web, system fonts were badly designed and poorly crafted. Arial and Times were considered the default fonts for any and all web sites. In recent years System fonts have evolved into highly optimised, beautifully designed pieces of software which not only display text but also contain smarts to ensure perfect legibility based on environment and user preferences. + +Desktop fonts +------------- + +Desktop fonts are installed locally on your PC. When you purchase a desktop font you install it manually and it's only available to you. Desktop fonts are used predominantly in design applications such as Adobe Indesign, Photoshop, Illustrator, Sketch, Figma etc. Designers need desktop fonts in order to create mockups, layouts, presentations etc for print and web. + +Web fonts +--------- + +Web fonts are designed for use in websites and apps as a result they are delivered in a format specific to web. Web fonts allow companies to use their brand fonts online. Unlike desktop fonts web fonts are not installed locally on your PC or device. When visiting a website that uses web fonts, your browser will request the font file from the server, load it into temporary memory (cache) and use it to render the typography as intended. Most desktop fonts now have an accompanying web font. + +Licensing fonts +--------------- + +Font files are classed as software, Like any other software package we have to purchase a licence to use it. Font licensing is generally looked after by type foundries. There are many different foundries all of whom use slightly different services, payment models and licence agreements however the requirements are the same: + +### 1: You need a desktop font licence + +Typically brand will engage with the type foundry and purchase an enterprise licence which covers x number of computers. + +### 2: You need a web font licence + +While purchasing a licence to use the desktop font brand will also purchase a suitable web font licence which will permit use on specific domains (e.g. [westpacgroup.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](http://westpacgroup.com.au)) and in specific apps. + +**Important:** When purchasing a web licence all brands must ensure that the licence includes the [westpacgroup.com.auCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](http://westpacgroup.com.au) domain. This will ensure that the web font can be used in the design system which is hosted on the westpac group domain. + +Custom made fonts +----------------- + +Many brands now create their own custom fonts, this not only provides more differentiation but also removes licensing costs. However, this is not a task that should be taken lightly. It can take months if not years to design and craft a typeface that will project the personality and voice of the brand, both now and into the future. A poorly designed typeface is easy to spot and could potentially damage the integrity and authenticity of the brand. + +Choosing fonts for your brand +----------------------------- + +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. + +**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. + +Downloading fonts +----------------- + +Similar to music tracks, downloading fonts is not as simple as asking a friend or colleague for a copy of their font file. Most font licences do not allow the distribution of the font files. When you send a font file to a friend or colleague you will most likely be in breach of the licence agreement. As a result we recommend the following: + +### For designers + +As a designer at Westpac the desktop fonts you require should be pre-installed on your Mac or PC. If this is not the case please speak to your project lead who will point you in the right direction. + +* **Westpac** uses Westpac Bold - This font should be installed on your Mac or PC. +* **St.George** uses Dragon Bold - This font should be installed on your Mac or PC. +* **Bank of Melbourne** uses LL Brown - You will need to request this desktop font from brand. +* **Bank SA** uses Aller - You will need to request this desktop font from brand. +* **Rams** uses SourceSansPro - This is a Google font available [here.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://fonts.google.com/specimen/Source+Sans+Pro) +* **Westpac Group** uses Montseratt - This is a Google font available [here.Copyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://fonts.google.com/specimen/Montserrat?query=Montserrat) + +### For developers + +For those who work at Westpac we provide an internal link to the web font files in the [Downloads section of the Design SystemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/downloads). These fonts are stored securely on the internal network and only available to Westpac Group Developers. + +**IMPORTANT:** Projects must ensure that the web fonts they wish to use are licensed for use on all the public domains, sub-domains, and or apps that will host and or display these fonts. \ No newline at end of file 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 new file mode 100644 index 000000000..c3c65a011 --- /dev/null +++ b/apps/site/src/content/articles/value-of-a-design-system.yaml @@ -0,0 +1,13 @@ +name: Value of a design system +description: >- + The value of a design system is well documented and has roots in manufacturing + and construction dating back centuries. In our digital world, and for Westpac + Group specifically, the value is attributed across four core drivers. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1666848438/cl9qmit0m0001f58i7e4bevq2.png +smallDescription: >- + Design systems are helping to shape our digital world so we can deliver + quality experiences faster. +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1667030117/cl9tmott9000jf58ib5ko3252.png +author: marita-purins diff --git a/apps/site/src/content/articles/value-of-a-design-system/content.mdoc b/apps/site/src/content/articles/value-of-a-design-system/content.mdoc new file mode 100644 index 000000000..667ec3b0b --- /dev/null +++ b/apps/site/src/content/articles/value-of-a-design-system/content.mdoc @@ -0,0 +1,24 @@ +The GEL Design System enables our teams to achieve the following benefits, supporting our business to create delightful experiences for our customers. + +Brand consistency +----------------- + +Deliver connected digital journeys and more consistent brand experiences across all customer channels, driving brand consideration & trust. GEL promotes a digital first approach to brand design. + +[Read about how to deliver on brand](/articles/build-strong-brands) + +Accessibility compliance +------------------------ + +Optimise experiences for all customers by meeting our Westpac Group commitment to accessibility standards. Accessibility is embedded into every detail of the GEL’s digital brand design, interface design and coded component. + +[Read about our accessibility commitment](/articles/accessible-by-design) + +Scalability and speed +--------------------- + +Scale a single solution for all devices and for multiple brands and deliver digital products and services to our customers more rapidly through our multi-brand, responsive solution framework. GEL accelerates speed to market. + +[Read about multi-brand design](/articles/multi-brand-made-easy) + +[Read about responsive design](/articles/think-responsive) \ No newline at end of file diff --git a/apps/site/src/content/articles/what-is-gel.yaml b/apps/site/src/content/articles/what-is-gel.yaml index 4c3c6d454..70fbd5f4b 100644 --- a/apps/site/src/content/articles/what-is-gel.yaml +++ b/apps/site/src/content/articles/what-is-gel.yaml @@ -1,8 +1,14 @@ name: What is GEL? description: >- + The Global Experience Language is our single source of truth, providing + everything you need to deliver our brand promises and create consistent, + coherent customer experiences across our entire digital landscape faster, and + with less effort. +thumbnail: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1662699957/cl7u0mgxx000f808i0mjx43a8.png +smallDescription: >- GEL is our Global Experience Language, the foundation for all digital design at Westpac and so much more. -thumbnail: /images/articles/what-is-gel/thumbnail.png -image: /images/articles/what-is-gel/image.png -author: michael-colibraro -publishedAt: 2023-10-19T10:11 +image: >- + https://res.cloudinary.com/westpac-gel/image/upload/v1663303769/cl84049030019am8i5gx94qoy.png +author: marita-purins diff --git a/apps/site/src/content/authors/digital-experience.yaml b/apps/site/src/content/authors/digital-experience.yaml new file mode 100644 index 000000000..dda57b452 --- /dev/null +++ b/apps/site/src/content/authors/digital-experience.yaml @@ -0,0 +1 @@ +name: Digital Experience diff --git a/apps/site/src/content/authors/justin-spencer.yaml b/apps/site/src/content/authors/justin-spencer.yaml new file mode 100644 index 000000000..98d094921 --- /dev/null +++ b/apps/site/src/content/authors/justin-spencer.yaml @@ -0,0 +1 @@ +name: Justin Spencer diff --git a/apps/site/src/content/authors/kate-macdonald.yaml b/apps/site/src/content/authors/kate-macdonald.yaml new file mode 100644 index 000000000..ce32337f6 --- /dev/null +++ b/apps/site/src/content/authors/kate-macdonald.yaml @@ -0,0 +1 @@ +name: Kate Macdonald diff --git a/apps/site/src/content/authors/marita-purins.yaml b/apps/site/src/content/authors/marita-purins.yaml new file mode 100644 index 000000000..cf00bf3a7 --- /dev/null +++ b/apps/site/src/content/authors/marita-purins.yaml @@ -0,0 +1 @@ +name: Marita Purins diff --git a/apps/site/src/content/authors/mark-marshall.yaml b/apps/site/src/content/authors/mark-marshall.yaml new file mode 100644 index 000000000..6a8329b10 --- /dev/null +++ b/apps/site/src/content/authors/mark-marshall.yaml @@ -0,0 +1 @@ +name: Mark Marshall diff --git a/apps/site/src/content/home-page/content.mdoc b/apps/site/src/content/home-page/content.mdoc deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/site/src/content/home-page/index.yaml b/apps/site/src/content/home-page/index.yaml index d4274518b..b133f536a 100644 --- a/apps/site/src/content/home-page/index.yaml +++ b/apps/site/src/content/home-page/index.yaml @@ -1,14 +1,36 @@ articleRows: - layout: 1x1 articles: - - accessible-by-design - what-is-gel + - value-of-a-design-system + - layout: 1x1x1 + articles: + - motion-principles + - patterns + - data-visualisation - layout: 2x1 articles: - - what-is-gel - accessible-by-design + - typography + - layout: 1x1 + articles: + - think-responsive + - multi-brand-made-easy - layout: 1x1x1 articles: - - accessible-by-design - - what-is-gel - - accessible-by-design + - iconography + - colour + - the-grid + - layout: 2x1 + articles: + - using-fonts + - design-with-gel + - layout: 1x1 + articles: + - figma-libraries + - code-with-gel + - layout: 1x1x1 + articles: + - build-strong-brands + - collaborate-for-change + - gel-design-approach diff --git a/apps/site/src/types/article.types.ts b/apps/site/src/types/article.types.ts index 90752d926..9fb469359 100644 --- a/apps/site/src/types/article.types.ts +++ b/apps/site/src/types/article.types.ts @@ -6,5 +6,6 @@ export type Article = { description?: string; image: string | null; name: string; + smallDescription: string | null; thumbnail: string | null; };