How to improve your UIs by applying Design Principles: Homepage, Part 1

 

An ongoing Tutorial Series showing you how to create consistent, clearer, and stronger UIs by applying Design Principles


Well hello there!

Welcome to my ongoing UI & UX Design Tutorial Series where 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, all without compromising your creativity.

Firstly, let's take it back, 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).

It was also within this time period that I took my first steps into the world of Print Design professionally.

Long before the emergence of the Web as we know it, is where I began to fully 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, and not much else, so I wanted to do something a little different and show you how to implement those Design Principles on-the-fly, and my reasoning behind why I chose certain ones, as we actually work through a design project together.

Sound good? Awesome! Let’s do this...

So what are we creating exactly?

In the first entry of this Tutorial Series I’ll be showing you how to create a simple Homepage for a fictional Fashion Brand, and I’ll be breaking this first entry down into 4 easily digestible parts, with subsequent parts arriving weekly.


Hold up! Don’t forget the required files...

Oh, before we make a start, please make sure you've downloaded the files needed to follow along with this Tutorial...

  • Cabana Design System (Tutorial Version)
  • Images
  • Fonts

You can grab the .zip file right about here.

NOTE: If you want a quick overview of what the Cabana Design System is all about you can check out this rather handy article here.

“So do I need to be using Sketch?”

”Do I actually need the Cabana Design System to follow along?”

You don't. This Tutorial Series has plenty of information that is design tool independent, so it’s not required, and you're more than welcome to just take away some of the design tips and advice shown to you, regardless of what design tool you use.

But...

...to follow this Tutorial Series in the best way possible, I would recommend having Sketch installed, and the Cabana Design System at the ready.

With Cabana especially, you’ll be able to see how it allows you to quickly construct the UIs required, enabling you to focus more easily on the Design Principles, and Best Practices that I’ll be covering throughout this Series.

Cabana downloaded? Fonts installed? Images at the ready?

Awesome! Let’s get to it folks...


Header

In Part One we’ll be focusing on the Header element of our Homepage design, where I’ll be showing you how to apply certain Design Principles when creating a UI element such as this.

Ok. With the Cabana Design System Sketch file open, let’s make a start!

Working with the 8pt, and Bootstrap Grid Systems

I’ve mentioned in one of my Tutorials previously how I love to work with the 8pt Grid System on pretty much all of my projects, and that’s what we’ll be using for this Tutorial Series also, so if you haven't already, let me show you how to quickly setup the Nudge Settings in Sketch so you can easily, well, nudge, elements around your Artboard in 8pt increments as you follow through this Tutorial.

From the Menu Bar, select Sketch > Preferences, and from the Preferences panel choose Canvas.

In the Nudging section insert 8 into the Move objects using Shift-Arrow keys field.

As well as using the ever reliable 8pt Grid System for Spacing elements consistently within our design, we’ll also be using the Bootstrap Grid for the column structure throughout this tutorial too.

Let me show you quickly how to setup the grid for that also…

From the Menu Bar, select View > Canvas > Layout Settings, and in the panel there enter the following settings…

  • Total Width 1140px
  • Offset 30px
  • Number of Columns 12
  • Gutter on outside Checked
  • Gutter Width 30px
  • Column Width 65px

Now you may be aware that the Bootstrap Grid System uses a 30pt Gutter, which, last time I checked, isn't really divisible by 8 (which the 8pt Grid System uses).

So what’s the workaround you may ask?

Well, previously, when using a combination of the 8pt, and Bootstrap Grid Systems I’ve always opted to use the Soft Grid approach, as opposed to the... wait for it...stating the obvious incoming... Hard Grid option.

So using the Soft Grid method that I just mentioned, I will use the 8pt Grid to vertically place elements within my design, and then use the Bootstrap Grid to align elements horizontally, such as images, the width of text blocks, that kind of thing.

Quote taken from: https://spec.fm/specifics/8-pt-grid

There are actually two prominent versions of this system. One that places elements into a system-displayed grid defined in 8-point increments (we’ll call this the ‘Hard Grid’ method) and another that simply measures 8-point increments between individual elements (we’ll call this the ‘Soft Grid’ method).

The argument for the Soft Grid method is that when it comes time to code up an interface, using an actual grid is irrelevant because programming languages don’t use that kind of grid structure - it’ll just get thrown away. When the speed at which you arrive at a high-quality, programmable set of mockups is a priority, bypassing Hard Grid’s extra overhead of managing additional layers in favor of Soft Grid’s more fluid, minimal structure can be an advantage.

Sound good? Cool. Let's get designing...

Setting up the Artboard

Make sure you have the Page labelled ‘Tutorial’ selected, and then go ahead and create a new Artboard (A), with the following dimensions...

  • Width 1200px
  • Height 800px

...and simply rename it (Cmd + R) to ‘Header’.

Background Colour

With the new Artboard still selected, insert a Rectangle (R) with the same dimensions, and then from the Inspector select the Fill/Primary Layer Style from the Cabana Design System.

Background Image

From the Insert menu in the Toolbar, insert the following image image-01.png from the Images/Header folder you downloaded previously.

Using the Resize Tool (Cmd + K), scale the image down to around 90%, and then, using the Alignment options at the top of the Inspector panel, align it both Horizontally, and Vertically inside of the Artboard.

SKETCH QUICK TIP:

If you find yourself using the Unsplash Images feature in Sketch (or any other image for that matter), and you're like me on occasion, a little lazy to optimize it before inserting it into Sketch, don't forget that you can always keep the file size of your Sketch document at a more reasonable level by selecting your image and then from the Menu bar choosing Layer > Image > Minimise File Size . No more 10MB images from Unsplash bloating your Sketch files.

Image-Lite in da house!


Finally. From the Layer Panel, Lock both the Image and Colour Layers.

Logo + Navigation

Let's quickly get our Logo into place, and then focus on the key element in the top section of our Header, the Navigation.

From the Images/Header folder insert logo.svg, toggle the Bootstrap Guides (Ctrl + L), and snap the Logo to the first column.

For the Navigation we’ll be adding just a handful of Text elements, a couple of Icons, and putting into practice a Design Principle known as Proximity which I’ll cover in more detail a little later on.

Focusing on the Text elements first, from the Toolbar, choose Text Styles, and insert the following Style Caption/Font Family #1/Left/White/Regular, make 2 duplicates of this Text Layer, and then edit the wording of each one...

  • MEN
  • WOMEN
  • COLLECTIONS

Using the 8pt Grid, space these Text elements 24pt apart, and then group them (Cmd + G)

QUICK NOTE

I’ve chosen Uppercase/All Caps here for the Navigation elements, and kept them at a Regular Font Weight, as well as a specific Font Size, and will use these style choices for further Navigation/Link elements throughout this Tutorials Series.

I'm aiming for Repetition here my making sure similar elements (ie; Links) 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.

Now onto the icons, where we’ll choose one for the Shopping Cart and the other for the Search Function.

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.

With that said, let’s go ahead and get our 2 icons into place...

From the Toolbar, choose Symbols, and insert the following Icons…

  • Shopping Bag
  • Search

…then, using our existing Layer Styles, change their colour to Fill/White.

With the Layer Guides visible (Ctrl+ L) snap them to the last Column, and then, using the 8pt Grid System, space them 24pt apart.

Group the icons (Cmd + G), rename the Group (Cmd + R), and then space the Text Group you created earlier 40pt from the left side of this new Icons Group.

Finally, Group (Cmd + G) all 3 Groups (Logo, Navigation, and Icons), and space this new Group 32pt from the top of the Artboard.

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. Kind of. Unfortunately the majority of end-users will of course not be thinking this way when they interact with your site, or app. It doesn't happen like that.

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 Icon groups.

Proximity is 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, but we’ll touch upon it again as we work our way through the Homepage design.

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 in the next section we’re going to be 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...

With the Artboard selected, insert a Rectangle (R) with the same dimensions, and then from the Inspector select the Overlay/Black Layer Style.

Then place this new Layer just above the Image, and Background Colour Layers.

You’ll see in the Inspector that the Overlay has an Opacity of 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.

Adding the Title, Subtitle & Icon

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

Firstly, from the Text Styles menu, insert the following Style...

Hero/Font Family #2/Center/White/Bold

…and edit the wording accordingly.

Then, from the Text Styles menu once more, insert the following Style…

Body/Font Family #1/Center/White/Regular

…and edit the wording there also.

You’ll be able to see in the Inspector that we’re 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, and in later Chapters, for the Body text, due to the fact that it renders sharply on screens of various sizes, and its legibility holds up great there also.

They make a great Font Pairing in general, but even more so for the type of voice, and aesthetic we’re projecting with our fictional Fashion Brand design.

With our 2 Text elements in place let’s add in the final element for our Header, and then align things correctly.

From the Symbols menu insert the following...

Icon/Play Circle

...then using the Scale tool (Cmd + K) increase its Height & Width to 64px, and change its Fill Color to White in the Inspector.

Using the 8pt Grid System, space the 2 Text elements 16pt apart Vertically, and then for the Icon, space this 24pt from the bottom of the Text elements.

Using the Alignment tools in the Inspector, align all 3 elements Horizontally and then Group them (Cmd + G).

With this new Group selected, use the Alignment tools once more to Center it both Vertically and Horizontally within the Artboard.

Hopefully you can see that with the right combination of Colour, Type, and Size we’ve been able to create a design element that now has the perfect blend of Contrast and Legibility.

Perfect. That’s our Header design complete!

SKETCH QUICK TIP

A great little tool that I use for creating more accessible interfaces, and for quickly discovering any Accessibility, and Contrast issues within my designs is Contrast https://usecontrast.com. It’s such a simple, but oh-so handy Tool to have by your side. I use it regularly and will be using it throughout this Tutorial Series.

Of course, Contrast is a paid App, so if you don't want to spend a few Dollars, there is Stark https://getstark.co which is a free Sketch Plugin and achieves similar results to Contrast.


Rough Notes...

Initially with the Header I was going to insert a Vector Shape to give an even sharper contrast between the Text and Background Image, something which is referred to in the design world as an ‘Anomaly’.

This would divert your eyes from everything else and focus solely on that element, and draw your eyes towards the key content, but I decided against it, and just opted for the darker, full screen overlay, which produced enough contrast still between the Text and Background Image in a more subtle way. And also for the reason that a users eyes are pretty much instantly drawn to the bold text within a Header when they view the site anyways without any superfluous elements been required, purely for decorative purposes.

That’s not to say that i could have just left the Vector Shape in there for purely decorative purposes, and break up the predominately dark theme the header had in place, but I felt that in the end it wasn't needed, and by opting to use the Primary Colour (Blue) as the background it rendered that option null and void.

I could have also popped in a small Horizontal divider using the Primary Colour to draw the eye but again 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 Part!

Nice work!

We've wrapped up the Header element for our Homepage, and Part One of this Series.

In Part Two we’ll be focusing on the Collection section of our Homepage, where I’ll be showing you how to easily apply Design Principles once more to create a clearer, and stronger UI.

See you soon!


 


UI & UX Microtips: Volume #1

Improve Onboarding for your Users

Enable users to skip your App Onboarding sequence at any time, and place that Skip link within easy reach. Thumbs still rule remember.


Get your Shadows in the right position

Make sure your shadows come from one light source. We don't live in a land of a thousand suns.


Be generous with your Whitespace

Whitespace is your friend. Use it generously. Let your design breathe... and then relax.