Lumacoustics Brand Book
20 1 1
Contents Brand Ethos (p.6) Values (p.7) Tone of voice (p.8) Brand statement (p.9) Logo In black & white (p.12) In colour (p.13) Exclusion zone (p.14) The angle (p.15) Icons (p.16) YrWall logo (p.17) Do & don’t (p.18) Typography Titles (p.20) Highlights (p.21) Body copy (p.22) Type in unison (p.23) The grids (p.24-26)
Contents
Photography Products (p.28-29) People (p.30-31) With graphics (p.32-33) Website CSS (p.37) Interactive logo (p.38) Menu (p.39) Case studies (p.40-41) Client logos (p.42) Homepage (p.43) YrWall (p.44) Motion Idents (p.46-48) Print Flyers (p.50-54) Business cards (p.55)
3
Th e B r a n d
Why shouldn’t the brand reflect the work? Interaction creates a more memorable point of contact with the customer and I aim to make the brand have a similar impact. The brand needs to be simplified across all forms of communication and to achieve a modern, cool feel this brand will need rigid systems that will last. The clients need to feel they can expect technical excellence.
Why so serious?! Let’s literally lighten up the company using bold copywriting and a friendly tone of voice. With such a small company you need to know there are real people running it.
Ethos
6
Interactive Slick Approachable
Values
7
Copywriting is crucial to creating a more personal brand. Using informal adjectives makes the tone more real: awesome, exciting, engaging, immersive, fun, cool, genius, memorable, fresh, etc... Light-based fun: “glowing recommendations” “light up your world” “we illuminate your brand” “your name in lights” “bright sparks” “Products” becomes “What we can do” “Event Blog becomes “Latest projects” “Clients” becomes “Happy customers” ”Archive” becomes “Full project list” “Work For Us” becomes “Join us” “Contact” becomes “Keep in touch” “Formulate” becomes “Create” ”Solve” becomes “Design” “We have successfully delivered” becomes “We have mastered” “We provide services...” becomes “We can make you...” “Newsletter” becomes “What we’ve been up to” Tone of voice
8
We illuminate your brand Brand statement
9
Lo g o
The logo works in black and white to save printing costs. Depending on the background you can select the version that will work easiest on the eye.
White CMYK: RGB: HTML:
The projection lines up with the corners of the ‘U’ and ‘T’. The ‘ST’ is always joined. The ‘i’ is dotted and the ‘a’ is lowercase to make it more instantly legible.
0 0 0 0 0 0 #FFFFFF
Logo in black & white
0
The logo can also be used in four dynamic colourways. The colour palette is versatile and selections should be determined by the context.
Black CMYK: RGB: HTML:
0 0 0 100 255 255 255 #000000
12
Orange CMYK: RGB: HTML:
0 66 100 0 243 120 33 #FF6600
Purple CMYK: RGB: HTML:
61 89 0 0 125 65 153 #7D4199
Green CMYK: RGB: HTML:
94 0 100 0 0 169 79 #00A94F
Blue CMYK: RGB: HTML:
83 0 10 0 0 182 222 #00B6DE
Logo in colour
13
The logo has exclusion zones that are relative to it’s size and angle. This is to provide the logo with integrity and space to breathe. This is important if the logo is used alongside other unaffliated logos.
Exclusion zones
14
The angle of the logo is precisely 35째 counter-clockwise from a vertical line, and 55째 downwards from horizontal. This should be checked to keep the brand consistant.
35째
55째
The angle
14
There is an alternative logo for use as an icon or for small formats such as favicons, avatars and application icons. This should be used as the logo for sites like Vimeo, Facebook, Flikr and Twitter.
Icons
16
When representing the YrWall the logo should drip vertically and include the tag. The drips can be placed differently each time, but with consideration to the context. The drips are not affected by the exclusion zone and can overlay or underlay any surrounding graphics.
YrWall logo
17
Don’t Don’t Don’t Don’t Don’t Don’t
use a different font. use a colour not in the colour palette. edit the letterforms. change the extrusion angle. change the letter spacing. use the main logo really small*!
* Do and don’t
18
Ty p o g r a p h y
Title font Neutraliser B o l d ABCDEFGHIJ K L M N O P Q R S T U V W X Y Z abcdefghijk l m n o p q r s t u v w y z 0123456789 !@£$%^&*() _ + { } : ” | < > ? ⁄ ™ ‹›fifl‡°·‚—±”’ Ú Æ » ¯ ˘ ¿ Tracking: 10 0 Kerning: 0
Title 30pt Sub - t i t l e 2 4 p t Menu 18pt
Titles
20
Headline/Highlight/Caption Neutraliser Thin ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwyz 0123456789 !@£$%^&*()_+{}:”|<>?⁄™ ‹›fifl‡°·‚—±”’ÚÆ»¯˘¿ Tracking: 0 Kerning: optical
Headline 36pt Highlight 30pt Thumbnail Headline 24pt
Highlights
21
Body copy Neutraliser Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwyz 0123456789 !@£$%^&*()_+{}:”|<>?⁄™ ‹›fifl‡°·‚—±”’ÚÆ»¯˘¿ Tracking: 25 Kerning: Auto Leading: 17.1 pt Web copy 14pt Web small print 11pt
Print copy 12pt Small print 9pt
Web alternatives: Verdana, Andale Mono, Courier.
Hyperlink 14pt bold underlined
Body copy
22
Main title here Su b - t i t l e h e r e Here you can see how the type can be used altogether. The body copy can run across two columns of the grid, so long as you make sure that there is never more than 10 words on one line. Setting the leading at 1.5x the pt size lets it breathe.
Highlights break the grid A hyperlink can jump out of the text with a contrasting colour, drawing your attention to it. With this system, it is easy to lay out text and maintain a clear hierarchy. This may be used on the website, in brochures and informative posters. The sizes can change depending on the format, but it is best to keep the ratio the same when possible. You can round off articles with a footer in oblique small print. This is good for copyright lines and trademarks.
Type in unison
23
There are a two main grids, created to help lay artwork and text out. The first is a 3 column grid designed to fit regular paper sizes. It can also be extended to a 12 column grid for online use. The rows help provide spacing and structure for text and images. Text can be aligned left or right, but the middle column should never be used on it’s own. The second grid is a diagonal grid. This works with the 35°/55° angle and divides standard paper sizes into 3 both horizontally and vertically. This is best used when cropping photographs or laying out graphics. In rare cases the two grids can be combined, but one must act as a foreground to the other’s background.
The grids
25
Ph o t o g r a p h y
To continue the theme of â&#x20AC;&#x2DC;illuminationâ&#x20AC;&#x2122;, mask around the parts of the photographs that feature the products and leave that in colour, desaturating the rest of the photograph. Photography should be used in a dynamic way, always as a focal point of any composition. By highlighting the work, it makes it clear what Lumacoustics are about whilst remaining stylish. This technique should be used across all platforms in which bold photography is used: on the homepage of the website, on flyers and within the brochure.
Whose bright idea was that then?
Product photography
28
Product photography
29
Lumacoustics create experiences for people to enjoy. Full colour photography should only be used when showing a person or people. Dynamic angles work best, with photographs chosen to show the point of interaction between product and person.
Light up their world!
People photography
30
People photography
31
The colour palette can really be put to use when alongside photography. The graphics can be chosen to compliment the image. This is an option that may not always work. Care must be taken to ensure the graphics do not fall away into the picture if saturated areas cross with coloured graphics.
Photography with graphics
32
Check out our 360˚ interactive display for the Windows Phone launch party ›››
See how we lit up Shoreditch Town Hall for Google Jam 2010 ››› Photography with graphics
33
We b s i t e
The website is designed with a 960px wide grid, a standard width for a website. A 12 column grid allows the content to be arranged in 3 or 4 columns. The layout for the homepage uses a big image on the front of the side. This image could animate and update, making the site feel alive from the beginning.
Website
36
Header Menu
Main image
Clients
Updates
Contact
Footer
CSS
37
The header on the website is interactive and playful to suit the ethos of the brand. If you hover the mouse over the letters, they glow and if you click the letter they depress.
Interactive logo
38
Active Home
Hover W h a t w e c a n do
Active
Hover
Home
W h a t w e c a n do
Latest projects
Full projec t l i s t
Join us
Get in touch
Latest projects
Full projec t l i s t
Join us
Get in touch
Full projec t l i s t
Join us
Get in touch
Y r W a l l D i g i t al Graffiti Wall Y r T a b l e D i g i tal Surface S q u a r e S c r e en System 3 6 0 ˚ P r o j e c t ion Environments P r o j e c t i o n M apping V i s u a l I n s t a l lations
Active Home
W h a t w e c a n do
Latest projects
The menu lights up in the current colour when you hover over an item. It is also used as wayfinding to highlight the current page you are on. The ‘what we can do’ section reveals the drop down menu for the product list.
Menu
39
The whole website can change colour scheme live, in accordance with the image on the homepage. The image and header wipe simultaneously, refreshing the page.
Case studies
40
The precise angle runs throughout the site, serving up new content whilst remaining full interactive. A technically difficult yet exciting website, showcases Lumacousticsâ&#x20AC;&#x2122; ability.
Case studies
41
Lumacoustics have a great client base with a lot of well-known brand names, so why not show it off? Client logos can be used to navigate through previous projects. Each logo should be converted to grayscale and then should saturate to full colour when you hover over them. Even grayscale logos work, as the inactive logo can be a faded shade.
Inactive
Client logos
Hover
42
Homepage
43
YrWall online
44
Mo t i o n
There are a range of idents for use on the beginning and end of case study videos. The Vimeo account has some great footage of Lumacoustics installations in action and each video should be topped and tailed with the branding. All the idents are moving versions of the logo and can be chosen to match the topic. The diagonal angle is a key feature for the animation to keep the visuals dynamic and the glitchy style suits the audiovisual performances of Lumacoustics. There are four key animations and each one is available in all four brand colours. The idents should be chosen to match the footage. The subject of the case study should determine the style of animation, whilst the first shot in the case study should determine the choice of colour. For any videos using the YrWall brand there is a separate animation with the tag writing on and dripping. There are also some short, colourful diagonal wipes that can be used within the case studies as transitions.
Idents
46
Orange Ident 001 Exploding shards
Orange Ident 002 YrWall dripping
Orange Ident 003 Diagonal glitches
Orange Ident 004 Close up reveal
Idents
47
Idents
48
Pri n t
The flyers are A5 and are die-cut at the precise diagonal angle of the logo. One side shows photography and the other has the text and logo. The cut corners begin at third of the length and height.
Flyers that turn heads! The angular design of the flyers make them stand out and memorable. When held in hand they can be tilted to read the text. There are two versions of the flyer depending on the event: bespoke Lumacoustics projects or YrWall projects.
Flyers
50
IMMERSIVE + INTERACTIVE PROJECTION MASTERS
TIM WILLIAMS +44 (0)207 0432632 +44 (0)7867 972200 tim@lumacoustics.com www.lumacoustics.com
The business cards should be foil-printed on matt 540gsm grey card and come in all four colours. This gives them a glow as the print catches the light, a company with brilliant work shining out amongst dull, traditional corporate marketing.
Business cards
55
Switch off and fade out...
Š 2011 Designed by Reuben Durrant Armstrong.