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.

How to improve your UIs by applying design principles
Photo by Keila Hötzel / Unsplash

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.

Model: @Austindistel

Photographer: @breeandstephen
Photo by Austin Distel / Unsplash

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.

Design smartphone definition
Photo by Edho Pratama / Unsplash

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.

White navigation links in uppercase against a blue background

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.

A Shopping Bag and Magnifying Glass icon in white against a blue background

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!


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.

A woman wearing a hoodie against a blue background

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.

A woman wearing a hoodie with white text appearing over the top

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.

A woman wearing a hoodie with a dark overlay on top of the image

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…

Example of 2 different Fonts in use; Playfair Display and Roboto

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).

A video play icon underneath a block of text

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.

Example of a complete header design with image, overlay, and text

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. 👇

Cabana - Design System for Figma
Creating amazing designs is hard when you’ve got deadlines to meet. So we built Cabana, a Design System for Figma that enables you to start projects faster.

Thanks for reading the article,