Typography

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.

NB: Typography uses it’s own separate 4px baseline grid.

user-interface-library-typography

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 a 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

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 a administration point of view, it allows managers to quickly allocate additional resources where required. User feedback is 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.

Steps

When completing a series of tasks users can see how far they are through the process and how many items they have yet to complete.

user-interface-library-tasks

Drop down navigation

Multi-level drop down navigation makes it simple for people to move around within the product.

user-interface-library-drop-down-menu

Form validation & drop downs

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

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

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

Tool tips & buttons

Support is incorporated right into the system from the ground-up. Tool tips 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 is 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

Colour picker

This option is primarily used when creating reports and changing graph colours.

user-interface-library-color-picker

Drag and drop

Individual elements (or even whole sections of the dashboard) can be re- arranged 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

No Lines table layout

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

Simple table layout

user-interface-library-table-layout-simple

Striped table layout

user-interface-library-table-layout-striped

Hover row table layout

user-interface-library-table-layout-hover

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