Atomic Smash homepage splash

Getting your online brand just right with a digital style guide

Words by Ben HamiltonApril 3, 2018

Atomic Smash style tile

Your brand is an important reflection of your organisation’s values, and so it’s crucial that it is implemented correctly across not only your printed output but across any digital platforms as well. This post looks at one of the working processes we employ to make sure your online brand fits in seamlessly with your other marketing collateral.

A set of brand guidelines should normally include some rules for how to translate your brand colours, typography and image style to an online application; but that’s not always the case – especially if your brand was developed some years ago. Or perhaps your organisation never had a guidelines document prepared and the brand has evolved organically over time?

If you are about to commission a new website, or ask your web designer for updates to your existing website, it’s a great idea to ask for a digital style guide to be prepared before the bulk of the design has begun. This will allow you to quickly preview the ‘look and feel’ that your designer has in mind for the digital implementation of your brand before s/he gets stuck into the more time-consuming task of the page designs themselves.

An example of our Style Tile, focussing on the typography section

Above: an example of our Style Tile for our client FD Works, focussing on the typography section.

This is an approach we employ at Atomic Smash when working on new design projects and we find it to be a really helpful part of the process… especially if a client does not have much in the way of existing guidance on how to implement their online brand.

The image above is an example of what we call our Style Tile. It is usually informed by an existing set of brand guidelines or, where that is not present, any assets our client can provide such as printed stationery, brochures, reports etc.

The Style Tile gives a simple one-page overview of how we intend to use and/or modify the elements that make up a brand.

Why modify? Can’t you just use it how we print it?

I say “modify” because it’s not always possible to directly replicate your printed brand into an online brand. For example, any colours used in print can look quite different on screen and many typefaces are unavailable for use online.

In preparing our Style Tile, we look to address these issues by preparing a digital colour palette for your approval, and suggesting any new typefaces which may be more suitable for use online due to legibility concerns or licensing issues.

We’ll usually present a couple of variants on colour and typography along with all sorts of other elements such as example form styling, button design and image treatment options. We share this in a webpage-style format that allows our clients to view everything in their usual web browser at a size which will be comparable to the finished designs.

The forms and buttons section of the Style Tile, showing how the client's brand can be carried across to functional elements of the web design

Above: the forms and buttons section of the Style Tile, showing how the client’s brand can be carried across to functional elements of the web design.

This gives our clients a really simple and easy-to-understand overview of how their online brand is going to look. Usually, with a few simple changes made to the Style Tile, we find ourselves in a position to start the web designs in earnest. The primary benefit of this approach is that upon first viewing of the designs, our clients are free to concentrate on other important aspects of the proposed user-experience without worrying about the type sizes not being big enough or the colours not looking right!

If you’re about to commission a new web project, whether you have an online brand in place or not, please feel free to contact us and we’ll be happy to guide you through our process in more detail.

Get in touch
Profile picture of Ben Hamilton

Ben Hamilton

As the designer at Atomic Smash, Ben stays up-to-date with the latest trends and keeps a close eye on the visual details of a project.

Go back to top

Keep up to date with Atomic news