Specs and Style Guide

14 downloads 283 Views 3MB Size Report
Aug 2, 2010 - Area for Ad App #1. Page 2. 400px ... Dimensions – Alternate Configuration w/ Ad Copy. 1200px ... Data C
Specs and Style Guide Project Devil

Prepared by AOL Last modified: August 2, 2010

Dimensions – Base Configuration 20px

Area for logo

60px

Area for Ad App #1

515px

1200px

20px

Area for Ad App #2

255px

20px

255px

Area for Ad App #3

55px

Area for footer

400px

Page 2

Example Ad Area for logo

Area for Ad App #1

Area for Ad App #2

Area for Ad App #3

Area for footer Page 3

Example Ad – In Context

Page 4

Dimensions – Alternate Configuration w/ Ad Copy 20px 60px 40px

Area for logo Area for copy • Base configuration does not include dedicated area for copy. This is the only difference.

Area for Ad App #1

475px

1200px

20px

Area for Ad App #2

255px

20px

255px

Area for Ad App #3

55px

Area for footer

400px

Page 5

Example Ad Area for logo Area for copy • Base configuration does not include dedicated area for copy. This is the only difference.

Area for Ad App #1

Area for Ad App #2

Area for Ad App #3

Area for footer Page 6

Example Ad – In Context

Page 7

Dimensions – All configuration options in one view

Base configuration

Base configuration w/ ad copy

Photo gallery

Photo gallery w/ “Buy” link

3-D rotation / Zoom in-out

Page 8

Examples – All configuration options in one view

Base configuration

Base configuration w/ ad copy

Photo gallery

Photo gallery w/ “Buy” link

3-D rotation / Zoom in-out

Page 9

More Examples

Page 10

Ad App Functionality v.1 Currently available Ad Apps: • • • • • • • • • • • • •

Photo / Photo Gallery (incl. link to “Buy Now” support) Video / Video Gallery (incl. HD and Full Screen support) 3-D Rotation / Zoom-in-Zoom-out Mapping (e.g., Store locator, Dealer locator, Theater Locator) Facebook widget Twitter widget Couponing Email / Send-to-Friend Data Capture (e.g., email address) Polling / Quizzes Music / Audio PDF Download / Print SMS Messaging

Suite of Ad Apps will expand over time (v.2 and beyond). AOL and partners will determine priorities and roadmap.

Page 11

Style Rules and Conventions – Graphical elements

• 100% graphical, i.e., no text – Can be photography (example on left) – Can be product hero shot (example on right)

Page 12

Style Rules and Conventions – Text and background elements Logo: Width: 200px max Height: 35px max

Copy: Font: Din Next Rounded Height: 30px Color: #666 Justification: Left • Copy must fit on a single line (but there are no character or word limits) • May not have unnatural kerning

Background: • Must be white

Page 13

Specs and Style Guide Project Devil