A project I worked on with the nice folks at 5by5 LA.

1. FRANCHISE Site
Wireframes
V3 Jan 31 2012

2. INDEX
Page 04 - Site Map
Page 05 - 0.5 Territory Select + 1.0 Age Gate
Page 07 - 2.0 Homepage
Page 13 - 3.0 News
Page 23 - 4.0 Media
Page 35 - 5.0 Game Info
Page 49 - 6.0 Forums
Page 51 - 7.0 Darksiders Series
Page 53 - 8.0 Merchandise
Page 56 - 9.0 Pre-Order/Buy
Page 59 - 10.0 Login & Registration
Darksiders II WIReFRAMES PAGE 2

3. SITE MAP
Darksiders II WIReFRAMES PAGE 3

4. Darksiders II WIReFRAMES PAGE 4
SITE MAP
0.5 - First interaction is to
country.
1.0 - Verify age.
2.0 - Homepage, features
content, visually engaging.
3.0 - Latest news and archive
facility.
4.0 - Media content: images and
videos
5.0 - Game information
content: the story, weapons and
characters in more detail. Story
is featured on the landing page.
6.0 - Forums.
7.0 - Darksiders Series. Index
page showing each game in the
Series so far, linking to
individual sites for each game.
Should open in a new window.
8.0 - Purchase merchandise.
9.0 - Call to action consistent to
every page, links to a dedicated
page showing offers and pre
order information. Subsequent
link to shop and retailer sites.

5. 0.5 Territory select + 1.0 Age Gate
Darksiders II WIReFRAMES PAGE 5

6. Darksiders II WIReFRAMES PAGE 6
1.0 AGE GATE
1.1 - THQ global header bar.
1.2 - Darksiders II logo/branding.
1.3 - Step 1 - Protected content.
User submits age and clicks
enter. Yes - presents the user
with country selection option.
No - redirects back to the THQ
web site.
1.4 - Step 2 - Choose Your
Country. Cover-flow style
menu to help users find their
respective country.
10.10
1.3 1.4
1.1
1.2

7. 2.0 HOMEPAGE
Darksiders II WIReFRAMES PAGE 7

8. Darksiders II WIReFRAMES PAGE 8
2.0 HOMEPAGE
2.0 - THQ Branding Bar.
Includes country selection, login
and registration functionality.
2.1 - Logo. Darksiders II Logo
Image. Global link back to the
homepage..
2.2 - Primary Navigation. Five
primary navigation items.
2.3 - Social Navigation
Bar. Quick access to social
destinations.
2.4 - Pre-order/Buy. Should be
placed outside of the primary
navigation area but consistent
to all pages.
2.5 - Release Date. System text
that confirms release date.
2.6 - Newsletter sign up. Click to
reveal a form entry box to add
name, email address and submit
button.
2.7 - Carousel and Chapter
Controls. See 6.0 (Page 11).
2.8 - General Promos. Three
graphical content areas used to
promote content and marketing.
2.9 - News Feed. Feed should
2.1
2.0
2.2
2.3
2.4
2.5 2.6
2.7
2.8

9. Darksiders II WIReFRAMES PAGE 9
show latest news and media. ‘All
News’ links to the News landing
page.
2.10 News Abstract. Must show
date, title, thumbnail, overview
paragraph and link to ‘Read
more’.
2.11 - Like/Share. Ability to like/
share (social) and show current
count of likes/shares.
RIGHT CHANNEL
2.12 - Facebook. Utilizing the
‘Like Box’ social plugin from
Facebook (http://developers.
facebook.com/docs/reference/
plugins/like-box/). Displaying
(one) the latest post.
2.13 - Twitter. Follow a similar
visual design format as the
Facebook module. Include
avatar, address and link to
follow. Pull in most recent Tweet.
2.14 - Image Carousel. Display
various graphical content in
an interactive (cover-flow
etc.) style. Each image should
have a title and an option for
decriptive text and links.
2.15 - Pre-Order/Buy. Same
2.10
2.11
2.12
2.13
2.9

10. Darksiders II WIReFRAMES PAGE 10
functionality (Style can vary) as
the button in the header.
2.16 - Footer. Include: ESRB
logo and Rating icon (ability to
remove if necessary).
2.17 - Logo Garden. Include ‘logo
garden’: THQ logo, 4A logo,
Xbox 360 logo, Xbox live logo,
PlayStation family bug, PS3
logo, PlayStation network logo,
PC DVD-ROM logo, Powered by
Nvidia logo, ATI logo, Territory
specific logo 1, Territory specific
logo 2.
2.18 - Legal Copy. Include
standard site legal copy.
General Note. Add check-box
in the CMS in order to prevent
any duplication of Media in the
Homepage news stream.
2.15
2.16
2.17
2.18
2.14

11. Darksiders II WIReFRAMES PAGE 11
2.6 HOMEPAGE CAROUSEL
A. Main image with headline and
descriptive copy.
B. Image only.
C. Just video (YouTube player)
with the option of headline text.
Functionality should include:
• Each chapter will use a ‘slide’
transition style.
• Carousel must be updated
from the CMS.
• Carousel should take at least
4 pieces of content, would
recommend upper limit of 6
items to ensure items.
• Carousel must be able to play
YouTube hosted videos.
• Must be able to display a
selected state.
• Carousel should auto scroll
through the 4 items and be user
initiated.
• Content should show
promotional items, key message
and information.
• Arrows left and right will
enable user to flick through
A
B
C

12. Darksiders II WIReFRAMES PAGE 12
items, coins will show
number of items available and
position of viewable item.
• Utilize HTML (System
generated) type for copy.
Consider a web font.

13. 3.0 News
Darksiders II WIReFRAMES PAGE 13

14. Darksiders II WIReFRAMES PAGE 14
3.0 NEWS LANDING
3.1 - News. New items should be
ordered by most recent first. If
user selects to view the news
release, it would open in a new
page. News items should be
restricted to max of 10.
3.2 - Featured News. Feature
the latest news item at the top
of the page. Overlay title on the
image.
3.3 - Pagination. Pagination
will be required for users to
scroll through pages of news
items. Second placement at the
bottom of the page.
3.4 - News Categories. News
Categories. If categories within
the news section are required.
3.5 - Facebook. Same as
homepge.
3.6 - Twitter. Same as homepge.
3.7 - Image Carousel. Same as
homepge.
3.8 - Right Channel Promo.
General promos can be used in
the right channel.
3.9 News Feed Promo. Multiple
3.1 3.3 3.4
3.5
3.2

15. Darksiders II WIReFRAMES PAGE 15
promos can be used throughout
the News stream to breakup
content.3.6
3.7
3.8

16. Darksiders II WIReFRAMES PAGE 16
3.9

17. Darksiders II WIReFRAMES PAGE 17

18. Darksiders II WIReFRAMES PAGE 18

19. Darksiders II WIReFRAMES PAGE 19
3.1 NEWS DETAIL
3.1.1 - News. Full article sits
under the page header.
3.1.2 - Back to News. Back to
News. Returns you to the News
homepage.
3.1.3 - Article Title. Must show
date, title, thumbnail, overview
paragraph and link to ‘Read
more’.
3.1.4 - In-page Graphics. Ability
to place a variety of image
content within the body of the
article.
3.1.5 - Promo. Sits above
comments.
3.1.6 - Comments. Follow the
comments implementation
from the UFC Undisputed
site (For example: http://www.
ufcundisputed.com/go/article/
view/gameplay_news/252549/
the_most_authentic_ufc_
audio_t
RIGHT CHANNEL - Same as
News landing page.
3.1.1 3.1.2
3.1.3

20. Darksiders II WIReFRAMES PAGE 20
3.1.4

21. Darksiders II WIReFRAMES PAGE 21
3.1.5
3.1.6

22. Darksiders II WIReFRAMES PAGE 22

23. 4.0 MEDIA
Darksiders II WIReFRAMES PAGE 23

24. Darksiders II WIReFRAMES PAGE 24
4.1 VIDEO LANDING
4.1.1 - Video. Media section
defaults to the Video page.
4.1.2 - Videos, Screenshots and
Concepts Navigation. Users
click buttons to view or swap
content.
4.1.3 - Featured Video. The
latest video posted is featured
here.
4.1.4 - Video Pagination. Left
and right arrow help navigate
back and forth between videos.
4.1.5 - Video Description. Must
show date, title, overview
paragraph and social
navigation.
4.1.6 - Latest Video. The most
recent videos are ranked here.
4.1.7 - Category Menu. Video
categories are contained
within a drop-down menu (If
necessary).
4.1.8 - Pagination. Navigation
to additional pages of video.
Secondary placement at the
bottom of the page.
4.1.9 - Video On-State. The
4.1.1
4.1.2
4.1.4
4.1.3

25. Darksiders II WIReFRAMES PAGE 25
featured video at the top of the
page is the latest video, and this
is the corresponding thumbnail.
The ‘latest video’ row of videos
acts as a play list. Clicking the
video pagination navigates
users along this row of videos.
4.1.5
4.1.6
4.1.8
4.1.9
4.1.7

26. Darksiders II WIReFRAMES PAGE 26

27. Darksiders II WIReFRAMES PAGE 27
4.2 VIDEO DETAIL
4.2.1 - Video. Large video
player.
4.2.2 - Video Description.
Must show date, title, overview
paragraph and social
navigation.
4.2.1

28. Darksiders II WIReFRAMES PAGE 28
4.2.2

29. Darksiders II WIReFRAMES PAGE 29
4.3 SCREENSHOTS LANDING
4.3.1 - Screenshots. Contains
screenshot imagery from the
game.
4.3.2 - Videos, Screenshots and
Concepts Navigation. Users
click buttons to view or swap
content.
4.3.3 - Featured Image. The
latest image posted is featured
here.
4.3.4 - Images Pagination. Left
and right arrow help navigate
back and forth between images.
4.3.5 - Images Description.
Must show date, title, overview
paragraph and social
navigation.
4.3.6 - Latest Image. The most
recent images are ranked here.
Each row represents a gallery.
4.3.7 - Category Menu. Image
categories are contained
within a drop-down menu (If
necessary).
4.3.8 - Pagination. Navigation
to additional pages of images.
Secondary placement at the
bottom of the page.
4.3.4
4.3.2
4.3.1
4.3.3

30. Darksiders II WIReFRAMES PAGE 30
4.3.9 - Image On-State. The
featured image at the top of
the page is the latest image,
and this is the corresponding
thumbnail. The ‘latest image’
row of images acts as a play list.
Clicking the image pagination
navigates users along this row
of images.
Concepts section. - Use the
same layout or Screenshots.
4.3.5
4.3.6 4.3.7
4.3.9
4.3.8

31. Darksiders II WIReFRAMES PAGE 31

32. Darksiders II WIReFRAMES PAGE 32
4.4 SCREENSHOTS DETAIL
4.4.1 - Screenshot. Large
screenshot image.
4.4.2 - Image Description.
Must show date, title, overview
paragraph and social
navigation.
4.4.3 - Comments. Follow the
comments implementation
from the UFC Undisputed
site (For example: http://www.
ufcundisputed.com/go/article/
view/gameplay_news/252549/
the_most_authentic_ufc_audio_
experience_yet!_-_new_video).
4.4.4 - Right Channel. Contains
the screenshot category
navigation drop-down (If
necessary). The three latest
screenshot images appear next.
4.4.5 - Right Channel Promo.
Similar functionality to the main
body channel promo.
CONCEPTS LANDING AND
DETAIL PAGE WILL FOLLOW
THE SAME FORMAT AT
SCREENSHOTS.
4.4.1

33. Darksiders II WIReFRAMES PAGE 33
4.4.3
4.4.4
4.4.2

34. Darksiders II WIReFRAMES PAGE 34
4.4.5

35. 5.0 GAME INFO
Darksiders II WIReFRAMES PAGE 35

36. Darksiders II WIReFRAMES PAGE 36
5.0 GAME INFO LANDING
5.1 - Section Navigation. Story,
Characters and Loot are the
three key destinations for this
section.
5.2 - Video. Video plays
selected video from the CMS.
5.3 - Game Info. General
information about the section/
game.
5.4 - Body Content. Stories,
Characters and Loot body
content. Overview of the three
underlying sections. No complex
functionality required and
layout will vary based off of final
artwork and content (Continues
on next page).
5.1
5.2
5.3
5.4

37. Darksiders II WIReFRAMES PAGE 37

38. Darksiders II WIReFRAMES PAGE 38
5.1 GAME INFO: STORY
5.1.1 - Story. The game story,
information lives here.
5.1.2 - Map. World map displays
the relevant countries/cities
for the story. Clicking on a pin
reveals a window for more
information (See next page).
5.1.3 - Title. Ability to add
categories/section within the
body area.
5.1.4 - List. List style block of
content to highlight key points
from the story.
5.1.1
5.1.2

39. Darksiders II WIReFRAMES PAGE 39
5.1.3 5.1.4

40. Darksiders II WIReFRAMES PAGE 40

41. Darksiders II WIReFRAMES PAGE 41
5.1 GAME INFO: STORY: MAP
OVERLAY
Displaying an overlay once
a user has clicked on a pin
in the map. Should have the
ability to play videos and view
images (with thumbnail style
navigation).

42. Darksiders II WIReFRAMES PAGE 42
5.2 GAME INFO: CHARACTERS
5.2.1 - Characters Landing Page.
Detailed information about the
characters is in this section.
5.2.2 - Large Character Image.
‘Death’ is the default character
on the landing page.
5.2.3 - Character Image
Navigation. Small thumbnails
sit to the right of the main
character image. Clicking
swaps to the new character
image.
5.2.4 - Characters Navigation.
Clicking this button pulls up the
bottom of the page (anchor link
style) to reveal all characters.
Left and right arrows allow
you to navigate back and forth
between characters.
5.2.5 - Character Name.
5.2.6 - Social Links. Social menu
bar to share links.
5.2.7 - Descriptive copy.
Ability to add general copy for
character description.
5.2.8 - Video and Image Gallery.
Clicking on the thumbnails
swaps images or videos.
5.2.1
5.2.2 5.2.3 5.2.4
5.2.5
5.2.6
5.2.7

43. Darksiders II WIReFRAMES PAGE 43
5.2.9 - Filters. By default all of
these categories are checked.
Users can turn off the category
they don’t want to view.
5.2.10 - Characer Categories.
The three character categories
are presented.
5.2.11 - Rollovers. Rollover
thumbnails to reveal a
small information box with
a thumbnail, title, short
description, and button for that
character. Left and right arrows
navigate to the previous and
next characters.
5.2.8
5.2.9
5.2.10

44. Darksiders II WIReFRAMES PAGE 44
5.1.11

45. Darksiders II WIReFRAMES PAGE 45

46. Darksiders II WIReFRAMES PAGE 46
5.3 GAME INFO: LOOT
5.3.1 - Loot. Detailed information
about the Loot is in this section.
5.3.2 - Video. Video plays
selected video from the CMS.
5.3.3 - Loot Info. General
information about the section/
game.
5.3.4 - Loot Navigation. The
Loot navigation has the same
functionality as the Charcters
page.
5.3.1
5.3.2
5.3.3

47. Darksiders II WIReFRAMES PAGE 47
5.3.4

48. Darksiders II WIReFRAMES PAGE 48

49. 6.0 FORUMS
Darksiders II WIReFRAMES PAGE 49

50. Darksiders II WIReFRAMES PAGE 50
6.0 FORUMS
Utilize the strategy and
functionality from the UFC
Undisputed web site (Example
implementation: http://www.
ufcundisputed.com/go/forum/
viewboard).

51. 7.0 Darksiders Series
Darksiders II WIReFRAMES PAGE 51

52. Darksiders II WIReFRAMES PAGE 52
7.0 DARKSIDERS SERIES
7.1 - Darksiders 2. Top featured
area used to promote the latest
game. Use art + messaging and
link out to Pre-Order/Buy.
7.2 - Darksiders 1. Art, title,
description and link to buy the
Darksiders 1 game.
7.1
7.2
7.3

53. 8.0 MERCHANDISE
Darksiders II WIReFRAMES PAGE 53

54. Darksiders II WIReFRAMES PAGE 54
8.0 MERCHANDISE
8.1 - Merchandise. All
merchandise related to the
game lives here.
8.2 - Category Menu. Contains
the Merchandise category
navigation drop-down (If
necessary).
8.3 - Pagination. Navigation
to additional pages of
merchandise. Secondary
placement at the bottom of the
page.
8.4 - Featured Content. Top
featured area used to promote
featured Merchandise.
8.5 - Category Rows.
Merchandise is presented by
category (Shirts, Comics etc.).
8.6 - Product Information.
Large product thumbnail with
title and link to ‘Buy Now’.
We’re making the assumption
that a new window will open
for the THQ Shop (http://store.
thq.com/store/thq/en_US/
DisplayHomePage?sticky_
menu=20399).
8.7 - Promo. Sits above the
8.1
8.2 8.3
8.4
8.5

55. Darksiders II WIReFRAMES PAGE 55
footer.
8.6
8.7

56. 9.0 PRE-ORDER/BUY
Darksiders II WIReFRAMES PAGE 56

57. Darksiders II WIReFRAMES PAGE 57
9.0 PRE-ORDER/BUY
9.1 - Pre-order/Buy. Destination
for users to purchase the
product. Title will change when
game is fully available for sale
and will no longer require the
pre-order messaging.
9.2 - Country Selection.
Users use the drop-down
menu to select their country.
Results in the body of the
page will change based off of
country. Key product art and
messaging is relevant here.
See the UFC site for reference
implementation: http://www.
ufcundisputed.com/preorder.
9.3 - Product Information.
Includes title, short description,
art and links for applicable
retailer.
9.4 - Promo. Sits above the
footer.
9.1
9.2
9.3

58. Darksiders II WIReFRAMES PAGE 58
9.4

59. 10.0 LOGIN & REGISTRATION
Darksiders II WIReFRAMES PAGE 59

60. Darksiders II WIReFRAMES PAGE 60
10.0 LOGIN & REGISTRATION
Utilize the strategy and
functionality from the THQ
Branding bar. Login and Register
content is revealed as a pop-
up (Example implementation:
http://www.ufcundisputed.com).
10.10