Skip to main content

Design Sketch UI Kit

Sketch UI Kit

By Justin Spencer

The Sketch UI Kit is a complete set of multi-brand, accessible design assets to help you create high quality, consistent, experiences across all our digital touchpoints.

About the Sketch UI Kit

Think of the Sketch UI Kit as a giant sticker sheet. You can grab elements and components and quickly paste them into your designs. There’s also a set of pre-built templates showing all breakpoints and grid layouts.

Every element in the Sketch UI Kit corresponds exactly to the element found in the GEL Design System.

Where possible, elements and components are responsive, making them easier to resize for each of our breakpoints.

Every element in the Sketch UI Kit links to the GEL Sketch Cloud Libraries. See below.

Before you download the Sketch UI Kit we recommend having a good look through GEL and the 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.

About Sketch Cloud libraries

The Sketch Cloud Libraries allow designers to use cloud based assets in all their project files. There are multiple benefits to this.

  • Documents are always in sync with the master brand as updates are automatically pushed to everyone who uses the libraires.
  • There is no duplication of assets as linked symbols are not stored locally in the designers project files.
  • The GEL Cloud Libraries allow designers to swap brands quickly and efficiently by simply linking to a different library.
  • Designers can create their own project libraries which use linked symbols from the GEL Libraries. This avoids duplication and maintains the quality and consistency of our Design System.
  • Sketch Cloud is a free service. It doesn’t rely on third party plugins. It’s native to the software making integration seamless and ensuring continued support and enhancement.

Getting started

Before you start using the Sketch UI Kit and the Cloud Libraries you’ll need to do the following:

  • Install the latest version of Sketch.
  • Install the latest Mac operating system.
  • Install the brand fonts: Chronicle, Dragon, Aller, LL Brown.
  • Install the body fonts: San Francisco
  • Install the Clean up SFUI type plugin for Sketch.
  • Install the Camilo plugin for Sketch.

Step 1. Download the Sketch UI Kit.

Click on the download link in this page. This will ensure that you always download the latest version. You’ll be taken to a GitHub page where you can download the Source code (zip).

Step 2. Create a Sketch Cloud account.

Open Sketch and go to Preferences - Cloud then follow the prompts.

Note: Some internal networks block Sketch Cloud so you may need to access an open network to create an account etc.

Step 3. Request access to the GEL Sketch Cloud Libraries.

Contact GEL with your Westpac Group email address and we’ll add you to the list of users. If you’re a contractor or supplier please ask your Westpac representative to contact us.

Step 4. Add the Cloud Libraries.

When approved you’ll receive an email invite to each library. Click on the link and you’ll be taken to the GEL Sketch Cloud where you can add the libraries.

Using the assets

When you’ve downloaded the Sketch UI Kit and added the Cloud Libraries you’re ready to start designing. You can either copy and paste elements from the Sketch UI Kit (sticker sheet) or add them directly in Sketch by selecting Insert and choosing the required symbol from the list. Please also note that all text styles and layer styles are available in Sketch when the Cloud Libraries are added. We strongly recommend using these text and layer styles while designing as this will ensure that your documents are automatically updated should the styles change.

Syncing elements

As our brands evolve we’re constantly updating and refining the Sketch UI Kit and Sketch Cloud Libraries. When a library element or style has changed Sketch will display a notification instructing you to update your library (in Sketch Preferences). When this is complete Sketch will display another notification and show you what elements have changed. You then have the option to apply the updates to your document.

Going multi-brand

To swap brands simply run the Camilo plugin and select the desired brand. Any linked symbols, text styles and layer styles will be replaced with the new band assets. Elements and styles that don’t link to the Cloud Libraries will remain unchanged. Symbol overrides will also remain unchanged.

Note: There will always be bespoke elements and components in any project. We recommend keeping these to a minimum particularly when the application is multi-brand.

Handing over to developers

We typically use Zeplin, InVision or Sketch Cloud for sharing files with developers. These work okay however they don’t allow us to use the explicit name of an element. For example, when specifying elements from the Design System we refer to them by their name - ‘Striped Row Table’ or ‘Primary Soft Button’. This is all the developer needs to know. The CSS will take care of the styles. We’re still investigating collaboration software however there’s no substitute for the designer developer partnership. If logistics don’t permit this then it’s the responsibility of the designer to ensure that their designs are communicated thoroughly and the integrity of the design is maintained during build.

Building a prototype

We don’t currently specify a tool of choice for prototyping. New applications are emerging every day. Proto.io and InVision are popular, Sketch now offers prototyping and Axure is still a very powerful tool.

Frequently asked questions

What is the Sketch UI Kit?

The Sketch UI Kit is a collection of Sketch files containing all the elements found in the Design System. These elements are identical to the HTML elements. You can use these elements in your designs as and when you need them. A huge amount of time and effort has gone into developing these elements to ensure they’re on-brand, accessible, responsive and work in our multi-brand design system.

Why should I use the Sketch UI Kit?

If you don’t use the Sketch UI Kit or choose to ignore or tweak the elements you’ll be diluting the digital brand and fragmenting customer journey. Developers will have to apply CSS overrides or re-code elements from scratch. This will require additional QA, accessibility testing and regression testing. Consistency and efficiency will be lost which will increase time and costs.

I’m designing a native app. Do I still use the Sketch UI Kit?

There’s no reason not to. The visual style of the elements in the Design System applies to all user interfaces. This is our digital brand. In some cases you may want to use native UI elements. This is OK, just be aware that your design needs to align with the digital brand and it’s part of larger customer journey which must be consistent.

What if the element I need is not in the Sketch UI Kit?

The Design System covers the core UI elements common to most user interfaces. Every project generally requires bespoke components that are not available in the Design System. If that’s the case, knock yourself out, just don’t reinvent what’s already been done.

Why Sketch?

Sketch has become the tool of choice for both UX and Visual designers. Right now Sketch has the land grab, when this situation changes we’ll respond and adapt accordingly.

Who do I contact for help?

If you have any questions or want to share ideas, please contact the GEL team. There’s also loads of information and resources in the GEL site.

Resources – The Sketch UI Kit is available as a ‘.zip’ download hosted on GitHub. We frequently update the Sketch UI Kit files so please ensure you have the latest version.