Brand guidelines and Design System over haphazard design decisions

Be it a mobile application, a website, a billboard, or a Fiat Multipla, you need a design. For the sake of this article, let me stick to high-traffic websites as I’ve been working on some of them and it’s easier to explain.

One of the very first thoughts that run through the minds of most people wanting to build a high-traffic website is how to make it stand out from the rest. In the quest for creating such a website, two very important aspects are usually overlooked — maintenance, and enhancements.

The first phase of development is usually easy. The team has a clean slate and they can build everything as per the design of your dreams. Whimsical shapes, gazillion colours, and hypnotising animations. You name it, you got it. After a few days of development, you have your website up and running and then you decide that you need one more change and one more page. That’s when things slowly start falling apart.

There are two components for user input and data submission on the right.
A page that has two grey buttons

Let us take the above mockup webpage as the reference. You decide that you need to change the colour of the grey Submit button to blue. You convey this to your development team and they look at it. They’ll immediately realize that the same grey button is used in another part of the website which has a blue background.

The register button blended in with the blue background.
The register button blended in with the blue background.
The register button blended in with the blue background.

The register button would blend in with the background if they change it to blue as depicted in the image above. To avoid this, they’ll write a custom style and you’ll end up having 3 different looking buttons for no apparent reason. Yes, there is that small blue button for search in case you hadn’t noticed.

The above change may not seem too complicated, because it isn’t. But that’s only until you decide to create another page where you need another button. For this new page, which one of the above three would you use? Or is it going to be the fourth one? What’s the colour scheme?

You will definitely make a decision and move on. No harm yet, but imagine this process repeating itself over a period of time. From my past experiences, I can most certainly tell you that you’ll realise sooner than later that you are now sitting on a mammoth of a website codebase. A codebase that is inconsistent in all aspects, a nightmare to maintain, and nothing but a house of cards hoping that you’d not sneeze in the next room. Imagine when your developer decides to move on and you hire a new one.

Brand guidelines

Any experienced designer would tell you that you need your brand guidelines set in stone before you leap. Colours, fonts families and sizes, design language, and everything else around anything visual needs to be decided and documented. Set a palette of 7 colours, 2 font families and the material design pattern. Yes, those are just random details I put in there, but you get the point, right?

Design System

Once you have the brand guidelines in place, you need to go one step higher and have a design system. It’ll roughly look something like this.

  • 4 types of buttons that can accept 3 colours from the palette.
  • 3 aspect ratios for images.
  • 2 sizes for the headlines across the website.
  • In a combination of image and text, the image would come in the left.

While the above are only examples and not standards in any way, I hope it explains the point in a simple way.

  • Once you have the said brand guidelines and design system in place, you can be certain that any change or enhancement is going to affect uniformly across the website. If you decide to make a colour change, all you have to do is change it in the colour palette. It will seamlessly be applied across the website with hardly any effort.
  • Any new designer who comes on board now has a solid base to work. They can build new components and pages from the defined set of rules without conflicting with the other designer’s imagination. There will be no contrast between the work of your previous designer and the new one.
  • Any new developer who comes on board to work on your website knows exactly where to look for when things need to be changed. Since there is a defined set of rules, building any new component or page will be as easy as it gets.

Advice to the website owners

  • Let the UI/UX specialists do their job. Tell them what you need, not how you need it. Explain your requirement and give them the freedom to come up with solutions. Once it’s ready, discuss and debate if necessary.
  • If you are not an experienced UI/UX specialist, do not make decisions on your own, even if it means changing the colour one shade lighter or the font one size bigger. The one who designed it probably had a reason. Scientists spent intensive research to come up with a pen that writes in space. You can’t just knock on the ISS and ask them to use a pencil.

Let me conclude by saying that while I understand good UX and appreciate good UI, I’m in no way a designer. However, I’ve had splendid opportunities to work with a few very talented UI and UX designers in my career and this article is based on the interactions I’ve had with them over the years.

Developer turned manager who finds it exciting to solve problems. After work, I'm that guy who loves cars, bikes and anything that gives me an adrenaline rush.