This is what Jayesh Bhoot looks like, with a lopsided smile on its right, which almost closes his right eye while smiling, which strongly implies that he needs to work on his lazy left-side cheek muscles.

Design Rework #1 - reworking my university hoarding

Posted on in

This series is an attempt to learn and practise principles of design by reworking adverts that I find in the real world.

Table of contents

  1. Table of contents
  2. Original hoarding
    1. Problems in the original
  3. Rework
  4. Figma resources
  5. In closing

Original hoarding

I found this hoarding while passing by my university - VNSGU.

The hoarding, on the left hand side of the university gate, lays out a vertically laid-out slogan I am in VNSGU, and also sports the VNSGU logo, cradled by the vertical slogan.

Problems in the original

  • No alignment between anything. Even the starting letters of each word of the vertically written slogan are misaligned.
  • Lack of focal point. The word am is needlessly highlighted with a colour.
  • Abysmal contrast between text and background

Rework

  1. Find a strong alignment - between words of the vertically laid-out slogan, as well as between the slogan and the logo.

    Iteration 1 - text and logo are have a strong alignment between them

  2. Find a focal point. Repeat the colour of the logo in this word to highlight the two most important elements - logo and the word VNSGU

    Iteration 2 - important elements are now highlighted through repetition of logo colour

  3. Use a good contrast of colour between the text and the background.

    I ended up with two variants - the first uses a complementary colour set, where the colour of the logo complements the background colour.

    Final output in complementary colour scheme

    The other uses a monochromatic colour set, where the background colour is set to a tint of the logo colour.

    Final output in monochromatic colour scheme

Figma resources

You can find alternate final designs in my Figma file linked below.

In closing

Even though the design looks like an improvement to my eyes, both the complementary and the monochromatic colour schemes score a terrible contrast level in the Accessible Colour Palette Tester. I am at a loss about how to resolve it.What I do understand now is that a complementary colour relationship between background and foreground colour doesn't automatically provide a good contrast.