Create a Unique Design Language

By October 10, 2017 Advice, UI Design
01. Design Research

What are our competitors doing well?

First thing we do is design research and see what our competitors are doing. I’ve just finished working on this project that hosts a range of afro inspired clothing created by Africans based in all different locations around the globe. Whenever you think of African fashions you will think of bright colours, exciting prints and just these beautiful array of colours.
So when you want to put that content into a website you need to think how can I do these images justice without the UI overshadowing the imagery.

I researched a few fashion retailers to see what they were doing and how they were portraying their products and they all followed a very similar pattern. Navigation up top, large and striking imagery with a clear call to action (CTA). This was consistent through out all the pages.

02. Create a mood board

Or an image library.

Next up I worked with my client and had him help me make a mood board. Having an image library helps the direction of the project. If the product you're trying to create has strong imagery this is easy, if it is a more abstract concept i.e. services the best way to find imagery is to find images that would represent your brand, these will be abstract by nature. Using evocative stock imagery as a place holder it will give you a strong sense for the tone of your brand. There are plenty of free stock resource libraries out there for example

This is an image library I put together with my client on pinterest.

03. Pick accessible colours

Picking accessible colours based on best visual representation of the brand. If the brand is colourful then I generally pick a desaturated colour, when the brand is monotone I pick a bright and impactful colour. I try to limit the amount of colours to around 3.

Market fashion is a very vibrant project however the UI I've designed for it is very tame and saturated to allow the imagery on the site to sell it.

What happens if I use inaccessible colours?

Over 90% of the population can see the full colour spectrum including red and green. However 4.5% of the UK’s population is colour blind, and see things differently. The most popular types is Protanopia & Deuteranopia – where they can’t see red or green. If we run our chosen colours through a filter that simulates what the most common type of colour blindness see they will get something like this. If you’re having to use these types of colours for positive and negative connotations then I’d recommend using an icon library like thenounproject or google material library.



So let me talk to you about some super handy tools I use to make sure my colours that I have chosen are accessible! If I see a colour I like whilst browsing the net I pick it up using colorzilla which automatically saves the code to my clip board and keeps a history of the colours I’ve picked. So there shouldn’t be a need to go through MS Paint to get the hex code you need.



This tool allows me to ramp the colours I have chosen, create gradients and give complimentary choices.


Contrast Checker

This tool ensures that the colours have chosen are accessible by the majority of people. I can not tell you how many times this has saved me!

Contrast Checker


This site is a bit different to the rest. It creates you a style guide based on a site that already exists. The outputs include colours, typography, type hierarchy and image size.


04. Typography

Typography and information hierarchy play an important part in every design. Whenever picking fonts always go for a google font if you can. They’ve been tried and tested work great on multiple patterns and come in various styles and weights.

Roboto Slab

Raleway regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.

Montserrat Bold

Montserrat Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.


When considring typography you need to think about the sizes of the font.

Small fonts aren’t legible

Minimum font size should be 16pts and they can be in any weight and STYLING

Big fonts are easier to read.

However, make sure to think about the information hierarchy when deciding on font sizes and weight.

05. Information Hierarchy

Information hierarchy is one of the most important parts about design. It can sets the tone and mood of the entire site. It is also one of the most overlooked areas as it is the last thing people think of. Content can come after I've built my product.

This thinking is fundamentally wrong, what if the areas you've designed aren't built dynamically handle the amount of content you've created or lack of. Lorem ipsum only works if you know you're going to amend the content afterwards and how it is to be stacked agains the rest of the content.

Design with no Information Hierarchy

Egyptian temples

Egyptian temples were built for the official worship of the gods and in commemoration of the pharaohs in ancient Egypt and regions under Egyptian control.

Design with Information Hierarchy

Egyptian Temple

Montserrat Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.

Call to Action

First example has no hierarchy in place for the design. Everything about the design just looks like it was plonked on the page without any thought about how it sits with the rest of the elements. Your eyes jump from point to point with no central anchor. The main thing you will notice on this is that the button has the most weight on the page as it is the brightest followed by the imagery.

The second design where the information hierarchy has been thought about has more impact and makes it a lot easier to skim the content to see what is going on. The title and button have equal weights on the page.

This is a very simple example information hierarchy but it still gets across how much of an impact using styling can impact how the hierarchy can work on a design.

When in doubt. Ask.


Feel free to get in touch with me if you’re having an issue with a design problem. I’ll be happy to help. You can reach out to me on twitter @shazdabaz or by email,


Author Shaz

More posts by Shaz