Developing a brand's online application.

Developing a brand's online application.

Translating a client's brand to a digital platform can sometimes become complicated. In this article I wish to shine some light on these issues and explain how in our work we retain a strong visual brand message, allowing the brand to develop online.

A well executed visual brand will consider all applications, making the translation to web straight forward. However, this doesn't always happen. Often it seems that when the brand's Style Guide is being generated, the digital application of a brand is over looked or simply consists of a few RGB colours and resorting to the standard solution of placing a logo on the top left, without too much applied thought towards maximising the brands online visual spread.

If the visual brand has not had the desired online spread considered in it's development, we need to follow a process to enable the brand to spread fluidly across this space.

Firstly, we need to consider the brand's current spread, looking at it's applications across the traditional collateral (i.e. business cards, annual reports, print advertising etc), discovering underlying visual elements in the brand and considering ways we can push the brand message throughout the online application. We then go on to define the required digital platforms, how the users and client will be using this digital space, what brand messages the client wants to communicate and if the client desires any connection to industry/ community/ location.

While implementing the brand obvious elements need to be considered and carry through the website, colours, fonts etc. As well as these things, the clients online needs will also create new opportunities to apply the visual brand language. For example, with the latest MIFF site, we took styles from the mark generated and applied this to the call to actions and section headlines on the home page. This "riffing" off of the original mark generated visual cues to spread miffs brand mark into the content areas, allowing the brand message to be more than just the logo its self.

Creating an online visual language also helps when we confront other issues of brand spread, such as limitations in using a brand's fonts online while keeping content dynamic and search engine friendly. There are a few different ways to use custom fonts for web pages:

  • Google Web Fonts is a very popular solution and doesn't rely on Javascript or Flash. However, the choice is limited to the free fonts hosted by google. These fonts are cached by google and load very quickly
  • @font-face - is a CSS3 solution that doesn't require Javascript or Flash and is completely accessible. It might be a good choice if you're going to be hosting the brand fonts yourself (subject to the licensing requirements of the font, which might be cost-restrictive)
  • Typekit is a premium service that offers subscription based usage of a long list of fonts. Recently acquired by Adobe, it has a huge list of professional fonts and may be the best choice for existing brands using FF Meta, Adobe Minion, Futura, Gill Sans and other old favourites

Another consideration in the application of a brand to a digital platform is the restrictions of size. Braking down a logo to become recognisable at 16 x16 pixels is by no means an easy task. While we are more then capable of taking into consideration the visual brand and generating the appropriate icons and favicons, for the brands designer to retain their desired brand message, consideration of such applications, if applicable, needs to be made while the brand is being generated.

In conclusion, while there are examples of very well considered and designed brands that have a unique and strong visual language that do not require finessing for all of its applications to communicate well, we often find we need to explore and develop the brand further for its online application, which is something we love doing.