How to improve your UIs by applying design principles
In this article I’ll be showing you how following basic Design Principles can help you produce much stronger designs.
In this article I’ll be showing you how, by applying basic Design Principles such as Contrast, Space, Repetition, and Proximity correctly, you can easily produce much more consistent, clearer, and stronger UI Designs.
You'll also learn how following these simple, timeless principles can drive user engagement and increase usability too.
Firstly, let's take it waaaay back…
I started my career as a Graphic Designer back in the early 90s, in what was a time of dubious fashion choices. Guilty. All-Night Raves. Guilty (from what I can remember), and religiously watching The Fresh Prince of Bel Air. Guilty, but who wasn’t at that time right?
It was also within this time period that I took my first steps into the world of Print Design professionally.
It was here where I began to learn, and understand Design Principles, and how by following, and implementing these fairly simple rules I discovered that I could create much more clearer, stronger, and consistent artwork.
Principles, and Rules, which to this day have not changed, and are still, if not more so, relevant when applied to UI Design.
Anyways, I’ve seen a gazillion articles listing the key Design Principles, without actually showing you how to put them into practice within your designs, so I wanted to do something a little different and show you how to implement those Design Principles, with my reasoning behind why I chose certain ones, whilst we work our way together through the simple Header design for a fictional high-end Fashion Brand.
Let's make a start...
Starting with the Navigation I decided to add just a handful of Text elements, a couple of Icons, and put into practice a Design Principle known as Proximity which I’ll cover in more detail a little later on.
I chose Uppercase here for the Navigation elements, and kept them at a Bold Font Weight, as well as a specific Font Size.
I’m aiming for Repetition here my making sure similar elements appear in, well, similar ways inside of our design, which in turn brings a clear sense of consistency, and cohesiveness, and enables the user to easily focus their attention on important elements such as Links.
For the Icons, I chose a Shopping Bag, and Magnifying Glass for the Cart and Search functions.
The key here is to choose an Established Icon that clearly represents the action that is about to be taken, and quickly conveys the correct meaning and functionality of the Icon. Anything else just invites confusion and becomes a cognitive obstacle for the user.
Firstly. Have you heard about Learned Behaviour?
Something called Learned Behaviour (default actions that we unconsciously perform) has made us, the user, understand that an Icon that links, in our example, to the Cart page of our site will be represented by either a Shopping Bag or Cart Icon.
The same for a Search Function of some kind. Once more, Learned Behaviour has taught us to expect that the Magnifying Glass Icon will represent that aforementioned action. So avoid confusion of any kind, don’t be too rebellious, and always try to stick with established icons in your UIs.
Cart Vs Bag Icon debate. Fight!
TL;DR
Feel comfortable using the Bag icon for Fashion/Clothing brands, and the Cart icon for pretty much everything else.
This is a discussion I’ve seen a few times debated over the interweb, and I’ll share my thoughts here quickly…
Now I understand that the Cart icon is quite distinct and has a strong connection to shopping because, well, it’s a common object used in stores, and that the Bag icon may be easier to misinterpret due to this fact, even though you use bags when you get to the checkout?!? But that’s for another debate.
Personally I feel it depends on what the online store is selling. I’ve always felt that Fashion/Clothing brands seem to be an exception to the rule here. And you only have to take a look at the online stores for Tommy Hillfiger, Gucci, Versace, Dolce & Gabanna, and other clothing brands, be they high, or low-fashion, where the Bag icon now seems to be the de-facto UI choice.
I once read a comment “You wouldn’t use a Cart or Trolley in one of their physical stores” in reference to a clothing brands UI choices. Ok. They have a point. Erm, kind of. Unfortunately the majority of end-users will of course not be thinking this way when they interact with your site, or app. We’re not programmed to think like that when browsing a site.
That being said though, I honestly feel that the Bag icon has become a Learned Behaviour like I mentioned earlier, when it comes to the UI of online stores for Fashion/Clothing brands.
It’s still debatable in some circles this one, so if you’re not 100% cool with it, stick with the Cart icon.
Ok debate over. (For now) Back to it…
Using Proximity to signal relationships.
We now have a Design Principle called Proximity in place between the Text Navigation, and Icons.
Proximity is simply the process of ensuring related design elements are placed together, signalling a relationship between one another (in our case the Text Links and Icons), which helps speed up the users cognition when scanning through a Site or App.
Here with the Navigation & Icons, we’re using a very common example of Proximity at work.
Improving Contrast with a simple overlay.
Contrast is a Design Principle that when used correctly can convey a sense of balance and harmony within your design, be used to present textual information in a way that makes the message much clearer to the user, and help increase the legibility of combined elements on the page via the correct usage of Colour, Size, and Type to name but a few.
As our design stands at the moment, there is ample Contrast between the Logo, Navigation and Background Colour. All looks good. It’s more than readable, and most importantly, Accessible to users with visual impairments.
But when we start looking at adding a Title, Subtitle, and Call to Action, which as it stands, regardless of what colour, or size we choose for those elements is going to contrast terribly against the image of the lady, and to an extent the background colour, affecting its overall Legibility in a very big way.
Let’s go ahead and fix that quick with a simple Overlay…
I dropped in a dark Overlay and set the Opacity to 60%, which should hopefully give us enough Contrast, and Readability between the Text elements that we’ll be adding shortly. If nothing else, at the moment, it’s added a little more Contrast between the Navigation and Background Colour.
Ok. Let’s get our Text (Title + Subtitle), and Play Icon into place and double-check the Contrast between those elements and our existing ones (Image, Background Colour, and Overlay).
Here I’m using Playfair Display for the Title, and Roboto for the Subtitle. Let me explain a little on why I went with those Font choices…
With Playfair Display you have a font that is excellent for usage within titles and headlines, but not so great for larger passages of text with its delicate strokes that might hinder legibility especially when used on smaller screen sizes, hence why I chose the ever versatile Roboto for the Subtitle due to the fact that it renders sharply on screens of various sizes, and its legibility holds up great there also.
Finally I added in the Play Icon, and tightened up the spacing between the 3 elements (Title, Subtitle, and Icon).
Now, I could have also popped in a small Horizontal divider using the Primary Colour to draw the eye in a little more to the key message here, but I felt that was unneeded as the elements (Title, Subtitle, Play Icon) were grouped closely so Proximity came into play again
Remember Proximity often beats Colour in terms of dominance, importance or establishing Hierarchy.
And that’s a wrap for this lil’ design of ours!
Hopefully you can now see that by applying basic Design Principles such as Contrast, Space, Repetition, and Proximity correctly, you can go on and produce much more consistent, clearer, and stronger UIs for your next project.
By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇
Thanks for reading the article,
Marc.