Yelp Brand Guidelines (Proposal) by Alexandra Camacho

Spring 2015

Brand Guidelines

Yelp Brand Guidelines

Introduction

Table of Contents

Introduction

Brand Idea

Yelp Brand Guidelines

The Yelp brand is a visual system that communicates the heart of our work and our identity. This guidebook outlines all written, visual, and graphic elements that comprise our brand.

Yelp Brand Guidelines

Table of Contents

Introduction

The Yelp Brand

Graphic Elements

Applications

Contact

05 Inspiration

16 Icons

23 Stationery

34 Get in Touch

07 Logotype

17 Patterns

25 Website

08 Clearspace & Sizing

18 Photographic Style

28 Mobile App

09 Logo Variations

21 Gradients

29 Advertising

10 Improper Usage 11 Brandmark 12 Typography 13 Primary Colors 14 Secondary Colors

32 Collateral

Brand Idea

Introduction

The Yelp Brand

Yelp Brand Guidelines

Table of Contents

Introduction

Inspiration

community

voice

yelp

Introduction

Brand Idea

Yelp Brand Guidelines

Primary Logotype Meet our logo! This primary logo is our favourite and should always be used when circumstances allow. This is the clearest way we can represent our company visually.

Secondary Logotype If itâ&#x20AC;&#x2122;s impossible to use our primary logotype use this vertical version.

Logotype

The Yelp Brand

Clearspace Our logo needs some breathing room. Make sure you give it space to stand out. For the primary logo the margin of clearspace is measured by the size of the letter “y”. For the secondary logo the minimum clearspace around the logotype is equivalent to 1/3 its width.

Minimum Size To make sure our logo is always visible we’ve determined a minimum display size for both digital and print applications.

Clearspace & Sizing

Primary logotype

Yelp Brand Guidelines

Secondary logotype

Minimum print size 0.6 inch (15 mm) wide.

Minimum print size 0.4 inch (10 mm) wide.

Minimum digital size 80 pixels wide.

Minimum digital size 45 pixels wide.

Yelp Brand Guidelines

Logo Variations There are a couple of different ways to showcase our logo.

Logo Variations

The Yelp Brand

Full color

Full negative

Grayscale

White

One color

One color on colored background

The full color logo should always be used on a light or white background. Use the full negative version when on a background that is black or very dark. The grayscale logo should only be used in the event that we cannot properly reproduce the primary logotype due to printing or design restraints. Use the white logo on a gradient or a colored background. The one color version can be used on a light or white background. It can also be used on any color from our palette.

Improper Usage

The Yelp Brand

Improper Usage To make sure our logotype appears as consistent as possible throughout our communications, we’ve identified a few ways it should not be used. Here are some examples.

Yelp Brand Guidelines

Don’t rotate the logo

Only use specified colors

Don’t stretch the logo

Don’t change the position of the logo

Don’t use the full logo on a dark background

Don’t alter the size of the brandmark

Don’t fill the logo with a gradient

Don’t use effects such as a drop shadow

Don’t use the logo on a busy or bright image

Yelp Brand Guidelines

Brandmark The brandmark is our symbol. This symbol can be used alone to reinforce our brand. There are a couple of different ways to use it but always keep in mind that the clearspace around the brandmark is equivalent to 1/3 of its width.

Brandmark

Full color

The Yelp Brand

White

Clearspace

x/3x

x/3x One color

Grayscale

Stroke

The Yelp Brand

Typography Our typeface is Gotham Rounded, a soft and fluid sansserif that complements our identity. Use good judgment when choosing different weights. Here are the options.

Typography

Yelp Brand Guidelines

abc Gotham Rounded Bold

Gotham Rounded Medium

Gotham Rounded Book

ABCDEFGHIJ KLMNOPQR STUVWXYZ abcdefghijklm nopqrstuvwxyz 0123456789 $@#&*_-[]()

Yelp Brand Guidelines

Primary Colors

The Yelp Brand

Primary Colors These are the colors that represent our brand. This hierarchy shows their order of use. Use these colors generously for our type, pattterns and backgrounds.

Pantone 206 U CMYK: 0, 98, 51, 2 RGB: 216, 68, 101 HEX: D84465

Pantone 220 U

Pantone Warm Gray 4 U

CMYK: 7, 97, 4, 16

CMYK: 8, 10, 12, 24

RGB: 176, 76, 117

RGB: 180, 172, 166

HEX: B04C75

HEX: B4ACA6

Secondary Colors

The Yelp Brand

Secondary Colors Here are our secondary colors. Each color represents a specific category on our web and mobile applications. These colors are also used across our visual communications..

Pantone 122 U CMYK: 0, 22, 93, 0 RGB: 255, 192, 63 HEX: FFC03F

Pantone 1655 U CMYK: 0, 55, 84, 0 RGB: 255, 111, 76 HEX: FF6F4C

Pantone 185 U CMYK: 0, 81, 54, 0 RGB: 241, 80, 96 HEX: F15060

Pantone 220 U CMYK: 7, 97, 4, 16 RGB: 176, 76, 117 HEX: B04C75

Pantone 2354 U CMYK: 51, 74, 15, 0 RGB: 143, 100, 140 HEX: 8F648C

Pantone 2102 CMYK: 68, 62, 0, 0 RGB: 116, 108, 175 HEX: 746CAF

Pantone 659 U CMYK: 41, 15, 0, 0 RGB: 150, 182, 229 HEX: 96B6E5

Pantone 3385 CMYK: 5, 0, 45, 0 RGB: 58, 212, 167 HEX: 3AD4A

Yelp Brand Guidelines

Table of Contents

Introduction

Graphic Elements

Icons

Yelp Brand Guidelines

Icons These are our line drawing icons. They are familiar, uncomplicated and friendly, just like we are.

Social Media Usage There are two shapes for the Yelp icon. When applicable, leave a minimum of 8 px between icons.

Full color

Grayscale

White

Yelp Brand Guidelines

Table of Contents

Introduction

Graphic Elements

Patterns Patterns can be used across a wide range of promotional materials to add color and intrigue. However, these patterns should not obstruct important information and should never be used as backgrounds. These patterns are composed of our brand elements and use colors from our palette.

Patterns

Yelp Brand Guidelines

Photographic Style Our style of photography is clean and natural. It should express the idea of joy and discovery. Gradient filters can be used with our brand colors to create cohesion across different photographs.

Photographic Style

Graphic Elements

Photographic Style

Yelp Brand Guidelines

Gradients

Gradients We love gradients! Similar to our brandmark, we like to use gradients in other elements of the brand. Our gradients are composed of our color palette and with an emphasis on warm colors. Gradients should always be composed at a 45ยบ angle from light to dark, left to right, bottom to top.

45ยบ

Graphic Elements

Introduction

Brand Idea

Applications

Yelp Brand Guidelines

Stationery Our stationery system is consistent with the brand. We use the primary logo lockup in full color applications and we use our brandmark as a reinforcement.

Stationery

Applications

Stationery

Yelp Brand Guidelines

Website The new website has been simplified down to its core essentials. The landing page encourages users to start searching. If the user scrolls down they can browse different categories, popular places and top reviews.

Website

Applications

Website

Yelp Brand Guidelines

Mobile App

Applications

Mobile App The Yelp app utilizes our type treatment, colour palette and iconography throughout its design. It streamlines and condenses our web application into a simple and user-friendly mobile experience.

Mobile App

Yelp Brand Guidelines

Advertising Yelp advertising is always stripped down to a core message. We like to display short and simply copy in bold. A gradient filter is used to tie all design elements together.

Advertising

Applications

Advertising

Yelp Brand Guidelines

Collateral

Applications

Collateral These are extensions of the Yelp brand. We like to bring in all the elements of our brand and make them pop!

Collateral

Yelp Brand Guidelines

Contact

Table of Contents

Introduction

Contact

Stay in Touch

Any questions? Feel free to reach out to us.

Web www.yelp.com/brandguidelines

Email creative@yelp.com

Yelp Brand Guidelines