Metricss Brand Manual A visual idendity guide for metricss company
CREATION DATE : NOVEMBER 2016
ISSUE 01 CORPORATE DESIGN MANUAL
01/1
a perfect guide for creative companies
THEME BRANDING GUIDELINES AND MANUAL TEMPLATE
CREATED FOR : METRICSS LONDON
MADE WITH LOVE BY: EGOTYPE DESIGN BERLIN
Metricss Brand Manual Table of Contents
MADE WITH LOVE BY: EGOTYPE DESIGN BERLIN
Brand Manual 3 // 52
SEC. 00
|
INTRODUCTION
04
SEC. 01
|
CORPORATE LOGO AND CONSTRUCTION
06
SEC. 02
|
CORPORATE TYPOGRAPHY
12
SEC. 03
|
CORPORATE COLOR SYSTEM
18
SEC. 04
|
CORPORATE STATIONERY
20
SEC. 05
|
SOCIAL MEDIA GUIDELINES
24
SEC. 06
|
GRID SYSTEMS
30
SEC. 07
|
WIREFRAME SYSTEM
38
SEC. 08
|
MOODBOARD AND INSPIRATION
40
SEC. 09
|
IMAGES AND BLENDING MODES
42
SEC. 10
|
ICONOGRAPHY
46
SEC. 11
|
SUMMARY AND CONTACT
48
SEC. 12
|
DOWNLOADS AND IMPRESS
50
Brand Manual 4 // 52
Intro:duction Welcome aboard THANK YOU BEING A PART OF OUR COMPANY. WELCOME ABOARD. 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. quatem iur? Velenes de plab il imenim fugitatent voloreh enisquis et arunt venihitin cus et rero beatet experrum faccupti tecus volupta tatatem aces volo officipsunto omnist ommodi dolupta desciatur, sediorio qui doluptatem dipsus moditat inctia voluptat odicim exerum fugit, sam as re, ea voluptas earcia quas quundanda natur sitionectent asincit, core esciminit asimolut quia quatet essimus eum eatempedi dus dendige niminul luptae vendae sandem que que vollesenime oditat.
Sent odipsum etureic to que et duciunt magni inctur autento rporese dicidi corem quas dolupti untiam, incidun tionsequae rem eos vendae natqui susae doluptis dolores molor sum fuga. Nam quossi inverum nectatem nusam qui sim comnim quatest landusame omnienda nimagnihic to blaborr ovidunt aspid quo et aut apis velestibus inis diciis vid que voles aut fugitios sae rerferi tiatur magnimus etur minvereriate net, utecte velescilit enist vit, ipis magnienda core preptasi quae pratur? Quia sit et rempos volupti ariti sum hiliqui omnihit atquia quistruptum nonsequati to cus magnate ctecum et aut aute lit, opta aut restia quianti orrovides alique nime iligend ictota nem. Nem quis seque dolorem fugia que voluptatus eictem eum qui que praepel lorerchit modi officaborio bla pel isincit aditis destis excepre rnatemo eius. Il et apel is dolorendae voluptae et ma doluptas et et reperumque nulparum inciet adi ut eles aut pro conse es ipsam nihit, ex et atiatet faccum ilique provid qui atecus et quo quis remoluptatur as diciis unt etur, officat mi, invenda.
Brand Manual 5 // 52
01/1 Liquatem iur? Velenes de plab il imenim fugitatent voloreh enisquis et arunt venihitin cus et rero bevolupta tatatem aces volo officipsunto omnist ommodi dolupta des.
01/1
a perfect guide for creative companies
Brand Manual 6 // 52
Corporate Logotype Our Logo is the key building block of our identity, the primary visual element that identifies us. The signature is a combination of the the symbol itself and our company name – they have a fixed relationship that should never be changed in any way. The Metricss Agency´s Masterbrand or Corporate Logo comprises two elements, the logo symbol and logo type. The Logo Symbol is a powerful image evoking the culture of design services - the connection between the strength of communication and the different points that influence. It has a particular relationship with the Agency´s name. The Logo Type has been carefully chosen for its modern and yet refined, highly legible style, which has been further enhanced by the use of
upper case letters. The typeface is Montserrat Bold and has also been chosen to compliment and balance perfectly with the logo symbol. The corporate logo is presented through the use of colour as well as shape and form. The two corporate colours are Yellow and Grey. It is a fresh and appealing blend of colours chosen for their strong combination - modern - classic - timeless. The Colours have been selected according to international standards as shown below and are easily implemented.
Brand Manual 7 // 52
Full Metricss Logo
Logo
Full Logotype
Logotype
Single Logotypes
THE LOGO SYMBOL
THE LOGO TITLE
Consists of a powerful element evoking the culture of design services and a grey square backround.
Carefully chosen for its modern and yet refined, highly legible style, which has been further enhanced by the use of upper case letters in gray tone of the chosen corporate color. The font that is used here is Montserrat Bold.
The main logo is the dark logo used on white or colored backround. For darker backrounds you will find an alternatives following in this manual.
LOGO DARK VERSION
LOGO LIGHT VERSION
will be used when the backround color ist light colored.
will be used when the backround color ist dark colored.
Logo Versions
Brand Manual 8 // 52
Logo Construction, Clearspace and computation It is important to keep corporate marks clear of any other graphic elements. To regulate this, an exclusion zone has been established 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 changed in any way.
Clearspace
x
x x
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.
x
x
COMPUTATION To work out the clearspace take the height of the logo and divide it in half. (Clearspace = Height / 2).
Brand Manual 9 // 52
x
Logo Construction
x 1x
x x 1x
Logo Backrounds
Logo Dos and Don‘ts
PLEASE READ CAREFULLY THE DOS AND DON’TS
1. Do not place the logo type on 2 lines 2. Do not invert the logo symbol 3. Do not alter the logo symbol 4. Do not alter the logo type style 5. Do not change the size relationship between the logo symbol and logo type. 6. Never change the proportions of the logo vertically or horizontally or alter the appearance in any way
Brand Manual 10 // 52
Guideline for Logo Placement
Brand Manual 11 // 52
Correct Logo Placement
THE LOGO PLACEMENT Explanation: To place the Metricss Agency´s logo in the correct way please use one of the approved styles that are shown on the right. To place the Metricss Agency´s logo in other ways is not allowed. Parameter Example Logo Placement 297 x 210mm DIN A4
Brand Manual 12 // 52
Corporate Typography
01
Bold
The corporate
Regular
Fonts and typography 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 Metricss Agency´s communications. We have selected Playfair and Montserrat, which helps inject energy and enthusiasm into the entire Metricss Agency´s communications, as the primary and secondary corporate typefaces.
Figures
Characters
Brand Manual 13 // 52
Corporate Font 01 Playfair Display Primary Font :
Designer :
Playfair
Claus Eggers Sørensen
-
-
A
B
C
D
E
F
G
H
I
J
N
O
P
Q
R
S
T
U
V
W
X
Y
a
b
c
d
e
f
g
h
i
j
k
l
n
o
p
q
r
s
t
u
v
w
A
B
C
D
E
F
G
H
I
J
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
0
1
!
“
2
§
3
4
5
%
&
/
$
¡
“
¶
«
∑
€
¢ ®
[ †
6
(
] Ω
| ¨
⁄
K
x
8
)
=
?
{
}
L
z
M
z
0
` •
Z m
9
≠ π
M
y
K
7
ø
L
;
:
¿
‘
±
‘
Brand Manual 14 // 52
Corporate Typography Corporate Font 02 Montserrat
Bold
Primary Font :
Designer :
Montserrat
Julieta Ulanovsky
-
-
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
Regular
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
Figures
Characters
0
!
1
“
2
§
3
$
4
%
5
6
/
(
&
¡
“
¶
¢
[
]
|
«
∑
€
®
†
Ω
¨
7
⁄
)
=
{
} ø
8
9
?
` ≠
π
•
0
;
:
¿
‘
±
‘
Brand Manual 15 // 52
Typo and Text Hierarchy Typographic hierarchy is another form of visual hierarchy, a subhierarchy per se in an overall design project. Typographic hierarchy presents lettering 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 Metricss´ layouts.
Caption Text
Metricss Agency Typo Source Sans Pro Regular 6 pt Type / 9 pt Leading
Copy Text
Metricss Agency Typo Source Sans Pro Regular 8 pt Type / 11 pt Leading
Headlines Copytext
METRICSS AGENCY TYPO Montserrat Regular - Capital Letters 10pt Type / 10pt Leading
Sublines Sections
Metricss Agency Typo
Big Headlines and Title
Metricss Titles
Sequencer and Title for Marketing
Montserrat Bold - Capital Letters 16pt Type / 16pt Leading
Montserrat Bold - Capital Letters 34pt Type / 30 pt Leading
Metricss Montserrat Bold - Capital Letters 48pt Type / 48 pt Leading
Brand Manual 16 // 52
Metricss Brand Manual
Colors ar the most things to a brand to customer
re one of important transfer o the rs.
Brand Manual 17 // 52
Brand Manual 18 // 52
Corporate Color System THE PRIMARY COLOR SYSTEM AND COLOR CODES. Color plays an important role in the Metricss Agency´s corporate identity program. The colors below are recommendations for various media. A palette of primary colors has been developed, which comprise the “One Voice” color scheme. Consistent use of
these colors will contribute to the cohesive and harmonious look of the Metricss Agency´s brand identity across all relevant media. Check with your designer or printer when using the corporate colors that they will be always be consistent.
PRIMARY COLOR
PRIMARY COLOR
GOLD
GREY
PRIMARY COLOR
PRIMARY COLOR
GOLD
GREY
-
-
COLOR CODES
COLOR CODES
CMYK : Pantone : HKS : RGB : Web :
CMYK : Pantone : HKS : RGB : Web :
C000 M020 Y100 K000 297C 02K R000 G000 B000 #000000
C000 M020 Y100 K000 297C 02K R000 G000 B000 #000000
Brand Manual 19 // 52
Secondary Color system Explanation: The Secondary colors are complementary to our official colors, but are not recognizable identifiers for Metricss Agency´s company. Secondary colors should be used sparingly, that is, in less than 10 percent of the palette in one piece.
Color Codes CMYK : Pantone : HKS : RGB : Web :
C020 M000 Y000 K080 442C 98K R000 G000 B000 #000000
Color Codes CMYK : Pantone : HKS : RGB : Web :
C020 M000 Y000 K080 442C 98K R000 G000 B000 #000000
Color Codes CMYK : Pantone : HKS : RGB : Web :
C020 M000 Y000 K080 442C 98K R000 G000 B000 #000000
Color Codes CMYK : Pantone : HKS : RGB : Web :
C020 M000 Y000 K080 442C 98K R000 G000 B000 #000000
Color Codes CMYK : Pantone : HKS : RGB : Web :
C020 M000 Y000 K080 442C 98K R000 G000 B000 #000000
Color Usage Use them to accent and support the primary color palette.
Brand Manual 20 // 52
The Company Letterhead
This shows the approved layouts with the primary
METRICSS Main Avenue, 7th New York, United States
elements of the
T. 01 23 4567 8901 F. 01 23 4567 8901
Metricss Agency
info@metricss.com www.metricss.com
stationery system
July, 2ne 2017 Dear Mr. Max Jefferson Creative Director London, GB
for the front- and backside of the
Color plays an important role in the Grey Agency´s corporate identity program. The colors below are recommendations for various media. A palette of primary colors has been developed, which comprise the “One Voice” color scheme. Consistent use of these colors will contribute to the cohesive and harmonious look of the Grey Agency´s brand identity across all relevant media. Check with your designer or printer when using the corporate colors that they will be always be consistent.
letterheads.
Excero mo dit voluptatur, quunti ra dolupta sit quat archicatibus rae ni arum remque repel iliquo ipsaper atibusant mint quam fuga. Itate cus, ut eum estiam ium ipsametur, siminctus dolest arum consed quiberum nihici aut voluptaque consedi blanis a num eicto optassi nverumquis auda con peptate reperep udantiis sed uatiis mo ea verferes des essinctet parum quaspe solupta et et dolorum t. As et ut dolut voloritatium explige ndenditia dolum erci omni beariberia que dist off icabo. Icillabo. comnienis as accusda a niet autam, qui blaborem quibusdam, te pro ilignim iliciate enis restendae nonseditibus ent fugitatius alis ate ipsam quiam re volut que ea quist, occullabo. Ut et etur? Aditi comnimus ullacea tiant, se ne volupta dolut dit imodipsum esciur? Udio cus nest evella nest que aute nis eos eaquo quidusdae ea vel entoritae culloru ptatecab ident. Berst Regards
MAXWELL DOE DIRECTOR
Take a slogan here △ Take a slogan here △ Take a slogan here
Parameter Dimensions 210 x 297 mm
USAGE
Weight 90g/m Uncoated white
-
Print CMYK
The letterheads will be used for all official contact and communication of Metricss Agency´s company. Insert the message of Metricss Agency´s into the letterhead and send your documents throughout the world.
Brand Manual 21 // 52
The Company Business Cards
MR. MA X JEFFERSON CREATIVE DIRECTOR
METRICSS MAIN AVENUE, 7TH NEW YORK, USA T. 01 23 4567 8901 F. 01 23 4567 8901
INFO@METRICSS.COM W W W.METRICSS.COM
Business Card Frontside
W W W.METRICSS.COM
Business Card Backside
This shows the approved layouts with the primary elements of the Metricss Agency´s stationery system for business cards.
Parameter Dimensions 85 x 55 mm
USAGE
Weight 400g/m Uncoated white
-
Print CMYK
The business cards will be used for all official contact and communication of Metricss Agency´s company. Place your data into the Metricss Agency´s business cards and feel free to give them to your customers and partners.
Brand Manual 22 // 52
The Company Envelope
This shows the approved layouts with the primary elements of the Metricss Agency stationery system www.metricss.com
for the frontand backside of
Envelope Frontside
the corporate envelopes.
www.metricss.com
Envelope Backside
Parameter Dimensions 210 x 105 mm
USAGE
Weight 85g/m Uncoated white
-
Print CMYK
The envelop will be used for all official contact and communication of Metricss Agency´s company. Insert the Metricss Agency´s letterhead and send your documents throughout the world.
Brand Manual 23 // 52
Email:
Mobile:
Phone:
Main Avenue, New York City, USA
info@metricss.com
+01 (0) 123 456 7890
+01 (0) 123 456 7890
CONTACT DATA
Address:
SHORT HEADLINE
Andundanis cusci blam sa nias rem autas alibusda sequam, cumquae.
SHORT HEADLINE
Andundanis cusci blam sa nias rem autas alibusda sequam, cumquae.
Metricss Presentation Folder
The Company Presentation Folder
Parameter Dimensions 9 x 12 inch closed
USAGE
Weight 400g/m Uncoated white
-
Print CMYK
The presentation folder will be used for all official contact and communication of Metricss Agency´s company. Insert the informational stuff what you will give away and do not forget to include a business card.
Brand Manual 24 // 52
Metricss Social Media Guidelines and Policy HERE YOU WILL FIND INFORMATION ABOUT THE SOCIAL MEDIA POLICY OF METRICSS COMPANY. INTRODUCTION TO OUR SOCIAL MEDIA POLICY:
Social media is changing the way we work, offering a new model to engage with customers, colleagues, and the world at large. We believe this kind of interaction can help you to build stronger, more successful business relationships. And it’s a way for you to take part in global conversations related to the work we are doing at Metricss and the things we care about. These are the official guidelines for participating in social media for Metricss. If you’re an Metricss employee or contractor creating or contributing to blogs, wikis, social networks, virtual worlds, or any other kind of social media, these guidelines are for you. They will evolve as new social networking tools emerge, so check back regularly to make sure you’re up to date.
Participation in social computing on behalf of Metricss is not a right but an opportunity, so please treat it seriously and with respect. If you want to participate on behalf of Metricss, get your manager’s approval, complete the Social Media@Metricss training, and then send your account handles to the Social Media Center of Excellence. Please know and follow the Metricss Code of Conduct. Failure to abide by these guidelines and the Metricss Code of Conduct could result in discipline up to and including termination. Contact social.media@metricss.com for more information. Please also follow the terms and conditions for any third-party sites.
Brand Manual 25 // 52
Rules of Engagement
1. Disclose
2. Protect
3. Use Common Sense
Your honesty—or dishonesty—will be quickly noticed in the social media environment. Please represent Metricss ethically and with integrity.
Make sure all that transparency doesn’t violate Metricss’s confidentiality or legal guidelines for commercial speech— or your own privacy. Remember, if you’re online, you’re on the record— everything on the Internet is public and searchable. And what you write is ultimately your responsibility.
Perception is reality and in online social networks, the lines between public and private, personal and professional, are blurred. Just by identifying yourself as an Metricss employee, you are creating perceptions about your expertise and about Metricss. Do us all proud.
Be transparent: If you make an endorsement or recommendation about Metricss’s products/technologies, you must disclose that you work for Metricss. If you do not have an “Metricss” handle, then use “#work4metricss” in your postings. Using a disclaimer in your bio or profile is not enough per the FTC.
Don’t tell secrets:
Add value: There are millions of words out there— make yours helpful and thought-provoking. Remember, it’s a conversation, so keep it real. Build community by posting content that invites responses—then stay engaged. You can also broaden the dialogue by citing others who are writing about the same topic and allowing your content to be shared.
If you have a vested interest in something you are discussing, be the first to point it out and be specific about what it is.
Never reveal Metricss classified or confidential information. If you are posting your job description on LinkedIn, be sure not to reveal confidential product information. If you’re unsure, check with Metricss PR or Global Communications Group. Off-limit topics include litigation, non-published financials, and unreleased product info. Also, please respect brand, trademark, copyright, fair use, and trade secrets. If it gives you pause—pause rather than publish.
Be yourself:
Don’t slam the competition:
Stick to your area of expertise; only write what you know. If you publish to a website outside Metricss, please use a disclaimer like this one: “The postings on this site are my own and don’t necessarily represent Metricss’s positions, strategies, or opinions.”
Play nice. Anything you publish must be true and not misleading, and all claims must be substantiated and approved.
We must use FTC mandated disclaimers in all communications when benchmarking or comparing processors. So stay away from saying our products are smarter/ faster/ higher-performing in your social media postings. Leave that to the experts.
Don’t overshare:
Did you screw up?
Be careful out there—once you hit “share,” you usually can’t get it back. Plus, being judicious will help make your content more crisp and audience-relevant.
If you make a mistake, admit it. Be upfront and be quick with your correction. If you’re posting to a blog, you may choose to modify an earlier post—just make it clear that you have done so.
Be truthful:
Be up-to-date: If you are leaving Metricss, please remember to update your employment information on social media sites.
Don’t make claims:
Brand Manual 26 // 52
Social Media Guides Facebook Page Profile Image:
01 FACEBOOK MEDIA GUIDELINES -
• Must be at least 180 x 180 pixels • Photo will appear on page as 160 x 160 pixels • Photo thumbnail will appear throughout Facebook at 32 x 32 pixels This is the photo representing you or your brand on Facebook. This square photo will appear on your timeline layerd over your cover photo. It will also appear when you post to other walls, comment on posts or when you´re searched with Facebook´s Open Graph.
Explanation: Here you will find the social media guidelines for Facebook. This will help you to prepare your Posts in correct way and give you the best possibilities to provide images and media links to your audience. This will help you to have the most effective interaction with your social media fans or visitors.
Highlight Image : 1200 x 717 px • Appear on page at 843 x 504 px • Choose a higher resolution at that scale for a better quality
Brand Manual 27 // 52
Facebook Media Guidelines
Cover Image:
Just Excuse!
• Appear on page at 851 x 315 px • Anything less will be stretched • Minimum size of 399 x 150 px • For the best results, upload an RGB JPG file less than 100 kb • Images with a logo or text may be best as a PNG file
Shared Image : 1200 x 900 px • Appear on page at 851 x 315 px • Anything less will be stretched • Minimum size of 399 x 150 px • For the best results, upload an RGB JPG file less than 100 kb • Images with a logo or text may be best as a PNG file
Shared Link : 1200 x 627 px • Recommended upload size at 1200 x 627 px • Rectangular Photo: Min. 470 x 246 px in feed • Rectangular Photo: Min. 484 x 252 px on page
Brand Manual 28 // 52
Social Media Guides
02 GOOGLE+ MEDIA GUIDELINES Explanation: Here you will find the social media guidelines for Google+. This will help you to prepare your Posts in correct way and give you the best possibilities to provide images and media links to your audience. This will help you to have the most effective interaction with your social media fans or visitors.
Google+ Page Profile Image: • Must be at least 250 x 250 px • Minimum size 120 x 120 px • Maximum 5000 x 5000 px • Use Jpg, Gif or Png images You upload your image in a square format and then going render it into your page as a circle, so make sure you choose a photo doesn´t cut out your best side.
Brand Manual 29 // 52
Google+ Media Guidelines
Cover Image : 1088 x 608 px • Recommended 1088 x 608 px • Minimum 480 x 270 px • Maximum 2120 x 1192 px
Just Excuse!
The Google+ cover image is the biggest photo on your page, so choose your photo wisely! It is a great opportunity for you to showcase a product or service your brand offers.
Shared Image : 497 x 373 px • Appears in home stream an on page at a width of 426 px (height is scaled) • Minimum width of 497 px (will scale the height for you) • Maximum upload 2048 x 2048 px • Shared link - 150 x 150 px (thumbnail)
Shared Image : 150 x 150 px Shows in the feed and on page as 150 x 150 pixels (pulls in the photo from linked website)
Brand Manual 30 // 52
Corporate Grid Systems In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content.
THE GRID SYSTEM Explanation: 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. Parameter Example Grid System for DIN A4 297 x 210mm
Brand Manual 31 // 52
A4 Vertical Grid System Examples
Parameter Example Grid System for DIN A4 297 x 210mm
Brand Manual 32 // 52
Web Design & Development
THE LOGO PLACEMENT Explanation: To place the Metricss Agency´s logo in the correct way please use one of the approved styles that are shown on the right. To place the Metricss Agency´s logo in other ways is not allowed. Parameter Example Logo Placement 297 x 210mm DIN A4
Brand Manual 33 // 52
Web Grid Systems
SCREEN HORZONTAL GRID SYSTEM EXAMPLES Explanation: This shows an approved layout with a typography grid for a iPad Screen of Metricss Agency. This will be used for Company mobile websites.
Brand Manual 34 // 52
Mobile Design & Development
THE LOGO PLACEMENT Explanation: To place the Metricss Agency´s logo in the correct way please use one of the approved styles that are shown on the right. To place the Metricss Agency´s logo in other ways is not allowed. Parameter Example Logo Placement 297 x 210mm DIN A4
Brand Manual 35 // 52
Web Grid Systems
SCREEN HORZONTAL GRID SYSTEM EXAMPLES Explanation: This shows an approved layout with a typography grid for a iPad Screen of Metricss Agency. This will be used for Company mobile websites.
Brand Manual 36 // 52
Screen Design & Development
HEADLINE ONE
HEADLINE ONE
HEADLINE ONE
HEADLINE ONE
Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut ea conet volo blantia plaborepel is natqui officil magnihi.
Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut ea conet volo blantia plaborepel is natqui officil magnihi.
Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut ea conet volo blantia plaborepel is natqui officil magnihi.
Tequis magnam everunt re volupti ntiusament at et omnimo totatin venimus anturis explaut ea conet volo blantia plaborepel is natqui officil magnihi.
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo
Octotasseque eosapit dolest explit ped ma sit modipsam ventio tem. Et earum volo
Brand Manual 37 // 52
Screen Grid Systems
Grid Example 1
Grid Example 1
SCREEN HORZONTAL GRID SYSTEM EXAMPLES Explanation: This shows an approved layout with a typography grid for a 16:9 Screen of Metricss Agency. This will be used for Company presentations in Powerpoint or Keynote.
Grid Example 1
Grid Example 1
Grid Example 1
Grid Example 1
Grid Example 1
Grid Example 1
Brand Manual 38 // 52
Wireframe System A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
Brand Manual 39 // 52
Wireframe Examples for Websites Grid Two columns
Grid Three columns
Grid Four columns
Grid Five columns
Blog Page Single
Blog Page Overview
Portfolio Page 3 columns
Portfolio Page Grid based
Team Page Overview
Landing Page One Page Design
Shop Products Overview
Shop Product Single Page
Brand Manual 40 // 52
Mood Board & Inspiration
Brand Manual 41 // 52
Web Grid Systems
Mood boards can be a great way to convey your design idea, win pitches and get an early sign-off. Follow our expert advice on how to create them.
Be inspired. Be glad. Be glorious. Be individual.
Moooooood...
Brand Manual 42 // 52
Corporate Images
01 Dark Images THE METRICSS AGENCY CORPORATE IMAGE : DESCRIPTION Corporate Images are responsible to transfer the values of Metricss Agency´s 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. Metricss Agency use various corporate advertising techniques to enhance their public image in order to improve their desirability as a supplier, employer, customer, borrower, partner, etc.
THE METRICSS AGENCY CORPORATE IMAGE : DARK IMAGES Requirements: - desaturate colours - high contrast - sharp images - minimalistic look - modern and businesslike
Brand Manual 43 // 52
How to add the blending modes to corporate images
02 Light Images
Requirements THE METRICSS CORPORATE IMAGE : LIGHT IMAGES Requirements: - desaturate colours - high contrast - sharp images - minimalistic look - modern and businesslike
Brand Manual 44 // 52
Images and Blending Modes
Dark Images
Light Images
Brand Manual 45 // 52
How to add the blending modes to corporate images
THE METRICSS AGENCY BLENDING MODES FOR IMAGES 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.
How to How to create Blending modes 1) use it in image in black and white mode 2) use a placeholder with a corporate background 3) adjust the layer style to “multiply�
Brand Manual 46 // 52
Corporate Iconography THE CORPORATE ICONOGRAPHY OF METRICSS AGENCY 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.
THE ICONOGRAPHY PALETTE
Brand Manual 47 // 52
Corporate Icon Construction
Icon construction
1. Setup
2. Your Icon
3. Upscale
4. Downscale
-
-
-
-
Create a square background in corporate color
Choose your icon from corporate icon range
Scale the chosen icon up to the size of your square background
Downscale the chosen icon with a value of 46 % and center
Used Icon backgrounds
Brand Manual 48 // 52
Summary & Contact
THANK YOU FOR YOUR ATTENTION TO THIS BRAND MANUAL GUIDE SUMMARY
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. quatem iur? Velenes de plab il imenim fugitatent voloreh enisquis
et arunt venihitin cus et rero beatet experrum faccupti tecus volupta tatatem aces volo officipsunto omnist ommodi dolupta desciatur, sediorio inctia voluptat odicim exerum fugit, sam as re, ea voluptas earcia quas quundanda natur sitionectent asincit, core esciminit asimolut quia quatet essimus eum eatempedi dus dendige niminul luptae vendae sandem que que vollesenime oditat. Sent odipsum etureic to que et duciunt magni inctur autento rporese dicidi corem quas dolupti untiam, incidun tionsequae rem eos vendae natqui susae doluptis dolores molor sum fuga. Nam quossi inverum nectatem nusam qui sim comnim quatest landusame omnienda nimagnihic to blaborr. Ovidunt aspid quo et aut apis velestibus inis diciis vid que voles aut fugitios sae rerferi tiatur magnimus etur minvereriate net, utecte velescilit enist vit, ipis magnienda core preptasi quae pratur? Quia sit et rempos volupti ariti
Brand Manual 49 // 52
Contact & Impress
sum hiliqui omnihit atquia quistruptum nonsequati to cus magnate ctecum et aut aute lit, opta aut restia quianti nem. Nem quis seque dolorem fugia que voluptatus eictem eum qui que praepel modi officaborio bla pel isincit aditis destis excepre rnatemo eius. Il et apel is dolorendae voluptae et ma doluptas et et reperumque nulparum as diciis unt etur, officat mi, invenda dolupit, solore ne nus enimpos et endis eat haria simolupta nat. Genitat iorrum enduntem es nos vel eos dest, nimpe aut voluptur maxim aniet aut rem sit, si tem. Ut eos eos ipsae eum rerios ilit assuntia providemo bla vel mo beat experior siti omnihil eos experib usaperent, aceatur?
CONTACT Company: Metricss
Contact: Company President Mark Anderson E: manderson@metricss.com P: +01.132.4567.890 Vice President Dean Michaels E: dmichaels@metricss.com P: +01.132.4567.890 Marketing Director Mark Anderson E: manderson@metricss.com P: +01.132.4567.890
Brand Manual 50 // 52
Downloads & Impress THE CORPORATE DESIGN OF METRICSS, DOWNLOAD LINKS OF THE SINGLE DESIGN ITEMS
Metricss Logo
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.
Metricss Stationery
Metricss Iconography
Metricss Full Manual
Brand Manual 51 // 52
Downloads & Impress
IMPRESS Web link Link : http://www.metricss.com/cd/logo.zip
Agency: Design.Inc
Contact: Executive Director Mark Anderson Marketing Comma, Web link Link : http://www.metricss.com/cd/stationery.zip
E: info@Comma,.tv P: +01.132.4567.890 Creative Director Mark Anderson Marketing Comma, E: info@Comma,.tv P: +01.132.4567.890
Web link Link : http://www.metricss.com/cd/icons.zip
Art Director 1 Mark Anderson Marketing Comma, E: info@Comma,.tv P: +01.132.4567.890 Art Director 2 Mark Anderson Marketing Comma, E: info@Comma,.tv P: +01.132.4567.890
Web link Link : http://www.metricss.com/cd/fullmanual.pdf
Nem faccaeptiae expliae core prorporepera ipicte sinvele stectis modis num re sandant. Quas dolentiur?
www.metricss.com
CREATION DATE : NOVEMBER 2016
M.
Thank you for being a part of our brand.
CREATED FOR : METRICSS LONDON
MADE WITH LOVE BY: EGOTYPE DESIGN BERLIN