Why switch to HTML for Guidelines?

Typically Brand Guidelines, Style Guides, etc are fancy documents created by an Ad or Brand Agency or Graphic Designers/ Design firms. They are documents based on  traditional printed output and workflows. 

They are typically created in Adobe InDesign at great expense, often in the tens of thousands of dollars.

Today that is totally unnecessary, unless the aim is to show how fancy a Brand you are, vs delivering the actual information people need, like brand colours, minimum size and clear-space for logos, etc.

The information delivered is data - written instructions and some images. They need to be able to be distributed on demand, when the brand is being reproduced - like when you're downloading a logo or placing it in marketing collateral.

Aside from the personal pride a brand might take in a beautifully designed document - that beautiful design does little to enhance the communication of the data people actually need when they need it. 

Like "What is the HEX value of the primary brand color?"

The fact the world developed the perfect technology to deliver this sort of data to people - it's called the world wide web - and HTML is the language we use to communicate almost everything else these days.

It's fast to create, searchable, editable, real-time and like many things today - how most people want to access information (i.e. I don't have a filing cabinet anymore to store your silly document).

It's time Brand Guidelines got it's act together.

A collection of Rules

First we have to recognise that Brand Guidelines are a collection of individual Rules (or Guides). Despite what we see in document based guidelines - the order or hierarchy of Rules is generally NOT important.

When a user interacts with Brand Guidelines they are typically looking for an answer to a specific question (e.g. How much clear-space do I need to give this Logo).

Being able to Search or Collapse Rules that don't interest the user is a superior  experience to scrolling through pages of a (sometimes a longish) document to find the right Rule.

Atomise Guidelines Content.

So if we atomise the typical Brand Guidelines document into a series of individual and independent Brand Rules - we get a number of advantages.

  • User can find answers to specific question more easily

  • We can offer better Search

  • We reduce noise and fluff

  • We can edit & update individual Rules quickly without have to republish the entire document meaning we can be far more agile and responsive to changes and new requirements.

  • The Brand teams can often gain independence from the Design/Brand Agency.

  • Much lower costs than creating the typical fancy document

How Do we do this in Brandkit?

Note: You will need to have an Admin user Role to do this, or you can ask Brandkit Support to translate your PDF to HTML (for a Fee).

Use Brand Rules attached to each Brand.

Every Brand you add in Brandkit as the option to create individual Brand Rules for that Brand. 

  1. In Admin Navigate to Settings > Brands

  2. Click the [Add/Edit Rules] button.

Each Brand can have a number of Brand Rules. 

  • To Add a Rule click the [+New Rule] button

  • To Edit a Rule click the [Edit] button (pencil icon)

  • To Delete a Rule click the [Delete] button (trashcan icon)

  • To View a Rule click the [Info] button (info icon)

Every Rule has a Title, Sub Title and Body.  The Body supports text, html, images and layout, sort order (if you want to control order/hierarchy).

Create New Rule

  1. Add a Title - this will be shown in the Brand Page as a Title/Heading

  2. Add Description this may be used for Search and will appear as a sub title in sone layouts (there 1 1 default layout and 2 optional layouts for Rules).

  3. Add Content with the WYSIWYG editor including text and images*. you can also switch between WYSIWYG and Code views. This is the body of your Rule.

  4. Add special Permissions. Note this is Advanced and rarely used. We recommend you leave blank and/or talk to Brandkit Support about this.

  5. Select Is Main if you want this Rule to appear in the Portal Brand Page. Typically selected.

  6. Upload an image. This field is only used for a particular (optional) Rules layout and is intended for a Rule Icon as opposed to an image in the body/content area. In most cases you will not need to use this.

  7. Determine where this rule appears in the Order of Rules by entering a number. If you leave this blank the Rules are ordered Alphabetically.

Once Rules are created they appear in your default Brand page (if that is turned on for the Brand)

* Note about Images in the Rule content/body. To add images in the editor you need to use an image URL. You can either use an external image or an image stored in Brandkit (recommended). To use an image stored in Brandkit. Either upload an it as an Asset, Approve it and grab the Asset Permalink form the Asset Detail page in Admin; OR you can Upload a static image on the Edit Rules page at the bottom of the page and then grab the URL from there (you can only do this after creating the Rule first and coming back and editing the Rule).

Edit an Existing Rule

Once you create the Rule - when you go back and edit you get some more options - like drag and drop static image upload.

Reviewing Brand Rules in the Portal

Once you've added Brand Rules as above they will appear in your default Brand page (if turned on) or in the the Brand Rules feed widget if deployed in a custom Brand Page (like the ANZ example below) or another custom page (Optional and requires a customisation by Brandkit support for a fee).

Below is an example of HTML Brand Guidelines using the optional collapsing sections theme for ANZ Bank's Brand and Logo Library

Note that you can still have a download PDF button if you also upload a PDF version of your Guidelines (to your Brand page) for those that want to download a document - but remember that sometime in the future there will be an out of date copy of your Guidelines lying around somewhere.

Happy Branding :)

Did this answer your question?