Branding Matters
blur Group Identity Guidelines
blur Group Identity Guidelines
LOGO Purpose This brand manual will serve as a positioning reference for everything relating to blur Group brand elements.
About
blur Group is a company reinventing how businesses do commerce at blurgroup.com. Its Global Services Exchange delivers services differently: a new way to buy, manage and pay Adhesion to these guidelines will strengthen for core services. Nearly 50,000 businesses in and reinforce our brand and cultivate a uniform 141 countries have adopted this s-commerce brand identity which will reflect blur Group’s platform and changed the way they work. core values. blur Group (BLUR) is a public company Our aim is to establish our brand as globally headquartered in the UK with offices in the US recognizable, through consistency in brand and Europe. It is listed on the London Stock content, identity and behaviour. Exchange’s AIM market. blur was founded in January 2006 and launched in alpha in 2007 with the full, formal launch of the Global Services Exchange in January 2010. At that time, just over three project briefs per month were submitted. Now hundreds of projects per month from companies like Broadridge, Coral, Exceed, HCA, Momentive, Red Commerce, the Financial Times, Berlitz, Butlins, GE Healthcare and Tyco are received and tens of thousands of expert service providers on eight exchanges responding to them.
Logo Introduction Logo Positioning Protecting the logo Logo Color Rules
blur Group Identity Guidelines
blur Group Identity Guidelines
LOGO Logo Introduction The blur logo is the visual cornerstone of our identity – a consistent thread throughout all of our communications. It’s our guarantee of quality to both our experts and customers.
!
Info It is important to extract the maximum value from our logo by ensuring its consistency across visual communications.
blur Group Identity Guidelines
blur Group Identity Guidelines
LOGO
LOGO
Positioning
Displaying the Logo
The logo is inclined 13 degrees upward from its bottom left corner. It can be found inside the top left of the website header bar.
The incline must spatially respect the logo’s immediate borders. Black and white are the primary brand colours and are integral to our brand identity. Combined with a contrasting background colour, our logo will achieve its maximum aesthetic impact.
!
Info Wherever the logo appears inclined, the angle of incline must always be the same.
blur Group Identity Guidelines
blur Group Identity Guidelines
LOGO
RULES
Logo symbol When the logo is coupled with the respective words belonging to each exchange, then the accompanying word should respect the blur logo’s exclusion zone.
Web
Lower Case Lower case b for blur, followed by upper case letters for Group, Designs, Marketing, Media, Technology, Legal, and Accounting.
Trademark Wherever Global Services Exchange appears, it should be trademarked.
Logo
Exchange Name
Logo
Exchange Name
The typeface used for the entity name is Myriad Pro with -10 tracking acording to the logo size the font weight change.
“The” Never should a “The” precede “blur Group,” even at the beginning of a sentence. Similarly, blur will always start with a lower case “b,” even at the start of a sentence.
Numbers Numbers are formatted with commas. Eg: “over 2,000” not “over 2000”.
blur Group Identity Guidelines
STYLE Color Typography Do’s & Dont’s
blur Group Identity Guidelines
COLOR blur Logos Each “blur” branded business Exchange has its own specific colour. Anytime we want to indicate the name of the Exchange next to the logo, we use a black and white blur logo with the name of the Exchange next to it, respecting the exclusion zone.
Written Style When in body text, all exchange business names should always appear in Myriad Pro Regular font (not bold, italics, outlined or underlined).
Minimum Size The logo should always be visible.
Black and White Exchange Logo
blur Logos
blur Group Identity Guidelines
blur Group Identity Guidelines
COLOR
COLOR Black and white are the colours that we use, being an integral part of our brand identity. Combined with a contrasting background colour, our logo will achieve its maximum aesthetic impact.
Designs
Marketing
Media
Technology
Hex.: #ee2849
Hex.: #ffb60f
Hex.: #8d009e
Hex.: #0252a8
Innovatrs
Legals
Accounting
b-uncut
Hex.: #00b2cd
Hex.: #01b02e
PANTONE Black
R: 17 G:17 B:17
C: 73 M: 67 Y:66 K: 83
PANTONE White
R: 249 G:249 B:249
C: 1 M:1 Y:1 K:0
Hex.: #111111
Hex.: #64061c
Hex.: #ff7900
Hex.: #f9f9f9
blur Group Identity Guidelines
blur Group Identity Guidelines
COLOR
TIPOGRAPHY
Colors The logo colour is flexible, but clarity is always maintained by the use of contrasting colours. The following fundamental rules will help you achieve optimum definition.
Myriad Pro
!
Info To achieve maximum impact the individual business exchange logos must contrast with any background colour. Likewise the text in the logo (eg: design, accounting, legal) must contrast with the colour of the logo.
blur Group Identity Guidelines
blur Group Identity Guidelines
DOS & DON’TS Treatment of the trading names The following illustrations demonstrate correct and incorrect renderings of “blur Group” trading names using the logo and font. Whilst these illustrations do not cover every possible scenario, you will formulate a good idea of what is acceptable and what is not.
ILLUSTRATIONS & ICONS Dont’s
Designs
blur Group Identity Guidelines
Marketing
blur Group Identity Guidelines
Media
blur Group Identity Guidelines
Technology
blur Group Identity Guidelines
Innovatrs
blur Group Identity Guidelines
Accounting
blur Group Identity Guidelines
Legals
blur Group Identity Guidelines
blur Group Identity Guidelines
APPLICATIONS blur Group
Website
How it works graphic
Stationery Photography Press Icons & Illustrations
blur Group Identity Guidelines
blur Group Identity Guidelines
WEBSITE Website
Instructions of the website
Our website represents who we are and what we offer. When people see it for the first time, they’re thinking: Is this site credible? Is it trustworthy? Does it look professional? How can I find what I want or need? Does this site make me feel welcome? Am I in the right place? Layout
Every “blur Group” branded business is online, and most of the customer business comes in directly from those channels. The design of web pages is crucial. The layout has to deliver information in a clear and concise way, with a straightforward navigation layout. The header is one of the most important parts of the website. Each header in each specific “baby blur” business exchange will be the name of the respective exchange next to the blur logo, login, gallery and search bar to make the page easily navigable. The whole website is built with 16 different 960 grid columns, making the navigation cleaner and ordering the layout. We also are not afraid of using white space in some of the pages for content separation and to avoid clutter. Common throughout our sites are the four main tabs: Home Page, About Page, How It Works and Support. Furthermore, for different web pages with differing usability such as careers pages, news or FAQ’s this commonality is constant giving uniformity to the whole experience. The navigation bar remains in the same location on all pages. The solid navigation system allows for a consistent user experience, one that enables users’ ease of search for relevant information, ease of search being one of the most important elements of the website. The consistent navigation theme keeps constant the user’s experience, and draws the user towards the footer (also consistent across every page). Further simplifying the user’s experience is a search bar in the header such that visitors can search by keyword; we keep the navigation structure on the page simple, rather than going overkill with navigation options. With no more than 3 levels of navigation on the page, simplicity is key; we also include Javascript to get the site working for mobile devices, making sure that links are navigable (for SEO purposes). Our guide to simple navigation is the following: Do not expect visitors to think about where
they need to go and how to get there, lay it out on a platter for them. Another thing to keep in mind is that anyone visiting blur Group will be able to with whichever browser or device that they are using, in order to ensure significant traffic.
Color
Colour is a very powerful element in web design. Colours draw an emotional reaction from us as site visitors; they can and should be used to support the purpose of a website Psychologists have suggested that colour impression can account for 60% of the acceptance or rejection of a product or service. Market researchers have also determined that colour affects shopping habits: 1. Impulse shoppers respond best to red-orange, black and royal blue. 2. Shoppers who plan and stick to budgets respond best to pink, teal, light blue and navy. 3. Traditional people respond to pastel colours – pink, rose, sky blue. Firstly, the blur Group home page and all its inside pages are coloured in an elegant black style. Furthermore, each baby blur exchange has itw own unique colour, giving the brand a multicolour palette of personality. Colours are always chosen for each baby blur while keeping in mind which type of visitor might be on that particular exchange. Colours are not meant to jump out at you or be overly stimulating; blur 3.0 aims for simplicity and to look as temperate as possible.
Typography
The font used (Myriad Pro) is easy to read. The site is English based, so information flows from top left to bottom right.
Photography
The images and photography chosen throughout the site are personal photographs taken by Phillip Letts, representative of the brand and business personality. These images are unique to blur. The reasons why a particular picture is selected for a particular website has to do with colour, the kind of page (eg: dynamic and bright depending on the baby blur and the type of user). Visitors of course want the photos on the website to be relevant to the purpose of the site; they would likely prefer a simple webpage with not very many images rather than one with many images which make it seem too busy and cluttered. We are conservative with the use of our images, mindful of size, composition, quality and exposure, so as to incite interest and excitement.
Icons & Graphics
When we started to design the website, the significance
of iconography was one of our initial considerations. Icons save the same purpose as paragraphs or bullets in terms of organizing information and optimizing the user experience. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention. Our primary goal in using icons is to help the user absorb and process information more efficiently. This is usually done by using white space and icons that don’t distract from the content but rather augment it. The use of icons even enriches the minimal content by giving it more substance, communicating effectively without wordiness. Icons are meant to draw the user to the content, not to diminish or replace it. Icons make the website user friendly, inviting and professional, with attention to the smallest detail. Project icons help to reinforce the point we are trying to get across in the paragraph, helping the message to be more accessible to readers. We recognize that icons provide visual separation between different sections of text. Our icons are easily recognizable and relate closely to the content that they are accenting. The logos are similar in their look and feel and consistent throughout the website. The icons have only two main colours: black and white (monochromatic) which helps accent content without being distracting. The graphics used throughout the whole website (all of them vectorized), are reflective of the style of blur 3.0; clean, clear and tidy. One of our objectives is to make our pages as visually appealing as possible without slowing them down; always a balance between “good looking” and “fast loading.” We initially designed the website with only text, to see how pleasing the page would look, a testament to the possibility of having a visually pleasing text only page. Another guiding principle is to not annoy the visitors; visitors are most annoyed by slow loading pages and displays. Other irritators to the user include: crowded pages, clashing colour combinations, blinking text, animated images, excessive images and too much advertising, all of which we avoid. We use our graphics to transmit messages and to simplify user experience and understanding. For example, putting the icons over each project category helps first time navigators better understand what we are and project categories. As the old adage goes, a picture paints a thousand words. Our graphics are clearly purposeful, and are not merely decorative images (which tend to be ignored unconsciously by the user’s brain). The style of blur 3.0 graphics is soft, rounded edges. These graphics are always supporting other imagery, by guiding the user’s eye away from lower priority elements. This is not to say that non-primary areas cannot be aesthetically complex or subtle, but that these areas should not aim to draw attention. We always keep the site’s goals and the user’s goals in mind, and then apply graphics to certain areas based
on that. An Icon is defined as a compact visual shorthand which represents a complex idea in minimum space. In our case, they are incredibly powerful. A good icon does not need decoding and its meaning should be neither ambiguous nor unfamiliar (eg: “Book Icon” = “Click here to get to the ‘submit a brief’ page for book illustration”). Our icons have a string of similarity and consistence among them and have been built with careful consideration of how they should be applied.
Buttons
The buttons throughout the whole website are employed in a way to not require much effort from the user to activate them. They always stand out; the colour of the button must contrast with the text inside and they must seem very clickable.
Pop Up
Pop up videos, application forms, login forms and info pop ups are always in the same style, consistent with the blur Group dashboard..
blur Group Identity Guidelines
blurgroup.com
blur Group Identity Guidelines
Baby blur’s
blur Group Identity Guidelines
blur Group Identity Guidelines
STATIONERY Stationery For physical collateral like stationery, the blur logo will be either inclined or straight, according to the type of stationery. Sometimes the logo will be white over a black background, always clearly and cleanly illustrated.
p
Grou
Business Cards. Last revised 2012
Posters. Last revised 2013
blur Group Identity Guidelines
blur Group Identity Guidelines
PHOTOGRAPHY AND PRESS Images into Press To insert the logo into press pictures, photography and photo ads, the blur Group logo should be on the bottom right corner. The colour of the logo on the picture and colour it is meant to contrast with.
Press Photos. Last revised 2013
The Global Services Exchange Services Delivered Differently www.blurgroup.com
blur Group Identity Guidelines