Visual Identity & Brand Guidelines March 2014 | Version 1.0
1
1.0 | CONTENTS 2
CONTENTS 1.0 Contents 2.0 Logo 2.1. What our logo isn’t 3.0 Typeface 4.0 Colour 5.0 Strapline 6.0 Pixel Element 6.1 Usage on photos 7.0 Photography 8.0 Tone of Voice 9.0 Video Style
3
2.0 | LOGO 4
LOGO A logo is arguably the most important element to any brand and so we have therefore laid down a few ground rules. Please take a moment to familiarise yourself with the uses of the logo below.
Pixel size = safety area around logo
Minimum logo width = 30mm
Pixel size = 1/2 height of “l”
Myriad Pro
Pixel distance from “l” = half x axis of pixel
5
ALTERNATE LOGOS In a situation where the standard white text on black background logo won’t work, please use one of the two versions below that are most applicable to your context. Please abide by the same guidelines set out for the standard logo regarding sizing, font and spacing.
6
2.1 WHAT OUR LOGO ISN’T So we have specified what our logo is and how it is replicated. Although, just to be sure, we thought we would show you a few examples to demonstrate what our logo is not.
The logo should not be displayed fully in 1 colour.
The logo should not be displayed without the pixel.
The logo should not be displayed on an unapproved background.
The logo should not be displayed in an unapproved colour.
The logo should not be distorted.
The pixel should not be bigger or closer than specified.
The logo should not be subject to gradient effects.
The pixel should not be placed at the beginning of the logo.
The logo should not be placed directly onto a photograph.
The pixel state should not be disrupted in any way.
7
3.0 | TYPEFACE 8
TYPEFACE We have a couple of simple typefaces used for print and digital publications. Please familiarise yourself with the rules set out below.
ARIAL This is our font to be used on all publications. Although the font may not be unique to us, we should strive to make sure we add our own creative flair to it to ensure a relation to our brand. Arial is to be used as the primary font for body text in print and digital documents.
Aa Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;?!£$%@*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;?!£$%@*()
9
MYRIAD PRO This is our font to be used on all publications. Much like the Arial font, this is not exclusive to us. Myriad Pro is to be used as the primary font for all headings in print and digital documents.
Aa Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;?!£$%@*()
10
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;?!£$%@*()
GENERAL GUIDELINES - COLOUR •
When on a white background, all text should primarily be in black.
•
When on a black background, all text should primarily be in white.
•
When on a SinglePixel blue background, all text should primarily be in white.
•
SinglePixel grey may be used for text on a white or SinglePixel blue background as an alternative.
GENERAL GUIDELINES - HEADINGS •
All headings should be in caps and have a thick blue border underneath to emphasise the text. These blue borders should be placed half way between the heading and the body text or sub-heading below.
•
In print format, these should be left aligned with the border stretching half way across the page underneath the header.
•
In web format, these headings should be centred to their container with the blue border centred underneath. This should be placed at 80% of the width of its container.
•
Break lines ( | ) should be used to break up parts of the heading that don’t flow together e.g. (SinglePixel | Portfolio)
11
4.0 | COLOUR 12
COLOUR Our colour palette consists of 4 simple colours. As we have a simplified palette of just these colours, our brand will look consistent across a variety of communications and be recognisable to our clients.
SinglePixel Blue
SinglePixel Grey
White
Black
CMYK: 75 - 22 - 0 - 0 RGB: 6 - 158 - 219 HEX: #069EDB
CMYK: 60 - 51 - 51 - 20 RGB: 102 - 102 - 102 HEX: #666666
CMYK: 0 - 0 - 0 - 0 RGB: 255 - 255 - 255 HEX: #FFFFFF
CMYK: 75 - 68 - 67 - 90 RGB: 0 - 0 - 0 HEX: #000000
13
5.0 | STRAPLINE 14
STRAPLINE SinglePixel uses simple variations of a strapline to support its branding material on the web or in print. “We are...” is the standard initiation of the strapline, followed by a relevant word that may describe the piece of work that it features on. Examples of this include the following: •
We are Creative.
•
We are Innovative.
•
We are Designers.
•
We are SinglePixel.
The idea of this strapline is for the public to associate a standard phrase with our brand. This prefix of a strapline can crop up in everyday communication and so we feel being creative and flexible with our strapline will keep us innovative and well-remembered. The strapline is not placed next to the logo in any instance as we like our logo to stand alone but can and should feature on the same publications elsewhere. For example, the logo could appear at the top of a webpage with the strapline featuring on the footer or within the page content where suitable. The strapline may feature next to an instance of the pixel like so. The pixel should be placed at the same height as the tallest letter.
We are Designers.
15
6.0 | PIXEL ELEMENT 16
PIXEL ELEMENT The pixel element of our logo is the stand out feature of our branding and can be utilised in a number of ways. There are also a number of scenarios where it shouldn’t be used. The pixel element can only appear in two different colours. It is highly preferred if SinglePixel blue can be used where possible.
SinglePixel Blue
White
CMYK: 75 - 22 - 0 - 0 RGB: 6 - 158 - 219 HEX: #069EDB
CMYK: 0 - 0 - 0 - 0 RGB: 255 - 255 - 255 HEX: #FFFFFF
There are a few scenarios where the use of the pixel element by itself is wrong. •
The pixel should not be used as a bullet point in a bulleted list.
•
The pixel should not be used as a full stop at the end of a sentence.
•
The pixel should not be used as a button/interactive element.
SinglePixel Blue SinglePixel Blue Click Here
17
PIXEL COLLATION The pixel collation is a slight spin on our main branding element. This branding element can be used across all types of documentation, whether it be print or web. There are a few rules that apply to this technique in particular.
GUIDELINES •
When the pixel is used in this way, there should always be more than 15 instances of it in order to create the correct effect.
•
The pixels involved should never have their sides line up to any of the adjacent pixels.
•
All pixels should be of a variety of sizes and opacities. Although some pixels may share size and opacity, these must not be near each other in the collation.
6.1 Usage on Photos There are 2 ways of successfully applying the pixel collation to a template or photo: 1. The pixel collation should look to come from a particular corner of the document and spread towards the middle like in the examples on the following pages. 2. The pixel collation can be successfully applied by grouping them in the middle of a photo also as the third example shows.
18
19
20
21
7.0 | PHOTOGRAPHY 22
PHOTOGRAPHY Photography acts as a huge factor in our communications across our digital estate and print materials. We believe that particular types of photography demonstrate creativeness and flair and so where possible, it is encouraged to use photography to encourage this belief. The one guideline when it comes to selecting photography to use is to ensure the photograph displays an element of creativeness. This may be in the technique used to take the photo or simply a photo of something creative.
23
8.0 | TONE OF VOICE 24
TONE OF VOICE At SinglePixel, we believe that the way we communicate with our clients and the public is key to our image and we should therefore make every effort to ensure our tone of voice is correct. We like to believe we are professionals in what we do and therefore we are knowledgeable on the topic areas that crop up in our day to day work. However, we like to learn and observe things from a different perspective. We are very enthusiastic about our industry and business and what we have achieved as a company and as individuals. We like to share our knowledge with our clients, allowing a connection beyond feeling like “just a customer�. Although some of the assets and work we create and deliver is complicated and of a specialist area, we must avoid technical jargon when communicating about our work in order to avoid uncertainty or difficulty for the reader, no matter what level of technical or design background they may have. Any communication by you, made as an employee of SinglePixel, should represent the views of SinglePixel. Opinion should be avoided unless it is that of the company. We need to make our views consistent across the company and therefore this should be a common factor when communicating for every employee at SinglePixel.
25
9.0 | VIDEO 26
VIDEO STYLE The way we communicate through our videos is of a particular style and should therefore be adhered to in order to represent SinglePixel in the desired way. When a video has been made that represents the company, the standard 3D ident should be placed at the beginning. This is a key informative to the audience of our brand. An alternative to the 3D ident is for the logo to fade in to the center of the screen, pause, and fade out once on a white background to represent a comfortable, relaxed feel. The delivery style of the content should feel engaging and personal to the viewer rather than an indirect speech. Whilst doing this, we refrain from being so direct as if to make the viewer uncomfortable. Whilst the style of delivery is direct, this can be approached in a more relaxed manor in order to take away that potential discomfort. Our video composition style should be relaxed with no harsh feeling transitions or colours. Every element of the composition should be tailored to benefiting the scene in the best possible way to fit these guidelines.
27
28 March 2014 | Version 1.0