Brands are human creations, therefore, bear characteristic of the creators, in other words, brand identifies such as logos and names should all be unique. When it comes to web design, branding guidelines are the fine print guards the brand identities and shapes the official look & feel of their online or offline presences.
When starting a business, branding guideline should be one of the major things to consider because it helps business owners define their visions. For any new website project, it is absolutely essential to include a well documented branding guideline along with design briefing, so that the outcome of the design will carry brand identity. Due to the complexity of web design and developing, it’s usually costly to change branding guidelines after the commencement of a web project, so get it sorted early will help you stay within budget.
In many cases, a fine branding guideline is the result of teamwork between graphic designers and business owners. There are general rules to follow but we all strive to be different and recognisable, and here are a few highlights of ours:
Design Principle
We choose flat design because of its simplicity and timelessness. The concept of flat design is to render web elements in a flat form which is two dimensional. After many years of grinding in UI, we came up with a few guidelines to stick with:
- Limit the variation of website colours to 3 and use brand colours for click elements such as links or buttons.
- Don’t use any border radius.
- Don’t use 3D css effects such as box shadow and gradient.
- As long as it doesn’t compromise aesthetics, use as much text left align as possible. Limit the usage of centre alignment.
- Don’t use any bold text. Instead, using large font sizes with light font weights to achieve heading content separation.
- Don’t use ‘click here’ for link text.
- Keep button designs minimum, use border colour instead of background colour.
- Use preset filters to process website images, in our case is Meranti style. Meranti colour creates a vintage feeling and goes really well with flat design.
Fonts
Font Family
If you’re not familiar with typography, read this Crash Course in Typography will help you get a quick grasp of it. We always prefer to have no more than two typefaces on an entire website. Our Initial choice was Roboto since it’s the default font in Android OS. Being a great font in for both heading and body text, Roboto has a wide range of font weight from 100 to 700, and they are supported by popular browsers. However, we eventually stepped away from Roboto and used Old Standard TT and Encode Sans Semi Expanded as heading and body fonts respectively. Generally speaking, for a business website, the body font needs be well spaced and modern to offer good readability. Helvetica, being a standard corporate font family is not a Google font, however there are many other fonts offer similar appealingness to readers. A good way to source the best possible font for you taste is by using Google Font Chrome Extension which allows you to preview Google fonts on your website with no coding skills required.
Branding guideline it’s all about authenticity and uniqueness, isn’t it? There may be only limited web fonts to choose from, but with the art of typography, the possibilities are limitless. Realising Roboto’s lack of Character since 85% of the world’s mobile users are looking at it every day, we decided to use the traditional artistic Serif fonts to bring life and freshness to our website. Old Standard TT is an excellent choice for headings because it’s tall, so you can fit more characters in heading to avoid getting a second line. In our opinion, Lora is a more elegant version of Time New Roman, which really gives our content an excellent visual appealing, especially in HD screens.
Font Weight
Some designers may disagree but we are not a big fan of bold fonts for the web. Bold headings are a common practice in print such as newspapers and magazines since different contents are actually competing in a tiny printed real estate, bold headings are needed to fight for readers’ attention. While on the other hand, most business websites are primarily designed for optimum browsing experience where the main target audiences are the one who has enough time to finish their reading. Since body content is the main course, bold fonts can be difficult to balance from a design perspective, instead, we prefer to use extra large font size as an alternative way to make headings stand out – after all, a heading needs to look like a heading. Another benefit is the empty space around larger fonts makes the whole article more inviting.
Font Size
In order to make heading standout without using bold fonts, we choose to use a much large heading font sizes such as h1 (56px) in comparison to body fonts 16px, which is what we found a perfect font size for both readability and aesthetics. Keep in mind that you don’t have to stick to exactly the same font size for each heading across the entire website (although its’a common front-end design practice). A thumb or rule is: if different headings appear in the same page, they need to be distinguishable which means a few pixel difference won’t be enough, so don’t preset your heading font sizes too close to each other.
Line Height
Line height is often ignored but critical to user experience. When it comes to information websites where their audiences spend most time reading, an optimum line height can greatly reduce eye stress and make reading enjoyable. Line height should be set in proportion to font size and we agree with many web designers that line height should be between 1.5 to 2. In our case, for the 16px body font, our line height is 28px.
Colour
As some of you may relate to: our brand colour started as metallic gold #f8d229, however like most metallic colours, metallic gold has poor readability and it’s also against the concept of flat design. As an alternative, we decided to use two of its harmonious colours based on analogous harmony: orange #f86a29 and lime green #b6f829. By using this method, we didn’t completely ditch our initial favourite, and most importantly, we got a little story to tell when it comes to brand colours.
It happens quite often that the colours we like in the real world don’t always fit into our digital form, therefore a basic understanding of colour harmony comes in handy when we research for our brand colour. When deciding colours for a website, it’s recommended to choose colours with high contrast for better readability.
Don’t Forget White Spaces
One repetitive question we always ask ourselves when design a website is: Do we have enough white space? White space is the empty area around each piece of web elements, and knowing how to use space is a definitely a seasoned design skill since it’s often where the professional look & feel comes from. Therefore it’s essential to include margin and padding in your branding guideline.
