Patterns and components are the building blocks used to design our websites and apps.
We cover each pattern in detail; explaining the reasons behind our decisions, as well as general implementation rules and states. Within each component section there is a link to the corresponding component in Zeplin - where you can access the specifications needed to build them.
# For developers
An accordion is a vertical list of headers, users interact to reveal or hide content within them
Provides links back to each previous page the user navigated through, and shows the user's current location
Carousels are used when we want to group content together but save vertical space on the screen
Cells are composed of items containing primary and supplemental actions, which are represented by icons and text
Checkboxes are used when there is a list of options and the user may select any number of choices
Dropdowns are contextual overlays that are used to group together items of data, like delivery or billing addresses
Error states play an important part in helping our customers understand our interfaces
Icon buttons are used when there is a clear and obvious action associated with them, e.g. close.
The overflow menu is a scrollable menu of buttons, often used for information specific to a page or section
Used to divide pages, helping lighten page weight as well as giving the user a sense of where they are on the site
Radio buttons are used when there is a list of two or more options and the user must select exactly one option
Search is a key part of our customer experience - it helps our customers quickly find what they are looking for
Tables are used for displaying simple or complex tabular data - such as the technical speficiation of a TV
Tabs are used to switch between information within a similar context, such as selecting a size and viewing a size guide
Text inputs are individual elements that can be combined together to create form experiences on NBUX.
# For designers
We use a number of Sketch libraries that are linked together to create our designs and components. To download them, you will need access to the following folder:
# NBUX Starter Kit
To get started, you can download a file with the artboards already set up:
Download Sketch File
NBUX Starter Kit
We recommend that this file should be added as a Sketch template, so that new designs can be started with the artboards and grids already set up. To save a Sketch template, just download this file and choose 'Save as Template' from the file menu within Sketch.
# Useful plugins
- Camilo, for switching brands - required
- Stark, for colour accessibility checks - required
- Zeplin, for design handover - required
- Automate sketch - optional
- Renameit - optional
- Styles generator - optional
- Symbol organiser - optional