.png)
Welcome back to Optis Tech Talks, where we let our employees explain some technology they are passionate about. In this fifth instalment, we’re not looking at a technology for once. Instead, we will discuss some basics for designing an application’s user interface (UI) with the user experience (UX) and accessibility in mind. Joining us for this two-parter are Carlo Nomes, one of our JavaScript developers, and Daphne Deckers, one of our full stack developers. As you might have guessed, both are UI and UX enthusiasts as well.
This year, we have several interns starting at both our parent company and partner companies. During those internships, they will create a bunch of applications, but those applications will need a user interface. To ensure that the look and feel of those applications stays consistent and to provide some insight into accessible design, we put together this starter’s guide. In this first part, we’ll look at colours, contrast, fonts and hierarchy.
It’s best to stick to a defined set of colours. An easy way of doing that is starting from a couple of base colours and gradually making these lighter and darker to create palettes. We recommend using a primary colour palette, a neutral palette based on grey scales, and a collection of accent palettes: secondary palettes you can use for errors, warnings, and successes.
Before you start, check if the client already has a pre-defined palette to work with. If they don’t, their logo and website are convenient sources of inspiration. If you have to start from scratch, websites like coolors or huemint can help you decide on a starting point. Once you have determined the primary colour or colours, you can use tools like the Adobe ColorWheel to help you define complementary colours.
Sticking to these palettes ensures that your application doesn’t suddenly contain too many unique colours and keeps things recognisable for users. Be sure to keep the purpose of your application and the customer in mind when choosing a colour and palette.
When determining a colour palette, there is another important aspect to consider: contrast. There’s a wide spectrum of colours to choose from, but you should avoid some with readability in mind. For example, it is a good rule of thumb to avoid using “true black” (hexadecimal code: #000000) since it tends to look unnatural and harsh.
The key is to keep contrasts relatively low to avoid your application being rough on the eyes. One way of keeping track of contrasts is by using the debugging tools built into Google’s Chrome browser. When hovering over an element, Chrome will display a convenient window with some general colour and accessibility information.
Finding and using the correct font is an art of its own, but there’s no reason not to keep it simple. Most of the time, you will need three types of fonts:
-> Sans-serif fonts for basic elements like titles, interactive elements and short format text.
-> Serif fonts for long format text like articles, blogs, and long descriptions.
-> Monospace fonts for texts that need consistent spacing like code snippets or number tables.
Chances are, you won’t even need a serif or monospace font for your application. An easy way of differentiating is by using variations of a single sans-serif font. Fonts often come as a “family” with different “weights”. For example, look at the different weights of Open Sans (cfr. image).
There are a ton of websites out there that specialise in fonts, so explore a bit. We recommend Google Fonts since it has a vast repository of open source fonts you can use in CSS. When choosing a font, keep in mind that they will need to be loaded into your application. For both performance and user experience reasons, we recommend sticking to one font, with some weight variation if necessary.
Hierarchy is key in web design. Users will rarely pore over every single page of your application. Instead, they will quickly scan the page for the information they are looking for. To avoid frustration, keep your pages clean and make sure that essential or frequently needed information stands out.
Visual hierarchy refers to how important the elements in an interface will appear compared to other elements on that page. It is one of the most effective tools you can utilise to make an application truly feel “designed”. There are two ways of going about this.
The first is to create a hierarchy using the size, weight, and colour of the text. Using just the text size is a classic mistake, leading to primary content that is too large and secondary content that is too small. We recommend varying between these techniques and using them simultaneously to achieve the best results.
Another option is to de-emphasise other elements that are less important, as opposed to just emphasising what is important. A quick and easy way of doing this is by softening the colours of inactive menu items, so the active item stands out more.
By looking at colour palettes, contrast, fonts and hierarchy, you should already have a good baseline to start from. However, proper UI and UX design consists of a bunch more aspects. Stay tuned for the next part of this guide, where we’ll look at spacing, buttons, cards and forms!
April 6, 2022
