GUIDELINES & SPECIFICATIONS A detailed guide to the correct usage of the new Design Museum identity.
01
Specifications & Guidelines
CONTENTS
02
01
Strategy
02 04 08 10 12 13 14 15 16 18 20 22 24
The Logotype The Hexagon Hexagon grid General usage Exhibition poster Advertising poster Membership card Tickets Desktop Tablet Mobile Exhibition signage Wayfinding signage
STRATEGY The Design Museum is the home of design. It has the potential to bring together both people and ideas to start a conversation into the importance of design within the world. Each visitor and each exhibition is different, which led to a dynamic identity that can change to become both individual and personal. Each Design Museum member can utilise the infinite slash visual system to recreate their name in a completely unique logotype. This system can also be utilised by exhibitions, exhibitors, speakers, staff and anybody linked with the Design Museum. The concept began in early research, where the Design Museum explain their DNA. The DNA consists of a series of beliefs and promises that form everything the Design Museum do. Reviewing this DNA at the Design Museum building, I discovered that they are let down by one particular statement; “We provide context and connect both ideas and people.� Walking around the Museum, there is an undertone of awkward silence with other visitors. There is very little conversation between friends, and virtually none between strangers. This is common within art galleries, but with a museum dedicated to the discussion of design, conversation should be encouraged. My approach was to focus on the connectivity of people and design and utilise the architecture of the new Design Museum building as visual inspiration. Considering the two buildings as a silhouette, the Kensington museum has a much more angular design, compared to the building at Shad Thames, which has a more rectangular appearance. The roof of the Kensington building is created by triangular shapes that change depending on where the viewer stands. This concept is captured in the identity, where a series of infinite angles is visualised through a hexagon. The hexagon is therefore symbolic of the Design Museum, allowing it to be used without text where necessary. A grid system is also created from the hexagon, which is used broadly across all design outcomes, but also as a guide on which to lay the slash device. The final outcome is a versatile identity based around connecting individuals, whether people or design. Utilising the aesthetic styling of the Design Museum roof, the concept is bought together by an angular slash device that can be used to create bespoke typographic solutions. The design museum is the home of design, which boasts an identity devised to bring together individuals from all around the world to give their opinion on the world of design.
01
Specifications & Guidelines
THE LOGOTYPE The logo is designed around the hexagon. Always featured in the centre, the hexagon brings together the words, as well and “people and design�.
The logo is designed to be used at sizes as small as 1cm x 7cm. At this size, the slash device can be added to one section, instead of multiple words.
The Design Museum has a colour scheme of 4 different colours / tones. All of these colours can be applied to the logo, however the use of a dark logo on a dark background, or a light logo on a light background, is unacceptable.
02
The width of one side of the hexagon should match with the margin left between the hexagon and the word. This same margin will be used between the logo and other elements.
The bottom and top of the word should always match the corners of the hexagon. This allows the words to be sliced evenly and still retain legibility at any size.
7cm 1cm
When using the logo, there are a number of unacceptable applications. Never put the text on two lines or remove the hexagon. The logo should be set on one line with the hexagon in the centre.
Never add a drop shadow to the logo. Instead, use a colour or tone that elevates it from the background.
Never apply an embossed effect to the logo. On printed matter, the logo can be embossed but this should never be replicated in digital form.
Never make the logo thinner than the weight stated. The kerning is set on the logo for easy slicing, this should not be changed.
Similarly, never make the logo thicker than the weight stated. This will also affect the slash device. 03
Specifications & Guidelines
THE HEXAGON The hexagon is a symbolic representation of the “home of design�. It is central to the identity of the museum and is used as a basis of the grid system.
The hexagon can be used at multiple sizes, for various executions, as long as the weight remains the same. The smallest hexagon can be no less than 1cm x 1cm.
The Design Museum has a colour scheme of 4 different colours / tones. All of these colours can be applied to the hexagon, however the use of a dark hexagon on a dark background, or a light hexagon on a light background, is unacceptable.
04
When using the hexagon, it should always be used in the weight shown below. The margin between one hexagon and something else should be equal to the width of one side.
1cm 1cm
When using the hexagon, there are a number of unacceptable applications. Never rotate the hexagon. The grid is designed with the vertical hexagon in mind, rotation would affect the slash device. Never place a dark hexagon on a dark background. Similarly, never place light on light. Acceptable colour usage is stated on the previous page.
Never apply an effect to the hexagon. If the hexagon is dark, use it on a light background, and light on dark. Never apply a drop shadow. Never apply an embossed effect to the hexagon. On printed matter, the hexagon can be embossed but this should never be replicated in digital form.
Never make the hexagon thinner or thicker than the weight stated. The grid is devised specifically for the hexagon in the logo and changing the weight would affect the slash device.
05
Specifications & Guidelines
08
THE GRID SYSTEM
09
Specifications & Guidelines
HEXAGON GRID As the hexagon symbol is pivotal to the Design Museum identity, the grid is crafted around the hexagonal shape. Everything created by the Design Museum is built on a nine column grid. The hexagonal grid is overlaid, which will allow a guideline for the slashes to be applied. In a personalisation situation, where a rigid nine column grid is unnecessary, the hexagon grid can be applied as an alternative.
08
Size: 210mm x 297mm Margins: Top - 15mm Bottom - 25mm Inside - 15mm Outside - 13.6mm Columns: Number - 9 Width - 16.7mm Height - 257mm Gutter: 4mm Body copy hanging line: 76mm Text Specifications: Header & Folio Avenir 65 Medium, 7pt/8.4pt leading, CMYK 95 70 50 45 Blue Heading Avenir Bold, 32pt/30pt leading, CMYK 70 15 0 0 Grey Heading Avenir 55 Roman, 32pt/ 30pt leading, 90% black Bodycopy Avenir 35 Light, 8pt/9.6pt leading, 90% black
09
Specifications & Guidelines
USING THE HEXAGONAL & NINE COLUMN GRID Combining the hexagonal grid with the nine column grid can allow for a variety of innovative layouts. Images can be sliced, text can be set on a diagonal and whole compositions can be slashed. As the home of design, our identity should never become predictable or static, so creativity is encouraged. However, there are two standard layouts that are utilised on the website and in publication design. These can be modified with consideration. Please use either one of these layouts as a guideline to retain the Design Museum’s core focus. Composition One: Margin: Top – 7% Bottom – 12% Outside – 7% Inside – 6% Columns: Number – 9 Width – 7% Height – 81% Gutter: 3% Column usage: Text – 2-5 Image – 1-9 Image focal point – 4-9 Bodycopy hanging line: 30% from top
10
Composition Two: Margin: Top – 7% Bottom – 12% Outside – 7% Inside – 6% Columns: Number – 9 Width – 7% Height – 81% Gutter: 3% Column usage: Text – 1-2 Image – 1-9 Image focal point – 3-9 Bodycopy hanging line: 30% from top
11
Specifications & Guidelines
HEXAGON GRID: EXHIBITION POSTER Size: 594mm x 841mm Margins: Top - 30mm Bottom - 30mm Inside - 30mm Outside - 30mm Columns: Number - 9 Width - 55.6mm Height - 781mm Gutter: 10mm Body copy hanging line: 100mm Text Specifications: Headline title Avenir Black, 72pt/74pt leading, White Date Information Avenir 65 Medium, 36pt/34pt leading, CMYK 70 15 0 0 Event Information Avenir 35 Light, 36pt/ 34pt leading, White Bodycopy Avenir 35 Light, 18pt/16pt leading, White
12
HEXAGON GRID: ADVERTISING POSTER Size: 594mm x 841mm Margins: Top - 30mm Bottom - 30mm Inside - 30mm Outside - 30mm Columns: Number - 9 Width - 55.6mm Height - 781mm Gutter: 10mm Body copy hanging line: 100mm Text Specifications: Headline title Avenir Black, 72pt/74pt leading, White Bodycopy Avenir 35 Light, 18pt/16pt leading, White
13
Specifications & Guidelines
HEXAGON GRID: MEMBERSHIP CARD Size: 55mm x 85mm Margins: Top - 4mm Bottom - 4mm Inside - 4mm Outside - 4mm Columns: Number - 9 Width - 4mm Height - 70mm Gutter: 4mm Text Specifications: Front: Headline title Avenir Black, 30pt/30pt leading, White, Centre aligned Back: Member name Avenir Black, 24pt/24pt leading, CMYK 0 0 0 90 Member type Avenir Black, 24pt/24pt leading, CMYK 70 15 0 0 Membership Information Avenir 55 Roman, 8pt/ 9.6pt leading, CMYK 0 0 0 90 Bodycopy Avenir 35 Light, 7pt/7pt leading, CMYK 0 0 0 90
14
HEXAGON GRID: TICKETS Size: 55mm x 120mm Bleed: 5mm Margins: Top - 2mm Bottom - 2mm Inside - 2mm Outside - 2mm Columns: Number - 9 Width - 4mm Height - 116mm Gutter: 2mm Text Specifications: Front: Headline title Avenir Black, 24pt/24pt leading, CMYK 70 15 0 0 Admission type Avenir 65 Medium, 12pt/11pt leading, CMYK 0 0 0 90 Ticket Categories Avenir 65 Medium, 8pt/9pt leading, CMYK 0 0 0 90 Tickets Information Avenir 35 Light, 8pt/ 9pt leading, CMYK 0 0 0 90 Back: Bodycopy Avenir 35 Light, 7pt/7pt leading, CMYK 0 0 0 90
15
Specifications & Guidelines
WEBSITE GRID: DESKTOP Size: 1366px x 764px Margins: Top - 40px Bottom - 40px Inside - 40px Outside - 40px Columns: Number - 9 Width - 132px Height - 684px Gutter: 12px Text Specifications: Headline title Avenir Black, 40pt/40pt leading, White Information Avenir 35 Light, 18pt/20pt leading, CMYK 70 15 0 0 Dates & Times Avenir Bold, 18pt/20pt leading, CMYK 70 15 0 0 & White Webpage links Avenir 55 Roman, 14pt/ 16pt leading, White
16
17
Specifications & Guidelines
WEBSITE GRID: TABLET Size: 2000x1172 Margins: Top - 34px Bottom - 34px Inside - 34px Outside - 34px Columns: Number - 9 Width - 205px Height - 1100px Gutter: 10px Text Specifications: Headline title Avenir Black, 40pt/44pt leading, White Information Avenir 35 Light, 16pt/16pt leading, CMYK 70 15 0 0 Dates & Times Avenir Bold, 16pt/16pt leading, CMYK 70 15 0 0 & White Webpage links Avenir 55 Roman, 12pt/ 14pt leading, White
18
19
Specifications & Guidelines
WEBSITE GRID: MOBILE Size: 960 x 640 Margins: Top - 24px Bottom - 24px Inside - 24px Outside - 24px Columns: Number - 9 Width - 94px Height - 592px Gutter: 8px Text Specifications: Headline title Avenir Black, 36pt/38pt leading, White Information Avenir 35 Light, 16pt/19pt leading, CMYK 70 15 0 0 Dates & Times Avenir Bold, 16pt/19pt leading, CMYK 70 15 0 0 & White Webpage links Avenir 55 Roman, 9pt/ 11pt leading, White
20
21
Specifications & Guidelines
SIGNAGE GRID: EXHIBITION Margin: Top – 5% Bottom – 10% Outside – 5% Inside – 5% Columns: Number – 3 Width – 24% Height – 85% Gutter: 9% Bodycopy hanging line: 40% from top Text Specifications: Events/Exhibitions Avenir Black, 200pt/220pt leading, CMYK 95 70 50 45 Information Avenir 65 Medium, 140pt/150pt leading, CMYK 95 70 50 45 Floor Number Avenir Black, 500pt, CMYK 95 70 50 45 Floor Information Avenir 35 Light, 140pt/ 150pt leading, CMYK 95 70 50 45
22
23
Specifications & Guidelines
SIGNAGE GRID: WAYFINDING Margin: Top – 5% Bottom – 10% Outside – 5% Inside – 5% Columns: Number – 3 Width – 24% Height – 85% Gutter: 9% Bodycopy hanging line: 40% from top Text Specifications: Place/Area Avenir Black, 400pt/430pt leading, White Event/Exhibition Avenir 65 Medium, 200pt/210pt leading, White Event Information Avenir Bold, 140pt/160pt leading, CMYK 95 70 50 45 & White Place Information Avenir 35 Light, 140pt/ 150pt leading, CMYK 95 70 50 45 & White
24
25
Specifications & Guidelines
28