1 BRAND IDENTITY 1 DIMENSIONS 2 -...

10
Brand Guidelines Index LOGO DIMENSIONS 1 BRAND IDENTITY BACKGROUNDS ICONOGRAPHY 5 GRAPHIC ELEMENTS COLOUR VARIATIONS INCORRECT USAGE 6 USAGE 2 COLOUR PALETTE 3 TYPOGRAPHY DETAILS 4 MARGINS 1 2 6 7 8 9 3 4 5

Transcript of 1 BRAND IDENTITY 1 DIMENSIONS 2 -...

Page 1: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Brand Guidelines

Index

LOGODIMENSIONS

1 BRAND IDENTITY

BACKGROUNDSICONOGRAPHY

5 GRAPHIC ELEMENTS

COLOUR VARIATIONS

INCORRECT USAGE

6 USAGE

2 COLOUR PALETTE

3 TYPOGRAPHY DETAILS

4 MARGINS

12

67

8

9

3

4

5

Page 2: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Yumming’s brandmarkis made up of two elements.

It is highly recommended using these elements together as a brandmark as shown.

The symbol can also beused individually as required (as the app icon, for example).

LOGO

1 BRAND IDENTITY

Symbol

Symbol

Wordmark

Wordmark

Brand Identity

Page 3: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

140º

x8

x4

x1

x1

x2x2 x2

x24

x1 x1

Yumming Brand Guidelines

Symbol

The symbol is created with proportional squares. This makes easier to copy it in different sizes.Its height and width it’s a square made of 8 little proportional squares.

Brandmark & symbol

Brandmark’s heigh it’s based on four squares. The space between it and the symbol is equal to one square.

DIMENSIONS

1 BRAND IDENTITY

x2

Page 4: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

The colour palette consists of a triadic colour palette and a greay scale.

Primary colour are used across all brand communication.

Secondary colours and gray scale can be used when additional colours are required within communication.

All the colours in palette should be reproduced in print as Pantone® spot colourswhere possible.

RGB values should be used for all screen based applications anddigital printing.

2 COLOUR PALETTE

Prim

ary

Gray S

caleTriadic

R 253 G 168

B 19

R 255 G 183

B 67

R 255 G 150

B 0

R 229 G 130

B 0

R 255 G 228

B 0

R 255 G 238

B 115

PSC - 130C

PSC - 2012C

PSC - 138C

PSC - 143C

PSC - 3945C

PSC - 393C

R 71 G 76

B 86

R 120 G 121

B 124

R 168 G 19

B 253

R 35 G 31

B 32

R 19 G 253

B 168

R 200 G 200

B 200

PSC - Black

PSC - Cool Gray 3C

PSC - Cool Gray 9C

PSC - Cool Gray 11C

PSC - 353C

PSC - 7442C

Page 5: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Only three font styles are usedfor the identity, and they are from the same typeface Google fonts family: Rubik.

3 TYPOGRAPHY DETAILS

Rubik LightABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Rubik MediumABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Rubik RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

WEB & PRINTABLE TYPOGRAPHY SIZES

H1 - TITLES

SMARTPHONE TYPOGRAPHY SIZES

RUBIK MEDIUM- CAPITALS - 17pt

H2 - TITLES

RUBIK REGULAR - CAPITALS - 14pt

P - TEXT

Rubik light - from 10pt to 15pt

H1 - TITLES

RUBIK MEDIUM- CAPITALS - 20pt

H2 - TITLES

RUBIK REGULAR - CAPITALS - 14pt

P - TEXT

Rubik light - 14px

Page 6: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Displaying the brandmark on headers have to apply next rules:

Headers:The brandmark will be the horizontal logo and the symbol will be displayed left or right depending on its paragraph justification.

Signatures:The brandmark will be the vertical logo and it will always be displayed at the right side.

4 MARGINS

x

x

x

x

x

x

x

x

x

Page 7: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Backgrounds are determined for a visual strengh of the brandmark. Whenever the background is different from white, the brandmark won’t show its back shadow.

Faded:Faded background is used as a background for the app icon.

Primary-colour:It will be used as a primary background whenever it’s possible.

Shapes:Shapes will be shown in a 20% of its opacity to allow brandmark be more readable. It will be used for dashboard screen and as a cozy chance for brandmark.

BACKGROUNDS

5 GRAPHIC ELEMENTS

Page 8: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Icons will be as simples as its possible, based on clear lines in primary colour.

ICONOGRAPHY

5 GRAPHIC ELEMENTS

USER / PROFILE CHAT MENU HOME BACK

NOTIFICATIONS LOCATION POSITION CHATNOTIFICATIONS

LOG OUT

FAVOURITS SETTINGS UPLOADPICTURE

SEARCHCALENDAR

TICKSELECTED

DROPDOWN ADD CLOSE/DELETE PAST/NEXT(CALENDAR)

Header & Menu Options

App elements

Social Networks

TWITTER FACEBOOK LINKEDIN YOUTUBEINSTAGRAM

Page 9: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Colour variations follow two rules:

If background is a secondary colour or gray scale colour, shape inside symbol will be displayed with the same colour.

If background is faded, shape based or with primary, triadic or black colour, shape inside symbol will be displayed with the primary colour.

COLOUR VARIATIONS

6 USAGE

Page 10: 1 BRAND IDENTITY 1 DIMENSIONS 2 - UOCopenaccess.uoc.edu/webapps/o2/bitstream/10609/59531/64/jmoron… · Yumming Brand Guidelines Yumming’s brandmark is made up of two elements.

Yumming Brand Guidelines

Here are some examples of incorrect usage of the brandmark.

Always use approved artwork. Never alter or recreate the brandmark.

INCORRECT USAGE

6 USAGE

DO NOT change the brandmark colour

DO NOT rotate.

DO NOT change the proportions.

DO NOT put down the symbol in thevertical logo.

DO NOT scale individual elements.

DO NOT take off the back shadow of justone item

DO NOT justify the vertical logo.