CSFV Games and Achivement Pages Redesign UI Prototype

Project Overview

This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.

In this challenge you will be updating games and achievement pages to match the provided storyboard.

Competition Task Overview

The main goal of this contest is to produce HTML/CSS/JS prototype of the provided Storyboard following the outlined requirements below.

Detailed Requirements

Header, Menu and Footer

The header/footer will remain as it is, we are only updating design of the main content area of the pages

Games Page

• File Name : index.html
• Screenshots : 02 Game Logged In.png, 01 Game Not Logged In with Details.png, 00 Game Not Logged In.png
• Carousal
  • Show 10 items in the carousal - you can use same image in the 00 Game Not Logged In.png
  • Right/Left Arrows and pagination radio buttons should only appear on hovering over the carousal item.
  • Set delay 2 seconds between each item in the carousal
  • User can navigate between items by clicking on the radio button navigator as well.
  • Clicking on "Play Now" should be deadlink.
  • Clicking on "More Info" will toggle the display of Info panel in 01 Game Not Logged In with Details.png
  • All carousel item content include text and the images should be treated as content and not as a CSS background.
• More Info Panel
  • All content include text and the images should be treated as content and not as a CSS background.
  • All links and buttons can be treated as deadlinks
  • Carousal :
    • User can navigate between items by clicking up/down arrows.
    • Carousal items won't rotate automatically
    • The caption on the carousal item is not part of the image/video
    • Demonstrate the carousal with at least 6 items.
• The bottom three widgets
  • The content area are scrollable - 'view more' section, and widget header are not part of scrollable section.
  • Simulate the progressive load of content by clicking on 'view more'.
  • Twitter widget - we are customizing the twitter as customized here http://www.verigames.com/home
    • Follow this article about customization https://dev.twitter.com/docs/embedded-timelines#user
    • You will prototype it to be exactly as shown in the PSD.
  • 'What's hot' widget
    • Image and title are clickable.
  • 'Recent Forum Post'
    • Only post title should be clickable
    • Hovering over the user photo will display user info popup
  • 'Twitter' widget will behave as the normal behavior of the widget
• Logged in Widgets :
  • 'My Games'
    • Right and Left arrows exist in the games widget to navigate between games.
    • Arrows should always appear (if there is items on the left and if there is items on the right to navigate to)
    • remove 'view more' section
    • Games image or game name should be clickable
    • Hovering over user photos of friends should show user photo popup info. (same as in achievements page)
  • 'Recent Activities'
    • The content area is scrollable - header and 'view more' sections are not part of scrolling.
    • Simulate 'view more' functionality to add more items
  • 'Top Leaderboards' and 'Top Awards'
    • Right/Left arrow will navigate between items.
    • Main list is scrollable
    • Simulate how to navigate between lists
    • Simulate how to load more items by clicking on 'view more'
    • Use 10 items in each widget
    • Hover state of row should be same as one used in 'Top Leaderboard' in achievements page.

Achievements Page

• File Name : Achievements.html
• Screenshots : 04 Achievements Logged In.png, 03 Achievements Not Logged In.png
• The widgets in this page are similar to "Top Leaderboards" and "Top Awards" in games page.
• Hover state is the blue color as shown in 'Top Leaderboard' widget
• All widgets main content area are scrollable
• Simulate how 'view more' work
• Hovering over usernames or user photos will show user info popup

Specific HTML/CSS/Javascript Requirements

CSFV is a big project, and we are going to launch series of UI prototype contests in the next months. And the current Storyboard is one of the UI themes we will build for CSFV website, it will change in future as we are testing several themes. And since we are not using any Theming framework in frontend (i.e. wordpress) we need to make sure that the UI prototype specifically the CSS part we are building starting from this contest is predictable, reusable, maintainable, and scalable, so when we want to swap themes or upgrade the theme it will be a smooth transition/task. And in order to achieve these points we are enforcing css component-based structure, naming pattern, and enforcing CSS Lint.

CSS Structure and Naming Convention
Structure your CSS into the following categories :

• Base Components - consists of reset rules and element defaults.
• Modules Components - represent reusable visual elements, use this naming pattern :

  .component-name
  .component-name--modifier-name
  .component-name__sub-object
  .component-name__sub-object--modifier-name

  example

  .button-group { } /* component name */
  .button--primary { } /* A component modifier (modifying .button) */
  .button__icon { } /* A component sub-object (lives within .button) */

• Layout Components - for positioning of site-wide elements as well as generic layout helpers like grid systems, use this naming pattern :

  .l-layout-method { }
  .grid

  example

  .l-header { }

• State Components - refers to styling that can be toggled on or off via JavaScript, use this naming pattern :

  .is-state-type { }

  example

  is-hidden { }
  is-selected { }
  is-expanded { }

• Javascript Components - Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours, use this naming patter :

  js-action-name { }

  example

  js-submit { }
  js-action-save { }
  js-ui-dropdown { }
  js-ui-carousel { }

CSS Lint
Your code must pass CSS Lint validator with all options are toggled on, if you decided not to include any option in the validation, you must provide a text document explaining why you skipped specific lint option from validation, otherwise, reviewers will deduct your scope for not passing CSS Lint validator.

HTMLRequirements:

• Your HTML code must be XHTML 1.0 Transitional compliant
• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent
• Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

Javascript Requirements

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype.

Browser Requirements

• IE8+
• FF 3.5++ Mac & PC
• Safari Latest Mac & PC
• Chrome Latest Mac & PC

Final Submission Guidelines

Submission Deliverables

All the pages that are shown in PNGs in the provided storyboard file are required.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.