Usability Aesthetics & Branding Guidelines


Aesthetic UI Design is one of the key aspects while talking about usability which gives the visual experience to the user.

Branding Guideline is one of the prerequisites that a UI Designer needs before starting a new UI design. It is a document created by the designer who designed the logo for a brand.  The document elaborates colour codes used in the logo (i.e brand colours), the typography and the proposed shades of colours or complementary colours – usually termed as the primary and the secondary colours and in some cases, the number of colors might be more.

The UI designer of a site/app might not be the person who designed the logo and he must refer to branding guideline created by another designer. But sometimes it happens that the use of these colours recommended on the branding guidelines may not seem apt while designing screens. Why is it so?

Effectiveness  of the Branding Guideline

The colours specified in a branding guideline may either be too dark or too light in a way that affects readability on the page. This may be a day to day challenges faced by UI designers where they have the branding guideline on one hand and the usability to be handled on the other hand. I too have gone through this situation plenty of times. Now, how can this be addressed?

From my experience, what I have observed and worked on, I must say – first relax 😊

Do not worry about sticking to a branding guideline document at the cost of usability. The reasons for the failure of UI design while following a branding guideline are – 

  • The branding document did not follow the actual design principles
  • As a UI designer, you may need a better understanding of design harmony

In the former case, it may happen that the designer who created the logo does not know the usage of creating a branding document and ends up choosing the wrong colour shades and complementary colours. This would, of course, take down your design. In this case, the document is the culprit, so you must use your creative freedom to use the right colour shades and in order to do justice to the interface designs.

Design Harmony

If the branding document is created following the golden rules of branding but the design is not coming out well, then it has to do with something called – Design Harmony. Now, what is design harmony? Hmm.. it’s bit hard to explain in words, but I ‘ll give a try. 

Anything distracting in the visible area of the human eye is easily noticed and judged by the brain. Imagine you are driving a car on a clean long highway with absolutely no traffic. You’re really enjoying the drive with your favourite music on in the car and you’re just loving that wonderful ambience. Suddenly, you notice a truck at a distance about to cross your road. Your eyes caught the attention of the movement in its visible frame and notified your brain to pause your joyful mood asking to be cautious and to slow down your vehicle. There was a harmony which you enjoyed but a slight distraction caught by your eye broke that harmony. 

Similarly, there is a harmony in each design which is the result of the creative intelligence of a designer. It determines what percentage of a colour can be used along with its complementary colours or other shades on a screen area, how much white space can be given, how the relativity of the elements need to be handled, how aesthetic attention-grabbing techniques can be used effectively that the user is focused only on the prominent areas where they need to be – all these factors are part of a UI design harmony.

Typography & Design Harmony

Apart from colours, the right use of typography is a mandatory requirement for achieving good aesthetic design harmony. Excessive use of bold fonts in a screen may disturb the pleasant behaviour of a design. Experts say that to reduce bold behaviour, use of typos with light fonts is recommended along with the bold fonts on the same screen. 

 The user must feel that there is a balance of the viewport area where every colour is used in the right proportion, each element is placed in accurate places with optimum distance and everything together makes a good composition. The user should not feel there is some extra weight on any one side of the design that his eyes feel uncomfortable looking at it.

So, in short, while following a branding guideline to design an interface, one must also make sure that the colours, typography and elements are used at an optimum level to create comfort to the eyes of a viewer enriching its usability.

About the author

Kishore Krishnan heads the UI/ UX Team in Triassic Solutions Private Limited, Technopark. He has been designing UI and advocating UX over various desktop and mobile applications over a decade of time.
Kishore is a good listener and believes in the theory – “Everything you seek is available, all you need is just eyes to see”

Categories:Guest PostTags: , , , , ,