Download - Gourmet Live Design Guide
Conde Nast – Gourmet Live
iPad DistributionNOVEMBER 2010
CONTACT :
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 3
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.
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 4
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.
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 5
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
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!@#$%&*”
FRANKLIN GOTHIC BOOK OBLIQUE | For instances of Gourmet Live in bodycopy
Gourmet Live
ARIAL REGULAR | U&LC for sponsored copy
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890?!@#$%&*”
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 6
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 7
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.
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 8
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 9
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 10
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 11
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
All measurement are in pixels unless otherwise indicated.Numbers on diagram indicate number of pixels in from top left corner.
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 12
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
All measurement are in pixels unless otherwise indicated.Numbers on diagram indicate number of pixels in from top left corner.
MINIMUM SIZE LOGO PLACEMENT
45
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 13
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 14
HOME TILE SET: 1X1 TILE
TILESIZE: 224x228
HEADLINE FONT: 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
SUBHEADFONT: Franklin Gothic Book, all caps
SIZE/LEADING: 11pt/14pt
11pt/12pt on second line
TRACKING: 20
PLACEMENT: 10 from left edge of tile
BODY COPY FONT: 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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 15
HOME TILE SET: 2X1 AND 3X1 TILE
TILE SIZES2 X 1: 500x228
3 X 1: 756x228
HEADLINEFONT: Franklin Gothic Condensed, All Caps
SIZE/LEADING: 24pt/22pt
TRACKING: 30
PLACEMENT: 10 from left edge of tile, 12 from top
CHARACTERS: 2x1 Two line maximum character count: 76
3x1 Two line maximum character count: 98
SUB HEAD FONT: Franklin Gothic Book, All Caps
SIZE/LEADING: 11pt/14pt
TRACKING: 20
PLACEMENT: 10 from left edge of tile
BODY COPY FONT: 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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 16
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 17
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 18
HOME TILE SET: SPONSORED TILE
TILESIZE: 224x228
HEADLINE FONT: Franklin Gothic Condensed, All Caps
SIZE/LEADING: 20pt/19pt
TRACKING: 30
PLACEMENT: 10 from left edge of tile
“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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 19
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 20
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
HEADLINE FONT: Franklin Gothic Condensed, All Caps
SIZE/LEADING: 20pt/19pt
TRACKING: 30
PLACEMENT: 10 from left edge of tile
SUB HEAD FONT: Franklin Gothic Book, All Caps
SIZE/LEADING: 11pt/14pt first line
TRACKING: 20
PLACEMENT: 10 from left edge of tile
BODY COPY FONT: 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
MAXIMUM WIDTH MAXIMUM HEIGHT
max 110
max 200
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 21
TILE SEQUENCING: WELCOME1 WELCOME TILE&6 ARTICLES
1 WELCOME TILE&9 ARTICLES
1 WELCOME TILE& 7 ARTICLES
1 WELCOME TILE&10 ARTICLES
1 WELCOME TILE&11 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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 22
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 23
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 24
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 25
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 26
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 27
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%;
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 28
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
Conde Nast – Gourmet Live – GUIDELINES – iPad Distribution – November 2010 29
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