So why is User Interface Design so important? Well, to be frank, if you don't have great UI, it could be the defining factor in breaking the connection between your customer base and your business or product.
You see, UI is not just about making you look pretty. The fundamental truth about good UI is that it creates fewer problems for your users, increases user-involvement, creates intuitive functionality, and seamlessly connects your customers to the product or service you offer.
In a nutshell, if a user has a great experience and finds what they’re looking for, it generally builds trust in the brand, with the likelihood of the user returning and even recommending it to their network.
How do I create great UI?
This is the foundation that underpins how all your elements work together. It's a methodology for establishing colours, typography, grids etc.
so that the user gains an instant understanding of your visual language. It’s a component-based system similar to 'Atomic Design.' In essence, you build a suite of tools that enable you to solve any user issue. By working this way, you can break entire interfaces down into fundamental building blocks and work up from there.
I was introduced to this methodology a few years back by Brad Frost and I’ve not looked back since. I highly recommend you explore it in more detail, as it’s an invaluable weapon in your arsenal when you’re developing a User Interface. It’s all here
Colour.
The age-old saying that less is more is undoubtedly right when dealing with a colour palette. Using two or three core primary colours will give the design a strong, consistent identity. Allocate complementary secondary colours for specific elements of content (or actions) to build an intuitive visual language.
A great example is of this is Monzo.
An essential thing to consider when choosing your colour arrangements is 'W3C web accessibility'. It’s a set of recommendations for making web content more accessible, primarily for people with disabilities – but also for all user agents, including highly limited devices, such as mobile phones.
It basically means that the colours associated with content need to have enough contrast for the user to read that content effortlessly. Too often, I see this aspect overlooked and the finished article ending up looking nice, but doesn't cater to all users.
So, it’s essential to make the content as readable as possible for all users. Thankfully, there are helpful tools to make sure you are adhering to the guidelines.Â
Have a look at this: contrast checker
Typography.
The core principles learnt at design college still apply. Typography should lead the user on a journey, displaying the content in the relevant order. The only other variable to keep in mind is how that typography will work responsively over different devices.
Creating clear typography rules that indicate primary and secondary material is vital and keep consistency throughout your designs. Thinking about the real estate you have to play with on a desktop as opposed to mobile devices is also essential.
Chances are your H1 headers will change size on the different breakpoints.
That’s fine, just make sure they:
Are associated to the relevant content
Are kept consistent over the specific breakpoint
Coming back to our friend ‘web accessibility’, it’s important to remember body type shouldn’t really fall bellow 14px. And a final thing to consider is contrast. Again, make sure the user can easily identify each word, and they’re all legible against the background colour.
Grids and breakpoints.
When working with a grid, it’s always best to start with your smallest breakpoint and build your pages up from that. Good design on mobile will scale up far easier and, as a rule, when creating my designs (templates) I tend to create one template, but split it over five different breakpoints, so as to cater for all the device screens, from 1400px to 320px.
Always have the users’ needs in front of mind. User experience is everything and a poorly designed UX and UI will ultimately set your website, or product, up to fail.
Think of what is the best component for your user to execute a specific action? A good example of this is the component ‘Tabs’. I hate them. The reason being is that they don’t work on lower breakpoints. Imagine having five. It could work on a desktop. Sort of.
But how do those five tabs work on lower breakpoint? In truth, they just don’t. So by starting mobile-first you’ll automatically disregard this five tab thing for something more appropriate, to keep consistency across the various breakpoints.
This brings me nicely on to my next subject…
Components.
When designing your components, everything you do in UI and UX should be ’User-Centric’
Create every element with the user’s intentions first, making sure you clearly identify the different states of a component.
For example, when dealing with data input, it’s crucial that the user instantly understands.
Think about how this component displays to the user when something needs to be inputted. What does the same component look like when there’s an error, or when the component is disabled?
Building up a library of all the states of your components will help create a clear intuitive interface that the user will understand.
Conclusion:
Make sure the colours you use complement one another, and when using a colour to reflect states, keep it consistent to build a consistent language.
Always have your end-user in mind, clearly identify typographic rules to take the user on a journey signposted as to what they need to understand in sequence, and also think about web accessibility.
Finally, creating a design system is a fundamental process in establishing an interface that will be intuitive and be instantly understood by your user. And designing templates mobile-first will build a consistent experience across all your breakpoints.
I’d love to know your thoughts on the above and below. Comment is free, as they say.