gourmet live design guide

Conde Nast – Gourmet Live

iPad DistributionNOVEMBER 2010

CONTACT :

[email protected]

DESIGN GUIDELINES

Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 2

TABLE OF CONTENTS

GOURMET BRAND MISSION .................................................... 3

PHOTOGRAPHY ....................................................................... 4 Tone and Design

TYPOGRAPHY .......................................................................... 5

COVER ................................................................................. 6-8

GOURMET LIVE MASTHEAD ...................................................... 9

HOME TILE SET ................................................................ 10-18 General Design ...............................................................10

Specifications ................................................................11

Welcome Tile ..................................................................12

Gourmet Live Logo ..........................................................13

1x1 Tile .........................................................................14

2x1 and 3x1 Tiles ...........................................................15

Two Lines, Two Lines ......................................................16

Video Icon ......................................................................17

Sponsored Tiles .............................................................18

REWARDS TILE SET ............................................................... 19

ADVERTISERS REWARDS TILE SET .......................................... 20TILE SEQUENCING SAMPLES ............................................. 21-22

JUMP PAGES ................................................................... 23-29

PAST ISSUES ................................................................... 30-31


THE GOURMET BRAND

MISSIONGourmet Live is Good Living Rewarded. Gourmet Live lets you

express, share and explore your passion for every aspect of food

and food culture in a brand new way and rewards you for doing it.


PHOTOGRAPHY

CROPPING

Images should be cropped to create interest and clearly

communicate the subject matter

CONSISTENCY

Photography application in tile sets should be consistent to

present a unified look and feel

VISUAL BALANCE

Image cropping in individual tiles should be considered as part

of an overall tile set. Use the colors, shapes and textures in

individual tiles to create visual interest and appetite appeal in

the tile set.


FRANKLIN GOTHIC DEMI | All Caps for cover headline only

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!@#$%&*”

FRANKLIN GOTHIC CONDENSED | All Caps for tile headlines only

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!@#$%&*”

FRANKLIN GOTHIC BOOK | All Caps for tile subheads and U&LC for body copy


FRANKLIN GOTHIC BOOK OBLIQUE | For instances of Gourmet Live in bodycopy

Gourmet Live

ARIAL REGULAR | U&LC for sponsored copy


TYPOGRAPHY

The Franklin Gothic Family is a readable font that presents a nice

contrast to the iconic Gourmet Live logo. With it’s range of weights

and widths, it is flexible enough to apply to any situation. Specific

uses are as follows:

COVER: HEADLINEFranklin Gothic Demi, ALL CAPS 50pt/17pt track at 70

COVER: SUBHEADFranklin Gothic Demi, ALL CAPS 13pt/17pt track at 70

1X1 TILE: HEADLINEFranklin Gothic Condensed, ALL CAPS 20pt/19pt track at 30

2X1 AND 3X1 TILE: HEADLINEFranklin Gothic Condensed, ALL CAPS 24pt/22pt track at 30

2X1 AND 3X1 TILE: SUBHEADFranklin Gothic Book, ALL CAPS 11pt/14pt track at 20

BODY COPYFranklin Gothic Book, U&lc 13pt/17pt; 15pt sub-lines track at 20

“GOURMET LIVE”Franklin Gothic Book Oblique, 13pt/17pt track at 20

“BROUGHT TO YOU BY”Arial, 11pt


GENERAL COVER DESIGN

The cover of Gourmet Live should look delicious. The iconic Gourmet

logo is colored to offset a visually interesting food photograph. The

photograph fills the cover and should include sufficient area of neutral

background to showcase the Masthead.

PHOTOGRAPHY• Must fill the entire screen area

• Must have sufficient neutral content to showcase the Masthead

and headline

• Photography and headline must have a relationship

SUBHEAD AND HEADLINE• All text is all caps

• If copy exceeds basic standards the font may be made smaller

• The leading to the subhead must remain the same

• Headline must not be closer than 40 pixels from width edges

• Color should be selected to contrast with image and masthead

MASTHEAD • Use the Gourmet Live masthead file

Do not resize or otherwise alter content in any way

• Same position and same size in every issue

The Masthead is optically centered

• The color is inspired by the image


COVER SPECIFICATIONS

OVERALL768 x 960 portrait orientation

SUBHEADFONT NAME: Franklin Gothic Demi, All CAPS

FONT SIZE: 13pt

LEADING: 17pt

TRACKING: 70

PLACEMENT: Subhead 38px pixels from top

HEADLINEFONT NAME: Franklin Gothic Demi, ALL CAPS

FONT SIZE: 50pt preferred

LEADING: 17pt

TRACKING: 70

PLACEMENT: Headline 58px from top

Not closer than 40 pixels from width edges

If copy exceeds basic standards the font may be made smaller. The leading to he subhead bust remain the same at 17pts. See next page.

MASTHEADSIZE: 646x277

PLACEMENT: optically centered

118 pixels from top

59 pixels from left side

63 pixels from right side

0px

38px58px

118px

395px

960px

0px 59px 705px 768px

FRANKLIN GOTHIC DEMI 13pt/17pt

FRANKLIN GOTHIC D 50pt

All measurement are in pixels unless otherwise indicated.Numbers on diagram indicate number of pixels in from top left corner.


COVER DESIGN: ANOMALIES

LONG HEADLINE

If copy exceeds basic standards the font may be made smaller.

The leading to the subhead bust remain the same. Headline must

not be closer than 40 pixels from width edges.

COPY AND LOGO COLORSIn some instances, color for logo and copy cannot be drawn from

photo, and should be white or black to maintain legibility and visual

interest.

LONG HEADLINE EXAMPLE

COLOR SELECTION EXAMPLE


GOURMET LIVE: MASTHEAD

The Gourmet Live logo is applied to the cover as a lock-up masthead

and should only be altered in color to augment the cover imagery.

MASTHEAD ELEMENTS• Iconic “Gourmet” script

• “LIVE” type tucked underneath dipping ‘T’ in script, right justified

• “GOOD LIVING REWARDED” tucked under script top justified with

“LIVE” copy and centered between decender of ‘G’ in script and

the “LIVE” type.

TYPOGRAPHY• All type is outlined, part of the masthead file, and should not be

altered or sized in any way other than overall color of masthead

to support cover imagery

• “Gourmet” script is proprietary and is not available as a font

• “LIVE” is all caps ITC Franklin Gothic Demi at 66pts and

20 tracking

• “GOOD LIVING REWARDED” is all caps ITC Franklin Gothic Book at

18pts and 70 tracking

SIZING AND PLACEMENT• Follow specifications on page 7 for sizing and placement

DOWNLOADS

http://live.gourmet.com/wp-content/uploads/2010/11/gourmet_live_logo.zip

MASTHEAD ON COVER


HOME TILE SET: GENERAL DESIGNThe strong tile design used in Gourmet Live insures a consistent user

experience that is flexible to contain almost any content with 3 tile

sizes available. The overall feel of the grid should be balanced and

visually interesting. All tiles are links to further content.

TILES• 1,2, or 3 columns wide

• There may not be more than two 3 column wide tiles per set

• Each tile contains a full bleed image

• Lower portion of each tile has a nearly opaque white snipe

• Title and description appear over snipe in all tiles

• Some tiles have sponsored content

IMAGE• Must fill the entire tile

• Main Subject of image should be in visible area (above text area)

• Crop image to be visually interesting and communicate content

TEXT• Headlines should be concise, and under maximum character count

• In bodycopy, “Gourmet Live” should be italicized unless it’s all caps

VISUAL BALANCE• Positioning of the image in an individual tile should be relative to

its position in the tile set

• Avoid clashing colors, dark dominating group of tiles at the top or

bottom of a tileset or other arrangements that do not deliver an

overall visual balance

• All images in a tileset should have a consistent approach and

match in brightness and vibrance. Images should have continuity

across the set


HOME TILE SET: SPECIFICATIONS

OVERALLSIZE: 768 x 960 portrait orientation

BORDER: 6 black border around entire live area

GUTTER: 12 wide

TILES1X SIZE: 224x228

2 X 1: 500x228

3 X 1: 756x228

TEXT AREA SNIPESIZE: 86 high

PLACEMENT: 142 down from top of tile

WHITE LINE: opaque 3 pt wide white line at top of snipe

TRANSPARENCY: 85% White

TEXTPLACEMENT: 10 from left edge of tile

12 from top of tile

012

154

240

960px

0 12 24 236 248 768



HOME TILE SET: WELCOME TILE

TILE SIZE: 224x228

PLACEMENT: upper left hand corner

HEADLINEFONT: Franklin Gothic Condensed, All Caps

SIZE/LEADING: 20pt/19pt

TRACKING: 30

PLACEMENT: 10 from left edge of tile, 12 from top

CHARACTERS: Two line maximum character count: 42

BODY COPYFONT: Franklin Gothic Book, Upper and lower case

SIZE/LEADING: 13pt/17pt first line; 15pt sub-lines

TRACKING: 20

PLACEMENT: 10 from left edge of tile

GOURMET LIVE LOGO PLACEMENTSIZE: Minimum: 100 wide - Maximum: 150 wide [preferred]

COLOR: White or Black.

Shadow effect to gain clarity may be applied

PLACEMENT: For maximum legibility and impact

12 from left, 64 from the top preferred


MINIMUM SIZE LOGO PLACEMENT

45


HOME TILE SET: GOURMET LIVE LOGO

The Gourmet Live logo is applied to the home tile as a logo lock-up

and should only be altered in color to augment welcome tile imagery.

LOGO LOCK-UP• Iconic “Gourmet” script

• “LIVE” type tucked underneath script

TYPOGRAPHY• All type is outlined, part of the logo file, and should not be altered

or sized in any way other than overall color of lock-up

to support welcome tile imagery

• “Gourmet” script is proprietary and is not available as a font

• “LIVE” is all caps ITC Franklin Gothic Demi and is proportional in

size to the ‘Gourmet’ script at 20 tracking

SIZING AND PLACEMENT• Follow specifications on page 12 for sizing and placement

DOWNLOADS

http://live.gourmet.com/wp-content/uploads/2010/11/gourmet_live_logo.zip

LOGO IN TILESET


HOME TILE SET: 1X1 TILE

TILESIZE: 224x228

HEADLINE FONT: Franklin Gothic Condensed, All Caps


TRACKING: 30


CHARACTERS: Two line maximum character count: 42

SUBHEADFONT: Franklin Gothic Book, all caps


11pt/12pt on second line

TRACKING: 20


BODY COPY FONT: Franklin Gothic Book, Upper and lower case


TRACKING: 20



HOME TILE SET: 2X1 AND 3X1 TILE

TILE SIZES2 X 1: 500x228

3 X 1: 756x228

HEADLINEFONT: Franklin Gothic Condensed, All Caps


TRACKING: 30


CHARACTERS: 2x1 Two line maximum character count: 76

3x1 Two line maximum character count: 98

SUB HEAD FONT: Franklin Gothic Book, All Caps


TRACKING: 20




TRACKING: 20



HOME TILE SET: TWO LINES, TWO LINESIn instances where a two line headline is followed up with two lines

of body copy, using a 17pt leading on body copy may make the type

appear uncomfortably close to the tile edge. In these situations, use

15pt leading in the body copy to maintain visual consistency.

Leading makes type uncomfortably close to bottom tile edge

Reduce leading by 2 pts to gain visual balance


HOME TILE SET: VIDEO ICON

Video icons may be used in any tile size.

PLACEMENT: Centered in main image area

LOGO OPACITY: Set to maximize legibility and still reveal image

APPEARANCE: Visually apparent without overpowering the tile set


HOME TILE SET: SPONSORED TILE

TILESIZE: 224x228



TRACKING: 30


“BROUGHT TO YOU BY”FONT: Arial

SIZE: 11pt

PLACEMENT: Base line 212 from top of tile

7-10 pixels from logo edge

PLACEMENTCustomize logo positioning for every sponsor

SIZE: Maximum Width: 100

1 Line Headline: Max height 45

2 Line Headline: Max height 30

POSITION: Minimum 6 pixels from any edge

4530

6-13

ONE LINE HEADLINE TWO LINE HEADLINE

6-137-10 >6 >6<100 <1007-10


REWARDS TILE SETRewards tile set follows the same specifications as the home tile set

with the following exceptions:

• No welcome tile

• No sponsorship tiles

Refer to Pages 9-13 for further specifications


ADVERTISER REWARD TILESETS

SPONSOR TILESIZE: 224x228

POSITION: Same as welcome tile

INLINE IMAGE AREA BORDERSIZE: 224x142

LINE WIDTH: 1 pixel

COLOR: Black, #999999

ADVERTISER IMAGE AREA LOGO

POSITION: Centered

SIZE: Width: Not to exceed 200

Height: Not to exceed 110



TRACKING: 30


SUB HEAD FONT: Franklin Gothic Book, All Caps

SIZE/LEADING: 11pt/14pt first line

TRACKING: 20




TRACKING: 20


MAXIMUM WIDTH MAXIMUM HEIGHT

max 110

max 200


TILE SEQUENCING: WELCOME1 WELCOME TILE&6 ARTICLES

1 WELCOME TILE&9 ARTICLES

1 WELCOME TILE& 7 ARTICLES



1 WELCOME TILE&8 ARTICLES At left are tile sequencing options that work.

• 1x1 Welcome tile is always featured in the upper left hand corner

• Only one 3X1 tile per tile set may be used

• Number of articles should be determined by content and visual

balance


TILE SEQUENCING: REWARDS7 ARTICLES

10 ARTICLES

8 ARTICLES

11 ARTICLES 12 ARTICLES

9 ARTICLES At left are tile sequencing options that work.

• Maximum of two 3X1 tiles may be used per set

• Number of articles should be determined by content and visual

balance

• Tile Sequencing examples from welcome page may also be used


JUMP PAGES: RECIPE INTRODUCTION

Jump pages are less structured than tile sets. They use coding to

generate content.

HEADLINE CONTENT: 4 words or less preferred

COLOR: Black and one color from image

IMAGE SIZE: Must not exceed 690 pixel width

EFFECTS: Must not show borders of any sort

CODING: DATE: font-family: NewsGothicMT, Helveticafont-size: 11pxfont-weight: boldtext-transform: uppercaseletter-spacing: 0margin-bottom: 1emmargin-left: .3em

RECIPE/ARTICLE HEADER: font-family: NewsGothicMT, Helveticafont-weight: boldmargin: 0pxmargin-bottom: -.2emfont-size: 51pxletter-spacing: -.08emline-height: 1.1empadding-top: .35em

padding-bottom: .15em

http://ec2-174-129-52-61.compute-1.amazonaws.com/PlayerStaging/cn/gourmet/issue/go200512/html/ pasta-and-chicken-gratin


JUMP PAGES: RECIPE INTRODUCTION [continued]

DECK: font-size: 20pxmargin-left: .1emmargin-bottom: 1.5emmargin-top: .7em

BYLINE: font-family: NewsGothicMT, Helveticatext-transform: uppercasefont-size: 13pxline-height: 1embreak: a hard <br> break between deck and byline

http://ec2-174-129-52-61.compute-1.amazonaws.com/PlayerStaging/cn/gourmet/issue/go200512/html/ pasta-and-chicken-gratin


JUMP PAGES: CAPTIONS AND RECIPE DATA

CAPTION: font-family: NewsGothicMT,Helveticafont-weight: boldtext-indent: 0margin-top: -.5empadding-bottom: 1.25emtext-align: leftfont-size: 12pxline-height: 16pxBreak: <br> hard break after caption and before photo credit

RECIPE NAME: margin-top: .25emfont: NewsGothicMT,Helveticafont-size: 35pxfont-weight :boldletter-spacing: -.06emline-height: 129%margin-bottom: 0px

RECIPE SERVINGS: font-family: NewsGothicMT, Helveticamargin: 0padding: 0font-size: 75%margin-bottom: .25em

RECIPE TIME: font-family: NewsGothicMT, Helveticamargin: 0padding: 0font-size: 75%margin-bottom: .25eM


JUMP PAGES: RECIPE CONTENT

CODING

MISCSecond Introduction Font Style: Italic

SUBHEADSIngredients, Equipment, Accompaniments, Instructions, Cooks’ Notesfont-family: NewsGothicMT, Helveticatext-transform: uppercasefont-weight: bold

RECIPE INGREDIENT: font-family: NewsGothicMT, Helvetica; line-height: 120%; font-size: 13px; margin: 0 0 1.25em 0; margin-top: -1em;

RECIPE INSTRUCTIONS: list style: un-ordered bulleted listfont-family: Hoefler Text; font-size: 14px; line-height: 18px; padding-bottom: .25em;

COOKS’ NOTES:font-family: NewsGothicMT, Helvetica; list style: un-ordered bulleted listfont-style: italic

http://ec2-174-129-52-61.compute-1.amazonaws.com/PlayerStaging/cn/gourmet/issue/go200801/html/deviled-ham-and-

pecan-tea-sandwiches


JUMP PAGES: PULL QUOTE

PULLQUOTEwidth: 50%; float: right; margin-left: 2em; margin-top: .25em; font-family: NewsGothicMT,Helvetica; font-size: 34px; font-weight: bold; letter-spacing: -.06em; line-height: 129%;


JUMP PAGES: BROUGHT TO YOU BY

BROUGHT TO YOU BY font-family: NewsGothicMT, Helveticafont-size: 12pxfont-weight: boldtext-transform: uppercaseletter-spacing: 0margin-bottom: 1emmargin-left: .3em

http://ec2-174-129-52-61.compute-1.amazonaws.com/PlayerStaging/column/ipad/gourmet/post/asian-style-turkey-sandwich


JUMP PAGES: PROMOTIONAL CONTENT

SPONSOR PROMOTION PAGE

A page linked to the sponsor logo tile located in the upper left

corner of the sponsor reward tile set. This page allows the spon-

sor an opportunity to present information about their products and

services.

Use coding specifications listed in the Jump Pages section.

http://ec2-174-129-52-61.compute-1.amazonaws.com/PlayerStaging/column/ipad/gourmet/post/perfect-turkey-button-electrolux

Conde Nast – Gourmet LIVE – GUIDELINES – iPad Distribution – November 2010 30PAST ISSUES : OCTOBER 06, 2010

Conde Nast – Gourmet LIVE – GUIDELINES – iPad Distribution – November 2010 31PAST ISSUES : NOVEMBER 02, 2010

gourmet live design guide

Documents