Challenge Overview
Welcome to Horizon VOD Collection Page UI Prototype Challenge
Horizon provides cable TV to countries across Europe and the work they would like us to do is on the user interface of their cable TV boxes.
For this challenge we need your help create the UI prototype by suggest best practice Javascript Framework that can build required datas, lightweight performance, animations and interactions.
This is Horizon VOD first step to build a complete application via topcoder competitions. We need your help to submit quality deliverables to impress our client before continuing the rest application series.
Looking forward your submissions, and let us know if you have questions related challenge requirements.
Final Submission Guidelines
Files Downloadable
Collection-Screens.zip - Collection Page Storyboard Design
HORIZON_VOD_2.0_MVP_walkthru_Collections_Screens.pdf - Collection Screen Guidelines
VOD_2.0_STYLEGUIDE_V.0.0.10.pdf - VOD StyleGuide
fonts.zip - Fonts that need embedded in your UI Prototype
Future UI preview 14.mp4 - Interactions Guidelines
Preloader-Sequences.zip - Poster Animation Sequences
Design Guidelines:
- Screen Resolutions: 1280px x 720px
- You can place prototype page on top left of browser screen
- All interactions between page elements only need support by click arrow in the keyboard (Left/Up/Right/Down buttons)
- We expect no lag/stuttering animation when navigate between page elements.
- High Performance and 3D Animation Transitions Effect is our main concern for this UI Prototype Result
- 3D Animation Effect need consistent like attached Future UI preview 14.mp4
- Client fonts need render consistently across required browsers (Styleguide > Page 6)
-- UPC Digital Regular
-- UPC Digital Bold
-- Interstate Light
-- Interstate ExtraLight
-- Interstate Bold
UI Prototype Requirements:
- Do not exceed 64MB application size including assets
- Modular code structure, no redundancy
- Do not pollute the global name space.
- Use JSON metadata files and asset files as provided.
- When building your prototype, you need match client design guidelines (VOD_2.0_STYLEGUIDE_V.0.0.10.pdf)
- See sample of page interactions on attached video (Future UI preview 14.mp4)
- We need high speed performance of this UI Prototype submission. You can test your submission using this Add-on: https://addons.mozilla.org/en-US/firefox/addon/yslow/ . As possible need achieve the highest Grade when click around the prototype on live server.
- You can pick 3D Javascript engine from these following list, or pick your own to meet client requirements.
http://famo.us/
https://angularjs.org
http://www.idangero.us/framework7/#.VDrpPBOUe4I
http://nodejs.org
http://onsen.io
http://ionicframework.com
- IMPORTANT: DO NOT use HTML5 Canvas, because our client has had problem on previous development.
Preloaded Poster Thumbnails
screenshot: 01-Preloaded-Posters.jpg
- On page load All text and layout structure need to load on page first before poster thumbnails.
- See animation sequence when posters loaded (Preloader-Sequences.zip), apply same effect.
- You also need check and make sure animation transitions like provided (Future UI preview 14.mp4)
- Notice the title fade in then fade out after posters placed in correct placement.
- Also you can see another list in the bottom show same effect
- Preloader need calculated if related posters loaded and then hide the preloader
- Match preloader based on design guidelines
Collections Page
- This is Collection Page after all posters loaded. (screenshot: 02-Highlight-Thumbnails-1.jpg)
- On page load, there’s no highlighted element on page
- Date and Time need automatically loaded by actual current time/date.
- When user start click the arrows, need highlighted 1st posters by default
- Notice the selected style effect there’s blur effect in the bottom border
- Press Left or Right Arrow will navigate on current list (screenshot: 02-Highlight-Thumbnails-2.jpg)
- Change selected poster will also need update the main page background.
- You need use continuous loop slideshow function (screenshot: 02-Highlight-Thumbnails-3.jpg)
- You can simulate 10 posters to let us check the continous loop.
- In the last slide there’s a “Browse More Movies” button. (screenshot: 04-Highlight-More.jpg)
- Notice there’s spacing between the last slide and first slide
- When user press Up bottom user will navigate to main navigation. (screenshot: 03-Highlight-Menu.jpg)
- When user press left or right button, it will highlight related menu navigation
- Also when reach the “Search” button, need show bolder search button. Let us know if need design help!
- Press Down button will take user back to “Movies For you” list.
- User also need able to navigate to the bottom list by press Down arrow
- Transitions when move to the next list must smooth, refer video preview.
- Match properties of highlighted “Browse More Movies” button (screenshot: 05-Continue-One-Asset.jpg)
- Press “Enter” on this button need load another Poster thumbnails
- More Movies Poster need load dynamically on this Collection page
Important: Pay attention to all detail things need captured on each elements, read details below:
- Follow Font properties for all element based on (Styleguide > Page 7)
- Follow Spacing properties for all element based on (Styleguide > Page 17) and for Highlighted poster (Styleguide > Page 18) also for another list (Styleguide > Page 19)
- Highlighted Poster Font properties (Styleguide > Page 10)
- Highlighted Poster Spacing properties (Styleguide > Page 28)
- Highlighted Poster Spacing properties with long title (Styleguide > Page 29)
- For Collection poster with long title, follow this spacing (Styleguide > Page 20)
- Grid Poster Overlays when menu highlighted (Styleguide > Page 41)
- Grid Poster Overlays when Poster highlighted (Styleguide > Page 42)
- Section title when Menu highlighted (Styleguide > Page 43)
- Section title when Poster highlighted (Styleguide > Page 44)
- Poster Stroke when Poster not highlighted (Styleguide > Page 45)
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient codes that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc based on provided Guidelines
- 3D Animation Effect between each elements
- Website Performance Quality
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all codes so future developers can follow the code.
- When we developed another pages in the future, is your submission easy to improve?
Browsers Requirements
- Chrome Latest Version
- Firefox Latest Version
- Safari Latest Version