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. For optimal results align elements to a 4px baseline grid. This works great for mobile (both iOS and Andriod), tablet and desktop. Follow the instructions to get your Grid Settings and shift+nudging to 4px. When your designing you can show/hide the grid to ensure elements align to the baseline grid.

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. Typography is the foundation of great design. Where ever possible I like to make use of the traditional typographic scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72, 80, 96) as mentioned in Robert Bringhust’s book “The Elements of Typographic Style”. It’s a great way to establish a clear hierarchy and vertical rhythm for your project. Note: I’ve added 30px as it’s a huge jump between 24px and 36px :)

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.

Responsive grid system

All design elements align vertically to a 1280px grid. In this example, we have a popular 12 column grid (with a 24px 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 4px baseline grid. This is hugely important for the rapid design/development process.

Elements are always multiples of 4 (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.

Header

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

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.

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.

Data visualisations

Graphs are an excellent way to present data in a more visual way and make it easier for people to interpret data which they might not have completely understood if it was presented in tables.

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.

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.

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.

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.

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.

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 familiar and it easier to scale them proportionately.

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.

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.

Table filtering and pagination

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. Pagination and the ability to adjust the number of results shown allows the user to customise how much/little information is displayed.

Final design

Here’s a quick mock-up of how I intend the final design to look on a MacBook Pro. I find by providing clients photorealistic mockups in context it helps them to visualize with how the finished product will look and it’s intended use.