virtual creations rebrand
DESCRIPTION
Version 1.0 January 2014TRANSCRIPT
Brand GuidelinesRelease 1.0 January 2014
© Copyright 2014 Virtual Creations Ltd
Final Logo
Colour
Typography
Digital
Marketing
Merchandise
Imagery
Logo Versions
Logo Sizing
Logo Usage
Colours
Colour Breakdown
Fonts
Type Hierarchy
App Icon
Wireframing
Website
Web-stills
Icons
Stationery
Tone of Voice
Copywriting style
Products
Overlay styles
Photographic Style
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.
For additional information regarding the content of this brand guidance please contact us at [email protected] and we will endeavour to get back to you as soon as possible.
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.
10%
10%
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.
Isolation area 10mmLogo Usage
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: # d50b52Background: 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.
A. B.
C. D.
Logo Versions
Logo Usage Dont’s
A. Alignment/proportion and distortionThe logo should not be altered in any other way than displayed in this guide.
B. Busy imageryBe careful when using the logo on a busy background. It should never obscure the focus of the logo.
C. StrokeThe logo should not have any stroke added to any line.
D. Visual effectsThe 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.
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
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
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.
Primary Colour
Dark Grey
Secondary Colour
Mid Grey
Tertiary Colour
Light Grey
Breakdown
RGB’s, Print & Tints
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.
Redhttp://www.colorcodehex.com/d50b52/
Bluehttp://www.colorcodehex.com/4ca5cf/
Orangehttp://www.colorcodehex.com/dc7e23/
Pantone --Pantone -- Pantone --Pantone 299Pantone 1925 C
C15/M9/Y10/K0C77/M68/Y59/K67 C73/M65/Y58/K53C67/M20/Y8/K0C0/M95/Y61/K16
Web#d6dadbWeb#21252b Web#33363bWeb#4ca5cfWeb#d50b52
R214/G218/B219R033/G037/B043 R051/G054/B059R076/G165/B207R213/G011/B082
Red Blue MidDark Light
20% 20% 20% 20% 20%60% 60% 60% 60% 60%40% 40% 40% 40% 40%80% 80% 80% 80% 80%
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@£$UbuntuUbuntu MediumABCDEFGHIKLMNOPQRSTU-VWXYZabcdefghiklmnopqrstuvwxyz01234567890!@£$%
Ubuntu RegularABCDEFGHIKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz01234567890!@£$%
Ubuntu LightABCDEFGHIKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz01234567890!@£$%
Ubuntu ThinABCDEFGHIKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz01234567890!@£$%
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.
Ubuntu Thin — 30pt/30ptAaBbCcDdEeFfGg01234567890!@£$%
Ubuntu Regular — 18pt/21ptAaBbCcDdEeFfGg01234567890!@£$%
Cabin SemiBold — 12pt/15ptAaBbCcDdEeFfGg01234567890!@£$%
Ubuntu Regular — 9pth/12ptAaBbCcDdEeFfGg01234567890!@£$%
Ubuntu Medium — 8pt/12pt
AaBbCcDdEeFfGg
01234567890!@£$%
T1(Title)
H1(Headline)
SB1(Subtitle)
BC(BodyCopy)
Caption
(Subtitle)
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
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/
icon-network
icon-tag
icon-mobile
icon-mail
icon-home
icon-flag
icon-map
icon-link
icon-cog
Icons
On black
Use black circular coloured icons for light backgrounds.
http://www.entypo.com/
characters/
icon-megaphone
icon-calendar
icon-browser
icon-teach
icon-notepad
icon-code
icon-book
icon-briefcase
Icon-name
Address line 1Address line 2Address line 3Address line 4
Date
Recipeint nameRecipeint address line 1Recipeint address line 2Recipeint address line 3Recipeint address line 4
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 cipsapi-endit doloreius ipsus volupta tquiaerio opta conse con evenit, ullibus enihil minvellora doluptatio tem dolec-tur?
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, inum-que 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 NameYour Position
Webwww.virtual-creations..co.uk
Landline+00 000 000 00
Mobile+00 000 000 00
Address line 1Address line 2Address line 3Address line 4
Stationery
This is the layout for letterheads.
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).
Address line 1Address line 2Address line 3Address line 4
Date
Recipeint nameRecipeint address line 1Recipeint address line 2Recipeint address line 3Recipeint address line 4
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 cipsapi-endit doloreius ipsus volupta tquiaerio opta conse con evenit, ullibus enihil minvellora doluptatio tem dolec-tur?
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, inum-que 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 NameYour Position
Webwww.virtual-creations..co.uk
Landline+00 000 000 00
Mobile+00 000 000 00
Address line 1Address line 2Address line 3Address line 4
Address line 1Address line 2Address line 3Post code
Webwww.yourbrand.com
Phone+00 0 000 000 0000
Fax+00 0 000 000 0000
ONLINE TRAINING SOLUTIONSWEB DEVELOPMENTBRANDING
www.virtual-creations.co.uk
ONLINE TRAINING SOLUTIONS
Tim CliffordCO-FOUNDER
T +44 (0) 77 88 219 244E [email protected]
www.virtual-creations.co.uk
Online training [email protected]
Merchandise
T-Shirt
Two T-Shirt styles.
VC mug
Merchandise
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
Red/Blue Overlays
Vignette lens correction
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.
See over the page for some examples.
Slight Grain To Imagery
High Contrast Filters
HDR photo effect
B&W Overlay Noise filter
High contrast filter Red overlay
Imagery
Photographic Style
A few examples to demonstrate these variations.
Black & whiteOpacity 100%
High contrastContrast 80% -100%
Noise filterNoise 20%Uniform distribution
Red Multiply80% filter
Radial Blur HDR photo
Vignette lens correction Blue overlay
Imagery
Photographic Style
Radial BlurSmart blurRadius 10
Vignette Lens Correction100%
HDR effect
Blue multiply overlay80% filter
