global framework - burnthebox.netburnthebox.net/lavoro/adidas_spf_v14.pdf · global framework :...
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
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