Bringing your brand online

Paul Boag

What challenges surround interpreting brand guidelines for the web? Are branding agencies equipped to bring a brand online or does it need expert knowledge?

Last week we looked at how we approach a project if there is no brand identity to work with. But what if a client already has a well established brand? How does this change the web design process? How do you bring their brand online?

If the branding agency have done their job, having a well established brand can save the web design process a lot of time. Elements such as personality, colour palettes, typography and other branding collateral will already have been resolved. The job now becomes one of refining these to work effectively online.

Adapting a brand to work online is a delicate matter that can have consequences beyond the web. That is why wherever possible we try to talk to the agency who did the original branding.

Working with the branding agency to bring their brand online

Although not always possible, we have found it invaluable to work collaboratively with a branding agency on the design of a new website.

The best time for this to happen is when the branding is still in development. This allows the unique requirements of the web to be taken into account while the branding is still being formed. This prevents the need to refine it later to work online.

Unfortunately this rarely happens. This is partly because web projects often follow branding exercises and partly because many branding agencies feel they have considered the issues surrounding the implementation of a brand online.

If speaking to the agency during the process of forming a brand is not possible, then including them in the collaborative process of creating a design is the next best thing. Although there can sometimes be a bit of resistance to this from both parties (a fear of encroaching on each others turf), it is worthwhile.

We find that the branding agency can often bring a unique perspective and are more open to modifications to a brand than perhaps a client would be (due to their better understanding of what goes into a brand and of the design process generally).

In many cases we will discuss the visual appearance of a website with the branding agency, before showing designs to the client. We find that it can prove much easier to convince the client if the branding agency is on board first. Hearing agreement from both design agencies gives the client confidence in the chosen direction.

This process of dialogue between web designer and branding agency often begins with element collages.

Element Collages instead of moodboards

When there is an established brand identity there is little point in going through the moodboard exercise covered in the last post. These have already been produced by the branding agency and agreed with the client.

Instead we find a better starting point (after general discussions about inspiration and looking at other websites) is the creation of element collages.

An element collage takes the brand and applies it to specific elements of the website. For example, elements like a carousel or news stories can be ‘designed’ and added to a collage alongside other elements such as colour palettes or typography.

Example Element Collage for bringing your brand online
An element collage includes various ‘elements’ that would make up the final design but is not a final website mock-up.

It is important to note that this is not a final design. It is merely a collage of various screen elements. It has no layout, grid and may not contain final content (although that never hurts).

Element collages have two advantages over traditional design mockups. First, they are much quicker to produce and iterate. Second, they focus the client on the aesthetics rather than layout and information hierarchy. These things are better dealt with in wireframes or prototypes (a subject we will cover in a later post).

That said, design mockups still have their place.

When to produce design mock-ups

There was a time when we used to produce design mockups for every project. In fact if you go back far enough, we would produce multiple designs that the client would pick between.

Fortunately those days are largely gone. Design mock-ups are time consuming, stifle iteration and don’t allow for collaboration.

The gap has largely been filled with element collages, moodboards and building in the browser. However, mock-ups do still have a place.

Mock-ups are great when the focus is mainly on aesthetics. Mocking something up in photoshop is often quicker than building it in a browser, so it can be a nice step between element collages and a working prototype. What is more clients like mock-ups, they are familiar with them and they give them something that more closely resembles the final site visually than element collages or wireframes.

The secret with mock-ups in our experience is not to spend too much time iterating on them. Iteration should take place at the element collage or prototype stages, where it is quick and simple to do. Endlessly iterating a mock-up can quickly become tedious for all concerned. If the design is approximately right start building and iterate from there.

Of course before you can move on you need the client to at least approve the general direction. That is where presentation is everything.

Presenting design

How design is presented to a client is crucial to the process. Do it badly and you’ll be caught in endless rounds of iteration based on personal opinion.

There are three secrets to successfully presenting design:

  • Avoid surprises.
  • Provide background.
  • Ask the right questions.

Let me quickly run you through each.

Avoid surprises

Do not spend days working on a design before presenting it to the client in a dramatic reveal. If you do the chances are the client will reject it. This is because they have no sense of ownership over the design and it comes as a surprise to them.

Instead make sure you present the design as a natural evolution of the work already done. As I made clear in the last post, the client should be involved in every step of the process. Therefore, when they see the final design it should come as no surprise.

Provide background

Another important factor in presenting design is to explain what influenced the design. It needs to refer back to work done on wireframes, moodboards, style tiles, business objectives and most importantly users (a subject we will come to in a future post).

In an ideal world this means presenting the design face-to-face with the client and any other stakeholders. In reality this is difficult to achieve and even if you can, clients have a habit of then passing the design around to others who have not heard the presentation.

The way we get round this problem at Headscape is by presenting design concepts in video format. The video shows preliminary work, talks through the background of the design and presents the final result. This ensures that anybody that sees the design also hears and sees the supporting material.

Ask the right questions

Although many designers would like to claim otherwise, the clients feedback on the design is a crucial part of the process. However, client feedback is only useful if you ask the right questions.

All too often designers end their presentation with the immortal words “so what do you think?” It is this question that leads so many designers to believe that clients are incapable of providing constructive feedback on a design. If you ask the client what they think you will get their personal opinion of the design. This is rarely helpful.

Instead of asking clients for their personal opinion on a design, at Headscape we ask a series of structured questions. These questions vary slightly from client to client but typically include questions such as:

  • Do you believe the aesthetics will appeal to the target audience?
  • Does the website help the business achieve its objectives?
  • Will the target audience be able to easily complete their tasks?
  • Are the calls to action clearly visible and do they encourage action?
  • Is the design in line with the aesthetics established in the moodboards?
  • Does the design communicate the brand values of your organisation?
  • Does the design reflect what was agreed in the wireframes?
  • Is the design consistent with the personality we chose for the site?

Questions like these move away from personal opinion and help provide the kind of constructive criticism that we need as web designers.

Where offline branding may need tweaking

You would be forgiven for thinking that a comprehensive set of brand guidelines would make the design process relatively straightforward. Unfortunately that is not always the case.

There are three aspects of the web which particularly create a need to adapt off-line branding. These are:

  • Resolution.
  • The unknown canvas.
  • Colour.

Let me very briefly explain the challenges in each of these areas.


Although things are changing, most computers still display at relatively low resolution when compare to print. Branding agencies who are not particularly experienced on the web tend to make the mistake of not considering this lower resolution.

This typically manifests itself in detailed logos that pixelate horribly when displayed small. The same can be said for certain serif fonts which do not work at smaller sizes.

Crowd of people
Imagery, logos and typography that contains a lot of detail often look worse on screen than in print.

This can also be a problem with the selection of imagery. If the image is displayed relatively small and contains a large amount of complex detail, this can be lost when displayed on screen.

The unknown canvas size

It can be hard for those with a print background to come to terms with the fact that web designers have to work without a fixed canvas size. Print designers are so used to developing brand guidelines that define absolute values in relationship to standard print sizes (such as A4) that they cannot comprehend the design process without these characteristics.

As a result it is often necessary to adapt brand guidelines that talk about grid structure, layout and the use of absolute values.


Most brand guidelines specify the use of specific pantone colours. Although these are often accompanied by their equivalent hex values, these “web friendly” colour values are often not well considered.

It is not enough to translate a Pantone colour value to its hex equivalent. This does not consider the differences in how colour is seen on screen compared to print.

The colours on a website are seen by a large variety of different monitors running different operating systems and so are perceived by users in different ways.

You need to be careful which colours you choose, especially if they are particularly dark or light. In our experience colours tend to appear either dark or lighter when displayed on screen compared to print. This means a dark corporate blue which looks great in print will appear almost black online.

Cheating with colour on 24 ways
Jason Santa Maria wrote a brilliant post for 24 ways on the differences in how colour is displayed on screen compared to print.

Design is subjective

Even when working from a well produced a set of brand guidelines the design process remains a subjective one. In many ways design is the most contentious part of creating a website and can often lead to heated arguments.

At Headscape we use a collaborative approach combined with clear presentation to minimise conflicts over design. We also find that working with the branding agency and presenting a united front to the client can go a long way to securing design approval.

However, the most effective technique to ensure sites end up with a compelling design is to test and then test again. One of our founding principles is that wherever possible we should design with data, and that is what I want to cover in next week’s post.

“Crowd of people walking on the street shallow depth of field” image courtesy of