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.
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.
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.
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.
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.
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.
The header is made up of a number of design elements, which incrementally make user tasks much easier to complete.
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.
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.
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.
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.
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.
Drag and drop
Individual elements (or even whole sections of the dashboard) can be rearranged to suit personal preferences.
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.
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.
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.