Page 1

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.

Lumacoustics Brand Book  
Lumacoustics Brand Book  

The final comprehensive branding document for the Lumacoustics brand I pitched to the company in 2011. I used this as my 'Live Project' modu...

Advertisement