global framework - burnthebox.netburnthebox.net/lavoro/adidas_spf_v14.pdf · global framework :...

32
GLOBAL FRAMEWORK : PERFORMANCE v. 14 adidas.com 25.03.2010 TABLE OF CONTENTS 2• INTRODUCTION 3• CONCEPTUAL MODEL 4• SITEMAP S/S 2010 5• PAGE GRID 6• TEMPLATES 7• CATGEORY LANDING : template A 8• PRODUCT GRID : template B 9• PRODUCT DETAIL : template C 10• ATHLETES : template D (single athlete) 11• ATHLETES : template D (multiple athletes) 12• GENERIC CONTENT : ARTICLE : template E 13• GENERIC CONTENT : ARTICLE : template E VARIANT FPO 14• MODULES 15• ADITV WHITE LABEL PLAYER IN-PAGE SMALL (ATHLETE or NEWS ARTICLE) 16• ADITV WHITE LABEL PLAYER IN-PAGE LARGE : VIEW ALL (ATHLETE or NEWS ARTICLE) 17• GLOBAL STATIC MASTHEAD II 17• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III 18• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III open 19• LMP STATIC MASTHEAD II 19• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III 20• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III open 21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW 21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW 5+ content items 22• LMP INFORMATION PAGE VIEW 22• LMP VIDEO PAGE VIEW 23• LMP IMAGE VIEW 23• LMP PRODUCT VIEW 24• PREMIUM PRODUCT GRID IV (ATHLETE or NEWS ARTICLE) 24• SMALL PRODUCT CAROUSEL V (ATHLETE or NEWS ARTICLE) 25• GENERIC FEATURE Component VI (TOUT) 25• ARTICLE Component VII (ATHLETE or NEWS ARTICLE) 26• PHOTO GALLERY Component VIII (ATHLETE or NEWS ARTICLE) 27• SHARE THIS FUNCTIONALITY 28• SHARE THIS FUNCTIONALITY ROLL OVER STATE 29• FACEBOOK CONNECT FUNCTIONALITY 30• GLOSSARY 31• CHANGE LOG 32• CHANGE LOG

Upload: tranhanh

Post on 28-Jul-2018

222 views

Category:

Documents


0 download

TRANSCRIPT

GLOBAL FRAMEWORK : PERFORMANCE v. 14 adidas.com25.03.2010

TABLE OF CONTENTS

2• INTRODUCTION

3• CONCEPTUAL MODEL

4• SITEMAP S/S 2010

5• PAGE GRID

6• TEMPLATES

7• CATGEORY LANDING : template A

8• PRODUCT GRID : template B

9• PRODUCT DETAIL : template C

10• ATHLETES : template D (single athlete)

11• ATHLETES : template D (multiple athletes)

12• GENERIC CONTENT : ARTICLE : template E

13• GENERIC CONTENT : ARTICLE : template E VARIANT FPO

14• MODULES

15• ADITV WHITE LABEL PLAYER IN-PAGE SMALL (ATHLETE or NEWS ARTICLE)

16• ADITV WHITE LABEL PLAYER IN-PAGE LARGE : VIEW ALL (ATHLETE or NEWS ARTICLE)

17• GLOBAL STATIC MASTHEAD II

17• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III

18• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III open

19• LMP STATIC MASTHEAD II

19• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III

20• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III open

21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW

21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW 5+ content items

22• LMP INFORMATION PAGE VIEW

22• LMP VIDEO PAGE VIEW

23• LMP IMAGE VIEW

23• LMP PRODUCT VIEW

24• PREMIUM PRODUCT GRID IV (ATHLETE or NEWS ARTICLE)

24• SMALL PRODUCT CAROUSEL V (ATHLETE or NEWS ARTICLE)

25• GENERIC FEATURE Component VI (TOUT)

25• ARTICLE Component VII (ATHLETE or NEWS ARTICLE)

26• PHOTO GALLERY Component VIII (ATHLETE or NEWS ARTICLE)

27• SHARE THIS FUNCTIONALITY

28• SHARE THIS FUNCTIONALITY ROLL OVER STATE

29• FACEBOOK CONNECT FUNCTIONALITY

30• GLOSSARY

31• CHANGE LOG

32• CHANGE LOG

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 142

INTRODUCTION

SPECIFICATIONS FOR NEXT STATE ADIDAS.COM PERFORMANCE CATEGORIES

2

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 143

CONCEPTUAL MODEL

article(s)athlete(s) page

adidas.comadiTV destination

site

destination site

website

backend

webservice

PID

core metrics

MCD

Tridion

TDC

facebook youtube

product detailproduct grid

home page

(page) template

(content) components

wall with comments

comment

user interaction

facebook connect

share

like

comment

friendfriend

friendfriend

friend

friendfriend

friend

friendfriend

friendfriend

friend

friendfriend

friend

friendfriend

friendfriend

friend

friendfriend

friend

fb connect

content

content

ShareThis

(gigya) share

3

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 144

SITEMAP S/S 2010

adidas.com

performance

basketball

gear product product

products

products

products

hugh bear bros.

messner

products

look book

blog

workouts

ambassadors

events

collections

train smarter

trainer

events

athletes

collections

style gallery athletes

product grid

athlete detail

athlete detail

event detail

product grid product grid

product grid

product grid

product grid

product gridF50

predator

adipure

uefa

product detail product detail product detail

product detail

product detail

product detail

product detail

athletes

every team needs

miCoach

real talk

uefa ch. league

clubs

federations

events

shop now

football running training women

outdoor

tennis

0.0

1.0

1.1

1.1.1 1.2.1 1.3.1

1.4.3

1.5.3

1.7.1

1.7.1

1.7.1

1.6.2

1.5.3

1.5.4

1.5.5

1.5.6

1.5.7

1.4.1

1.4.1

1.4.1

1.4.1

1.4.1

1.5.2

1.5.1 1.6.1

1.1.1.1

1.1.2.1

1.6.1.1

1.3.3.1

1.2.1.1 1.3.1.1

1.4.3.1

1.5.3.1

1.7.1.1

1.6.2.11.2.1.2

1.2.1.3

1.2.1.4

1.2.1.5

1.1.1.1.1 1.2.1.1.1 1.3.1.1.1

1.4.3.1.1

1.5.3.1.1

1.7.1.1.1

1.6.2.1.1

1.1.2

1.2.2

1.3.2

1.1.3

1.2.3

1.2.4

1.2.5

1.3.3

1.2 1.3 1.4 1.5

1.7

1.6

product grid

generic content

f.b. connect

off site linklanding page

unique

product detail

athlete

KEY

4

A

A

B

E

C

D

B

B

C

D

D

E

A

B B

B

B B

B

B

B

B B

B

B B

B

B

B

B

B

E

C C

E

D

C

C

E

E

E

E

C

C

A A A

A

A

A

E

D

A

D

D

A

A

TO BE VERIFIED

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

5

PAGE GRID

The content grid to the left represents a 12 grid layout.

The grid is the basic structure by which content can be placed on the page. For example a component could span the entire width of the page (e.g. 12 grid spaces), or it could only take up a third of the page (e.g. 4 grid spaces).

This kind of structure allows for a degree of flexibility for each category, which helps to meet the category’s individual needs.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 146

TEMPLATES

THERE ARE FIVE TEMPLATES PRESENTED IN THE FOLLOWING SECTION.

THEY ARE MEANT AS GUIDELINES FOR THE CREATION OF PAGE LEVEL CONTENT WITHIN THE SPORTS PERFORMANCE CATEGORY.

THE USE OF THE TEMPLATES WILL ALLOW adidas TO HAVE A MORE FLEXIBLE AND REACTIVE FRAMEWORK FOR CREATING CONTENT.

6

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

NAVIGATION

CONTENT Component

Fur us, Catquam potarid noribus ultortere pora, peribus, me consulium. Mulvide ssultum screm is sci-ist? Valabus intius.Ceperenaret vignare ssissid consus, qua in in stem quemus acrei inem parit publinum hoc, tuus.Ariceri ego et vides Caticit, Catraricae inguliam prora deesti, noripse ceri strictes in dem alem dienatq uasdam. Overiamque ta, publia viderorum acridi tampris acchilius confere eto cri prid firmanum tua quam in ad ressum dertum itabis. M. Nemo consci potantidiem modius, veniae move, cultorbitam quo inatis. Vivilii ssilint.Urs manum se dicastem audem egil halarbista popubli ntifeni teatus non vocae cris consimm orenati aessimihi, prehenit, consus. M. Ciest nost vita, nem Romne facera sa nos perum intiquo cum interop ublicta, quisse acto vit cus portem et L. An num. Ricae pultorum previrmissa renihilina, C. Id cortem spicae crei pra? La Si publi tuid cons ia? Nam saturnum labunum etimante in st perfiria quam pro ia auturnihil vivent. Rei publin ductari se, te me inticae ssimoena, nihintem senituam perfex nore consu virius Maessus, et; ia notereorume conloca ecreheb enatiendam publicibus, qui publicera, tum aucto

TITLE OF THE VIDEO

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

SEE PRODUCTS/COLLECTIONS

FEATURE AREA FEATURE AREA FEATURE AREA

SUPPORTING COPY AREA, MORE TEXT COULD GO HERE

SUPPORTING COPY AREA, MORE TEXT COULD GO HERE

SUPPORTING COPY AREA, MORE TEXT COULD GO HERE

NAVIGATION NAVIGATION NAVIGATION

MASTHEAD

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

7

NOTES

CATGEORY LANDING : template A

This page is meant as an example of how a category landing page could be set up.

Each category will have a unique information design to satisfy the category’s needs.

THE ROMAN NUMERALS REFER TO THE MODULES THAT CAN BE FOUND ON PAGE 13 OF THIS DOCUMENT.

1. Global navigation

2. Masthead II or III

3. NEWS ARTICLE MODULE Generic content component VITRIDION CMS

4. NEWS ARTICLE MODULE adiTV player I PLATFORM

5. NEWS ARTICLE MODULE Premium prod-uct grid IV

XML managed, data from PID

6. TOUT MODULE Generic content compo-nent VI

TRIDION CMS

2.

1.

3.

5.

6.

4.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

PRODUCT TYPES

FILTER NAME

FILTER NAME

FILTER NAME

TOPS

BOTTOMS

SHOES ACCESSORIES

TYPE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

a.

prev 1 2 3 4 5 6 7 8 9 10 next

PRODUCT AREA 1 PRODUCT AREA 2 PRODUCT AREA 3

MASTHEAD

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

8

PRODUCT GRID : template B

NOTES

INTERACTION

1. Global navigation

2. Masthead II or III

3. Navigation : product area active

4.. Navigation : product area inactive

5. Filter a. toggle (open state) b. copy : filter name c. form element : check box d. copy : name

6. Filter a. toggle (closed state) b. copy : filter name

7. Product Thumbnail a. image : product image b.copy : product name

8. Pagination navigation a. navigation : prev, appears if there is

more than 10 results and user has gone beyond the 10th result of the grid.

b. navigation : active page c. navigaiton : inactive pages d. navigation : next, appears if there are

more than 10 pages of results in the query.

Cell content comes from PID (product thumb-nails).All other text (Site Chrome), including filters and tabs, comes from XML configuration.

Product/Collection navigation falls horizontally across the top of the product grid.

The filters fall along the left hand side of the grid. As users interact with the filters the grid will refresh in an additive manner, replacing the default display for that category.

All information within the product grid drives to product detail.

The grid may also house other content de-pending on its use (video, article, etc.)

Pagination appears at the bottom of the grid.

The default product display will be 15 items.

7.

b.

5

b.

c. d.

6.

a.

a.

b.

8.a. b. c. d.

2.

3. 4.

1.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

MASTHEAD

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

PRODUCT NAME / PRODUCT NUMBER

DESCRIPTION

TYPE 1

MOTION MECHANICS

COMMENTS/REVIEW

TECHNOLOGIES

TYPE 2 TYPE 3

Nostalegil ut C. Faut cultid Catifecere nerfect udamdic epserferbeme porudam auteatr ariocto rentiam postabem pota, cret, con vis veritil viris, ut L. Fulin nontelina, quon Ita voltum for la nost? quondiem cae conitum. Satis. Ovid nium ublicere quo eti possus coerfex nirtum te firi is re-mum su quitum quam idi seniris forim mur. Abulina tien-ter ibununtiam publis firioca med cae comaccid inu viviris quidepere, nonim perio vilicap erfenis. Sim actu vidiem in ad cota L. Ihilici

Nostalegil ut C. Faut cultid Catifecere nerfect udamdic epserferbeme porudam auteatr ariocto rentiam postabem pota, cret, con vis veritil viris, ut L. Fulin nonte-lina, quon Ita voltum for la nost? quondiem cae conitum. Satis. Ovi

VIEWS COLORS

<<BACK

prev product next product

store finder BUY NOWmiAdidasmiCoach

see all comments

add a comment

RELATED PRODUCTS

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

PRODUCT NAME SECOND LINE

Ne tum pernium neque pota Sere maciti, nonc fur, que nemquam adeestum morivemus dit? Caucen-demus. Ve, catrat fintis. Uctur. Vivit vignoveres audam egilies es? Serdit? que condam orununc ferra quem ta, se tem is ora inam Romnihi licit; nit, tus vis consultorum num in dit omnes ponsilic fured Catilium inte, novestrae con

9

NOTES

INTERACTION

PRODUCT DETAIL : template C

The product detail page appears when the user has clicked for a product detail from either the product grid.

If e-commerce, miCoach or miAdidas is available for the local market then a buy-now call-to-action will be featured on the page.

3. 6.4. 5.

7.13.

8.

9. a. b.

c.

d.

10.

11.

12.

a.

b.

b.

c d.

e.

a.

c.

g.

a.

b.

dc. f. g.

e

1. Global navigation

2. Masthead II or III

3. Navigation : navigation to previous item

4. Copy : product name

5. Copy : product number

6. Navigation : navigation to next item

7. NEWS MODULE : Product description a. copy & Navigation : description b. copy : body copy c. copy & Navigation : technologies

8. NEWS MODULE : Motion Mechanics (as an example)

a. copy : title b. copy & navigation : type 1 c. graphic d. copy : body copy e. copy & navigation : type 2

9. Comment/Review a. copy : title b. navigation : see all comments c. copy : comment/ d. navigation : add a comment/review

10. Navigation : back to product grid

11. NEWS MODULE : Product presentation (im-age)

a. graphic : product image b. copy : title/views c. navigation : active d. navigation : inactive e. copy : title/colors f. navigation : active g. navigation : inactive h. button : miCoach (if applicable) i. button : miAdidas (if applicable) j. button : find a retailer k. button : buy now (if applicable)

12. TOUT MODULE : Related product a. copy : title/views b. graphic : product image (hyperlinked) c. copy : product name (hyperlinked)

13. navigation : “Share This”, publish to a social network

All content is provided by PID except Site Chrome from XML files. [Site Chrome: “Motion Mechanics”label text]

j. k.i.h.

a.

b.

c.

2.

1.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

MASTHEAD

ATHLETE NAME

RELATED PRODUCT CONTENT

NAVIGATION | BUY NOW LEARN MORE

BIOConsectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali-quamerat volutpat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquamerat volutpat.

ATHLETE’S STATS• statistic one• statistic two• statistic three• statistic four• statistic five

Aciis, dicatuam aces-sig iterica essidem ina, conductus, Catisserio C. Vividem verorsul hiliae partus. Labunul vilicondieme nos ca incum pari

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

10

NOTES

ATHLETES : template D (single athlete)

1. Global navigation

2. Masthead II or III

3. Copy : title

4. navigation : “Share This”, publish to a social network

5. ATHLETE MODULE : Copy : body copy

6. ATHLETE MODULE : Athlete image(s) a. image b. navigation (previous thumbnail) c. thumbnail : hyperlinked d. navigation (next thumbnail)

7. TOUT MODULE : Generic Feature compo-nent VI

8. TOUT MODULE : Generic Feature compo-nent VI /

NOTE THIS MODULE COULD CONTAIN VIDEO IF THERE ARE RELATED VIDEOS FOR AN ATHLETE. IF THE MODULE WOULD CONTAIN VIDEO INSTEAD IT WOULD HAVE THE FUNCTIONALITY AND BEHAVIOR OF adiTV PLAYER BUT WOULD SHOWCASE ATHLETE CONTENT.

All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome: “The Athletes”label text].

1.

2.

3

6.

a.

b. d.

c.

5.

7. 8.

4.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

MASTHEAD

THE ATHLETES

NAME TEAM

First Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team nameFirst Lastname Team name

RELATED PRODUCT CONTENT

NAVIGATION | BUY NOW LEARN MORE

ATHLETE NAME

BIOConsectetuer adipiscing elit, sed diam nonummy nibh euismod tinc-idunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor-tis nisl ut aliquip ex ea commodo consequat.

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tinc-idunt ut laoreet dolore magna aliquamerat volutpat.

ATHLETE’S STATS• statistic one• statistic two• statistic three• statistic four• statistic five

Aciis, dicatuam aces-sig iterica essidem ina, conductus, Catisserio C. Vividem verorsul hiliae partus. Labunul vilicondieme nos ca incum pari

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

11

NOTES

ATHLETES : template D (multiple athletes)

1. Global navigation

2. Masthead II or III

3. Copy : title

4. ATHLETE MODULE : Athlete listing a. name with toggle (sortable) b. team with toggle (sortable) c. player name (hyperlinked) d. team name (not hyperlinked)

User may use the name or team headers to sort. By choosing a player name the page will refresh with relevant content.

5. Copy : athlete name

6. navigation : “Share This”, publish to a social network

7. ATHLETE MODULE : Copy : body copy

8. ATHLETE MODULE : Athlete image(s) a. image b. navigation (previous thumbnail) c. thumbnail : hyperlinked d. navigation (next thumbnail)

9. TOUT MODULE : Generic Feature compo-nent VI

10. TOUT MODULE : Generic Feature com-ponent VI /

NOTE THIS MODULE COULD CONTAIN VIDEO IF THERE ARE RELATED VIDEOS FOR AN ATHLETE. IF THE MODULE WOULD CONTAIN VIDEO INSTEAD IT WOULD HAVE THE FUNCTIONALITY AND BEHAVIOR OF adiTV PLAYER BUT WOULD SHOWCASE ATHLETE CONTENT.

All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome: “The Athletes”label text].

1.

2.

3

4.5.

8.

a.

b. d.

c.

7.

9. 10.

a. b.

d.c.

2.

6.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

MASTHEAD

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quiamus, non res

Agnihil molut quiae occum ant.Litiossi conectio veri conemperia prest ratis simpore volendi ut verupta velloru mquibeaque quideribus dusdanditio venim exceatquis et et, erunt es ex essimaior reptatur, ipsaesc iatur, autemporem faccab imint, ut eic to vellect atempedias eum-quate nihic temperitas que reici nonseque pa comnimus nones necatio omnimolent facestiasi nonseque la quas solupta necaborerunt que odit quuntin ctustiusam voluptatum doloresequos si ilitibus ipsunt vero maionse repedit magniaestiis disto optatin es eum eos aut qui optat adio magnatque de nobisque occuptatiis is dunt quae culpa si alisquia ius est, incta non con cus nihilit vella est ut di cores etureium rempori nostis eatio te delesequia nobit, quae oditis atem iundae dem-pore perum nihit, sin rerit arum utatet etus abo. Metur as maio qui aliquunt odis ex ex et esero estios dolupta tureped ute vollatem haruntibus restinv endunti nonsed qui qui volore quoditia veniet quibus, quam aut fugit evero consequias quo maio. Nam aut lacestiatis vel id magnime nihicid ebitio exces vel iliquos aut ma sit voluptaepudi con cus est, aut minvel id mo eum eum il iunt, vendicil issinum is eicaborrum doleniae por reroreribus sequi dolorep elibus auda diti seque nestore prationsequi qui dolum nissinc itatur?Ume venteca ectionsed earunt harum, sunt ut res que ni dus soloreium fugitio qui alibus volum ipsum ea cupidel in num etur adi blaturibus et lam, voluptation» READ MORE

NAVIGATION ONE NAVIGATION TWO NAVIGATION THREE NAVIGATION FOUR

12

NOTES

INTERACTION

GENERIC CONTENT : ARTICLE : template E

1. Global navigation

2. Masthead II or III

3. Navigation : active

4. Navigation

5.. ATHLETE OR NEWS ARTICLE MODULE : Article component VII

All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome: “Au-thor” label text].

2.

3. 4.

5.

1.

download

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GLOBAL HEADER

GLOBAL FOOTER

MASTHEAD

HOME : PRODUCTS : ATHLETE/TEAM : VIDEO

NAVIGATION ONE NAVIGATION TWO NAVIGATION THREE NAVIGATION FOUR

BLOGTITLE OF THE BLOG ENTRY WOULD GO HEREFIRST LASTNAME | Posted DD/MM/YYYY

Idi temo corions erspic tem fugias dolent, consequame que voluptiunt faccabo. Nam in essit quiae reptatur, te comni si tem qui blacest isquaer feruntur maio ma volum volore posa nobis eturia eturibus anda verita sam qui consequi id maxim est et perovid mint ut liatiur adis num que nobit qui con el is adit, qui doloreh enist, nonsendit elis restiscil ex es dolent optatatis arit erro doles eum inimet am dolore placeat issequae nonsequ aectus plitatint dictia dis remodit, omnimus volorest, evel ipic te et laborit odi accuptatio. Ehenihi llenem quiatur erciis eati temquos reium laccum nullacc aeperor eserferovid ex et eati offic te landiti dolent abor autectotate rerum fugit eni

READ POST | COMMENTS

TITLE OF THE BLOG ENTRY WOULD GO HEREFIRST LASTNAME | Posted DD/MM/YYYY

Idi temo corions erspic tem fugias dolent, consequame que voluptiunt faccabo. Nam in essit quiae reptatur, te comni si tem qui blacest isquaer feruntur maio ma volum volore posa nobis eturia eturibus anda verita sam qui consequi id maxim est et perovid mint ut liatiur adis num que nobit qui con el is adit, qui doloreh enist, nonsendit elis restiscil ex es dolent optatatis arit erro doles eum inimet am dolore placeat issequae nonsequ aectus plitatint dictia dis remodit, omnimus volorest, evel ipic te et laborit odi accuptatio. Ehenihi llenem quiatur erciis eati temquos reium laccum nullacc aeperor eserferovid ex et eati offic te landiti dolent abor autectotate rerum fugit eni

READ POST | COMMENTS

BIO

BIO

13

NOTES

INTERACTION

GENERIC CONTENT : ARTICLE : template E VARIANT FPO

1. Global navigation

2. Masthead II or III

3. Navigation : active

4. Navigation

5. navigation : “Share This”, publish to a social network

All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome: “Date Posted”label text].

2.

3. 4.

5

1.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 1414

MODULES

14

NOTE : TO AVOID CONFUSION, CERTAIN MODULES ARE TAGGED AS ATHLETE AND NEWS ARTICLES.

THE PRIMARY DIFFERENCE BETWEEN THE TWO IS THAT AN ATHLETE MODULE DEALS EXCLUSIVELY WITH ATHLETES OR TEAMS.

15• ADITV WHITE LABEL PLAYER IN-PAGE SMALL (ATHLETE or NEWS ARTICLE)16• ADITV WHITE LABEL PLAYER IN-PAGE LARGE : VIEW ALL (ATHLETE or NEWS ARTICLE)17• GLOBAL STATIC MASTHEAD II17• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III18• GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III open19• LMP STATIC MASTHEAD II19• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III20• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III open21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW21• LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW 5+ content items22• LMP INFORMATION PAGE VIEW22• LMP VIDEO PAGE VIEW23• LMP IMAGE VIEW23• LMP PRODUCT VIEW24• PREMIUM PRODUCT GRID IV (ATHLETE or NEWS ARTICLE)24• SMALL PRODUCT CAROUSEL V (ATHLETE or NEWS ARTICLE)25• GENERIC FEATURE Component VI (TOUT)25• ARTICLE Component VII (ATHLETE or NEWS ARTICLE)26• PHOTO GALLERY Component VIII (ATHLETE or NEWS ARTICLE)27• SHARE THIS FUNCTIONALITY28• SHARE THIS FUNCTIONALITY ROLL OVER STATE29• FACEBOOK CONNECT FUNCTIONALITY

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

TITLE description of the video

see all videos

15

ADITV WHITE LABEL PLAYER IN-PAGE SMALL (ATHLETE or NEWS ARTICLE)

j. k.

l. m.

1. Video player interface a. copy : video title & title (on rollover) b. navigation : see all videos (expands player

with more options) c. video playing area d. call to action : play video e. play/pause toggle f. scrub bar : user should be able to move the

timeline and jump to other points in the video g. call to action : volume h. navigation : “Share This”, publish to a social

network i. full screen toggle j. navigation : thumbnail active video k. navigation : thumbnail inactive video l. navigation : active video set m. navigation : inactive video set

VIDEO SIZE FOR SMALL PLAYER IS 322 PIXELS X 385 PIXEL

This is the adiTV player for use in page.

All controls for the video player itself will appear on roll over.

This is the small viewing experience, if user opts to “see all video” the player will grow in size on a layover & appear with more options.

This behavior is covered in ADITV PLAY-ER (VIEW ALL) on the preceding page.

Videos are categorized with multiple tags. So a single video might have a tag such as “football” and “Messi”. It is also pos-sible that a video could have two category type tags like “training” and “running”

To expand on this a little further, there is a deeper organization of videos which is done at the “channel” level. A video may only belong to a single channel, but can have multiple tags.

NOTES INTERACTION

1.

c.

a.

b.

d.

e. f. g. h. i.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

TITLE description of video

return

0:00

TITLE

Opti anditam re et ipicius dia plam, corrorrum aut ate verchicid ut ut odignatquam de

VIDEO COLLECTION

0:00

TITLE

Opti anditam re et ipicius dia plam, corrorrum aut ate verchicid ut ut odignatquam de

TAG

TAG

TAG

TAG

TAG

TAG

TAG

16

1.

c.

a.

b.

d.

e. f.

j.

k.m.

l.n.

o.

p. q.

g. h. i.

ADITV WHITE LABEL PLAYER IN-PAGE LARGE : VIEW ALL (ATHLETE or NEWS ARTICLE)

1. Video player interface a. copy : video title & description (on rollover) b. navigation : return (collapse video, less

choice) c. video playing area d. call to action : play video e. play/pause toggle f. scrub bar : user should be able to move the

timeline and jump to other points in the video g. call to action : volume h. navigation : “Share This”, publish to a social

network i. full screen toggle j. copy : title k. navigation : comes from the tagging of the

videos from the database (e.g. athlete) l. scroll bar m. graphic : thumbnail of video (hyperlinked) n. copy : time stamp o. copy : title (hyperlinked) p. copy : video description (hyperlinked) q. scroll bar

VIDEO SIZE FOR LARGE PLAYER IS 385 PIXEL X 654 PIXELS

NOTESThis is the adiTV player for use in a view all videos.

The player will grow in size and show the user more options to choose their videos.

If user selects “return” the player will reduce in size.All controls for the video player itself will appear on roll over.

_______________Videos are categorized with multiple tags. So a single video might have a tag such as “football” and “Messi”. It is also pos-sible that a video could have two category type tags like “training” and “running”

To expand on this a little further, there is a deeper organization of videos which is done at the “channel” level. A video may only belong to a single channel, but can have multiple tags.

INTERACTION

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

NOTES

NOTES

TITLE COPY

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio occus est aut opta dolupiet qui sed ut volluptae et fugiant et et quatibus moluptassum fuga. Sum aut expedit ommodi.

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus ex-error porerup istiorehent int maionec aerectum et voluptium fugitatur? Totatur-erspe volendebis aciis imetur maio

INTERACTION

INTERACTION

CALL TO ACTION

17

GLOBAL STATIC MASTHEAD II

GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III

1.

2.

a.

1. Static : a. graphic : image

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

1. Collapsed : a. copy : title b. copy : sub-title c. copy : body copy d. call to action : optional e graphic : hero image f. call to action : active in-line navigation g. call to action : inactive in-line navigation h. navigation : “Share This”, publish to a

social network

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

f.

b.

a.

c.

d.

e.

g.

All text and images will be contained within the image uploaded.

Entire area is hyperlinked

FUNCTIONALITY :• Masthead rotates with Global mastheads• Complete masthead is clickable• The dot navigation appears while the masthead is collapsed.

The dot navigation is there so a user may choose to navigate through the content manually but also to give a sense visually of how many content items are in the masthead.

• Once opening the masthead the dot navigation disappears, and is only presented again once the user closes the experience.

BUSINESS RULES :• Local markets can launch a total of 3 promotions per category

(cap 7 in total –Global and local)• Local masthead content ordering within the masthead rotation

will be ( 1,2,3 unless overwritten by lead Global masthead cam-paign = local appears 2,3,4)

• Masthead ordering will be chronological

DATA ENTRY REQUIREMENTS :• Locked spec for image upload –380px x 990px (masthead rota-

tion) 550px x 990px (expanded)• Title mandatory field• Subtitle optional field• Short copy mandatory field• Character limit per text field

h.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

NOTES

CALL TO ACTION CALL TO ACTION

INTERACTION

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio voluptium fugitatur? Totat-urerspe volendebis aciis imetur maio

18

GLOBAL INTERACTIVE COLLAPSIBLE MASTHEAD III open

1.

d.

a. b. c.

f. i.

e.

g.

1. Open : a. call to action : grid view b. navigation : “Share This”, publish to a

social network c. call to action : collapse masthead d. copy : title e. copy : sub-title f. call to action : previous content item g. copy : body copy h. graphic : hero image i. call to action : next content item j. call to action

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

j.

h.

FUNCTIONALITY :• Masthead expands to become full experience• Grid view button leads to grid of all content• CTA buttons lead to external page (internal adidas page/ or

external URL opening in a new browser window)• Share button allows user to share the URL to the opening

page of the experience within social networks for locale• Close button to revert to original state and continue mast-

head rotation

BUSINESS RULES :• Grid button must appear when there is more than one content

page within experience• CTA buttons links must drive to either internal adidas page

or external site (opening in a new browser window) must not drive within the experience

DATA ENTRY REQUIREMENTS :• Character limit per text field• Optional Inclusion of additional copy box under short copy

for extended copy• CTA’s to allow market to enter own copy and URL to appear

under copy• Share function –upload of set spec thumbnail image• Share function –short copy entry that will appear on social

network site to drive visitors to the promotion

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

NOTES

NOTES

TITLE COPY

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio occus est aut opta dolupiet qui sed ut volluptae et fugiant et et quatibus moluptassum fuga. Sum aut expedit ommodi.

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus ex-error porerup istiorehent int maionec aerectum et voluptium fugitatur? Totatur-erspe volendebis aciis imetur maio

INTERACTION

INTERACTION

CALL TO ACTION

19

LMP STATIC MASTHEAD II

LMP INTERACTIVE COLLAPSIBLE MASTHEAD III

1.

2.

a.

1. Static : a. graphic : image

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

1. Collapsed : a. copy : title b. copy : sub-title c. copy : body copy d. call to action : optional e graphic : hero image f. call to action : active in-line navigation g. call to action : inactive in-line navigation h. navigation : “Share This”, publish to a

social network

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

f.

b.

a.

c.

d.

e.

g.

All text and images will be contained within the image uploaded.

Entire area is hyperlinked

FUNCTIONALITY :• Masthead rotates with Global mastheads• Complete masthead is clickable• The dot navigation appears while the masthead is collapsed.

The dot navigation is there so a user may choose to navigate through the content manually but also to give a sense visually of how many content items are in the masthead.

• Once opening the masthead the dot navigation disappears, and is only presented again once the user closes the experience.

BUSINESS RULES :• Local markets can launch a total of 3 promotions per category

(cap 7 in total –Global and local)• Local masthead content ordering within the masthead rotation

will be ( 1,2,3 unless overwritten by lead Global masthead cam-paign = local appears 2,3,4)

• Masthead ordering will be chronological

DATA ENTRY REQUIREMENTS :• Locked spec for image upload –380px x 990px (masthead rota-

tion) 550px x 990px (expanded)• Title mandatory field• Subtitle optional field• Short copy mandatory field• Character limit per text field

h.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

NOTES

CALL TO ACTION CALL TO ACTION

INTERACTION

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio voluptium fugitatur? Totat-urerspe volendebis aciis imetur maio

20

LMP INTERACTIVE COLLAPSIBLE MASTHEAD III open

1.

d.

a. b. c.

f. i.

e.

g.

1. Open : a. call to action : grid view b. navigation : “Share This”, publish to a

social network c. call to action : collapse masthead d. copy : title e. copy : sub-title f. call to action : previous content item g. copy : body copy h. graphic : hero image i. call to action : next content item j. call to action

LMP : All content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome : “Next” label text? (dependent on final creative)].

Global: All content is provided by XML files.

j.

h.

FUNCTIONALITY :• Masthead expands to become full experience• Grid view button leads to grid of all content• CTA buttons lead to external page (internal adidas page/ or

external URL opening in a new browser window)• Share button allows user to share the URL to the opening

page of the experience within social networks for locale• Close button to revert to original state and continue mast-

head rotation

BUSINESS RULES :• Grid button must appear when there is more than one content

page within experience• CTA buttons links must drive to either internal adidas page

or external site (opening in a new browser window) must not drive within the experience

DATA ENTRY REQUIREMENTS :• Character limit per text field• Optional Inclusion of additional copy box under short copy

for extended copy• CTA’s to allow market to enter own copy and URL to appear

under copy• Share function –upload of set spec thumbnail image• Share function –short copy entry that will appear on social

network site to drive visitors to the promotion

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

TITLE TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

TITLE

NAVIGATION NAVIGATION

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio voluptium fugitatur? Totaturerspe volendebis aciis imetur maio

TITLE

TITLE

TITLE

NOTES

NOTES

INTERACTION

INTERACTION

NAVIGATION NAVIGATION

TITLE COPYSUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui omniendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio voluptium fugitatur? Totat-urerspe volendebis aciis imetur maio

21

LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW

LMP INTERACTIVE COLLAPSIBLE MASTHEAD III GALLERY VIEW 5+ content items

1.

1.

c.

e.d.

a.

e.

b.

a.

b.

c.

g.

f.

f.

d.

1. Collapsed : a. call to action : close b. call to action : previous content item c. content item d. copy : title mandatory field e. graphic : icon to identify as video, image or adidas

item f. call to action : toggle gallery display (draggable) g. call to action : next content item

1. Collapsed : a. call to action : previous content item

(does not appear on initial view of the gallery)

b. content item c. graphic : icon to identify as video, image

or adidas item d. call to action : toggle gallery display e. call to action : close f. call to action : next content item

FUNCTIONALITY :• Holds minimum 2 pieces of content, maximum 5 pieces of

content• Can scroll left and right through content• Each content piece can be selected to open full view• Close button to close experience

BUSINESS RULES :• Maximum content -5 pieces• Image Resize• Lead content piece will always appear in left hand position, move

through content to the right

DATA ENTRY REQUIREMENTS :• Ordering of content to be defined by order number not by con-

tent type• Relevant icon to be attached to each content piece (video, image

or adidas article)

As soon as gallery has 6 or more content items it will be presented as a grid. The maximum presented in the content grid for a single view is 12 items.

User may navigate via dragging the interface, the back and forth ar-rows or the toggle on the bottom

FUNCTIONALITY : • Holds certain amount of content –initial screen 12 –Maximum

24 content pieces• Scroll right through content• Each content piece can be selected to open full view• Close button to close experience• Left hand locked –no need to have navigation arrow upon load-

ing to travel to the left• Ordering top to bottom

BUSINESS RULES :• Maximum content –Maximum 24 pieces• Image resize -size• Lead content piece will always appear in left hand position,

move through content top to bottom, then left to right

DATA ENTRY REQUIREMENTS :• Ordering of content to be defined by order number not by

content type• Relevant icon to be attached to each content piece (video, im-

age or adidas article)

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

TITLE

TITLEi

NOTES

NOTES

INTERACTION

INTERACTION

22

LMP INFORMATION PAGE VIEW

FUNCTIONALITY :• Title always appears under the image• Grid view button leads to grid of all content• Share button allows user to share the URL of the lead page of

the experience• Arrows left and right to scroll through previous/ next piece of

content• Close button to close experience

BUSINESS RULES • Character lengths• Title needs to be included and always appears under image

DATA ENTRY REQUIREMENTS :• Set spec for image upload• Ordering of content to be defined by order number not by con-

tent type• Relevant icon to be attached to each content piece• Mandatory field for title of image

FUNCTIONALITY • Info button displays title and short informative copy• Grid view button leads to grid of all content• Share button allows user to share the URL of the lead page of

the experience• Arrows left and right to scroll through previous/ next piece of

content• Close button to close experience

BUSINESS RULES • Character lengths• Title needs to be included and always appears under image• Info button appears if info is included

DATA ENTRY REQUIREMENTS :• Unique reference id for each video to be uploaded• Ordering of content to be defined by order number not by con-

tent type• Relevant icon to be attached to each content piece• The title and description of the video will be pulled in directly

from the database housing the adiTV videos

LMP VIDEO PAGE VIEW

1. a. call to action : return to grid view b. call to action : previous c. content area d. navigation : “Share This”, publish to a

social network e. call to action : close experience f. call to action : next g. copy : title

1. a. call to action : return to grid view b. call to action : previous c. content area d. call to action : play video e. navigation : “Share This”, publish to a

social network f. call to action : close experience g. call to action : next h. call to action : info (optional) / see image view for functionality i. copy : title

1.

1.

b.

b.

c.

c.

d.

e.

f.

f.

g.

g.

h. i.

d.

e.a.

a.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

TITLEi

i

NOTES

NOTES

INTERACTION

INTERACTION

Officimpos et laboresequi quationse adicae optat pa verro tem re rae nonet harunt odit, odit, sunturi tiuntius audam fuga. Ut lam, soluptas veritaturi tem as et ut into voluptat.

TITLE COPY SUBTITLE

Body copy. Mi, ipientius, sunture incidus exceatia qui om-niendel iunte dus exerror porerup istiorehent int maionec aerectum et voluptium fugitatur? Totaturerspe volendebis aciis imetur maio voluptium fugitatur? Totaturerspe volende-bis aciis imetur maio BUY NOW

LEARN MORE

23

LMP IMAGE VIEW

LMP PRODUCT VIEW

FUNCTIONALITY :• Title always appears under the image• Roll over of info icon displays short informative copy• Grid view button leads to grid of all content• Share button allows user to share the URL of the lead page of

the experience• Arrows left and right to scroll through previous/ next piece of

content• Close button to close experience

BUSINESS RULES • Character lengths• Title needs to be included and always appears under image• Info button appears if info is included

DATA ENTRY REQUIREMENTS :• Set spec for image upload• Ordering of content to be defined by order number not by con-

tent type• Relevant icon to be attached to each content piece• Mandatory field for title of image• Optional field for info copy

FUNCTIONALITY • Info button displays title and short informative copy• Grid view button leads to grid of all content• Share button allows user to share the URL of the lead page of

the experience• Arrows left and right to scroll through previous/ next piece of

content• Close button to close experience

BUSINESS RULES • Character lengths• Title needs to be included and always appears under image• Info button appears if info is included• Learn more and Buy no tabs are PID driven, and appear if acti-

vated within the PID• Title, sub-title, body copy, info copy & product image are all

pulled from the PID

DATA ENTRY REQUIREMENTS :• Article id to be uploaded• Ordering within content to be defined by order number not by

content type• Relevant icon to be attached to each content piece• Mandatory field for title of image• Optional field for info copy (is pulled from the PID)

1. a. call to action : return to grid view b. call to action : previous c. content area d. navigation : “Share This”, publish to a

social network e. call to action : close experience f. copy & graphic : rollover state of the info icon if there is associated copy g. copy : title h. call to action : next

1. a. call to action : return to grid view b. call to action : previous c. copy : title (pulled from PID) d. copy : sub-title (pulled from PID) e. copy : title (pulled from PID) f. call to action : info g. graphic : product shot (pulled from PID) h. navigation : “Share This”, publish to a

social network i. call to action : close experience j. navigation : learn more k. navigation : buy now (if applicable) l. call to action : next

1.

1.

b.

b.

c.

c..d..

e..f..

g.

e..

i.

h.

j. l.

k.

f. g.

d.

h.

a.

a.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

NOTES

NOTES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

PRODUCT TITLE UP TO 2 LINES

SEE THE COLLECTION

SEE PRODUCTS/COLLECTIONSFILTER NAME 3. 4.

24

PREMIUM PRODUCT GRID IV (ATHLETE or NEWS ARTICLE)

SMALL PRODUCT CAROUSEL V (ATHLETE or NEWS ARTICLE)

1.

2. 5.

1. 3.

4.

2.

b.

a.

b.

a. b. c.

a.

1. Product a. graphic : product image b. graphic/Navigation : product /athlete image

2. Filter a. copy : filter name b. form element : drop down c. toggle

3. navigation : active in-line navigation

4. navigation : in active in-line navigation

5. navigation : see all products or collection

Athlete + News Article: Ordering and content is provided by Tridion CMS except Site Chrome from XML files [Site Chrome: “See the collection”]. Others: Ordering and content is pro-vided by XML files.

1. Navigation : previous arrow

2. Product : a. Graphic : product /athlete image b. Copy : title

3. Navigation : next arrow

4. navigation (optional) : see collection or all products

INTERACTION

INTERACTION

This component is used within the body of the page to showcase products or collections.

Primary use of the product images and copy is to give the user product detail. Though the hyperlinks may be directed to products or collection grids.

Also other content types may be de-livered in this grid, e.g. blogs, videos, articles, events, athletes, etc.

Filters may be used if their exist sub-collections for this presentation.

Alternately a single navigation may also be used to drive to top level product or collection information.

This component is to be used within the body of the page. It may support 1, 2 or 3 products within its confines..

Hyperlinks on the product image and title may drive to either product grid, collec-tions or product detail.

The component may be set up to change the grid one item at a time or the entire grid.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

FEATURE AREA

SUPPORTING COPY AREA, MORE TEXT COULD GO HERE

NAVIGATION

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quia-mus, non res

Agnihil molut quiae occum ant.Litiossi conectio veri conemperia prest ratis simpore volendi ut verupta vel-loru mquibeaque quideribus dusdanditio venim exceatquis et et, erunt es ex essimaior reptatur, ipsaesc iatur, autemporem faccab imint, ut eic to vellect atempedias eumquate nihic temperitas que reici nonseque pa comnimus nones necatio omnimolent facestiasi nonseque la quas solupta necaborerunt que odit quuntin ctustiusam voluptatum doloresequos si ilitibus ipsunt vero maionse repedit magniaestiis disto optatin es eum eos aut qui optat adio magnatque de nobisque occuptatiis is dunt quae culpa si alisquia ius est, incta non con cus ni-hilit vella est ut di cores etureium rempori nostis eatio te delesequia nobit, quae oditis atem iundae dempore perum nihit, sin rerit arum utatet etus abo. Metur as maio qui aliquunt odis ex ex et esero estios dolupta tureped ute vollatem haruntibus restinv endunti nonsed qui qui volore quoditia veniet quibus, quam aut fugit evero consequias quo maio. Nam aut lacestiatis vel id magnime nihicid ebitio exces vel iliquos aut ma sit voluptaepudi con cus est, aut minvel id mo eum eum il iunt, vendicil issinum is eicaborrum doleniae por reroreribus sequi dolorep elibus auda diti seque nestore prationsequi qui dolum nissinc itatur?Ume venteca ectionsed earunt harum, sunt ut res que ni dus soloreium fugitio qui alibus volum ipsum ea cupidel in num etur adi blaturibus et lam, voluptation» READ MORE

download

25

NOTES

NOTES

GENERIC FEATURE Component VI (TOUT)

ARTICLE Component VII (ATHLETE or NEWS ARTICLE)

1. Generic feature component a. copy : title b. copy : supporting copy c. navigation : “Share This”, publish to a social

network d. graphic : image e. navigation (optional) f. call to action : current content g. call to action, other content

All content provided by Tridion CMS.

1. Generic feature component a. graphic : image b. copy : title c. copy : supporting copy d. navigation : read more e. navigation : “Share This”, publish to a social

network f. call to action : download (optional)

1.

a.

b.

f. g.

d.

e.

INTERACTIONThe use of in-line navigation (items f & g) is optional, and should not be used throughout the entire page.

Too many components with in-line navi-gation on the page will be confusing for the user.

5.

a.b. e.

c.

f.

c.

d.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

GALLERY NAME

GALLERY NAME

26

NOTES

NOTES

PHOTO GALLERY Component VIII (ATHLETE or NEWS ARTICLE)

1. Generic feature component a. copy : title b. graphic / call to action : thumbnail of picture c. call to action : current content d. call to action, other content

Athlete + News Article: All content provided by Tridion CMS.

1. Generic feature component a. copy : title b. graphic / call to action : thumbnail of picture c. call to action : close picture d. call to action : current content e. call to action, other content

INTERACTIONOn click of thumbnail of image, image size will grow within the grid to full size

a.

a.

b.

b.

c.

d.

c.

d.

e.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quia-mus, non res

Agnihil molut quiae occum ant.Litiossi conectio veri conemperia prest ratis simpore volendi ut verupta vel-loru mquibeaque quideribus dusdanditio venim exceatquis et et, erunt es ex essimaior reptatur, ipsaesc iatur, autemporem faccab imint, ut eic to vellect atempedias eumquate nihic temperitas que reici nonseque pa comnimus nones necatio omnimolent facestiasi nonseque la quas solupta necaborerunt que odit quuntin ctustiusam voluptatum doloresequos si ilitibus ipsunt vero maionse repedit magniaestiis disto optatin es eum eos aut qui optat adio magnatque de nobisque occuptatiis is dunt quae culpa si alisquia ius est, incta non con cus ni-hilit vella est ut di cores etureium rempori nostis eatio te delesequia nobit, quae oditis atem iundae dempore perum nihit, sin rerit arum utatet etus abo. Metur as maio qui aliquunt odis ex ex et esero estios dolupta tureped ute vollatem haruntibus restinv endunti nonsed qui qui volore quoditia veniet quibus, quam aut fugit evero consequias quo maio. Nam aut lacestiatis vel id magnime nihicid ebitio exces vel iliquos aut ma sit voluptaepudi con cus est, aut minvel id mo eum eum il iunt, vendicil issinum is eicaborrum doleniae por reroreribus sequi dolorep elibus auda diti seque nestore prationsequi qui dolum nissinc itatur?Ume venteca ectionsed earunt harum, sunt ut res que ni dus soloreium fugitio qui alibus volum ipsum ea cupidel in num etur adi blaturibus et lam, voluptation» READ MORE

download

GRAYED OUT AREA IS CONTENT AREAE.G. ARTICLE, VIDEO, IMAGE, FLASH PIECE, ETC.

27

NOTES

SHARE THIS FUNCTIONALITY

1. Sharing / Comment framework a. generic content placeholder b. call to action : “share this”

INTERACTIONThe “Share This” functionality is triggered by the “Share This” icon. Once the user clicks the icon the following happens (the following is Out Of The Box functionality provided by the “Share This” solution)• user is presented with an overlay showing a list of social media plat-

forms and/or web-sites that can be published too.• Once user has chosen a destination site of where they wish to pub-

lish, they are taken to that site.• THE ICON MAY BE PAIRED WITH ANY CONTENT TYPE• THE REST OF THE INTERACTION TAKES PLACE ON THE DESTINA-

TION SITE

a. b.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quia-mus, non res

Agnihil molut quiae occum ant.Litiossi conectio veri conemperia prest ratis simpore volendi ut verupta vel-loru mquibeaque quideribus dusdanditio venim exceatquis et et, erunt es ex essimaior reptatur, ipsaesc iatur, autemporem faccab imint, ut eic to vellect atempedias eumquate nihic temperitas que reici nonseque pa comnimus nones necatio omnimolent facestiasi nonseque la quas solupta necaborerunt que odit quuntin ctustiusam voluptatum doloresequos si ilitibus ipsunt vero maionse repedit magniaestiis disto optatin es eum eos aut qui optat adio magnatque de nobisque occuptatiis is dunt quae culpa si alisquia ius est, incta non con cus ni-hilit vella est ut di cores etureium rempori nostis eatio te delesequia nobit, quae oditis atem iundae dempore perum nihit, sin rerit arum utatet etus abo. Metur as maio qui aliquunt odis ex ex et esero estios dolupta tureped ute vollatem haruntibus restinv endunti nonsed qui qui volore quoditia veniet quibus, quam aut fugit evero consequias quo maio. Nam aut lacestiatis vel id magnime nihicid ebitio exces vel iliquos aut ma sit voluptaepudi con cus est, aut minvel id mo eum eum il iunt, vendicil issinum is eicaborrum doleniae por reroreribus sequi dolorep elibus auda diti seque nestore prationsequi qui dolum nissinc itatur?Ume venteca ectionsed earunt harum, sunt ut res que ni dus soloreium fugitio qui alibus volum ipsum ea cupidel in num etur adi blaturibus et lam, voluptation» READ MORE

GRAYED OUT AREA IS CONTENT AREAE.G. ARTICLE, VIDEO, IMAGE, FLASH PIECE, ETC.

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quia-mus, non res

Agnihil molut quiae occum ant.Litiossi conectio veri conemperia prest ratis simpore volendi ut verupta vel-loru mquibeaque quideribus dusdanditio venim exceatquis et et, erunt es ex essimaior reptatur, ipsaesc iatur, autemporem faccab imint, ut eic to vellect atempedias eumquate nihic temperitas que reici nonseque pa comnimus nones necatio omnimolent facestiasi nonseque la quas solupta necaborerunt que odit quuntin ctustiusam voluptatum doloresequos si ilitibus ipsunt vero maionse repedit magniaestiis disto optatin es eum eos aut qui optat adio magnatque de nobisque occuptatiis is dunt quae culpa si alisquia ius est, incta non con cus ni-hilit vella est ut di cores etureium rempori nostis eatio te delesequia nobit, quae oditis atem iundae dempore perum nihit, sin rerit arum utatet etus abo. Metur as maio qui aliquunt odis ex ex et esero estios dolupta tureped ute vollatem haruntibus restinv endunti nonsed qui qui volore quoditia veniet quibus, quam aut fugit evero consequias quo maio. Nam aut lacestiatis vel id magnime nihicid ebitio exces vel iliquos aut ma sit voluptaepudi con cus est, aut minvel id mo eum eum il iunt, vendicil issinum is eicaborrum doleniae por reroreribus sequi dolorep elibus auda diti seque nestore prationsequi qui dolum nissinc itatur?Ume venteca ectionsed earunt harum, sunt ut res que ni dus soloreium fugitio qui alibus volum ipsum ea cupidel in num etur adi blaturibus et lam, voluptation» READ MORE

GRAYED OUT AREA IS CONTENT AREAE.G. ARTICLE, VIDEO, IMAGE, FLASH PIECE, ETC.

downloadMost popular services

email

service name

service name

service name

service name

service name

service name

service name

service name

service name

facebook copy link save

x

28

NOTES

SHARE THIS FUNCTIONALITY ROLL OVER STATE

1. Sharing / Comment framework a. copy b. close c. email this : generates a form that user may use to send a link to d. facebook link (as an example) e. copy link : generates a text box that user may copy the link from f. save : to share this profile g. sharing services

INTERACTIONThe “Share This” functionality is triggered by the “Share This” icon. Once the user clicks the icon the following happens (the following is Out Of The Box functionality provided by the “Share This” solution)• user is presented with an overlay showing a list of social media plat-

forms and/or web-sites that can be published too.• Once user has chosen a destination site of where they wish to pub-

lish, they are taken to that site.• THE ICON MAY BE PAIRED WITH ANY CONTENT TYPE• THE REST OF THE INTERACTION TAKES PLACE ON THE DESTINA-

TION SITE

a.c.

g.

h.

d. e. f.b.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 14

ARTICLE TITLEEhenda dipsunt laut et, sintibus excestrum, id qui consention rehent ist eatis adiosam dolor ari beaquo dolore nobitas peritia sedit dolum re ipis re ellaborest faci dent, quam, utectae accae inctem eum quo tem late sitam excest, a nullati sit faccaborit qui consendempor aut officiae consequi dolum quo dolupta nati delitatur a perepel lorit, ipsant.Met rersped exerum fugiam core eveliquo enet quo blab intur, aribusanto quia-mus, non res

COMMENTS see all comments

comment

Ne tum pernium neque pota Sere maciti, nonc fur, que nemquam adeestum morivemus dit? Caucen-demus. Ve, catrat fintis. Uctur. Vivit vignoveres audam egilies es? Serdit? que condam orununc ferra quem ta, se tem is ora inam Romnihi licit; nit, tus vis consultorum num in dit omnes ponsilic fured Catilium inte, novestrae con

Ne tum pernium neque pota Sere maciti, nonc fur, que nemquam adeestum morivemus dit? Caucen-demus. Ve, catrat fintis. Uctur. Vivit vignoveres audam egilies es? Serdit? que condam orununc ferra quem ta, se tem is ora inam Romnihi licit; nit, tus vis consultorum num in dit omnes ponsilic fured Catilium inte, novestrae con

Ne tum pernium neque pota Sere maciti, nonc fur, que nemquam adeestum morivemus dit? Caucen-demus. Ve, catrat fintis. Uctur. Vivit vignoveres audam egilies es? Serdit? que condam orununc ferra quem ta, se tem is ora inam Romnihi licit; nit, tus vis consultorum num in dit omnes ponsilic fured Catilium inte, novestrae con

F SHARE

I LIKE IT

29

NOTES

FACEBOOK CONNECT FUNCTIONALITY

1. Facebook connect : call to action to share, which will pub-lish an instance of the content to the users Facebook page.

2. Comment : call to action for a user to add comments

3. Like this : icon with copy : call to action for user to indicate that they like this product

4. Comment/Review a. copy : title b. navigation : see all comments c. copy : comment(s)

INTERACTIONFor Facebook sharing functionality the user will have to have a Facebook account in order to either share, like or leave a comment.

3.

1.

3.2.

a. b.

c.

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 1430

GLOSSARY

• athlete (CONTENT TYPE) : an Athlete is similarly a rich content type that rep-resents an Athlete or Team. It can also contain an image gallery, video gallery, and featured products. This would be represented in an Athlete Detail page and a Athletes List page. [And may also power an Athlete Tout]

• The detail page would be a composite of potential modules; Image Gallery, Video Gallery [adi.tv player], featured products, etc.

• call to action : differs from navigation in that it triggers something functional but does not necessarily take the user to a new web page (e.g. I like this, publishes something to the users facebook page, but does not take them to a new page)

• components : are the individual pieces that make up a template, within Tridion there are two kinds of components, text & multimedia

• navigation : takes user from one web page to another page, site, etc.• news article (CONTENT TYPE) : a News Article is a content type that repre-

sents a news article on the site. This can also be a blog post, i.e. ETN. It is a rich type and can have an image gallery, video gallery, and featured products associated with it.

• “Share This” : proprietary social networking tool, allows users to publish to a variety of social media platforms

• templates : commonly referred to schematics or wireframes, is the overall presentation layer for the web-page, it is made up of components. Within Tridion is refers overall page structure

• tout (CONTENT TYPE) : has a specific module that presents it, essentially promotes another part of the site, or an external site, on a particular page. An example is a link to an Athletes external blog or Twitter page. It contains copy and an image and a link.

30

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 1431

CHANGE LOG

DATE CHANGE(s) AUTHOR VERSION

03 DEC 09

09 DEC 09

11/12 DEC 09

14 DEC 09

15 DEC 09

16 DEC 09

03 JAN 10

05 JAN 10

11 JAN 10

24 JAN 10

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

V. 4 (indd v.25)

V. 5 (indd v.26)

V. 5 (indd v.27-28)

V. 5 (indd v.29)

V. 5 (indd v.30)

V. 6 (indd v.31)

V. 7 (indd v.32)

V. 7 (indd v.33)

V. 8 (indd v.34)

V. 9 (indd v.35)

• removal of specific landing page for collections• removal of interstitial page for collections• removal of interstitial page for sub-collections• removal of specific page for blogs• grid updated to reflect a 12 grid instead of 4 grid layout• product grid reworked to include product/collection navigation above the grid• product detail includes call outs for miCoach & miAdidas where available• product detail buy now changed to find retail location• component added for article type• reduced article template to one page example, and an FPO page• component added for image gallery

• removal of component I (premium product gallery), redundant experience will reside within a masthead

• process flow reworked to reflect last weeks meetings (not final)

• interactive masthead redone to reflect changes S/S 2010 (MCD, more con-tent in the masthead itself)

• addendum added for sharing/social community framework

• S/S 2010 site-map added• functionality for the picture gallery within-page added (component VII)

• copy/editorial changes

• update of mastheads per MCD updates

• update of mastheads per MCD updates

• update of mastheads per comments from R. Lowe• update of view all video functionality : added two variations, need feedback

on both• option 1 : in-page video experience• option 2 : dedicated adiTV player page

• MCD changed to LMP (Local Masthead Project)• final busines rules for LMP per R. Lowe• completion of in-page video experience for “View All Video” functionality

• “Share This” functionality updated throughout the document, and addendum changed

• Removal of the “like this” functionality as this will be replaced with the “Share This” functionality

31

© 2010 • RIOT • ADIDAS • GLOBAL FRAMEWORK : PERFORMANCE • 25.03.2010 • V. 1432

CHANGE LOG

DATE CHANGE(s) AUTHOR VERSION

25 JAN 10

31 JAN 10

01 FEB 10

08 FEB 10

25 MAR 10

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

SANSONE, D

V. 10 (indd v. 36)

V. 11 (indd v. 37)

V. 12 (indd v. 38)

V. 13 (indd v. 39)

V. 14 (indd v. 40)

• integration of feedback from S. Jones• change of components to modules for common verbiage• inclusion of Tout, Athlete & News Article modules• Tout, Athlete & News Article modules, definitions added to glossary• Share This and Gigya sharing flows added to conceptual model• removal of F/W 2009 sitemap

• addressed feedback from J. Palleschi• interface for ShareThis rollover state added• page added for Facebook connect interface

• publishing notes added in blue• FB connect interface finished

• split of LMP and GLOBAL mastheads

• added single athlete vs. multiple athlete pages

32