Darksiders Video Game Wireframes

2,390 views
2,231 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,390
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Darksiders Video Game Wireframes

  1. 1. FRANCHISE Site Wireframes V3 Jan 31 2012
  2. 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. 3. SITE MAP Darksiders II WIReFRAMES PAGE 3
  4. 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. 5. 0.5 Territory select + 1.0 Age Gate Darksiders II WIReFRAMES PAGE 5
  6. 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. 7. 2.0 HOMEPAGE Darksiders II WIReFRAMES PAGE 7
  8. 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. 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. 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. 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. 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. 13. 3.0 News Darksiders II WIReFRAMES PAGE 13
  14. 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. 15. Darksiders II WIReFRAMES PAGE 15 promos can be used throughout the News stream to breakup content.3.6 3.7 3.8
  16. 16. Darksiders II WIReFRAMES PAGE 16 3.9
  17. 17. Darksiders II WIReFRAMES PAGE 17
  18. 18. Darksiders II WIReFRAMES PAGE 18
  19. 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. 20. Darksiders II WIReFRAMES PAGE 20 3.1.4
  21. 21. Darksiders II WIReFRAMES PAGE 21 3.1.5 3.1.6
  22. 22. Darksiders II WIReFRAMES PAGE 22
  23. 23. 4.0 MEDIA Darksiders II WIReFRAMES PAGE 23
  24. 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. 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. 26. Darksiders II WIReFRAMES PAGE 26
  27. 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. 28. Darksiders II WIReFRAMES PAGE 28 4.2.2
  29. 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. 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. 31. Darksiders II WIReFRAMES PAGE 31
  32. 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. 33. Darksiders II WIReFRAMES PAGE 33 4.4.3 4.4.4 4.4.2
  34. 34. Darksiders II WIReFRAMES PAGE 34 4.4.5
  35. 35. 5.0 GAME INFO Darksiders II WIReFRAMES PAGE 35
  36. 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. 37. Darksiders II WIReFRAMES PAGE 37
  38. 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. 39. Darksiders II WIReFRAMES PAGE 39 5.1.3 5.1.4
  40. 40. Darksiders II WIReFRAMES PAGE 40
  41. 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. 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. 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. 44. Darksiders II WIReFRAMES PAGE 44 5.1.11
  45. 45. Darksiders II WIReFRAMES PAGE 45
  46. 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. 47. Darksiders II WIReFRAMES PAGE 47 5.3.4
  48. 48. Darksiders II WIReFRAMES PAGE 48
  49. 49. 6.0 FORUMS Darksiders II WIReFRAMES PAGE 49
  50. 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. 51. 7.0 Darksiders Series Darksiders II WIReFRAMES PAGE 51
  52. 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. 53. 8.0 MERCHANDISE Darksiders II WIReFRAMES PAGE 53
  54. 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. 55. Darksiders II WIReFRAMES PAGE 55 footer. 8.6 8.7
  56. 56. 9.0 PRE-ORDER/BUY Darksiders II WIReFRAMES PAGE 56
  57. 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. 58. Darksiders II WIReFRAMES PAGE 58 9.4
  59. 59. 10.0 LOGIN & REGISTRATION Darksiders II WIReFRAMES PAGE 59
  60. 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

×