The Sketch UI Kit is a complete set of design assets to help you create high quality, consistent, experiences across all our digital brands. Every element in the UI Kit corresponds exactly to the element found in the GUIs.
Sketch UI Kit
By Justin Spencer
Each element in this UI Kit corresponds to the coded element found in the GUIs. They follow the same naming convention and general structure: Module - Element - Style - Size. All the elements in the Sketch file are reusable symbols with overrides for text, icons, multiple states etc. Where possible, elements have been made responsive, making it easier to resize them in multiple grid layouts. This will help designers quickly create responsive designs that align with the digital brand and the GUI framework elements.
Before you start
- Have a good look through the GEL and the GUIs. Familiarise yourself with the GUI framework elements so you understand how to use them properly in your design. There are a lot so take your time. We’ve tried to keep text to a minimum but please read what is says. Don’t just look at the pictures.
- It’s important to understand how the responsive grid works e.g. offsets, spans, nesting etc. This article covers some of some the basic principles.
- Make sure you’ve installed all the fonts in the Global-Assets folder.
- You’ll need the latest version of Sketch to open all this stuff.
- Subscribe to the GEL updates email. We’ll let you know when new versions of the UI Kit are released.
Sketch libraries allow designers to share Symbols across documents and have them update so they are always kept in sync. We don’t currently use a 3rd party service (such as Abstract, Invision Studio, Atomic etc) to auto-sync libraries. The steps below describe how to use GUI libraries and ensure that they sync across all your documents:
- Download the Sketch UI Kit an save it somewhere on your local machine. Do not change the location of the folder or you’ll lose the link to these master files.
- Open Sketch and add the libraries you need via the preferences menu. You’ll now be able to add linked library symbols to any Sketch document.
- When you download an updated Sketch UI Kit replace the existing kit. If you’ve used a linked symbol in your design which has changed in the UI Kit you’ll have the option to update the symbol.
All GUI elements and spacing are based on a unit of 6. This puts visual consistency, scale and rhythm into the design. You’ll notice this in things like the button heights and input field heights etc. We also use a 6px baseline grid to vertically space and size elements.
Using a combination of Symbols, Layer Styles and Text Styles each element in the UI Kit is aligned to our multi-brand design system. Adjusting these styles to reflect the new brand will update all symbol instances in your design.
Using brand embellishments
Each brand in the UI Kit has a Graphics folder. This contains a Sketch file full of graphic elements like ‘Westpac Energy Bars’ and ‘St.George Fraxels’. We use these graphics (sparingly) to form what we call the embellishment layer. This gives each brand a unique, instantly recognisable look and feel. It’s very important that these elements are applied correctly in accordance with the Digital brand guidelines.
Handing over to developers
We currently use Zeplin or InVision 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 GUIs 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 how this can be achieved using Zeplin or InVision.
Building a prototype
We don’t currently specify a tool of choice for prototyping. You can use anything you want. Proto.io and InVision are popular, Axure is also a very powerful prototyping tool. New applications are emerging every day. Whatever floats your boat.
Read more about the Axure UI Kit.
Frequently asked questions
What is the UI Kit?
The Sketch UI Kit is a collection of Sketch files containing all the elements found in the GUIs. These elements are identical to the HTML elements used in the GUI framework. 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, aligned with the GUIs 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 alter the styles you’ll be diluting the digital brand and fragmenting customer journey. Developers will have to apply CSS overrides or re-code elements. This will require additional QA, accessibility testing and regression testing. Consistency, quality and efficiency will be lost which will add time and cost money.
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 GUI framework elements applies to all user interfaces. This is our digital brand. In some cases you may prefer 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 UI Kit?
The GUI framework covers the core UI elements common to most user interfaces. Every project generally requires bespoke components that are not available in the GUIs. If that’s the case, knock yourself out, just don’t reinvent what’s already been done.
Can I add cool embellishment to the UI elements like bevels and textured backgrounds?
Because that’s what designers want to use. Sketch has become the tool of choice for both UX and Visual designers. Right now Sketch has the land grab. Who knows how long this will last.
Who do I contact for help?
If you have any questions or want to share some ideas, please contact the GEL team. If you have a Slack account, join the conversation. There’s also loads of information and resources in the GEL website.