Design for web

Chapter 7: Brand design

illustration of brand design process.

what exactly is a brand?

The term ‘brand’ is often wrongly interpreted as the visual reflection of a company. It does however go far beyond this: it includes everything from the name, logo and motto, to the values and personality, the appropriate tone of language and onto establishing a unique identity with a clear mission. It represents the overall perception and reputation of the organisation, company, product or service and aims to encourage recognition and loyalty.

branding & design

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 3.9MB (optimised) PDF, 29.7MB (original)

Referenced sites

  1. theverybestofcocacola.com (no longer online)
  2. Coca-Cola ad: Factory (no longer online)
  3. innocentdrinks.co.uk
  4. cadbury.co.uk
  5. england.nhs.uk/nhsidentity
  6. bbc.co.uk/gel
  7. styletil.es
  8. Paul Robert Lloyd’s style guide

Branding is complex and will vary much depending on context and inherent goal. However, there are common principles which we will focus on during our design process. We can use the following core aspects to evaluate whether our design drafts and iteration complement and enhance the brand persona and are in keeping with the overall brand message and promise.

A strong brand...

...is professional, reliable and delivers on its promise.

Being professional and delivering consistently high quality will create a sense of trust and credibility and establish the brand as a strong contender in its field. Dependability and consistency will ensure that the brand delivers on its promise, and meet or surpass expectations. The better the experience of the audience, the more positive the connection and long-term relationship will become.

...is unique and memorable.

To grab attention and differentiate itself from competitors, an effective brand will have distinct characteristics to set it apart. It will be consistent, transparent and recognisable, striving to leave a lasting impression. This will encourage one of the most powerful means of promotion: word-of-mouth ~ which will add to the brand outputs across other media.

...is transparent and makes connections.

By effectively communicating its story and values, a strong brand strives to convey trust, authenticity and understanding. Being open about its practices, it will aim to portray credibility and to connect and bond with its audience beyond the product/service.

...stirs emotions and evokes loyalty.

A strong brand aims for emotional connections with the intention to build loyalty and advocacy. It will focus on creating a sense of community and foster affinity and trust with its audience. When people have strong emotional ties with a brand, they are more likely to remain loyal in the long run.

brand design across media

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 2.1MB (optimised) PDF, 22.2MB (original)

Referenced sites

  1. Old Spice: main site: oldspice.com
  2. Old Spice: Youtube: youtube.com/user/OldSpice
  3. the famous video: “The man your man could smell like”
  4. Old Spice: Twitter: twitter.com/OldSpice
  5. Wieden+Kennedy wk.com

To design a strong brand, all aspects have to come together. Our job as designers is to give the brand persona and voice its visual dimension, enhancing the message.

Finding our brand persona

Before we can begin any design work, we will have to be clear about the various aspects our brand will embody and intend to portray. We have to define a motto which we can use to guide all decisions for content production as well as visual design. Be carefully defining our brand's principles we can then begin to establich a persona which will lead the way for all related work.

illustration of internal and external brand principles.

Whether the brand will be small and relatively personal or a big project with a large team involved, defining and internal and external mission allows us to focus in on the final goal. A distinct persona will be an effective approach to ensuring that the tone of language is consistent with the visual approach of the design.

Finding our brand's voice

One popular and productive method of creating a brand persona is to go through exercises of imagining the brand as an animal, or a person. This mental model allows us to consider very specific human traits which then lead to easier decisions in terms of refining the tone of voice and the direction for the visual design in terms of type, colour and layout.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 3.7MB (optimised) PDF, 22.2MB (original)

Referenced sites

  1. Which animal would they be?
  2. Which role would they play?
  3. What would they wear?
  4. What are they like?
  5. What kind of building would the site be?
  6. What tone of voice?

Note: This is one of my clients, a wonderful project by a large research team who aim to understand and work towards a good digital society. Check out the website.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

Table of contents:

  1. Brand principles and promise
  2. Brand persona and attributes
  3. Brand voice
  4. Brand tone - expressing the brand promise
  5. Delivering on the brand promise

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

Table of contents:

  1. Notes on the purpose of personas and journeys
  2. Suggested user personas, overview
  3. The community support worker (persona)
  4. The practitioner (persona)
  5. The policy maker (persona)
  6. The researcher (persona)
  7. About the questions

Style tiles & prototypes

illustration showing visual assets.

When doing any design work which is to be presented and then ultimately implemented in various ways, one of the most challenging prospects is how to exactly do this successfully. Sure, we've come up with ideas for the design, which typefaces suit, which colour scheme works - all fine. We have a solid proposal in our minds, collected some preliminary versions in various files but nothing that is ready to be reviewed.

Our sketches and scribbles which served us well during brainstorming and initial iterations should now become something tangible for the client to see, review and give feedback on. And if the design work involves a digital output, such as a website — how can we best present our design in a way that gives a clear impression of the concept and encourages good conversation?

Please do your own research to look into different people's workflow ~ there's plenty to explore, many to learn from and you'll end up finding what works for you. To illustrate the topics I'll be referencing some of my client work to give you actual examples.

styletil.es is open source and as far as I know, is a term coined by Samantha Warren. As opposed to a moodboard (which can be quite vague) or a static mockup (which can be too rigid) the style tile will collect the aspects of visual design relating them to their final purpose and use. It will feature the type choices and settings (for typical elements like sub/headings and paragraphs), the colour scheme as applied to layout and interface elements and additional UI related elements.

While it used to be norm to produce web pages as static mockups, this always had the obvious drawback of a static canvas, a set size and proportion. Therefore as designers we find ourselves creating pictures, snapshots of the design at a set size. This does not set expectations well ~ and is often the reason for the client's assumptions that this will look the same in all browsers.

Using a style tile however, this assumption is bylined as the presented material is a collection of different elements rather than aiming to demo a final design as it might look in the browser. An additional benefit of this approach is that it will keep the conversation focused on the design in principle, rather than specific little details of a given (and complete-looking) design.

How to work with style tiles

The best way to start is to simply think of this as a digital sketchbook, a place to collect the various ideas for type, colour, layout, UI etc. The file will be your drawing board where you can finalise the design you're going to propose. Once you're happy — you can revise a copy of this file and make it presentable, i.e. work on the presentation of these elements to best demonstrate the design concept.

Using the first style tile as basis, you can iterate the file following feedback and creating new versions will become a record of the design journey. Changes are evident and can clearly be reviewed, and referred back to if needed. Once the design is completed and signed off, your updated style tile can then be added to the final brand guide.

example: seeingdata.org

This is one of my client projects: a research project spanning 2 years. The design work started off with branding which was then to be carried through to an initial website for use during the active research phase. The next phase then expanded the branding and evolved the website to present research findings. (read case study)

style tile, 2014

This was the initial style tile after we'd confirmed the brand design and logo. Very minimal, it references typeface and colour alongside notes of purpose.

style tile, 2016

To work on the final version of the site, the original style tile was used as reference, adding new colours, making note of feedback and edits shown.

style tile. style tile. style tile. style tile.

This is another open source project, created by the developers of Sparkbox and shared via GitHub. Set up for use with Sass, you can also download a pre-compiled (= plain CSS) version as well.

The principle of the style prototype is very much the same as the style tile - to present design aspects such as the typography, colour scheme and layout for review or final confirmation. It does so via a live webpage instead of a static version. This takes the style tile one level further via a real preview of the design concept in the browser - while still focusing on aspects of design instead of webpage layout.

Compared to a full-fledged page/site prototype, the style prototype does not offer the full design but remains focused on the foundation. It presents the cornerstones of the design alone. For example, it shows swatches for colour which are also applied to the page content elements as live demo of their use. Content of this should be exemplary of the final version or offer additional notes on the page in hand.

The style prototype offers a live preview and can easily be shared and viewed in any browser, any device and by anyone within the wider team. By previewing the design live, everyone will get a better sense of the final look and feel of the presented concept.

Going by my experiences after having used this approach for nearly a decade now - I can tell you that it works :) I generally use the style tile during the early stages of a brand design, for example, - or for print-related projects. Once the design is to be expanded to be used for digital presentation (i.e. screen-based) - the style prototype is the most effective approach to presenting design concepts.

example: seeingdata.org

This is the initial style prototype which was part of the first phase.

style prototype, 2014

style tiles logo.
illustration showing ISOTYPE icon with arrows.

icon design

Icons are small little details with such high importance that they deserve as much TLC as the rest of our design. If we search for icon sets online, we will find an ever growing number of beautiful sets to choose from. However, it will be worth our while to at least explore icon design, if not learn this skill in depth.

In some cases, it might work to source an icon set in a fitting style for use on our sites. However, on other cases, icons are part of the overall brand. The classic example are the operating systems we use ~ there is a distinct style and design in use for the interface as well as the file and folder icons. We should therefore consider carefully the design of our icons.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 3MB (optimised) PDF, 12.8MB (original)

Related links

  1. ISOTYPE symbols and visual chart by Gerd Arntz, courtesy of gerdarntz.org
  2. Susan Kare, icon designer
  3. Transport for London: Pictogram standard, available at tfl.gov.uk

Designing effective icons is not an easy task but a wonderful and creative challenge. One of the most important aspects is to ensure that their meaning is clear, their message easy to understand and any ambiguity avoided ~ easier said than done ツ

learn from an expert: Jon Hicks

the icon handbook

the ICON HANDBOOK - iconhandbook.co.uk

the icon handbook, written by Jon Hicks - one of our 'people of the web' - is the best recommendation I can give you if you are interested in getting into icon design.

To find out a little more about Jon, check out this interview on the Affinity blog: Design icon: Jon Hicks

Jon Hicks – The Icon Design Process

Watch this talk from the Beyond Tellerrand Conference (2014) ~ download slides: PDF, 6.5mb

reminiscing...

Jon is the designer behind some very familiar logos and icons, such as the Firefox, Mailchimp and Shopify logos as well as the main Skype emojis. The versions shown in his talk show how times change, designs evolve.

Take a look at how these lovely logos came to be ~ hover the image to view a very short loop. A big thank you to Jon for his permission to feature these loops here ツ
Do check out the posts to read about Jon's process and have a look at his newer work while you're there ;)

Silverback logo

loop of Silverback gorilla being created. still of Silverback gorilla sketch.
© Jon Hicks, 2008

read journal entry: Silverback

Mailchimp logo

loop of Mailchimp monkey being created. still of Mailchimp monkey being created..
© Jon Hicks, 2008

read journal entry: Mailchimp

icon use

There are a lot of icons that are quite ubiquitous and can be used in different contexts quite easily. However, our brand design will also include the shape,form and colour of our icons. Just like all aspects of content, like the microcopy, have to be in keeping with our brand persona, so are the icons we will include for the interface as well as CTAs.

brand guidelines

Once a new brand design has been created it will then require everyone to adhere to the new persona, to ensure a consistent image across all media and online outputs. This is when the guidelines come in ~ and this is usually part of our job as designers. We will put together a manual that will serve all teams and outline how the logo should be used, which fonts and colours the design includes. In addition, aspects such as the tone of voice and the overall image will be stated.

Note: As included above under 'brand persona', this is one of my clients, a wonderful project by a large research team who aim to understand and work towards a good digital society. Check out the website.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

Table of contents:

  1. Brandpersona
    1.1 Mission
    1.2 Values & tone of voice
  2. Logo
    2.1 Logo versions & colour
    2.2 Logo use
  3. Colour
    3.1 Colour palette
    3.2 Colour use on site
  4. Typography
    4.1 Typeface: Noto Sans
    4.2 Typesetting
    4.3 Typesetting • headings
    4.4 Typesetting • Links
    4.5 Typesetting • Calls to action
  5. Visuals
    5.1 Additional colours
    5.2 Illustrations
    5.3 Photographs

example brand guides

Brand guidelines can be a wonderful source of inspiration and will teach us a lot. The documentation begins with the creation of the new brand design and then evolves over time.

Smart CSS selectors

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

read: Pseudo-classes and pseudo-elements