Embed Size (px)
Citation preview
DESIGN AND BRAND GUIDELINE BOOK
CREATION DATE :
MAY 2017
ISSUE 01CORPORATE
DESIGN MANUAL
THEME BRANDING GUIDELINES AND MANUAL
TEMPLATE
CREATED FOR :
WONDERFUL DESIGN NW
SEATTLE, WA
WONDERFUL DESIGN NW
BRAND MANUAL
WONDERFUL DESIGN NW,
MAKE IT WONDERFUL.BRAND GUIDELINES V 1.0
itiswonderful .comg r a p h i c s . w e b . i l l u s t r a t i o n . b r a n d i n g .
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
3 //
44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
THE
BEG
INN
ING
:
TABL
E O
F C
ON
TEN
TS
DESIGN
AND
ISSUE 01
WONDERFUL DESIGN NW,
DESIGN MANUAL
CREATED FOR :
WONDERFUL DESIGN NW, LLC
SEATTLE, WA
BRAND GUIDELINES
WONDERFUL DESIGN NW TABLE OF CONTENTS
V
DESIGN ANDBRAND GUIDELINES
Sec. 00 | Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 05
Sec. 01 | Corporate Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 06
Sec. 02 | Corporate Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Sec. 03 | Corporate Color System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Sec. 04 | Corporate Stationery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Sec. 05 | Grid Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Sec. 06 | Corporate Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Sec. 07 | Iconography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Sec. 08 | Summary and Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Sec. 09 | Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Sec. 10 | Thank you . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Sec. 11 | Impress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
5 //
44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
ISSUE 01
BRANDING
DESIGN MANUAL>> P
AGE
4 //
36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N Z
ERO
:
LOG
O A
ND
GU
IDEL
INES
00 / INTRODUCTI-
TO OUR GUIDELINES
THANK YOU BEING A PART OF THESE GUIDES
-
INTRODUCTION OF OUR PRESIDENT: Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut alique quatem qui utemquia
dolo erum soluptas alite tet id qui utempor esequis evelesc iaecabor re conseque qui officab orruntota cus ium rempedi
gendandus veniscidus erum as ut idebit, toremporias ea conet volo blantia plaborepel is natqui officil magnihi.
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo voluptibus. Dandunte voluptaqui nias
re voluptate occust, tet id qui utempor esequis evelesc iaecabor re, occabor itatem et fuga.
Nem faccaeptiae expliae core prorporepera ipicte sinvele stectis modis num re sandant. Quas dolentiur? Et ut mo beate
nobis autendenihil iducias adit quostrum accus et aut et rem quidipsa quam recus.
Company President Comma,
09/07/2017
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
7 //
44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
6 //
36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N O
NE
:
LOG
O A
ND
GU
IDEL
INES
WONDERFUL.wonderful . wonderful .
01.1 / CORPORATE LOGO
RECOMMENDED FORMATS ARE:.eps | .ai | .png | .jpg | .tiff
ATTENTION:Use of any stylized, animated, hand
drawn or other versions of a inofficial
logo is not permitted. This undermines
the logo system and brand consistency.
Please consult with Wonderful, Trademark
Licensing if you have any questions or
need further help.
THE LOGOTYPE - AN INTRODUCTION
The Wonderful Design NW, Masterbrand or Corporate Logo comprises two elements,
the logo symbol and logo type. The Logo Symbol is an letter image that represents the
fun of the design process, the ability to move forward through ups and downs.
It has a particular relationship with Wonderful, the name. The Logo Type has been ca-
refully chosen for its modern and yet strong, highly legible style, which has been further
enhanced by the use of upper case letters. The typeface is Geometos and it balances
with the logo symbol.
The corporate logo is presented through the use of colour as well as shape and form.
The corporate colours are Sky Blue and Dark Navy. It is a fresh blend of colors chosen
for their combined relationship - strong and bold - playful and trustworthy .
1 THE LOGO WITH GRAY BACKROUND 2 THE LOGO WITH WHITE BACKROUND
01 / CORPORATE LOGO
ISSUE 01
WONDERFUL DESIGN NW
DESIGN MANUAL
CREATED FOR :
WONDERFUL DESIGN NW
SEATTLE
THE LOGOTYPE WITH BACKROUND
01.2 / LOGO COMPONENTS
1 THE GENERAL LOGO The main logo is used on white or
gray backround. For darker back-
rounds you will find an alternative on
the left page, the darkest acceptable
color is shown.
2 THE LOGO SYMBOLConsists of a strong 3-dimensional
W, representing the fun, experimen-
tal and important nature of design.
3 THE LOGO TITLECarefully chosen for its modern and
yet refined, highly legible style,
which has been further enhanced
by the use of upper case letters and
a strong period in dark navy of the
chosen corporate color. The font that
is used here is Geometos.
1/4 x
1/4 x
1/4 x
1/4 x
x
x
x
x
x
x
x
x
= 1x
2 x1.5 x
20 x
17 x
2 x
x
x
x
x
x
x x
x
x
x x
x x
x
x x
x
x
x x
x x
x
x x
x
x
x x
x x
x
x
x
x
x
x
x x
8 x
UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
9 //
44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
8 //
36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N O
NE
:
LOG
O A
ND
GU
IDEL
INES
wonderful . wonderful .
wonderful .
wonderful .
WONDERFUL.
WONDERFUL.
WONDERFUL
01.2 / LOGO CONSTRUCTION
01.3 / CLEARSPACE AND COMPUTATION
CLEARSPACE-
Full Logo
It is important to keep corporate marks clear of any other graphic
elements. To regulate this, an exclusion zone has been establis-
hed around the corporate mark. This exclusion zone indicates the
closest any other graphic element or message can be positioned
in relation to the mark.of the the symbol itself and our company
name – they have a fixed relationship that should never be chan-
ged in any way.
LOGO CONSTRUCTION
CLEARSPACE AND COMPUTATION
DEFINITION-
Whenever you use the logo, it should be surrounded with clear space to ensure its visibility and impact. No graphic
elements of any kind should invade this zone.
COMPUTATION-
To work out the clearspace take the
height of the logo and divide it in
half. (Space = Height / 4).
01.3 / APPLICATION ON A BACKGROUND
1
2
3
4
5
FULL LOGO SIZES
Minimum Size: 24 mm x 7.5 mm
MINIMUM LOGO SIZES
LOGO SYMBOL
Minimum Size: 6 mm x 7,3 mm
LOGO TYPO
Minimum Size: 35,75 mm x 7 mm
30 mm 08 mm 16 mm
DONT´S AND INCORRECT LOGO APPLICATIONS
-
EXAMPLES
-
1 Do not reverse the logo symbol colors
2 Do not invert the logo type
3 Do not alter the logo symbol
4 Do not alter the logo type style
5 Don´t change size relationship between the logo and logo type.
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
11 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
10 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N T
WO
:
CO
RPO
RATE
TYP
OG
RAPH
Y
02.1 / THE PRIMARY FONT
THE PRIMARY FONT
EXPLANATION AND EXAMPLES
Typography plays an important role in communicating an overall tone and quality.
Careful use of typography reinforces our personality and ensures clarity and harmony
in all Comma, communications. We have selected Fira Sans, which helps inject energy
and enthusiasm into the entire Comma, communications, as the primary and secondary
corporate typefaces.
02 / CORPORATE TYPOGRAPHY
PRIMARY FONTGEOMETOS
DESIGNER : Deepak Singh Dogra
-
CLASSIFICATION : Sans Serif
-
THE FONT Created: 1969-12-31
Revision: 1
Glyph count: 226
Units per Em: 1000
Embedding rights: Embedding for preview &
printing allowed
Family class: Sans serif
Weight: Semi-bold
Width: Semi-expanded
Mac style: Italic
Direction: Only strongly left to right glyphs +
contains neutrals
GEOMETOS:-
FIGURES : -
A B C D E F G H I J K L M
n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 0
G EO M ETOS/0 1234
CO-DESIGNR A W / . 0 1
AISSUE 01
BRANDING
DESIGN MANUAL
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
13 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
12 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N T
WO
:
CO
RPO
RATE
TYP
OG
RAPH
Y
02.2 / SECONDARY FONT
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 0
! “ § $ % & / ( ) = ? ` ; :
¡ “ ¶ ¢ [ ] | { } ≠ ¿ ‘
« ∑ € ® † Ω ¨ ⁄ ø π • ± ‘
æ œ @ ∆ º ª © ƒ ∂ ‚ å ¥ ≈ ç
FUTURA PT BOOK : -
FUTURA PT BOOK HEAVY : -
FIGURES : -
SPECIAL CHARACTERS : -
SECONDARY FONTFUTURA PT BOOK
DESIGNER : Paul Renner
-
CLASSIFICATION : Sans-Serif
-
THE FONTFutura is a geometric sans-serif
typeface designed in 1927. It was
designed as a contribution on the
New Frankfurt-project. It is based on
geometric shapes that became re-
presentative of visual elements of the
Bauhaus design style of 1919–33.
THE SECONDARY FONT
EXPLANATION AND EXAMPLES
AB
CD
EF
GH
IJ
KL
M
NO
PQ
RS
TU
VW
XY
Z
ab
cd
ef
gh
ij
kl
m
no
pq
rs
tu
vw
xy
zA
BC
DE
FG
HI
JK
LM
NO
PQ
RS
TU
VW
XY
Z
ab
cd
ef
gh
ij
kl
m
no
pq
rs
tu
vw
xy
zA BA B
ISSUE 01
BRANDING
DESIGN MANUAL
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
15 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
14 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N T
WO
:
CO
RPO
RATE
TYP
OG
RAPH
Y
02//03//
01//
02.3 / TYPOGRAPHY AND TEXT HIERARCHY
CONTEXT TEXT AND INNER HEAD-LINES
-
CONTEXT TEXT AND INNER HEAD-LINES
-
HEADLINES AND TYPOBREAKS
-
Typographic hierarchy is ano-
ther form of visual hierarchy,
a sub-hierarchy per se in an
overall design project. Typog-
raphic hierarchy presents lette-
ring so that the most important
words are displayed with
the most impact so users can
scan text for key information.
Typographic hierarchy creates
contrast between elements.
There are a variety of ways
you can create a sense of
hierarchy. Here are some of
the most common techniques
for Comma, layouts.
02.4 / TYPOGRAPHIC EXAMPLES
Comma, Typo Captions
-
Fira Sans Regular
6.5 pt Type / 12 pt Leading
Comma, Typo Copy text-
Fira Sans Regular
9 pt Type / 12 pt Leading
CAPTION TEXT : -
SUBLINES SECTIONS : -
COMMA, TYPO HEADLINE-
Fira Sans Regular - Capital Letters
14 pt Type / 18 pt Leading
COPY TEXT : -
COMMA, TYPO-
Fira Sans Bold - Capital Letters
22 pt Type / 22 pt Leading
HEADLINE 01 : -
COMMA, TYPO-
Fira Sans Bold - Capital Letters
35 pt Type / 35 pt Leading
HEADLINE 02 : -
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
17 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
16 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N T
HRE
E:
CO
RPO
RATE
CO
LOR
SYST
EM
SECONDARY COLORSKY BLUE
-
COLOR CODESCMYK : C000 M020 Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
PRIMARY COLORDARK NAVY
-
COLOR CODESCMYK : C000 M020 Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
100 % 20 %50 %
Full color
100 % 20 %50 %
Full color
03.1 / THE PRIMARY COLOR SYSTEM AND COLOR CODES
03 / CORPORATE COLOR SYSTEM
Color plays an important role in the Wonderful, corporate identity program. The colors below are
recommendations for various media. A palette of primary colors has been developed, which compri-
se the “One Voice” color scheme. Consistent use of these colors will contribute to the cohesive and
harmonious look of the Comma, brand identity across all relevant media. Check with your designer
or printer when using the corporate colors that they will be always be consistent.
EXPLANATION: Wonderful Design NW has three
official colors: White, Sky Blue
and Dark Navy. These colors have
become a recognizable identifier for
the company.
USAGE: Use them as the dominant color
palette for all internal and external
visual presentations of the company.
03.2 / THE SECONDARY COLOR SYSTEM AND COLOR CODES
EXPLANATION
The Secondary colors are complementary to our official colors, but are not recognizable
identifiers for Comma, company. Secondary colors should be used sparingly, that is, in
less than 10 percent of the palette in one piece.
COLOR CODESCMYK : C000 M020
Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
COLOR CODESCMYK : C000 M020
Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
60 % 40 % 20 % 60 % 40 % 20 %
COLOR CODESCMYK : C000 M020
Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
COLOR CODESCMYK : C000 M020
Y100 K000
Pantone : 297C
HKS : 02K
RGB : R000 G000 B000
Web : #000000
60 % 40 % 20 % 60 % 40 % 20 %
USAGE: Use them to accent and support the primary color
palette.
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
19 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
SEC
TIO
N F
OU
R:
CO
RPO
RATE
STA
TIO
NER
Y
CORPORATE
STATIONERY
WONDERFUL DESIGN
ISSUE 01
WONDERFUL DESIGN,
DESIGN MANUAL
CREATED FOR :
*WONDERFUL DESIGN NW.
SEATTLE
LETTERHEADBUSINESS CARDS
ENVELOPES
04 /
WONDERFUL DESIGN
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
21 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
20 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N F
OU
R:
CO
RPO
RATE
STA
TIO
NER
Y
04.1 / THE COMPANYLETTERHEAD
EXPLANATION: This shows the approved layouts with
the primary elements of the Comma,
stationery system for the front- and
backside of the letterheads.
PARAMETER: DIMENSIONS297 x 210 mm
DIN A4
WEIGHT120g/m Uncoated
white
PRINTCMYK
USAGE: The letterhead will be used for all
official communication that is going
out of Comma, company.
THE BACKSIDE OF THE COMPANY
LETTERHEAD
LETTERHEAD DOWNLOAD LINK
http://www.comma.com/cd/
letterhead
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
23 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
22 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N F
IVE:
GRI
D S
YSTE
MS
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
PRINT GRID
SYSTEMS05 / 1
05.1 /
VERTICAL GRID
SYSTEMS
THE GRID SYSTEM OF
COMMA, COMPANY
A4 VERTICAL GRID SYSTEM EXAMPLES
A4 VERTICAL GRID SYSTEM EXAMPLES
EXPLANATION: In graphic design, a grid is a structure made up of a series of intersecting stra-
ight (vertical, horizontal, and angular) or curved guide lines used to structure
content. The grid serves as an armature on which a designer can organize
graphic elements (images, glyphs, paragraphs) in a rational, easy to absorb
manner. A grid can be used to organize graphic elements in relation to a page,
to other graphic elements on the page, or relation to other parts of the same
graphic element or shape.
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
25 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
24 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N F
IVE:
GRI
D S
YSTE
MS
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
WEB GRID
SYSTEMS
05.1 /
VERTICAL GRID
SYSTEMS
05 / 2 / 3
ISSUE 01
BRANDING
DESIGN MANUAL
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
27 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
26 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N F
IVE:
GRI
D S
YSTE
MS
05.2 / GRID SYSTEMHORIZONTAL SCREENS
EXPLANATION: This shows an approved layout with a
typography grid for a 16:9 Screen of
Comma,. This will be used for Com-
pany presentations in Powerpoint or
Keynote.
GRID SYSTEM EXAMPLES
HORIZONTAL SCREEN
05.3 / GRID SYSTEMVERTICAL TABLETS
TABLET VERTICAL
GRID SYSTEM EXAMPLE
EXAMPLE: TABLET
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
29 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
28 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N S
IX:
IMA
GES
AN
D B
LEN
DIN
G
MO
DE
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
IMAGES AND
BLEN-
DING06 /
06.1 / COLORED IMAGES
06.2 / BLACK/WHITE IMAGES
06.2 / BLENDING MODES
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
31 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
30 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N S
IX:
IMA
GES
AN
D B
LEN
DIN
G
MO
DE
EXPLANATION: Corporate Images are responsible to transfer the values of Comma, to our customers or our potential customers. It is a composite psychological
impression that continually changes with the firm’s circumstances, media coverage, performance, pronouncements, etc. Comma, use various
corporate advertising techniques to enhance their public image in order to improve their desirability as a supplier, employer, customer, borro-
wer, partner, etc.
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
06.1 / EXAMPLES OF COLORED COMPANY IMAGES
EXAMPLES FOR COMMA, CORPORATE IMAGE SYSTEM -
REQUIREMENTS: - desaturate colours
- high contrast
- sharp images
- minimalistic look
- modern and businesslike
06.2 / EXAMPLES OF BLACK AND WHITE IMAGES
EXAMPLES FOR COMMA, CORPORATE IMAGE SYSTEM -
REQUIREMENTS: - black and white colours
- high contrast
- sharp images
- minimalistic look
- modern and businesslike
ISSUE 01
BRANDING
DESIGN MANUAL
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
33 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
32 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N S
IX:
IMA
GES
AN
D B
LEN
DIN
G
MO
DE
EXPLANATION: Image effects and blending modes raise the concision and the recognizability of a brand. Also they are
able to divide content and other graphical elements that are used in layouts. In the same way the support
statement of the used images and raise application possibilities.
06.3 / BLENDING MODES FOR IMAGES
EXAMPLES FOR COMMA, BLENDING MODES -
HOW TO: 1) use it in black and white images colours
2) use a placeholder with a yellow back
3) adjust the layer style to “multiplicate”
06.3 / 3D STRUCTURE AND COMPOSITION OF THE BLENDING MODES FOR IMAGES
DEMO 2 :
DEMO 1 :
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
35 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
34 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N F
IVE:
CO
RPO
RATE
ICO
NO
GRA
PHY
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
CORPORATE
ICONONOGRAPY
07 /
PARAMETER AND
ICON SYSTEMS
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
37 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
36 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N S
EVEN
:
CO
RPO
RATE
ICO
NO
GRA
PHY
EXPLANATION: An icon is a pictogram displayed on a screen or print layout in order to help the user navigate through the content in a
easier way. The icon itself is a small picture or symbol serving as a quick, “intuitive” representation of a software tool,
function or a data file.
07.1 / ICONOGRAPHY
ICON PARAMETER -
- Minimum: 26 px x 26 px
- minimum stroke size: 0.5 pt
- upscale only proportional
- Only 100 % color
100 % 75 % 50 % 25 %
ICON WITH BACKROUND -
- Minimum: 26 px x 26 px
- minimum stroke size: 0.5 pt
- upscale only proportional
ICON WITHOUT A BACKROUND -
- Minimum: 26 px x 26 px
- minimum stroke size: 0.5 pt
- upscale only proportional
40 ESSENTIAL ICONS: The following icons are the base of the icon development for your company. You can use these icon to sketch topics or
important issues quickly.
07.2 / 40 ICONS - THE ESSENTIAL VECTOR KIT
DONT´S -
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
39 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
38 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N E
IGH
T:
SUM
MA
RY &
CO
NTA
CT
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
SUMMARY
CONTACT08 /
08.1 / A SHORT SUMMARY
08.2 / CONTACT US
&
08.1 / A SHORT SUMMARY,
DOWNLOAD AND CONTACT DATA
THANK YOU BEING A PART OF THESE GUIDES
-
EXPLANATION: Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut alique quatem qui utemquia
dolo erum soluptas alite tet id qui utempor esequis evelesc iaecabor re conseque qui officab orruntota cus ium rempedi
gendandus veniscidus erum as ut idebit, toremporias ea conet volo blantia plaborepel is natqui officil magnihi.
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo voluptibus. Dandunte voluptaqui nias
re voluptate occust, tet id qui utempor soluptas alite tet id qui utempor esequis evelesc iaecabor re, occabor itatem et
fuga.
*COMMA,Brand and Design Manual
2016
RESPONSIBLE
AGENCY AND
DESIGNERS
-
AGENCY: Design.Inc
SENIOR CREATIVE DIRECTOR: Mark Anderson
Design.Inc
SENIOR ART DIRECTOR : Mark Anderson
Design.Inc
JUNIOR ART DIRECTOR : Mark Anderson
Design.Inc
08.2 / FOR FURTHER
QUESTIONS DO NOT HESITATE
TO
CONTACT US
-
CONTACT:
Mark Anderson
Marketing Comma,
E: info@Comma,.tv
P: +01.132.4567.890
Nem faccaeptiae expliae core prorporepera ipicte sinvele stectis modis num
re sandant. Quas dolentiur? Et ut mo beate nobis autendenihil iducias adit
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
41 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
40 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N N
INE:
CO
NTE
NT
DO
WN
LOA
D
09 / DOWN-LOAD OFTHE CON-TENTS
ISSUE 01
COMMA, BRANDING
DESIGN MANUAL
CREATED FOR :
COMMA, CORP.
LONDON
RESPONSIBLE AGENCY :
EGOTYPE
CREATIVE AGENCY
THE CORPORATE DESIGN OF *COMMA,
DOWNLOAD LINKS OF THE SINGLE DESIGN
EXPLANATION: For quick help and faster project development you will get the download links to the several brand guidelines and the editable data. To download the single items
please scan the QR-codes or follow the given hyperlink. You will also find the complete Brand Manual as a PDF file for sending this to responsible agencies or
person that need your guidelines.
WEB LINKLink : http://www.design-inc.com/cd/logo.zip
QR CODE*COMMA, LOGO -
WEB LINKLink : http://www.design-inc.com/cd/stat.zip
WEB LINKLink : http://www.design-inc.com/cd/icon.zip
WEB LINKLink : http://www.design-inc.com/cd/full.zip
QR CODE
QR CODE
QR CODE
*COMMA, STATIONERY -
*COMMA, ICONOGRA-PHY -
*COMMA, FULL GUIDE -
ISSUE 01
BRANDING
DESIGN MANUAL UN
SPO
OK
BRAN
DIN
G DE
SIGN
MAN
UAL
>> P
AGE
43 /
/ 44
WO
NDE
RFU
L DE
SIGN
NW
,
BRAN
DIN
G M
ATER
IAL
CORP
OR
ATE
DESI
GN
AND
GUID
ELIN
ES
>> P
AGE
42 /
/ 36
WO
NDE
RFU
L DE
SIGN
NW
, BR
ANDI
NG
DESI
GN M
ANU
AL
SEC
TIO
N T
EN:
THA
NK
YOU
FOR YOUR
AUDIEN-10 /
THANKS
10 / FINAL WORDS / THANK YOU FOR YOUR AUDIENCE TO THIS MANUAL GUIDE.
FINAL STATEMENT OF THE CEO
-
I WANT TO THANK YOU VERY MUCH...
Nem faccaeptiae expliae core prorporepera ipicte sinvele stectis modis num re sandant.
Quas dolentiur? Et ut mo expliae core prorporep sinvele beate. Ihition coreces velicto te omnit
haribusam nate nulparum et ut quatasped ut pa nem quam, occust, quostrum quiates tibernam si
nimpores ea voluptatem del isciis re, pore incia nobit quuntiur reratur?
Offictae. Nam, sunt facestia dem enis sint ipsaniet ute voloratem dia qui blab iliqui comnim
estiand endande con por aute venienim cuscium sumet ium ea accabor ad quae. Ne invendi
sima aut eos aliquiae doluptusam, omnienis cust volestius aute none nobis eosa quid qui quis
am, si volorro to es dolore rehendandi sit evelles tempossequos etur atis dolut porro inullab
idelicia consequid maximin cipidia dis doluptatem coritaqui invel inus viderna tiorrum, cus
quis si assequos volupta nobitas eici di sed quosapicatum lit et recuptaquam, si con consequi
coreperspis am dolupta tiant.
Company President
09/07/2017
11 / IMPRESS
-
AGENCY: Design.Inc
CONTACT:
Mark Anderson
Marketing Comma,
E: info@Comma,.tv
P: +01.132.4567.890
Nem faccaeptiae expliae core prorporepera ipicte
sinvele stectis modis num re sandant. Quas dolenti-
ur? Et ut mo expliae core prorporep sinvele beate.
COMMA,
LOVE YOUR BRAND.YOUR BRAND. YOUR STYLE.
YOUR DEFINITION. BRAND GUIDELINES V 1.0
AGENCY: Design.Inc
CONTACT:
Mark Anderson
Marketing Comma,
E: info@Comma,.tv
P: +01.132.4567.890
COMMA,
LOVE YOUR BRAND.YOUR BRAND. YOUR STYLE.YOUR DEFINITION. BRAND GUIDELINES V 1.0
