Groupon Merchandising Guideline by ewheeler

GROUPON MERCHANDISING GUIDELINE 1.0

Merchandising Guideline 1.0

LAST UPDATED JULY 10, 2014

GROUPON MERCHANDISING GUIDELINE 1.0

Table of Contents 3

Color Palette

EMAIL ASSETS

SOCIAL ASSETS

Styles

44-47

3T/Occasions Header Email Banner

86-87

Facebook Display Ad

CTA Button

48-51

3T/Occasions Body Email Banner

88-91

Facebook Cover Photo

52-55

3T/Occasions Mobile Email Banner

WEB ASSETS

56-59

G1 Email Banner

ASSET TEMPLATES &

10-13

Merchicon Header

60-63

G1 Mobile Email Banner

NAMING CONVENTIONS

14-17

Merchicon Header Banner

64-67

Getaways Email Banner

Asset Templates & Mockups

18-22

Subnav Banner

68-71

Getaways Mobile Email Banner

File Naming Conventions

23-26

Gift Shop Banner

72-75

Goods Email Banner

27-30

Pencil Banner

Final Checklist

31-34

Merchicon Widget

35-38

Deal Page Banner

77-80

Regular Mobile Banner

39-42

Left Rail Banner

81-84

Retina Mobile Banner

4-7 8

MOBILE ASSETS

GROUPON MERCHANDISING GUIDELINE 1.0

Color Palette

#82B548

#4BC1DE

#333333

#BA0C2F

#0076A8

PMS: 369 C CMYK: 59 / 0 / 100 / 7 RGB: 130 / 181 / 72

PMS: 2985 C CMYK: 80 / 0 / 15 / 0 RGB: 75 / 193 / 222

PMS: BLACK CMYK: 0 / 0 / 0 / 100 RGB: 51 / 51 / 51

PMS: 200 C CMYK: 3 / 100 / 70 / 12 RGB: 186/ 12 / 47

PMS: 7690 C CMYK: 95 / 41 / 10 / 0 RGB: 0/118/168

#E35205

#F2A900

#C5299B

#514689

PMS:166 C CMYK: 0 / 76 / 100 / 0 RGB: 227 / 82 / 5

PMS:130 C CMYK: 0 / 32 / 100 / 0 RGB: 242 / 169 / 0

PMS:240 C CMYK: 20 / 89 / 0 / 0 RGB: 197 / 41 / 155

PMS:7671 C CMYK: 83 / 81 / 0 / 4 RGB: 81 / 70 / 137

GROUPON MERCHANDISING GUIDELINE 1.0 | STYLES

Styles

GROUPON MERCHANDISING GUIDELINE 1.0 | STYLES

Groupon Photography Style PHOTOGRAPHY STYLE • Clean image with a lot of negative space that allows enough room for copy • Candid look on the model if applicable • Purposeful crop of the subject • Vibrant colors in natural lighting

DONT’S

ALWAYS TELL A STORY

CHOOSE CANDID PHOTOS

HAVE A SUBJECT

Don’t choose a photography

Avoid conventional / cliche

Don’t choose photography

that feels stale and boring.

stock imagery.

that is too abstract.

GROUPON MERCHANDISING GUIDELINE 1.0 | STYLES

Groupon Illustration Style ILLUSTRATION STYLE • Each element must be clipped out of the photograph and given the same thin white stroke (2px for regular assets and 4px for retina assets) and drop shadow • Elements should be set on solid color backgrounds from Groupon’s color palette • Never apply the stroke inside of the smart object; instead apply the stroke and drop shadow to

STROKE

the smart object layer in the working Photoshop

• 2px #FFFFFF for regular assets

document

• 4px #FFFFFF for retina assets

2px stroke for regular assets

DROP SHADOW 50% #000000 - Multiply 148° angle distance: 2 spread: 0 size: 10 4px stroke for retina assets

GROUPON MERCHANDISING GUIDELINE 1.0 | STYLES

Groupon Iconic Style ICONIC STYLE • Clean, flat, simple imagery • Imagery with rounded corners and not a lot of detail work best • Original vector creation or manipulated from stock to be original • Visit The Noun Project for inpiration or downloads thenounproject.com • Lay out the vector elements in a way that complements the copy and maintains legibility • No outlines and no gradients • No cartoony looking artwork • Avoid using people unless for a specific purpose ICONIC STYLE ON COLOR BACKGROUND • Elements should be set on a solid color background from Groupon’s color palette • Vector objects and type should be #FFFFFF • If white vector elements bleed off the edge of the asset, create a 1px (2px for retina assets) stroke around the border of the asset with the same color as the background ICONIC STYLE ON WHITE BACKGROUND • White background • Vector objects should be colored utilizing colors from Groupon’s color palette • One color per individual vector object • All copy should be solid gray #333333 • Must have a 1px (2px for retina assets) #D8D8D8 stroke around the border of the asset

GROUPON MERCHANDISING GUIDELINE 1.0 | STYLES

CTA Button (Regular & Retina) BUTTON

REGULAR BUTTON

• Our gray CTA button is to be used for all banners requiring a button • Buttons should only be used for CTAs of 3 words

30px height

15px

or fewer

White #FFFFFF Gray #F0EEEF

9px

• If CTA is longer than 3 words, it should be text (All TYPE

Caps, Semibold, with Groupon Ligatures Arrow)

BOX

#666666

• Button works universally with various background colors and photography

GRADIENT

9px

Border 1px stroke (#D8D8D8)

All Caps / Centered Open Sans Semibold 13pt

REGULAR SIZE Height is consistently 30px Width is dependent on the length of the text but must have 15px padding on both sides. RETINA SIZE Height is consistently 60px

RETINA BUTTON

must have 30px padding on both sides.

60px height

30px

context of page layout

30px

White #FFFFFF Gray #F0EEEF

18px

LOCATION Centered, left justified or right justified depending on

GRADIENT

18px

Width is dependent on the length of the text but

TYPE #666666 All Caps / Centered Open Sans Semibold 26pt

BOX Border 2px stroke (#D8D8D8)

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

Web Assets

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

1680x450 - Merchicon Header PLACEMENT Merchicon Page SIZE Width is consistently 1680px Height is consistently 450px DELIVERABLES • Save for web as a .jpg • Deliver file without text • Deliver full image (no cut-out for deal) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style *Special Note: For Photographic style please include a 1px white border on the left and right side of the asset. This keeps the border of the photograph from being replicated when the web page extends. For Illustration and Vector Style, the solid color background will be extended. TEMPLATE FILE ON BOX 1680x450_merchiconheader_template.psd MOCKUP FILE ON BOX 1680x450_merchiconheader_mockup.psd 1680x450_merchiconheader_goods_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

1680x450 - Merchicon Header PHOTOGRAPHY STYLE CHARACTER COUNT • Headline: 40 characters max w/ spaces • No CTA or Button STROKE Add 1px white stroke on the left and right of the asset because the image extends

TEMPLATE

DELIVERABLE FILE

• Make sure copy is legible

• No Copy (dev puts in)

on the background • Account for the space covered by the deal tile

TYPE #FFFFFF Title Case Open Sans Light 24pt

• No cut-out for deal tile

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

1680x450 - Merchicon Header ILLUSTRATION STYLE CHARACTER COUNT • Headline: 40 characters max w/ spaces • No CTA or Button RESTRICTIONS No elements should be “cropped” by the left or right sides because the image extends with the background color. There should be at least 1 px of clear space on the left and right side. HEX CODE Provide hex code for the background color

TEMPLATE

DELIVERABLE FILE

• Make sure copy is legible

• No Copy (dev puts in)

on the background

with deliverable file

• Account for the space covered by the deal tile

TYPE #FFFFFF Title Case Open Sans Light 24pt

• No cut-out for deal tile

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

1680x450 - Merchicon Header ICONIC STYLE CHARACTER COUNT • Headline: 40 characters max w/ spaces • No CTA or Button RESTRICTIONS No elements should be “cropped” by the left or right sides because the image extends with the background color. There should be at least 1px of clear space on the left and right side. HEX CODE Provide hex code for the background color with deliverable file

STROKE

TEMPLATE

DELIVERABLE FILE

If white vector elements bleed off

• Make sure copy is legible

• No Copy (dev puts in)

the edge of the asset, create a 1px stroke around the asset with the same color as the background

TYPE #FFFFFF Title Case Open Sans Light 24pt

on the background • Account for the space covered by the deal tile

• No cut-out for deal tile

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x100 - Merchicon Header Banner PLACEMENT Merchicon Page SIZE Width is consistently 940px Height is consistently 100px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 940x100_merchiconheader_photographic_template.psd 940x100_merchiconheader_illustration_template.psd 940x100_merchiconheader_iconic_template.psd MOCKUP FILE ON BOX 940x100_merchiconheader_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x100 - Merchicon Header Banner PHOTOGRAPHIC STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces • No CTA or Button TYPE PLACEMENT

TYPE

• Centered vertically with 20px padding left

#FFFFFF

• OR centered vertically and horizontally

Title Case Open Sans Light 24-36pt (variable depending on copy length)

20px

OVERLAY May need to add black to white multiply gradient layer (no darker than 30% opacity) behind the text only to help with legibility

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x100 - Merchicon Header Banner ILLUSTRATION STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces • No CTA or Button TYPE PLACEMENT

TYPE

• Centered vertically with 20px padding left

#FFFFFF

• OR centered vertically and horizontally

Title Case Open Sans Light 24-36pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x100 - Merchicon Header Banner ICONIC STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces • No CTA or Button TYPE PLACEMENT

TYPE

• Centered vertically with 20px padding left

#FFFFFF

• OR centered vertically and horizontally

Title Case Open Sans Light 24-36pt (variable depending on copy length)

STROKE If white vector elements bleed off the edge of the asset, create a 1px stroke around the asset with the same color as the background

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 (Retina) - Subnav Banner PLACEMENT Subnav SIZE ON WEB Width is consistently 220px Height is consistently 210px DELIVERABLE SIZE (RETINA) Width is consistently 440px Height is consistently 420px DELIVERABLES • Save for web as a .jpg • Deliver file with text • File size should be 440 x 420 pixels (RETINA) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 440x420_subnav_photographic1_template.psd 440x420_subnav_photographic2_template.psd 440x420_subnav_illustration_template.psd 440x420_subnav_iconic_template.psd MOCKUP FILE ON BOX 440x420_subnav_mockup.psd 440x420_subnav_getaways_mockup.psd 440x420_subnav_goods_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Subnav Banner PHOTOGRAPHIC STYLE 1 CHARACTER COUNT

40px

• 1-Line Headline: 15 characters max w/ spaces

HEADLINE TYPE

• OR 2-Line Headline: 26 characters max w/ spaces

#FFFFFF

• 1-Line CTA: 20 characters max w/ spaces

Title Case

• OR 2-Line CTA: 40 characters max w/ spaces

Open Sans Light

• No Button

52pt / 56pt

*Special Note: a 2-Line Headline and 2-Line CTA may not be paired together TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding centered, top • OR 40px padding centered, bottom • Distance between Headline and CTA is 30px 30px

CTA TYPE #FFFFFF All Caps Open Sans Semibold 26pt

OVERLAY #000000 multiply layer set to 30% opacity

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Subnav Banner PHOTOGRAPHIC STYLE 2 CHARACTER COUNT • 1-Line Headline: 18 characters max w/ spaces • 1-Line CTA: 20 characters max w/ spaces • No Button TYPE PLACEMENT • In CTA box • Use template for exact placement CTA BOX SIZE Height is consistently 106px Width is consistently 440px CTA BOX LOCATION Bottom only IMAGERY Full-bleed photography

HEADLINE TYPE

ARROW

#FFFFFF

Title Case

Groupon-Ligatures

Open Sans Light

(arrowrightlarge)

38pt CTA TYPE

BOX

#FFFFFF

#000000

All Caps

70% opacity

Open Sans Semibold 22pt

28pt

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Subnav Banner ILLUSTRATION STYLE CHARACTER COUNT • 1-Line Headline: 15 characters max w/ spaces

40px HEADLINE TYPE

• OR 2-Line Headline: 26 characters max w/ spaces

#FFFFFF

• 1-Line CTA: 20 characters max w/ spaces

Title Case

• OR 2-Line CTA: 40 characters max w/ spaces

Open Sans Light

• No Button

52pt / 56pt

30px

CTA TYPE #FFFFFF All Caps Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Subnav Banner ICONIC STYLE CHARACTER COUNT • 1-Line Headline: 15 characters max w/ spaces • OR 2-Line Headline: 26 characters max w/ spaces • Button: 3 words max • Always use a button TYPE PLACEMENT • Centered horizontally and vertically

HEADLINE TYPE #FFFFFF or #333333 35px

Open Sans Light

• OR 40px padding centered, top • OR 40px padding centered, bottom • Distance between Headline and Button is 35px

40px

SOLID COLOR BACKGROUND • Use Groupon’s color palettes • Vector elements must be #FFFFFF WHITE BACKGROUND • Vector elements must be solid color (each vector element must have its own color) • Use 2px #D8D8D8 stroke border around entire asset • Copy must be solid gray #333333

STROKE #D8D8D8 2px

RETINA BUTTON • Use Groupon’s neutral gray #C4BF86 CTA button • Height is consistently 60px, width is dependent on the length of the text but must have 30px padding on both sides *See Retina Button on page 8

Title Case 52pt / 56pt

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x165 - Gift Shop Banner PLACEMENT Gift Shop Landing Page SIZE Width is consistently 940px Height is consistently 165px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 940x165_giftshopbanner_photographic_template.psd 940x165_giftshopbanner_illustration_template.psd 940x165_giftshopbanner_iconic_template.psd MOCKUP FILE ON BOX 940x165_giftshopbanner_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x165 - Gift Shop Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

TYPE PLACEMENT

HEADLINE TYPE

• Headline: 35 characters max w/ spaces

• Centered vertically with 20px padding left

#FFFFFF

• Subhead: 45 characters max w/ spaces

• OR centered vertically and horizontally

Title Case

• CTA: 25 characters max w/ spaces

Open Sans Light

• OR Button: 3 words max

24-36pt (variable depending on copy length)

20px

*Special Note: a Subhead and CTA may not be paired together.

CTA TYPE

CTA ARROW

OVERLAY

#FFFFFF

May need to add black to white multiply gradient layer (no darker

All Caps

Groupon-Ligatures

than 30% opacity) behind the text only to help with legibility

Open Sans Semibold

(arrowrightlarge)

18pt

14pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x165 - Gift Shop Banner ILLUSTRATION STYLE CHARACTER COUNT

TYPE PLACEMENT

HEADLINE TYPE

• Headline: 35 characters max w/ spaces

• Centered vertically with 20px padding left

#FFFFFF

• Subhead: 45 characters max w/ spaces

• OR centered vertically and horizontally

Title Case

• CTA: 25 characters max w/ spaces

Open Sans Light

• OR Button: 3 words max

24-36pt (variable depending on copy length)

20px

*Special Note: a Subhead and CTA may not be paired together.

CTA TYPE

CTA ARROW

#FFFFFF

All Caps

Groupon-Ligatures

Open Sans Semibold

(arrowrightlarge)

18pt

14pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x165 - Gift Shop Banner ICONIC STYLE CHARACTER COUNT

TYPE PLACEMENT

HEADLINE TYPE

• Headline: 35 characters max w/ spaces

• Centered vertically with 20px padding left

#FFFFFF

• Subhead: 45 characters max w/ spaces

• OR centered vertically and horizontally

Title Case

• CTA: 25 characters max w/ spaces

Open Sans Light

• OR Button: 3 words max

24-36pt (variable depending on copy length)

20px

*Special Note: a Subhead and CTA may not be paired together.

CTA TYPE

CTA ARROW

#FFFFFF

All Caps

Groupon-Ligatures

Open Sans Semibold

(arrowrightlarge)

18pt

14pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x60 - Pencil Banner PLACEMENT Goods Landing Page SIZE Width is consistently 940px Height is consistently 60px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS • Use Typographic, Illustration or Iconic Style • Photographic Style does not work with these dimentions TEMPLATE FILE ON BOX 940x60_goods_pencilbanner_text_template.psd 940x60_goods_pencilbanner_illustration_template.psd 940x60_goods_pencilbanner_iconic_template.psd MOCKUP FILE ON BOX 940x60_goods_pencilbanner_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x60 - Pencil Banner TEXT ONLY STYLE CHARACTER COUNT

CTA TYPE

• Headline: 70 characters max w/ spaces

#FFFFFF or Color

• CTA: 10-12 characters max w/ spaces

All Caps Open Sans Semibold

COPY RESTRICTIONS

3pts smaller than headline

• Headline and short CTA only CTA ARROW

• No Button

#FFFFFF or Color TYPE PLACEMENT

Groupon-Ligatures

• Centered vertically with 20px padding left • OR centered vertically and horizontally

(arrowrightlarge) HEADLINE TYPE

7pts smaller than CTA type

#FFFFFF

Baseline set to 1

BACKGROUND COLORS

Sentence Case

Use a solid color background from Groupon’s

Open Sans Light

CTA COLOR

color palette

20-26pt

Can be another color besides #FFFFFF to draw attention

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x60 - Pencil Banner ILLUSTRATION STYLE CHARACTER COUNT

CTA TYPE

• Headline: 45 characters max w/ spaces

#FFFFFF or Color

• CTA: 10-12 characters max w/ spaces

All Caps Open Sans Semibold

COPY RESTRICTIONS

3pts smaller than headline

• Headline and short CTA only CTA ARROW

• No Button

#FFFFFF or Color TYPE PLACEMENT

Groupon-Ligatures

• Centered vertically with 20px padding left

(arrowrightlarge)

• OR centered vertically and horizontally

7pts smaller than CTA type Baseline set to 1

HEADLINE TYPE #FFFFFF Sentence Case Open Sans Light 20-26pt

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

940x60 - Pencil Banner ICONIC STYLE CHARACTER COUNT • Headline: 45 characters max w/ spaces CTA TYPE

• CTA: 10-12 characters max w/ spaces

#FFFFFF or Color COPY RESTRICTIONS

All Caps

• Headline and short CTA only

Open Sans Semibold

• No Button

3pts smaller than headline

TYPE PLACEMENT

HEADLINE TYPE

CTA ARROW

• Centered vertically with 20px padding left

#FFFFFF

#FFFFFF or Color

• OR centered vertically and horizontally

Sentence Case

Groupon-Ligatures

Open Sans Light

(arrowrightlarge)

20-26pt

7pts smaller than CTA type Baseline set to 1

STROKE If white vector elements bleed off the edge of the asset, create a 1px stroke around the asset with the same color as the background

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

460x315 - Merchicon Widget PLACEMENT Groupon Homepage Goods Homepage SIZE Width is consistently 460px Height is consistently 315px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 460x315_merchiconheader_photographic_template.psd 460x315_merchiconheader_illustration_template.psd 460x315_merchiconheader_iconic_template.psd MOCKUP FILE ON BOX 460x315_merchiconheader_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

460x315 - Merchicon Widget PHOTOGRAPHIC STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces • No CTA or Button TYPE PLACEMENT • 20px padding top and left • OR 20px padding bottom and left

TYPE

• OR 20px padding centered, top

#FFFFFF

• OR 20px padding centered, bottom

Title Case Open Sans Light

OVERLAY

30-50pt (variable depending

May need to add black to white multiply gradient layer (no darker than 30% opacity) behind the text only to help with legibility

20px

on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

460x315 - Merchicon Widget ILLUSTRATION STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces

TYPE

• No CTA or Button

#FFFFFF Title Case

TYPE PLACEMENT

Open Sans Light

• 20px padding top and left

30-50pt (variable depending

• OR 20px padding bottom and left

on copy length)

• OR 20px padding centered, top • OR 20px padding centered, bottom

20px

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

460x315 - Merchicon Widget ICONIC STYLE CHARACTER COUNT • Headline: 35 characters max w/ spaces • No CTA or Button

TYPE #FFFFFF

TYPE PLACEMENT

Title Case

• 20px padding top and left

Open Sans Light

• OR 20px padding bottom and left

30-50pt (variable depending

• OR 20px padding centered, top

on copy length

• OR 20px padding centered, bottom

STROKE If white vector elements bleed off the edge of the asset, create a 1px stroke around the asset with the same color as the background 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

600 x330 (Retina) - Deal Page Banner PLACEMENT Deal Page SIZE ON WEB Width is consistently 300px Height is consistently 165px DELIVERABLE SIZE (RETINA) Width is consistently 600px Height is consistently 330px DELIVERABLES • Save for web as a .jpg • Deliver file with text • File size should be 600 x 330 pixels (RETINA) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 600x330_dealpage_photographic_template.psd 600x330_dealpage_illustration_template.psd 600x330_dealpage_iconic_template.psd MOCKUP FILE ON BOX 600x330_dealpage_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

600 x330 - Deal Page Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• 1-Line Headline: 15 characters max w/ spaces

#FFFFFF

• OR 2-Line Headline: 30 characters max w/ spaces

Title Case

• CTA: 20 characters max w/ spaces

Open Sans Light

• No Button

52pt / 56pt

TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding top and left • OR 40px padding bottom and left • OR 40px padding centered, top • OR 40px padding centered, bottom

30px

• Distance between Headline and CTA is 30px OVERLAY #000000 multiply layer set to 30% opacity CTA TYPE #FFFFFF All Caps Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt 40px

Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

600 x330 - Deal Page Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• 1-Line Headline: 15 characters max w/ spaces

#FFFFFF

• OR 2-Line Headline: 30 characters max w/ spaces

Title Case

• CTA: 20 characters max w/ spaces

Open Sans Light

• No Button

52pt / 56pt

TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding top and left • OR 40px padding bottom and left • OR 40px padding centered, top • OR 40px padding centered, bottom • Distance between Headline and CTA is 30px

30px

RETINA STROKE #FFFFFF 4px CTA TYPE 40px

#FFFFFF All Caps Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

600 x330 - Deal Page Banner ICONIC STYLE CHARACTER COUNT

STROKE

HEADLINE TYPE

• 1-Line Headline: 15 characters max w/ spaces

If white vector elements bleed off the

#FFFFFF

• OR 2-Line Headline: 30 characters max w/ spaces

edge of the asset, create a 2px stroke

Title Case

• CTA: 20 characters max w/ spaces

around the asset with the same color

Open Sans Light

• No Button

as the background

52pt / 56pt

TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding top and left • OR 40px padding bottom and left • OR 40px padding centered, top • OR 40px padding centered, bottom

30px

• Distance between Headline and CTA is 30px

CTA TYPE 40px

#FFFFFF All Caps Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 (Retina) - Left Rail Banner PLACEMENT Goods Deal Page SIZE ON WEB Width is consistently 220px Height is consistently 210px DELIVERABLE SIZE (RETINA) Width is consistently 440px Height is consistently 420px DELIVERABLES • Save for web as a .jpg • Deliver file with text • File size should be 440 x 420 pixels (RETINA) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 440x420_leftrail_photographic_template.psd 440x420_leftrail_illustration_template.psd 440x420_leftrail_iconic_template.psd MOCKUP FILE ON BOX 440x420_leftrail_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Left Rail Banner PHOTOGRAPHIC STYLE CHARACTER COUNT • 1-Line Headline: 15 characters max w/ spaces

HEADLINE TYPE

• OR 2-Line Headline: 30 characters max w/ spaces

#FFFFFF

• 1-Line CTA: 20 characters max w/ spaces

30px

• OR 2-Line CTA: 40 characters max w/ spaces

Title Case Open Sans Light

• No Button

52pt / 56pt

*Special Note: a 2-Line Headline and 2-Line CTA may not be paired together TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding top and left • OR 40px padding bottom and left • OR 40px padding centered, top

40px

• OR 40px padding centered, bottom • Distance between Headline and CTA is 30px

CTA TYPE #FFFFFF All Caps Open Sans Semibold OVERLAY #000000 multiply layer set to 30% opacity

26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Left Rail Banner ILLUSTRATION STYLE CHARACTER COUNT • 1-Line Headline: 15 characters max w/ spaces

HEADLINE TYPE

• OR 2-Line Headline: 30 characters max w/ spaces • 1-Line CTA: 20 characters max w/ spaces • OR 2-Line CTA: 40 characters max w/ spaces

#FFFFFF 30px

Title Case Open Sans Light

• No Button

52pt / 56pt

40px

• OR 40px padding centered, bottom • Distance between Headline and CTA is 30px RETINA STROKE #FFFFFF 4px

CTA TYPE #FFFFFF All Caps Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | WEB ASSETS

440x420 - Left Rail Banner ICONIC STYLE CHARACTER COUNT • 1-Line Headline: 15 characters max w/ spaces • OR 2-Line Headline: 30 characters max w/ spaces • 1-Line CTA: 20 characters max w/ spaces • OR 2-Line CTA: 40 characters max w/ spaces • No Button

30px

HEADLINE TYPE #FFFFFF Title Case Open Sans Light

*Special Note: a 2-Line Headline and 2-Line CTA

52pt / 56pt

may not be paired together TYPE PLACEMENT • Centered horizontally and vertically • OR 40px padding top and left • OR 40px padding bottom and left

40px

• OR 40px padding centered, top • OR 40px padding centered, bottom • Distance between Headline and CTA is 30px

CTA TYPE #FFFFFF All Caps STROKE If white vector elements bleed off the edge of the asset, create a 2px stroke around the asset with the same color as the background

Open Sans Semibold 26pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 18pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

Email Assets

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Header Email Banner PLACEMENT • Occasions Email • 3T Email • Groupon Live Email SIZE Width is consistently 600px Height is consistently 100px DELIVERABLES • Save for web as a .jpg • Deliver file with text • Provide the HEX color with final banner deliverable for the background color. Pick a color that complements the colors in the banner. CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILES ON BOX 600x100_3t-occasions_email_photographic_template.psd 600x100_3t-occasions_email_illustration_template.psd 600x100_3t-occasions_email_iconic_template.psd MOCKUP FILES ON BOX 600x100_3t_email_mockup.psd 600x100_occasions_email_mockup.psd 600x100_occasions_holiday_email_mockup.psd

Background Color

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Header Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT FOR HEADER BANNER

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Subhead: 45 characters max w/ spaces

Title Case

• No Button

Open Sans Light 24-30pt (variable depending on

Special Note: Email banners can have

copy length)

a headline only or headline and subhead TYPE PLACEMENT • Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Distance between Headline and Subhead is 15px OPTIONAL SUBHEAD TYPE #FFFFFF Title Case Open Sans Light 15-20pt (variable depending on copy length)

20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Header Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Subhead: 45 characters max w/ spaces

Title Case

• No Button

Open Sans Light 24-30pt (variable depending on

*Special Note: 3T and Occasions email banners can

copy length)

have a headline only or headline and subhead TYPE PLACEMENT • Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Headline can be broken into two lines • Distance between Headline and Subhead is 15px SUBHEAD TYPE #FFFFFF Title Case Open Sans Light 15-20pt (variable depending on copy length)

20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Header Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF or #333333

• Subhead: 45 characters max w/ spaces

Title Case

• No Button

Open Sans Light 24-30pt (variable depending on

*Special Note: 3T and Occasions email banners can

copy length)

STROKE

#FFFFFF or #333333

If white vector elements bleed off the

Title Case

edge of the asset, create a 1px stroke

Open Sans Light

around the asset with the same color

15-20pt (variable depending

as the background

on copy length)

20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Body Email Banner PLACEMENT • Occasions Email • 3T Email

Background Color

SIZE Width is consistently 600px Height is consistently 100px DELIVERABLES • Save for web as a .jpg • Deliver file with text and button or CTA CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILES ON BOX 600x100_3t-occasions_email_photographic_template.psd (Body Banner Layer) 600x100_3t-occasions_email_illustration_template.psd (Body Banner Layer) 600x100_3t-occasions_email_iconic_template.psd (Body Banner Layer) MOCKUP FILES ON BOX 600x100_occasions_email_2banners_mockup.psd

Body Banner

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Body Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT FOR BODY BANNER

HEADLINE TYPE

OPTIONAL SUBHEAD TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Optional Subhead: 45 characters max

Title Case

Open Sans Light

• CTA: 45 characters max w/ spaces

w/ spaces

24-30pt (variable depending on

15-20pt (variable depending

• Button: 3 words max

copy length)

on copy length)

*Special Note: Email banners can have a headline only or headline and subhead. TYPE PLACEMENT • Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Distance between Headline and Subhead/

20px

CTA is 15px CTA • Use Groupon’s regular grey CTA button for 3 words or less • For more than 3 word CTA use text • Use CTA or button, not both *See Regular Button on page 8

CTA TYPE #FFFFFF All Caps Open Sans Semibold 16pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Body Email Banner ILLUSTRATION STYLE CHARACTER COUNT FOR BODY BANNER

HEADLINE TYPE

OPTIONAL SUBHEAD TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Optional Subhead: 45 characters max

Title Case

Open Sans Light

• CTA: 45 characters max w/ spaces

w/ spaces

24-30pt (variable depending on

15-20pt (variable depending

• Button: 3 words max

copy length)

on copy length)

20px

CTA is 15px CTA • Use Groupon’s regular grey CTA button for 3 words or less • For more than 3 word CTA use text • Use CTA or button, not both *See Regular Button on page 8

CTA TYPE #FFFFFF All Caps Open Sans Semibold 16pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - 3T/Occasions Body Email Banner ICONIC STYLE CHARACTER COUNT FOR BODY BANNER

HEADLINE TYPE

OPTIONAL SUBHEAD TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF or #333333

• Optional Subhead: 45 characters max

Title Case

Open Sans Light

• CTA: 45 characters max w/ spaces

w/ spaces

24-30pt (variable depending on

15-20pt (variable depending

• Button: 3 words max

copy length)

on copy length)

20px

CTA is 15px CTA • Use Groupon’s regular grey CTA button for 3 words or less • For more than 3 word CTA use text • Use CTA or button, not both *See Regular Button on page 8

CTA TYPE #FFFFFF or #333333 All Caps Open Sans Semibold 16pt CTA ARROW #FFFFFF or #333333 Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - 3T/Occasions Mobile Email Banner PLACEMENT • Occasions Mobile Email • 3T Mobile Email • Groupon Live Mobile Email SIZE Width is consistently 460px Height is consistently 120px DELIVERABLES • Save for web as a .jpg • Deliver file with text • Provide the HEX color with final banner deliverable for the background color. Pick a color that complements the colors in the banner. CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILES ON BOX 460x120_emailmobile_photographic_template.psd 460x120_emailmobile_illustration_template.psd 460x120_emailmobile_iconic_template.psd MOCKUP FILES ON BOX 460x120_occasions_emailmobile_mockup.psd

Background Color

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - 3T/Occasions Mobile Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

TYPE PLACEMENT • Centered horizontally and vertically • OR 20px padding top and left • OR 20px padding bottom and left • OR 20px padding centered, top • OR 20px padding centered, bottom • Distance between Headline and CTA is 20px CTA TYPE #FFFFFF All Caps Open Sans Semibold 16-20pt (variable depending on copy length) CTA ARROW #FFFFFF or #333333 Groupon-Ligatures (arrowrightlarge) 7pts smaller than CTA type Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - 3T/Occasions Mobile Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - 3T/Occasions Mobile Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-32pt (variable depending on copy length)

CTA TYPE

If white vector elements

#FFFFFF

bleed off the edge of

All Caps

the asset, create a 1px

Open Sans Semibold

stroke around the asset

16-20pt (variable depending

with the same color as

on copy length)

the background CTA ARROW #FFFFFF or #333333 Groupon-Ligatures (arrowrightlarge) 7pts smaller than CTA type Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - G1Email Banner PLACEMENT G1 Email SIZE Width is consistently 600px Height can be 100px Height can be 150px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILE ON BOX 600x100_g1_email_photographic_template.psd 600x100_g1_email_illustration_template.psd 600x100_g1_email_iconic_template.psd MOCKUP FILE ON BOX 600x100_g1_email_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - G1 Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

• Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Distance between Headline and CTA is 15px CTA • Use Groupon’s regular gray CTA button for 3 words or less

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - G1 Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - G1 Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

STROKE

• Headline: 30 characters max w/ spaces

#FFFFFF

If white vector elements bleed off the

• CTA: 45 characters max w/ spaces

Title Case

edge of the asset, create a 1px stroke

• Button: 3 words max

Open Sans Light

around the asset with the same color

24-30pt (variable depending on

as the background

TYPE PLACEMENT

copy length)

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - G1 Mobile Email Banner PLACEMENT G1 Mobile Email SIZE Width is consistently 460px Height is consistently 120px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILES ON BOX 460x120_emailmobile_photographic_template.psd 460x120_emailmobile_illustration_template.psd 460x120_emailmobile_iconic_template.psd MOCKUP FILES ON BOX 460x120_g1_emailmobile_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - G1 Mobile Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - G1 Mobile Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - G1 Mobile Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-32pt (variable depending on copy length)

STROKE

#FFFFFF

If white vector elements

All Caps

bleed off the edge of

Open Sans Semibold

the asset, create a 1px

16-20pt (variable depending

stroke around the asset

on copy length)

with the same color as the background

CTA ARROW #FFFFFF or #333333 Groupon-Ligatures (arrowrightlarge) 7pts smaller than CTA type Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Getaways Email Banner PLACEMENT Getaways Email SIZE Width is consistently 600px Height is consistently 100px DELIVERABLES • Save for web as a .jpg • Deliver file with text • Deliver file with button (if applicable) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style *Special Note: Depending on the banner, the requester may ask for a button TEMPLATE FILE ON BOX 600x100_getaways_email_photographic_template.psd 600x100_getaways_email_illustration_template.psd 600x100_getaways_email_iconic_template.psd MOCKUP FILE ON BOX 600x100_getaways_email_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Getaways Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Subhead: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

• Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Distance between Headline and Subhead is 15px BANNER WITHOUT BUTTON • Confirm with requester that they do not need a button SUBHEAD TYPE

• Only use Headline and Subhead

#FFFFFF BANNER WITH BUTTON

Title Case or Sentence Case

• Confirm with requester that they need a button

Open Sans Light

• Use Groupon’s neutral gray CTA button

15-20pt (variable depending

• Height is consistently 30px, width is dependent on

on copy length)

the length of the text but must have 15px padding on both sides. *See Regular Button on page 8

20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Getaways Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Subhead: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

• Only use Headline and Subhead

#FFFFFF BANNER WITH BUTTON

Title Case or Sentence Case

• Confirm with requester that they need a button

Open Sans Light

• Use Groupon’s neutral gray CTA button

15-20pt (variable depending

• Height is consistently 30px, width is dependent on

on copy length)

the length of the text but must have 15px padding on both sides. *See Regular Button on page 8 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Getaways Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• Subhead: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

STROKE

SUBHEAD TYPE

If white vector elements bleed off the

#FFFFFF

BANNER WITH BUTTON

edge of the asset, create a 1px stroke

Title Case or Sentence Case

• Confirm with requester that they need a button

around the asset with the same color

Open Sans Light

• Use Groupon’s neutral gray CTA button

as the background

15-20pt (variable depending

• Height is consistently 30px, width is dependent on

on copy length)

the length of the text but must have 15px padding on both sides. *See Regular Button on page 8 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - Getaways Mobile Email Banner PLACEMENT Getaways Mobile Email SIZE Width is consistently 460px Height is consistently 120px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style TEMPLATE FILES ON BOX 460x120_emailmobile_photographic_template.psd 460x120_emailmobile_illustration_template.psd 460x120_emailmobile_iconic_template.psd MOCKUP FILES ON BOX 460x120_getaways_emailmobile_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - Getaways Mobile Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - Getaways Mobile Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

460x120 - Getaways Mobile Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 30 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-32pt (variable depending on copy length)

STROKE

#FFFFFF

If white vector elements

All Caps

bleed off the edge of

Open Sans Semibold

the asset, create a 1px

16-20pt (variable depending

stroke around the asset

on copy length)

with the same color as the background

CTA ARROW #FFFFFF or #333333 Groupon-Ligatures (arrowrightlarge) 7pts smaller than CTA type Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Goods Email Banner PLACEMENT Getaways Email SIZE Width is consistently 600px Height is consistently 100px DELIVERABLES • Save for web as a .jpg • Deliver file with text • Deliver file with button (if applicable) CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style *Special Note: Depending on the banner, the requester may ask for a button TEMPLATE FILE ON BOX 600x100_goods_email_photographic_template.psd 600x100_goods_email_illustration_template.psd 600x100_goods_email_iconic_template.psd MOCKUP FILE ON BOX 600x100_goods_email_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Goods Email Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Goods Email Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 45 characters max w/ spaces

Title Case

• Button: 3 words max

Open Sans Light 24-30pt (variable depending on

TYPE PLACEMENT

copy length)

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | EMAIL ASSETS

600x100 - Goods Email Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

STROKE

• Headline: 30 characters max w/ spaces

#FFFFFF

If white vector elements bleed off the

• CTA: 45 characters max w/ spaces

Title Case

edge of the asset, create a 1px stroke

• Button: 3 words max

Open Sans Light

around the asset with the same color

24-30pt (variable depending on

as the background

TYPE PLACEMENT

copy length)

• Centered horizontally and vertically • OR 20px padding from the left • OR 20px padding top and left • Distance between Headline and CTA is 15px CTA • Use Groupon’s regular grey CTA button for 3 words or less

CTA TYPE

• Height is consistently 30px, width is dependent on

#FFFFFF

the length of the text but must have 15px padding

All Caps

on both sides

Open Sans Semibold

• For more than 3 word CTA use text

16pt

• Use CTA or button, not both

CTA ARROW

*See Regular Button on page 8

#FFFFFF Groupon-Ligatures (arrowrightlarge) 12pt Baseline set to 1 20px

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

Mobile Assets

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

740x316 - Regular Mobile Banner PLACEMENT Mobile Banner REGULAR SIZE Width is consistently 740px Height is consistently 316px DELIVERABLES Save for web as a .png CREATIVE REQUIREMENTS • Use Photographic, Illustration or Iconic Style • All copy and important creative elements must not stray outside of blue bounding box • Turn bounding box layer off when saving TEMPLATE FILE ON BOX 740x316_mobile_photographic_template.psd 740x316_mobile_illustration_template.psd 740x316_mobile_iconic_template.psd MOCKUP FILE ON BOX 740x316_mobile_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

740x316 - Regular Mobile Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

TYPE PLACEMENT • Centered horizontally and vertically within blue bounding box • OR 20px padding from the left within blue bounding box • OR 20px padding from the right within blue bounding box • Distance between Headline and CTA is 20px FILE SIZE (REGULAR) Width is consistently 740px

BLUE BOUNDING BOX

CTA TYPE

Height is consistently 316px

• All copy and important creative elements

#FFFFFF

must not stray outside of blue bounding box

All Caps

• Turn bounding box layer off when saving

Open Sans Semibold 16-20pt (variable depending on copy length)

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 24pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

740x316 - Regular Mobile Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

BLUE BOUNDING BOX

CTA TYPE

Height is consistently 316px

• All copy and important creative elements

#FFFFFF

must not stray outside of blue bounding box

All Caps

• Turn bounding box layer off when saving

Open Sans Semibold 16-20pt (variable depending on copy length)

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 24pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

740x316 - Regular Mobile Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

24-40pt (variable depending on copy length)

BLUE BOUNDING BOX

CTA TYPE

Height is consistently 316px

• All copy and important creative elements

#FFFFFF

STROKE

All Caps

If white vector elements

Open Sans Semibold

bleed off the edge of

16-20pt (variable depending

the asset, create a 1px

on copy length)

stroke around the asset

must not stray outside of blue bounding box • Turn bounding box layer off when saving

with the same color as the background CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 24pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

1171x500 - Retina Mobile Banner PLACEMENT Mobile Banner RETINA SIZE Width is consistently 1171px Height is consistently 500px DELIVERABLES Save for web as a .png CREATIVE REQUIREMENTS • Use Photographic, Illustration or Iconic Style • All copy and important creative elements must not stray outside of blue bounding box • Turn bounding box layer off when saving TEMPLATE FILE ON BOX 1171x500_mobile_photographic_template.psd 1171x500_mobile_illustration_template.psd 1171x500_mobile_iconic_template.psd MOCKUP FILE ON BOX 740x316_mobile_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

1171x500 - Retina Mobile Banner PHOTOGRAPHIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

48-80pt (variable depending on copy length)

TYPE PLACEMENT • Centered horizontally and vertically within blue bounding box • OR 40px padding from the left within blue bounding box • OR 40px padding from the right within blue bounding box • Distance between Headline and CTA is 40px FILE SIZE (RETINA) Width is consistently 1171px

BLUE BOUNDING BOX

Height is consistently 500px

• All copy and important creative elements

CTA TYPE #FFFFFF

must not stray outside of blue bounding box

All Caps

• Turn bounding box layer off when saving

Open Sans Semibold 32-40pt (variable depending on copy length)

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 48pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

1171x500 - Retina Mobile Banner ILLUSTRATION STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

48-80pt (variable depending on copy length)

BLUE BOUNDING BOX

Height is consistently 500px

• All copy and important creative elements

CTA TYPE #FFFFFF

must not stray outside of blue bounding box RETINA STROKE

All Caps

• Turn bounding box layer off when saving

Open Sans Semibold

#FFFFFF

32-40pt (variable

4px

depending on copy length)

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 48pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | MOBILE ASSETS

1171x500 - Retina Mobile Banner ICONIC STYLE CHARACTER COUNT

HEADLINE TYPE

• Headline: 30 characters max w/ spaces

#FFFFFF

• CTA: 40 characters max w/ spaces

Title Case

• CTA is optional and must be text

Open Sans Light

• Never use a button

48-80pt (variable depending on copy length)

BLUE BOUNDING BOX

Height is consistently 500px

• All copy and important creative elements

CTA TYPE

must not stray outside of blue bounding box • Turn bounding box layer off when saving

#FFFFFF

STROKE

All Caps

If white vector elements

Open Sans Semibold

bleed off the edge of

32-40pt (variable

the asset, create a 2px

depending on copy length)

stroke around the asset with the same color as the background

CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 48pt *Arrow must always be placed here, do not move

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

Social Assets

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

600x316 - Facebook Display Ad PLACEMENT Facebook Newsfeed (Web and Mobile) SIZE Width is consistently 600px Height is consistently 316px DELIVERABLES • Save for web as a .jpg • Deliver file with text and Groupon logo CREATIVE REQUIREMENTS Only use Photographic Style for these assets as they perform the best. TEMPLATE FILE ON BOX 600x316_displayad_photographic_template.psd MOCKUP FILE ON BOX 600x316_displayad_iphone_mockup.psd 600x316_displayad_web_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

600x316 - Facebook Display Ad PHOTOGRAPHIC STYLE CHARACTER COUNT

LOGO

• Only 20% of the ad can be text

Groupon Wordmark

• Must include Groupon logo wordmark

#FFFFFF

• Not all Display Ads need a CTA, some cases will only need the Groupon logo TYPE PLACEMENT • No less than 20px padding on any side • Place type in an area that is complimentary to the layout of the photo • Groupon logo must always be positioned above the CTA OVERLAY May need to add #000000 multiply gradient layer (no darker than 30% opacity) to help with copy legibility

OVERLAY #000000 multiply layer 18% opacity in this example CTA TYPE

20px

#FFFFFF All Caps Open Sans Regular 15pt CTA ARROW #FFFFFF Groupon-Ligatures (arrowrightlarge) 10pt Baseline set to 1

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

851x 315 - Facebook Cover Photo PLACEMENT Groupon Facebook Page (Web and Mobile) SIZE Width is consistently 851px Height is consistently 315px DELIVERABLES • Save for web as a .jpg • Deliver file with text CREATIVE REQUIREMENTS Use Photographic, Illustration or Iconic Style MOCKUP FILE ON BOX 851x315_facebookcoverphoto_mockup.psd

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

851x 315 - Facebook Cover Photo PHOTOGRAPHIC STYLE CHARACTER COUNT • Headline: 30 characters max w/ spaces • No CTA • Never use a button TYPE PLACEMENT • Use mockup file to make sure text is visible in the mobile version of the cover photo OVERLAY May need to add #000000 multiply gradient layer (no darker than 30% opacity) to help

DELIVERABLE FILE

with copy legibility

HEADLINE TYPE #FFFFFF Title Case Open Sans Light 32-46pt (variable depending on copy length)

MOCKUP FILE

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

851x 315 - Facebook Cover Photo ILLUSTRATION STYLE CHARACTER COUNT • Headline: 30 characters max w/ spaces • No CTA • Never use a button TYPE PLACEMENT • Use mockup file to make sure text is visible in the mobile version of the cover photo

DELIVERABLE FILE

HEADLINE TYPE #FFFFFF Title Case Open Sans Light 32-46pt (variable depending on copy length)

MOCKUP FILE

GROUPON MERCHANDISING GUIDELINE 1.0 | SOCIAL ASSETS

851x 315 - Facebook Cover Photo ICONIC STYLE CHARACTER COUNT • Headline: 30 characters max w/ spaces • No CTA • Never use a button TYPE PLACEMENT • Use mockup file to make sure text is visible in the mobile version of the cover photo

DELIVERABLE FILE

HEADLINE TYPE #FFFFFF Title Case Open Sans Light 32-46pt (variable depending on copy length)

MOCKUP FILE

STROKE If white vector elements bleed off the edge of the asset, create a 1px stroke around the asset with the same color as the background

GROUPON MERCHANDISING GUIDELINE 1.0 | ASSET TEMPLATES & NAMING CONVENTIONS

Asset Templates & Naming Conventions

GROUPON MERCHANDISING GUIDELINE 1.0 | ASSET TEMPLATES & NAMING CONVENTIONS

Templates & Mockups TEMPLATE AND MOCKUP FILE LOCATION BOX.COM > ALL FILES > MERCHANDISING GUIDELINES & TEMPLATES *A lways remember to mockup all assets in the appropriate mockup files before delivering final files to make sure they work in the space where they will live.

WORKING FILES LOCATION BOX.COM > ALL FILES > MERCHICON ASSET LIBRARY DELIVERABLES / WORKING FILES Feel free to go through the Merchicon Asset Library to see what has been done and to find inspiration.

GROUPON MERCHANDISING GUIDELINE 1.0 | FILE NAMING CONVENTIONS

File Naming Conventions FILE NAMING FOR MERCHANDISING ASSETS pixelsize_nameofasset_campaign_initals.jpg

FOR REFERENCE HERE IS THE LIST OF THE SIZES AND NAMES FOR ALL OF THE ASSETS SO WE ALL USE THE EXACT SAME NAMING:

FILE NAMING EXAMPLE

WEB:

For a subnav asset created for the Home & Garden campaign created by Elizabeth Wheeler the file name should look like this: 440x420_subnav_homeandgarden_ew.jpg

1680x450_merchiconheader 940x100_merchiconheader 940x165_giftshopheader 940x60_goodspencilbanner 460x315_merchiconwidget 600x330_dealpage 440x420_leftrail 440x420_subnav EMAIL: 600x100_email 460x120_emailmobile MOBILE: 740x316_mobile 1171x500_mobile SOCIAL: 600x316_displayad 851x315_facebook

GROUPON MERCHANDISING GUIDELINE 1.0

Final Checklist MAKE SURE TO DO THIS BEFORE DELIVERING FINAL FILES

Make sure all type is set to “strong” Make sure all margins are correct

• 20px for regular assets

• 40px for retina assets M ake sure to place the asset in its corresponding mockup file to make sure it works in the space where it will live. Save all files for web

• JPG files must be 100% quality, optimized

• Save PNG files as PNG-24 with transparency Save all files with correct naming conventions