Design Guide

User Manual:

Open the PDF directly: View PDF .
Page Count: 32

Download
Open PDF In Browser	View PDF

1

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

N AT M U S
KAMMER
Design Guide

N AT M U S
KAMMER

2

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

TAB L E OF C O N T E N T

1. The brand narrative

03

2. Logo

05

3. Typography

11

4. Colors

15

5. Imagery

17

6. Fifth Element

19

7. Web

22

8. Airlook

26

9. Applications

28
N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

3

THE BRAND NARRATIVE

N AT M U S
KAMMER

4

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

THE MODERN STORYTELLER

Storyteller is one of the oldest profession in the world, it is how
we keep track of our history. Natmus Kammer wants to keep
this tradition of entertainment by becoming a new type of storyteller, a modern storyteller. Like history, the way of telling
stories must also evolve and we are ready to evolve with it. With
our various collection of stories and multimedia contents, we
are the perfect tool to satisfy you curiosity. Together we must
built a bridge between the past and the present by looking at
our history and put it in perspective with the present. We are
here to offer you an immersive and knowledge-based experience. Take part of your own story and experience it yourselves in
the comfort of your home.

N AT M U S
KAMMER

5

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

LOGO

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

6

LOGO CREATION
The logo is a combination of a
box shape, which represents a
room, and the two first letters
of the media platform’s name.
The name is always put on the
right side of the logomark.

N AT M U S
KAMMER

7

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

CLEARSPACE AND SCALING
Leave enough space between
the logo and any other elements.
The minimum clearspace is half
the height of the logo on all
sides.

The logo always needs to be
scale proportionnaly. To change the size of the logo always
hold the shift key to maintain
the good proportions.

N AT M U S
KAMME R
N AT M U S
KAMMER

N AT M U S
KA MME R

N AT M U S
KAMMER

N AT M U S
KAMMER

8

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

LOGO COLOR PALETTE
Use black and white outlines
on busy designs and official
documents.

The logo always needs to be
readable from far.
Choose appropriate colors
according to the background
color.

Do

Don’t

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

9

LOGO AND LOGOMARK COMBINED WITH ELEMENTS

Put no fill color and only
a contour on the quadrilateral.
The fill color of the 4 triangles
needs to be the same as the
background color.
The elements can partially be
outside of the box.
Only combine one element with
the logo.
The logo combined with elements can only be used on solid
color background.

N AT M U S
KAMMER

10

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

INCORRECT USED OF THE LOGOMARK COMBINED WITH ELEMENTS
The squares are used as examples for background colors
DO NOT set no fill color on the
triangles

DO NOT set a fill color different
from the background

DO NOT set the element
completely outside of the logo

DO NOT set a fill color on the
quadrilateral

DO NOT set more than one element inside the logo

DO NOT set the logo combined
with an element on a non solid
background

N AT M U S
KAMMER

11

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

TYPOGRAPHY

N AT M U S
KAMMER

12

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

JOSEFIN SANS
Two typefaces are used for
the brand identity: Josefin
Sans and Avenir. Josefin Sans
is a geometric and sans-serif
family font. Its sharp and pointy
edges refer to the triangles of
the logo. Natmus is currently
using a typeface really similar
to Avenir. Avenir was chosen
to keep a clear and distinct link
between the National Museum
of Denmark and its new media
platform.
Use Josefin Sans for every
titles and headlines. The letters
are always in capitals. For the
logo, Josefin Sans regular is
used with a tracking of 100.
Use Avenir book for body text.

ABCDEFGHIJKLMNOPQRSW X YZ Å ÆØ
1 2 3 45 678 9 ! @ #$%?&*()_+
Regular
20 pt
tracking 100

AVENIR
a b c d e f g hij k l m no p q r s t u v w x y z åæ ø
A BCDEFGHIJK L MNO P QRS W X Y Z Å ÆØ
123456789!@ # $%?&*( )_+
Book
11 pt

N AT M U S
KAMMER

13

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

JOSEFIN SANS
Every typefaces of Josefin Sans
can be used for headlines and
titles. Choose the appropriate
one for your need.

ABCDEFGHIJKLMNOPQRSW X YZ Å ÆØ
1 2 3 45 678 9 ! @ #$%?&*()_+
Regular
21 pt
tracking 100

A tracking of 100 can be used
for huge titles.
Josefin Sans bold and Josefin
Sans semibold are used for
smaller titles to highlight them.

SemiBold
11 pt

Bold
11 pt

Italic
11 pt

Italic SemiBold
11 pt

Italic Bold
11 pt

N AT M U S
KAMMER

14

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

AVENIR
Every typefaces of Avenir can
be used for body text and small
paragraphs. Choose the appropriate one for your need.

a b c d e f g hij k l m no p q r s t u v w x y z åæ ø
A BCDEFGHIJK L MNO P QRS W X Y Z Å ÆØ
123456789!@ # $%?&*( )_+

Book
11 pt

a b cd efg hi j k l m n o p q r s tu v w x y z åæ ø
ABCD EFGH IJ K LM N O PQ RS W X Y Z Å ÆØ
123456789!@#$%?&*( )_+

Oblique
11 pt

a b c d e fg h i j k l m n o p q r s tu v w x y z å æ ø
A BC DEFGH I J K L M N O P Q R S W X Y Z Å Æ Ø
123 4 5 6789!@ # $%?&*( )_+

Medium
11 pt

a b c d e fg h i j k l m n o p q r s tu v w x y z å æ ø
AB CD EFGH IJ K LM N O P Q R S W X Y Z Å ÆØ
123 4 56789!@# $%?&*( )_+

Medium Oblique
11 pt

a b cd e f g h i j k l m n o p q r s t u v w x y z å æ ø
A B CD EFG H I J K LM N O P Q R S W X Y Z Å Æ Ø
1234 56789!@#$%?&*( )_+

Black
11 pt

N AT M U S
KAMMER

15

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

COLORS

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

16

The colors are meant to be
primarly used on digital media.
The PANTONE colors are only
suggestion of the closest
similar colors.

The black and white are used
with busy design where the
logo or text need to be more
neutral.

N AT M U S
KAMMER

17

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

IMAGERY

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

18

Use relevant images that illustrate adequately the subject.
Use images always in colors.
You can use black and white
photography only when the
event to illustrate took place
before the existence of color
photography.
For poster and publicity, use
elements with no background.
Cut off their backgrounds and
replace them by one of the
brand’s colors.

N AT M U S
KAMMER

19

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

FIFTH ELEMENT

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

20

The fifth element is the
5 shapes that form the logo.
The shapes are dynamic and
can be scale up and down but
not rotated. Be careful to keep
every proportion when scaling.
Pay extra atttention to keep the
proportion of the stroke weight
when scaling.
Use the brand’s colors to fill the
shapes or to set a stroke color
with an empty fill.
When you use an individual
shape, it can be placed wherever on the design.
When you used the shapes all
together, place them in their
respective corner. Hence, the
NK will always be form by the
empty spaces.
The quadrilateral needs to have
an empty fill more often than
the other shapes to represent
the ’’window through the box’.

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

21

USE OF THE FIFTH ELEMENT
Some rules to design
publicity posters:
Always center the objects
Use no more than 3 objects on
one poster.
Keep an empty fill color on the
quadrilateral.

N AT M U S
KAMMER

22

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

WEB

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

23

Our website uses a responsive
design that looks great on every
screen sizes.

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

24

GRID
The full website used a
12 columns grid with
30 px of gutter
44 px of margin left and right
and
24 px of margin on top.

The margins are 22 px left and
right, 12 px on top and a gutter
of 15 px for smaller screen.

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

25

GRID SYSTEM IN PERCENTAGE

The grid system gives an idea of
how organizing the content on
the website. You can combine
many different columns layout
together. For example: you can
use one column at 50% and two
at 33.33%.

N AT M U S
KAMMER

26

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

AIRLOOK

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

27

A margin of 36 px needs to be
respected on every side of the
screen.

The logomark is always at the top
right corner.

N AT M U S
KAMMER

28

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

APPLICATIONS

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

29

POSTERS

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

30

MAGAZINE

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

31

BUSINESS CARD

N AT M U S
KAMMER

DMJX | GD 2016-2019 | 2ND YEAR EXAM 2018 
MAËLLE MORIN

32

N AT M U S
KAMMER



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.4
Linearized                      : Yes
Tagged PDF                      : Yes
XMP Toolkit                     : Adobe XMP Core 5.6-c067 79.157747, 2015/03/30-23:40:42
Create Date                     : 2018:06:15 09:25:48+02:00
Metadata Date                   : 2018:06:15 09:26:40+02:00
Modify Date                     : 2018:06:15 09:26:40+02:00
Creator Tool                    : Adobe InDesign CC 2015 (Macintosh)
Instance ID                     : uuid:9b3c99eb-2c21-df43-8c7b-7ebbf7587573
Original Document ID            : xmp.did:14c78300-c687-477b-86fd-b609c4e26e1f
Document ID                     : xmp.id:184c80a6-1874-457d-a6f0-ad1b0d112cbe
Rendition Class                 : proof:pdf
History Action                  : converted
History Parameters              : from application/x-indesign to application/pdf
History Software Agent          : Adobe InDesign CC 2015 (Macintosh)
History Changed                 : /
History When                    : 2018:06:15 09:25:48+02:00
Derived From Instance ID        : xmp.iid:69becf89-4cb4-4777-9ea0-6b428240486c
Derived From Document ID        : xmp.did:14c78300-c687-477b-86fd-b609c4e26e1f
Derived From Original Document ID: xmp.did:14c78300-c687-477b-86fd-b609c4e26e1f
Derived From Rendition Class    : default
Format                          : application/pdf
Producer                        : Adobe PDF Library 15.0
Trapped                         : False
Page Count                      : 32
Creator                         : Adobe InDesign CC 2015 (Macintosh)

EXIF Metadata provided by EXIF.tools