THE REBRAND A catalogue of the new aesthetic styling for the Design Museum, alongside an analysis of how it will be executed.
CONTENTS Welcome to the new Design Museum. Inside you will find a detailed analysis of the redesigned identity system. Please note, many of the images used in this project are sourced placeholder images and the designer claims no ownership.
1.1 1.2 1.3 1.4 1.5 1.6
OUR VISUAL LANGUAGE
A study of the Design Museum’s new visual language, including branding and typography.
An exploration of the Design Museum’s print executions.
Logo Hexagon Colours Typography Photography Visual elements & Personalisation
2.1.1 2.1.2 2.2 2.3
Advertising Poster Exhibition Poster Membership Card Tickets
3.1 3.1.1 3.1.2 3.1.3
DIGITAL
ENVIRONMENT
An exploration into how the Design Museum portrays itself on screen.
An exploration into how the Design Museum would utilise the identity at Kensington.
Website Desktop Tablet Mobile
4.1 4.2 4.3
Exhibition Signage Information Signage Wayfinding Signage
OUR VISUAL LANGUAGE A study of the Design Museum’s new visual language, including branding and typography.
The Rebrand
1.1 LOGO The redesigned logo of the Design Museum captures the concept of unity and individuality. It is made up of three seperate elements, which are:
Strong yet invisible The logotype is modified from Source Sans Pro, Adobe’s first open source typeface family. The typeface’s original intention was to work well in user interfaces, which allows for a functional font that can be sliced without losing legibility. Weighted in Black, the logotype has a strong presence, but the sans serif style allows it to not dominate the layout.
01
Cutting the static The modified font is combined with the Design Museum versatile slash identity, to create a visual system that allows for infinite variations of both the logotype and general copy. The angles are adapted from the roof of the new Design Museum building, which is almost an exhibition in itself.
The home of design The Design Museum is the home of design and Kensington will offer a much larger space in which to bring together the design community. The hexagon, symbolic of the Design Museum, sits directly in the centre of the logotype to demonstrate the unification of public and exhibition, reinforcing the Museum’s DNA focus on “connecting both ideas and people.”
Our visual language
The logotype is designed to be a dynamic, living marque. The angular slices can intersect the logo at any point, creating a versatile identity with virtually endless aesthetic possibilities.
02
The Rebrand
1.2 HEXAGON The hexagon is a symbolic representation of the Design Museum. Central to the brand, the hexagon acts as a middle point, a literal representation of “the home of design�, and will demonstrate the concept of bringing elements together.
The hexagon is the centre of the identity, which allows for a grid system to be developed. This grid will be used across all pieces of design and will be the basis of consideration when applying the slash device.
03
Where necessary, the hexagon can become the placeholder for the logo, especially smaller spaces, where a full logo would be too dominant. This would include, but is not limited to, this example of the redesigned website.
04
The Rebrand
1.3 COLOURS R 65 G 64 B 66 C0 M0 Y0 K 90 #404041 PANTONE 446 C
R 11 G 54 B 71 C 95 M 70 Y 50 K 45 #0b3647 PANTONE 303 C
12 05
Our visual language
Design Museum’s blue palette is a strong selection that instantly captures attention. Blue is symbolic of trust, loyalty, wisdom, confidence and intelligence, and is considered to be beneficial to the mind and body.
R 39 G 170 B 225 C 70 M 15 Y0 K0 #27a9e1 PANTONE 298 C
R 168 G 201 B 218 C 33 M 11 Y9 K0 #a8c9da PANTONE 551 C
06
The Rebrand
1.4 TYPOGRAPHY The Design Museum logo font is adapted from Source Sans Pro. The slightly condensed, rigid nature allowed the logo to be sliced much more effectively. The main font for the museum is Avenir, in a variety of weights. The open, rounded sans serif is equally inviting and authoritative.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;@><~[]{}_+-=()*&^%$£”!? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;@><~[]{}_+-=()*&^%$£”!? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;@><~[]{}_+-=()*&^%$£”!? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 .,:;@><~[]{}_+-=()*&^%$£”!?
An example of how the text would read. A heirarchy of weight and size allows the layout to flow.
ALL TITLES ARE BLACK FULL CAPS All subheadings or bylines are set in bold. For example, The Design Museum Collection is made up by over 3000 objects that range from the early Modernism of the 1900s to the cutting edge of contemporary design. All main body copy is set in Roman. For example, The Collection tells the history of design in mass production and includes furniture, lighting, domestic appliances and communications technology and is an important record of the key designs which have shaped the modern world. Any small sections of information, captions or secondary information are set in Light. For example, Design Museum will create displays for its permanent collection once it moves to a new home in Kensington in 2016.
07
Our visual language
Here is an example of how the font looks after the slices have been printed. The cuts works alongside the image to create a striking composition unifying text and design.
08
The Rebrand
1.5 PHOTOGRAPHY Photographs will be set to full bleed on any visual medium, specifically on posters and online. Built around a nine column grid, the design is split into 1/3 text and 2/3 image. The focus on the image would always be in the right 2/3, meaning that the 1/3 on the left can be overlaid with text that remains legible and doesnâ&#x20AC;&#x2122;t distort the image.
09
Our visual language
10
The Rebrand
1.5 PHOTOGRAPHY: IN CONTEXT Advertising posters will be placed around London, in order to drive attention. Within this poster, the image of Saville and his name are the most eyecatching, followed by the dates of the exhibition and then a smaller amount of information. The slash device allows for instant recognition of the Design Museum, even if the reader only manages a quick glance.
11
Our visual language
Portrait images handle the overlaid text differently to landscape images. The text is likely to need 2/3 space to fit, therefore it will sit in the bottom left of the design, covering only a small section of the imageâ&#x20AC;&#x2122;s focal point.
The Design Museum is the home of design, so creative expression is encouraged. Due to this, most images will tend to be in colour, however the use of black and white photography is also approved.
12
The Rebrand
1.6 VISUAL ELEMENTS & PERSONALISATION Using the hexagonal grid, developed from the brand symbol, all text can be sliced to reinforce the idea of individuality. The slices are inspired by the angular roof of the new Design Museum. These are then utilised to allow each piece of text itâ&#x20AC;&#x2122;s own identity.
The slices can be placed anywhere on the grid, which allows no two words to look exactly the same. The amount of slices used is optional, however they must follow the lines on the grid to retain legibility.
13
Our visual language
The individual identity concept is continued into the personal logotypes, which each member can generate. As each member is different, and their individual voices help form the world of design, a dynamic system allows each of them, and each exhibit, to have their own identity.
The slash device can work in both directions, meaning an interesting cross effect can also be utilised. Optionally, some letters will not be affected by the slash in order to retain legibility.
The blue slashes themselves are an optional device, often they will not be visible and the identity will feature just the words.
14
PRINT An exploration of the Design Museumâ&#x20AC;&#x2122;s print executions.
The Rebrand
2.1.1 POSTERS: ADVERTISING Both posters will utilise the same nine column grid system. For advertising posters, especially these for the membership, a small block of text will sit in the top left of the poster with information regarding the featured event/exhibition/etc. Along the centre a strong, white, slashed title will introduce the image, which will be a shade of blue.
17
The bold title across the centre of the poster will feature and almost infinite selection of slashes. This means that the poster can be linked to the design museum instantly, in the head of the reader, without having to stop and read all of the information.
18
The Rebrand
2.1.2 POSTERS: EXHIBITION Similar to the advertising poster, the exhibition poster will also be structured on a nine column grid. However, there will be less copy in the top left, instead details of the event will be added underneath the title.
19
The design of the landscape poster is the same as the portrait poster, however the image has more space and is rarely covered by text.
20
The Rebrand
2.2 MEMBERSHIP CARD The membership card will utilise the now permanent Design Museum collection as the front image. On the back, sliced text will feature the name and type of card holder. Underneath all details of ownership will be displayed.
This is the official size of the card when printed. Depending on the image and the memberâ&#x20AC;&#x2122;s decision, the front image can be either portrait or landscape. Regardless, the information on the back will always remain portrait.
21
2.3 TICKETS The ticket is loosely based on the design of the membership card, however the image in the top right will change depending on the type of ticket. For example, the image for an exhibition will be different to a ticket for a public lecture.
A perforated base allows the ticket stub to be retained by the Design Museum for their records. Half of the barcode is visible on either ticket, for easy scanning and entry.
22
DIGITAL An exploration into how the Design Museum portrays itself on screen.
The Rebrand
3.1 WEBSITE
Here is an example of the Design Museumâ&#x20AC;&#x2122;s website navigation. The homepage features a horizontal gallery of images, each linking to a different exhibition or talk, etc. Upon selection, the bottom bar will drop off the screen and the navigation will become one long vertical webpage, automatically scrolling down onto the information page.
On the information page, there is a brief synopsis of the event on the left. In the centre, all featured exhibitors are mentioned. If this is purely one person, they can either write a note themselves for the visitors to read, or the sections can be filled with public reviews.
25
Digital
On the following page is a gallery, of both the work featured in previous exhibitions and of the exhibition at the Design Museum itself. The gallery is designed to both entice new visitors into the show, but also document some of what has been seen for visitors to remember.
Finally, there is a related events page. This page will document events, talks, exhibitions and shows that are coming soon and relate to the current exhibition. Tickets can then be booked for these exhibitions in advance.
26
The Rebrand
3.1.1 WEBSITE: DESKTOP The Design Museumâ&#x20AC;&#x2122;s desktop website will have a strong focus on full bleed images. Utilising the nine column grid, all text will sit in the left 3 columns, and the image focal point will sit in the right 6 columns. All links to other pages will be in either the header or footer, which is aligned with the text on the left.
27
Digital
28
The Rebrand
3.1.2 WEBSITE: TABLET The design of the tablet is very similar to the desktop website, however the image is much larger to cover a smaller area. The user can once again navigate by swiping left/right and open an article by tapping it.
29
Digital
The links and pages are still featured within the header and footer, as the text size doesnâ&#x20AC;&#x2122;t need to be edited to fit.
30
The Rebrand
3.1.3 WEBSITE: MOBILE The mobile website will be stripped down to bare essentials. The full logo would be utilised to allow the image and type to retain focus. Each article is opened by tapping the image, and navigation is controlled by horizontal scrolling.
31
Digital
The portrait mobile website would be stripped back further than the horizontal. This will allow the image to take full focus alongside the type.
32
ENVIRONMENT An exploration into how the Design Museum would utilise the identity at Kensington.
The Rebrand
4.1 SIGNAGE: EXHIBITION Using an adapted six column grid, the left two columns will cover the contents of the floor, where the remaining 4 columns will cover current and upcoming events.
35
Environment
36
The Rebrand
4.1 SIGNAGE: EXHIBITION On the walls the floor number and the current exhibitions/events would draw the most attention. This will allow visitors to recognise the information from a distance, rather than rely on maps or constant signs and arrows.
Inside the exhibition, the layout of the original signage is retained, however the floor details are discarded as they would prove to be irrelevant.
37
The Rebrand
4.2 SIGNAGE: INFORMATION Due to Information signage being important in terms of instant legibility and safety, it will always be placed inside boxes throughout the Design Museum. This will allow the sliced identity to be applied without impacting the text.
Where the information is used to explain an action, the text is unaffected, yet the slices on the box continue the identity.
39
Environment
The hexagonal grid system can also be used to create bespoke iconography. This iconography can then be used on the website, on posters and within the signage.
MALE
FEMALE
DISABLED
RUNNING
CLOCK/ TIME
DATE
SHOP/ MONEY
SWAROVSKI LEARNING CENTRE
SPEAKER/ TALK
LIGHTBULB/ COLLECTION
CAFÉ
SACKLER LIBRARY
EXHIBITION
FIRE EXIT
RESTAURANT
40
The Rebrand
4.3 SIGNAGE: WAYFINDING Within the Kensington building, all floors are visible from the ground floor due to the high roof. Wayfinding can therefore be stripped down and incorporated into the signage.
Utilising the same 9 column grid used throughout the Design Museumâ&#x20AC;&#x2122;s identity, the three separate sections of information are arranged, each into 3 columns. The name of the location, in this case Gallery One, will cover the entire 9 columns.
41
Environment