Brand Guidelines Release 1.0 January 2014 Š Copyright 2014 Virtual Creations Ltd
We have put together these brand guidelines to assist anyone who wants to implement the Virtual Creations brand effectivley across a range of media. These guidelines are essential to ensuring continuity across our brand.
Final Logo
Logo Versions Logo Sizing Logo Usage
Colour
Colours Colour Breakdown
Typography
Fonts Type Hierarchy
Digital
App Icon Wireframing Website Web-stills Icons
Print Marketing
Stationery Tone of Voice Copywriting style
Merchandise For additional information regarding the content of this brand guidance please contact us at info@virtual-creations.co.uk and we will endeavour to get back to you as soon as possible.
Imagery
Products Overlay styles Photographic Style
Logo
Final Logo This is the the final logo, it is saved in the brand library as vlogo. ai. For guidance on how to use the logo see the ‘logo usage’ section.
Logomark
Social media logos If required, the logo may be placed inside a circle or square background for various social media profiles. Please make sure only colours from the colour palette are used and that there is at least a 10% isolation zone surrounding the corners of the logo.
10%
10%
Logo Usage Isolation area 10mm
Isolation Zone The isolation zone is the space around the logo. It is important that no images/text/ borders or margins are placed within 10mm of the logo. This area of isolation is a minimum and should be increased wherever possible.
Logo type
Final Logo type on different backgrounds This is the the final logo type, it is saved in the zip file as vc_logotype.ai. A - Logo: Black: #212121 Red: # d50b52 Background: 40% Tint Light Grey B - 80% Tint Light Grey C - Mid Grey D - Dark Grey
Logo type
Final Logo type for mono printing If it is impossible to use the full colour version of the logo on printed material then the black and white version should be used.
Logo Versions
Logo Usage DO’s
Primary colour (red) or the multi coloured (red, blue and orange) should be used for the logo. Black or blue in the colour platette may also be used in particular circumstances. For example, if the background colour is primarily red. The logo type may be used with the primary logo; placed directly underneath and centered.
Logo Versions Logo Usage Dont’s A. Alignment/ proportion and distortion The logo should not be altered in any other way than displayed in this guide. B. Busy imagery Be careful when using the logo on a busy background. It should never obscure the focus of the logo.
A.
B.
C.
D.
C. Stroke The logo should not have any stroke added to any line. D. Visual effects The logo should never have any extra effects such as drop shadows or any other modifications.
Sizing
Minimum Height There are no predeterminied sizes for the logo, however, it is important to maintain proportion and for it not to be less than 10mm.
10mm
For the sake of legibility, the logo must also never be printed smaller than 10mm in height or 20px on screen. At smaller sizes it is best to use the logo icon alone as shown to the right.
10mm
Logo & backgrounds B&W backgrounds
Use any of the colour ranges within the colour scheme for all BW images. White and Black should not be used.
Logo & backgrounds Tinted backgrounds
White may be used if the background is dark enough for the logo to come through.
Colour palette
Primary Colour
Secondary Colour
Tertiary Colour
Dark Grey
Mid Grey
Light Grey
Colour Usage We have chosen a six-colour colour palette. These include 3 main colours 3 greys and white. Tints may be used on any of these colours if necessary. Use this document as a guide on how to implement these colours for print/web.
Breakdown RGB’s, Print & Tints 20% 40% 60% 80%
20% 40% 60% 80%
20% 40% 60% 80%
20% 40% 60% 80%
20% 40% 60% 80%
Red
Blue
Dark
Mid
Light
R213/G011/B082
R076/G165/B207
R033/G037/B043
R051/G054/B059
R214/G218/B219
Web#d50b52
Web#4ca5cf
Web#21252b
Web#33363b
Web#d6dadb
C0/M95/Y61/K16
C67/M20/Y8/K0
C77/M68/Y59/K67
C73/M65/Y58/K53
C15/M9/Y10/K0
Pantone 1925 C
Pantone 299
Pantone --
Pantone --
Pantone --
Here we have shown the breakdowns for each of the colours in our palette. RGB & Web Colours are for screen use only. CMYK & Pantone numbers are for print. We have included tints at 20% increments for particular printing preferences. Red http://www.colorcodehex. com/d50b52/ Blue http://www.colorcodehex. com/4ca5cf/ Orange http://www.colorcodehex. com/dc7e23/
Logo & backgrounds Light backgrounds
Red or black coloured text or logos should be used on lighter backgrounds, not light colours such as white.
Logo & backgrounds Light Red multiply backgrounds White logo may be used on dark backgrounds.
Logo & backgrounds Dark/ High contrasted red multiply backgrounds Multi colours from the palette may also be used on darker backgrounds.
Logo & backgrounds Light backgrounds
Red or coloured logos should be used on lighter backgrounds
Typeface
Typography Our typography is a key element of our brand and is used to help communicate a unified personality for Virtual Creations. We have gone for Ubuntu as the main typeface. The technical font design work and implementation is being undertaken by Dalton Maag and available at Google fonts: http://www.google. com/fonts/specimen/ Ubuntu
AaBbCc123@£$ Ubuntu Ubuntu Medium ABCDEFGHIKLMNOPQRSTUVWXYZ abcdefghiklmnopqrstuvwxyz 01234567890!@£$% Ubuntu Light ABCDEFGHIKLMNOPQRSTUVWXYZ abcdefghiklmnopqrstuvwxyz 01234567890!@£$%
Ubuntu Regular ABCDEFGHIKLMNOPQRSTUVWXYZ abcdefghiklmnopqrstuvwxyz 01234567890!@£$% Ubuntu Thin ABCDEFGHIKLMNOPQRSTUVWXYZ abcdefghiklmnopqrstuvwxyz 01234567890!@£$%
Hierarchy
Font Hierarchy The hierarchy refers to the order of importance of the fonts. As a secondary font, Futura LT may be used for title and heading styles.
T1 Ubuntu Thin — 30pt/30pt (Title) AaBbCcDdEeFfGg 01234567890!@£$%
H1 (Headline) SB1 (Subtitle) BC (BodyCopy)
Caption (Subtitle)
Ubuntu Regular — 18pt/21pt AaBbCcDdEeFfGg 01234567890!@£$% Cabin SemiBold — 12pt/15pt AaBbCcDdEeFfGg 01234567890!@£$% Ubuntu Regular — 9pth/12pt AaBbCcDdEeFfGg 01234567890!@£$% Ubuntu Medium — 8pt/12pt AaBbCcDdEeFfGg 01234567890!@£$%
www.virtual-creations.co.uk
Web stills
Landing pages Landing pages should have a banner or static image at the top underneath the main menu. The idea of the landing page is to navigatie users to the particular internal page they are interested in as easily as possible. Short, clear and concise statements coupled with informative icons will aid us to do this.
www.virtual-creations.co.uk
Web stills
Internal pages All internal pages should have the same main menu, footer and breadcrumbs. All content must have the correct typography settings and follow the Virtual Creations ‘tone of voice’ which can be seen on subsequent pages. All icons and images must not be enlarged to pixellation or distorted in any way. Please make sure all images are doubled (2x) for retina display screens.
Icons
Principles icon-network
icon-mail
icon-map
icon-tag
icon-home
icon-link
icon-mobile
icon-flag
icon-cog
Icons should always be placed inside a circular background. The icon itself should be minimal in detail and its purpose should be obvious. Use red or white circular icons colours for icons on dark backgrounds. More icons that can be used can be found at: http://www.entypo.com/ characters/
Icons
On black icon-megaphone
icon-teach
icon-book
icon-calendar
icon-notepad
icon-briefcase
icon-browser
icon-code
Icon-name
Use black circular coloured icons for light backgrounds. http://www.entypo.com/ characters/
Print Recipeint name Recipeint address line 1 Recipeint address line 2 Recipeint address line 3 Recipeint address line 4 Address line 1 Address line 2 Address line 3 Address line 4 Date
Stationery
Ref: Nobitiat ut libus
Dear Sir,
This is the layout for letterheads.
Nam faccuptat expedit invelec eaquiani iumqui temperitat. Cearum iunt ommoluptasit aci venis et aceatibus ex essimilita nim aut pe non endisto rectia verios enihil ipicia sequatis adissunt mo molupta cus acea accuptatur, sa dit, quias am dolendenis suntur mint. Uptatem arume delest, que sequiat quuntios ent vel mi, ut et vel ilitatia alignatur?
Nobitiat ut libus rem etur, verum apictum vendis et, experio nseque dolorib usdaepe quias ma si omnis volor reicita tiureictaqui dolorendeles everunti dolupta aut quis pratempos et lacipsam res sus, ut ommodis cipsapiendit doloreius ipsus volupta tquiaerio opta conse con evenit, ullibus enihil minvellora doluptatio tem dolectur?
Magnimi, odistores earis audanih itatia perrum reptae nis excepra quis in nulla asitas re mil ese dunt ut fuga. Faccatur? Lit laut ratius quiate odi nam, quae omnis solum et fugitia ius, et hillend usciis andi omnihil latisentis adion nonsequ aercium nis mo mo volorero del maximpor sum ut aut quisciis inctur soluptio es dollor re, qui unto eaquis eossimus conecescid que optatio cum sectur sum dolor minctatur? Nonserum deliqua tiusam, quias ni nonseque presto optatem ea imagnim quas ex expliqui cuptas ilique volent, nit odit, coribus reptae niantia pratiorro dollautaquis dipisiti debiti con exero oditatur mosanto etusdan duscid moluptur sum fuga. Nemporum is sam se liquatquid ullam lanisseque vellab ius esequid quat. Onse re, inumque volupid mi, officatem int qui to eatur archill ecabo. Re voloria sum quae excesti scienim qui quati occae odiscit et is volorit ioritibus, seditatur alignis qui dolum simus. Nonserum deliqua tiusam, quias ni nonseque presto optatem ea imagnim quas ex expliqui cuptas ilique volent, nit odit, coribus reptae niantia pratiorro dollautaquis dipisiti debiti con exero oditatur mosanto etusdan duscid moluptur sum fuga. Nemporum is sam se liquatquid ullam lanisseque vellab ius esequid quat. Onse re, inumque volupid mi, officatem int qui to eatur archill ecabo. Re voloria sum quae excesti scienim qui quati occae odiscit et is volorit ioritibus, seditatur alignis qui dolum simus
Yours Sincerely,
Your Name Your Position
Email info@virtual-creations.co.uk
Landline +00 000 000 00
Web www.virtual-creations..co.uk
Mobile +00 000 000 00
Address line 1 Address line 2 Address line 3 Address line 4
App
App Icon Here is what future software applications will be based on. White text on the Virtual Creations main orange/blue/red colour.
Devices
Landing page This is how all landing pages should be laid out on desktop (3 column), tablet (2-3 column) and mobile devices (single column).
Recipeint name Recipeint address line 1 Recipeint address line 2 Recipeint address line 3 Recipeint address line 4
Online training solutions info@virtual-creations.co.uk
Address line 1 Address line 2 Address line 3 Address line 4
Tim Clifford CO-FOUNDER
ONLINE TRAINING SOLUTIONS
T +44 (0) 77 88 219 244 E tim@virtual-creations.co.uk
Date
www.virtual-creations.co.uk www.virtual-creations.co.uk
info@virtual-creations.co.uk
Ref: Nobitiat ut libus
Dear Sir, Nam faccuptat expedit invelec eaquiani iumqui temperitat. Cearum iunt ommoluptasit aci venis et aceatibus ex essimilita nim aut pe non endisto rectia verios enihil ipicia sequatis adissunt mo molupta cus acea accuptatur, sa dit, quias am dolendenis suntur mint. Uptatem arume delest, que sequiat quuntios ent vel mi, ut et vel ilitatia alignatur?
Nobitiat ut libus rem etur, verum apictum vendis et, experio nseque dolorib usdaepe quias ma si omnis volor reicita tiureictaqui dolorendeles everunti dolupta aut quis pratempos et lacipsam res sus, ut ommodis cipsapiendit doloreius ipsus volupta tquiaerio opta conse con evenit, ullibus enihil minvellora doluptatio tem dolectur?
Magnimi, odistores earis audanih itatia perrum reptae nis excepra quis in nulla asitas re mil ese dunt ut fuga. Faccatur? Lit laut ratius quiate odi nam, quae omnis solum et fugitia ius, et hillend usciis andi omnihil latisentis adion nonsequ aercium nis mo mo volorero del maximpor sum ut aut quisciis inctur soluptio es dollor re, qui unto eaquis eossimus conecescid que optatio cum sectur sum dolor minctatur? Nonserum deliqua tiusam, quias ni nonseque presto optatem ea imagnim quas ex expliqui cuptas ilique volent, nit odit, coribus reptae niantia pratiorro dollautaquis dipisiti debiti con exero oditatur mosanto etusdan duscid moluptur sum fuga. Nemporum is sam se liquatquid ullam lanisseque vellab ius esequid quat. Onse re, inumque volupid mi, officatem int qui to eatur archill ecabo. Re voloria sum quae excesti scienim qui quati occae odiscit et is volorit ioritibus, seditatur alignis qui dolum simus. Email info@yourbrand.com
Phone +00 0 000 000 0000
Web www.yourbrand.com
Fax +00 0 000 000 0000
Address line 1 Address line 2 Address line 3 Post code
Nonserum deliqua tiusam, quias ni nonseque presto optatem ea imagnim quas ex expliqui cuptas ilique volent, nit odit, coribus reptae niantia pratiorro dollautaquis dipisiti debiti con exero oditatur mosanto etusdan duscid moluptur sum fuga. Nemporum is sam se liquatquid ullam lanisseque vellab ius esequid quat. Onse re, inumque volupid mi, officatem int qui to eatur archill ecabo. Re voloria sum quae excesti scienim qui quati occae odiscit et is volorit ioritibus, seditatur alignis qui dolum simus
Yours Sincerely,
Your Name Your Position
ONLINE TRAINING SOLUTIONS WEB DEVELOPMENT BRANDING www.virtual-creations.co.uk
Email info@virtual-creations.co.uk
Landline +00 000 000 00
info@virtual-creations.co.uk
Web www.virtual-creations..co.uk
Mobile +00 000 000 00
Address line 1 Address line 2 Address line 3 Address line 4
Merchandise
T-Shirt Two T-Shirt styles.
Merchandise
VC mug
Marketing
Tone of Voice Our primary focus is to portray a friendly, honest and light-hearted manner to our speech. Virtual Creations should always be capitalised except for when it is used in our logo.
We love working WITH our clients to give them a design that is not only functional but also beautiful...
Advertising
Billboard example An example of how a billboard advert may be used with our company slogan.
imagine... design... create ...
“The only way to do great work, is to LOVE what you do.” Steve Jobs
Imagery
Overlay Styles Where colour photos can’t be used - we use a colour overlay filter on our images. We use our primary red colour to give black & white images a deep red tint as shown.
Bottom Layer: 100% Blending Mode: Normal
Top Layer B&W: 100% Blending Mode: Multiply
Multiply example
Black & White Overlay
Imagery
Photographic Style The importance of using the correct imagery is great for us - it is pinnacle to holding the brand together. These set of priniciples are set out to aid any photographer/ designer with necessary guidance.
Vignette lens correction
See over the page for some examples.
Red/Blue Overlays
HDR photo effect
Slight Grain To Imagery
High Contrast Filters
Imagery
Photographic Style A few examples to demonstrate these variations. Black & white Opacity 100%
B&W Overlay
Noise filter
High contrast filter
Red overlay
High contrast Contrast 80% -100% Noise filter Noise 20% Uniform distribution Red Multiply 80% filter
Imagery
Photographic Style Radial Blur Smart blur Radius 10 Vignette Lens Correction 100%
Radial Blur
HDR photo
HDR effect Blue multiply overlay 80% filter
Vignette lens correction
Blue overlay
2014Š Virtual Creations Brand Guidelines info@virtual-creations.co.uk