IAB PORTRAIT SPECIFICATIONS & STYLE GUIDE

IAB PORTRAIT SPECIFICATIONS & STYLE GUIDE

PREPARED JULY 29, 2011


DIMENSIONS

02

BASE CONFIGURATION

300 15

ADVERTISEMENT

5

Area for Logo

40 10

460

Area for Ad App 01

1050 15

220

Area for Ad App 02

15

220

50

270 15

15

Area for Ad App 03


DIMENSIONS

03

AD WITH BRAND COPY

300 15

ADVERTISEMENT

5

40

Area for Logo

55

Area for Copy

Area for Ad App 01 415

1050 15

220

Area for Ad App 02

15

220

50

270 15

15

Area for Ad App 03


UNIVERSAL STYLE RULES

04

TYPOGRAPHY, COLOR & SIZING

LOGO Max Width: 270 px Max Height: 40 px BRAND COPY Typeface: Arial, Regular Size: 16 pts color: #808080

INFORMATION BOX Width: 250 px Height: 48 px Color: #4D4D4D, multiply

HIGHLIGHT COPY (TITLE) Typeface: Arial, Bold Size: 14 pts / 18 pts Color: #FFFFFF

BUTTONS (TYPE) Typeface: Arial, Regular Size: 10 pts Color: #FFFFFF SUB BRAND COPY Typeface: Arial, Regular Size: 16 pts Color: #808080 GENERAL COPY Typeface: Arial, Regular Size: 11 pts / 16 pts Color: #989898

FOOTER COPY Typeface: Arial, Regular Size: 12 pts Color: #808080 / Brand Color

HIGHLIGHT COPY (DETAIL) Typeface: Arial, Regular Size: 12 pts Color: #E5E5E5

BUTTONS (SHAPE) Height: 20 px, fixed Width: dependen upon type + 10 px, each side Color: gradient, dependant on Brand Color Corners: rounded, 2 px


IN CONTEXT

05

WHAT’S AVAILABLE

LARGE MODULE OPTIONS - Large photo with gallery of thumbnails - Large photo with image carousel - Large photo, gallery with link - Product showcase - One image with link - Single image with title - 360 View - Image with No Title - Video

SMALL MODULE OPTIONS - Video - Map - Coupon - Product Showcase - Poll - Quiz - Profiler - Movie Tickets - Download Audio - Download Images - Twitter - Facebook - Content Feed


06

LARGE MODULES 1-4

SPECIFICATIONS

01 LARGE PHOTO GALLERY WITH THUMBNAILS

02 LARGE PHOTO WITH IMAGE CAROUSEL NOTES

15

NOTES

01 Rollover on thumbnails changes image above.

01 Max 64 images in carousel.

02 Minimum of 4 images required.


03 Default image is randomized. (Advertiser can choose to not randomize)

03 Click on directional arrows exposes more thumbnails. 04 Default image shown is randimized. (Advertiser can choose to not randomize)

345

10 60

10

60

1

03 LINK WITH IMAGE THUMBNAILS

2

60

11

04 LINK WITH ONE IMAGE NOTES

NOTES


01 Click on button (’Get Recipe’ in this example) brings the user to external product page.

02 Click on button (’Get Recipe’ in this example) brings the user to external product page.

415

10 20 10 10

10 10

10


LARGE MODULES 5-7

07

SPECIFICATIONS

05 SINGLE IMAGE WITH TITLE

06 360 VIEW NOTES 01 Drag handle to rotate top image. 02 Dragging image also rotates the image.

355 415

5 55

07 SINGLE IMAGE WITH NO TITLE

460


08

LARGE VIDEO MODULE

SPECIFICATIONS

01 INITIAL VIEW

02 EXPANDED VIEW

460

345

345

10 60

1

2

60

11

NOTES 01 Rollover gallery changes top image. 02 Click on directional arrows exposes more video thumbnails. 03 Clicking Play expands video playback area.

NOTES 01 Upon rollover of any area in video module, collapse button appears. 02 Drop Shadow Specs Mode: Multiply Opacity: 25% X Offset: 0 pt Y Offset: 3 pt Blur: 6 pt Color: #000000


09

LARGE PRODUCT SHOWCASE MODULE

INTERACTIONS

01 INITIAL VIEW

02 MOVEMENT IN FLAGS

03 ROLLOVER FLAG

NOTES

NOTES

NOTES

01 Rollover flags are visible upon landing.

01 White circles in flags grow & shrink to indicate interaction.

01 Information box appears upon rollover & white dot maintains largest size. Information Box Specs Size: Fit to content, 10 px padding on either side Color: #4D4D4D Title: Arial, Bold, 14 pt, Brand Color Information: Arial, Regular, 12 pt, #FFFFFF


SMALL MODULES 1-12

10

OVERVIEW

01 VIDEO

02 MAP

03 COUPON

04 POLL

05 QUIZ

06 PROFILER

07 MOVIE TICKETS

08 DOWNLOAD AUDIO

09 DOWNLOAD IMAGES

10 TWITTER

11 FACEBOOK

12 PRODUCT SHOWCASE


SMALL MODULE 13

13 CONTENT FEED

11

OVERVIEW


SOCIAL NETWORKING APPS

01 TWITTER

12

SPECIFICATIONS

02 FACEBOOK

5 10 10

10 10

10

30 30

10

10 10

3

10

14

2

10

14

NOTES 01 Brand name in text, directional arrows & button pick up Brand Color. 02 Max of 64 posts.

NOTES 01 30 x 30 px logo next to each post. 02 Brand name in text & scroll bar pick up Brand Color. 03 Max of 64 posts.


POLL APP

13

SPECIFICATIONS

01 POLL

02 POLL RESULTS

10 10

25

15

25

5

15 45

45

15

NOTES 01 Brand Color picked up in radio button and text of selected choice. 02 Max of 6 choices.

NOTES 01 Brand Color picked up in winning poll selection. 02 Winning selection type increases to 14 pts and becomes bold.


QUIZ APP

14

SPECIFICATIONS

01 QUIZ

02 QUIZ RESULTS

10 10

80

80 140 5

15

10

NOTES 01 Brand Color picked up in radio button and text of selected choice.

NOTES 01 Brand Color picked up in product name & button. 02 Product name is 14 pts & Bold.

02 Max of 3 choices. 03 Description type is 12 pts.


PROFILER APP

15

SPECIFICATIONS

01 PROFILER

02 PROFILER RESULTS

10 10

15

NOTES

15

NOTES

01 Brand Color picked up in a choice’s rollover state.

01 Brand Color picked up in button.

02 Choice type is 12 pts / 24 pts.

02 Type color is #414141.

03 Max of 5 choices.


VIDEO PLAYER

16

SPECIFICATIONS

01 PLAY SCREEN

02 ROLLOVER CONTROL VIEW

03 MORE VIDEOS

69

10

52

185

50 2

25 270

NOTES

NOTES

01 Button picks up Brand Color.

NOTES

01 Brand Color picked up by play / payse buttons and progress fill.

02 Maximum video length of each video is 3 minutes.

04 MORE VIDEOS (+3)

01 Click on ‘More Videos’ exposes 3 video choices. 02 Rollover highlights video in Brand Color.

05 VIDEO END

06 VIDEO END (SINGLE VIDEO)

10 35

35 20

NOTES

NOTES

01 When there are more than 3 videos, directional arrows appear to allow you to click through the other videos.

01 End screen allows option to play next video or replay current video or select another video from the right.

02 Max 64 videos.

07 EXPANDED VIEW (1.5X) NOTES 01 Expanded view is 1.5x the size of the original player. 02 Upon rollover, the collapse button is visible.

278

405


CONTENT FEED

17

SPECIFICATIONS

01 OPTION WITH LOGOS

01 OPTION WITH LOGOS (3+ ARTICLES)

5

10 15

10

15

60

3

20

185

75 5

3

5

2

270

NOTES

NOTES

01 Each article has a fixed height of 60 pixels.

01 Scrollbar appears when there are more than 3 articles.

02 Min of 3 articles. 03 Max of 64 articles. 04 When more than 3 articles, the first three articles are randomized. 05 Logo Max Width: 75 px Max Height: 20 px

02 OPTION WITH IMAGES

3

02 OPTION WITH IMAGES (3+ ARTICLES)

15

15

5

3

3

3

3 54 82

NOTES 01 82 x 54 px image for each article. 02 Source is shown in italics. 03 Min of 3 articles.

NOTES 01 Scrollbar appears when there are more than 3 articles.

2


MAP MODULE

18

SPECIFICATIONS

01 IP RECOGNITION DEFAULT

02 NO IP DEFAULT

03 SEARCH RESULTS

10 270

10

5 10

141

153

258

5

5 5

NOTES

NOTES

01 Brand Color picked up in search.

NOTES

01 Brand Color picked up in button.

04 EDIT ENTRY FUNCTION

01 Brand Color picked up in pins.

05 ROLLOVER RESULTS

06 PIN CLICK RESULTS

25

10 10

10

10

NOTES

NOTES

01 On rollover, a grey (#4D4D4D) flyout appears with location in Arial, 12 pt text.

01 On click, a white information box appears.

07 EXPANDED VIEW WITH SCROLL NOTES 01 Map expands 1.5x size & scroll bar with results appears on left hand side. 553

5

234

5 5

246

132

10

399

10

5


MOVIE TICKETS

01 INITIAL

19

SPECIFICATIONS

02 RESULTS

10 10

10

10

10

153

270

NOTES 01 Button picks up Brand Color.

NOTES 01 Brand Color picked up by buttton & scrollbar.


20

ADDITIONAL SMALL APPS

01 COUPON

SPECIFICATIONS

02 DOWNLOAD AUDIO

10

5

10

03 DOWNLOAD IMAGES

8

10 20

35 7

10

60 10

152

185

10

10

65

5

258

40 40

5

NOTES 01 Button picks up Brand Color. 02 Coupon has a 1 pt, dotted stroke and ‘folded’ edge.

65

NOTES 01 Brand Color picked up in play / payse buttons, as well as ‘Buy Album’ button.

NOTES 01 Brand Color picked up in pins.

20


EXAMPLE 1

FULL AD USING: PRODUCT SHOWCASE, MAP & VIDEO MODULES

21


EXAMPLE 2

FULL AD USING: IMAGE GALLERY VIEW LARGER, VIDEO, & SOCIAL NETWORKING MODULES

22


IN CONTEXT

LEXUS ON AUTOBLOG

23


EXAMPLE 3

FULL AD USING: VIDEO GALLERY, PRODUCT SHOWCASE, & SOCIAL NETWORKING MODULES

24


IN CONTEXT

SPRINT ON ENGADGET

25


DEFAULT CREATIVE

26

DELIVER FLAT IMAGE IN CASE FLASH IS NOT AVAILABLE

OVERALL RULES 01 The feeling of 3 distinct modules should be maintained. 02 At least one module should have some kind of call to action (more information, buy here, etc). 03 Three modules should feel connected and have unique section titles. 04 The entire image is clickable.

1050

300


UI ELEMENTS

ELEMENTS THAT CAN REINFORCE BRANDING

BRANDED BUTTONS

INITIAL

27

SCROLL BAR Initial Thumb: Brand Color Track: #E5E5E5

ROLLOVER

Rollover Thumb: Brand Color + 25% Black Track: #E5E5E5

Initial Gradient Horizontal Top - Bottom Color 1: Brand Color Color 2: Brand Color + 25% Black Rollover Gradient Reverse

INITIAL

AUDIO CONTROLS

INITIAL

INITIAL

ROLLOVER

INITIAL

ROLLOVER

Initial Gradient Radial Color 1: #FFFFFF Color 2: #B2B2B2

SELECTED

Rollover Gradient Radial Color 1: #E5E5E5 Color 2: #989898

Selected Gradient Radial Color 1: Brand Color Color 2: Brand Color + 25% Black

ROLLOVER

DIRECTIONAL ARROWS (TWITTER MODULE)

ROLLOVER

RADIO BUTTON

VIDEO PLAYER

PLAYING INITIAL

Initial Brand Color

Rollover #989898

ROLLOVER

Initial Brand Color

Initial Brand Color

Rollover #989898

Rollover Grey becomes transparent #989898 (for Play / Pause)

Playing Brand Color (Play turns to Pause)

INFORMATIONAL FLAGS

BOTTOM LINK

NON-BRANDED BUTTONS

INITIAL INITIAL

ROLLOVER

INITIAL

ROLLOVER

ROLLOVER

Initial Brand Color

Initial Brand Color

Rollover Center grows to 12 px and remains that size until mouse is moved away.

Rollover Underline

Initial Gradient Horizontal Top - Bottom Color 1: #FFFFFF Color 2: #B2B2B2 Stroke: 1 pt, #B2B2B2 Rollover Gradient Reverse

EXPAND / COLLAPSE BUTTONS

INITIAL

ROLLOVER

Initial Color: #E5E5E5, 80% Transparency Rollover Color: #E5E5E5, 100% Transparency


WHAT NOT TO DO

28

RULES TO FOLLOW

01 MODULES CANNOT BE REORDERED E.G., SMALL MODULES CANNOT BE ON TOP. 02 MODULES CANNOT BE RESIZED E.G., THERE MUST ALWAYS BE THREE MODULES AT THE DEFINED SIZES. 03 VIDEO PLAYBACK CANNOT BE INITIATED BY HOST E.G., USER MUST INITIATE PLAYBACK 04 FONTS CANNOT DEVIATE FROM THOSE SPECIFIED IN THIS DOCUMENT E.G., ONLY HELVETICA AND ARIAL CAN BE USED. 05 BACKGROUND CANNOT BE CUSTOM COLOR OR CUSTOM WALLPAPER E.G., BACKGROUND CAN ONLY BE WHITE.

01

02