Getting started

By taking a few minutes to set your Sketch preferences up before you start will pay off down the track when it comes to creating consistent user interface elements.

pattern-library-getting-started-01

 

pattern-library-getting-started-02

Typography aligned to a 4px grid

Typography is often overlooked as a powerful design element. Being able to quickly scan text improves the overall design. Typography creates a sense of hierarchy and an order of importance. An example would be when someone picks up a foreign newspaper written in a language they don’t understand, they can’t make out what’s being said but they are acutely aware of the different areas of importance. It’s recommended to keep sentences between 40 – 75 characters in length for optimal readability. If the line length is too short or too long it places additional strain on the reader as they are frequently having to scan their eyes back and forth or may find it hard to keep their place.

pattern-library-typography-traditional-typographic-scale

 

pattern-library-typography-traditional-typographic-scale-4px-baseline-grid

 

Responsive grid system

All design elements align vertically to a 1170px grid. In this example, we have a popular 12 column grid (with a 30px gutter in between). Elements can span single or multiple columns to build-up the contents of a screen. The grid will automatically respond and resize when viewed on a tablet or mobile devices.

Along with a vertical grid, elements also align horizontally to a 10px baseline grid. This is hugely important for the rapid design/development process. Elements are always multiples of 10 (e.g. a button’s height is 40px and it has a space below of 20px). This greatly improves the speed at which a product can be designed and built.

user-interface-library-grid

Form validation & dropdowns

In-line form validation provides users with the opportunity to correct mistakes as they work. Dropdowns allow the user to select one predetermined option.

user-interface-library-form-validation-and-drop-downs

Colour picker

There’s a number of colour selection options. Some are better suited for desktop and others work equally well on both mobile and desktop. The colour wheels give a huge selection whereas the grid-based or dropdown have a very select colour palette.

user-interface-library-color-picker

Steps

Steps are super useful for user flows which require multiple steps to help break the content down into logical chunks. It’s also great at providing user feedback to let people know how far they are through the process and what’s coming up next.

user-interface-library-tasks

Header

The header is made up of a number of design elements, which incrementally make user tasks much easier to complete.

user-interface-library-header

Dashboard and notifications

The dashboard makes it easy to get a breakdown of the various tasks. From an administration point of view, it allows managers to quickly allocate additional resources where required. User feedback is an important feature of any product. If something was unsuccessful it makes sense (if possible) to list the steps required to resolve the issue and get the user back up and running as quickly as possible.

user-interface-library-dashboard-and-notifications

Progress

Users can clearly see the progress of each task. The combination of a bar graph and a percentage allows them to quickly gauge their performance. This element can also be repurposed be used as a simple loading or uploading bar when a solid colour instead of a gradient is chosen.

Drop-down navigation

Multi-level drop-down navigation makes it simple for people to move around within the product. The current implementation support up to three levels deep of navigation.

user-interface-library-drop-down-menu

Filter & calendar

Ranges, check-boxes, radio buttons and simple drop-downs help to filter data based on the user’s individual needs. With the calendar, users can either type in or browse for a specific date.

user-interface-library-form-validation-and-filter

Tooltips & buttons

Support is incorporated right into the system from the ground-up. Tooltips provide a simple way to clarify terms and could even be linked to a dedicated support page for further clarification. The quality (and accuracy) of the support pages are maintained by people viewing the help page and providing valuable feedback. Primary buttons can be combined with a secondary text link if required. Single sign-on buttons (e.g. Facebook, twitter, etc) can be used to streamline the registration process.

user-interface-library-tooltips-and-buttons

Iconography

All icons are designed to fit a 24 x 24px bounding box. By keeping the icons constrained to the bounding box it ensures consistency, makes the icon family feel consistent and it easier to scale them proportionately.

pattern-library-iconography

Drag and drop

Individual elements (or even whole sections of the dashboard) can be rearranged to suit personal preferences.

user-interface-library-drag-n-drop

Predictive search

A contextual search field allows users to specify criteria first and then type to predictively search for information. Filtering options are available by the use of tags (or via the drop-down menu if the person is unsure of the options). The filtering functionality makes it easy for the user to make multiple selections as well. More advanced searches can be performed by using the toggle switch (top right) to display the advanced search criteria.

user-interface-library-search

Table layouts

There are 3 main types (No lines, Simple, Stiped, and Compact). All table layouts are fully responsive and designed to work well on both mobile and tablet devices.

user-interface-library-table-layout-no-lines

 

user-interface-library-table-layout-simple

 

user-interface-library-table-layout-striped

Table filtering

Users have the ability to modify the number of results on a screen, toggle columns on and off and even change the layout of the tables based on personal preferences.

user-interface-library-table-flitering