Challenge Overview
Welcome to Horizon VOD WebGL 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 you to use WebGL as the UI prototype engine for animation and interactions.
The main task of this UI Prototype challenge is to create Collection Page for Horizon VOD application based on WebGL engine and provided design guidelines. This is the first step to build a complete application via topcoder competitions. We need your help to submit quality deliverables to impress our client before continuing with the rest if the UI Prototype series.
Looking forward your submissions, and let us know if you have questions related challenge requirements.
We will give $150 for every submitters who passed screening for this NEW Type Challenge
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
Collection Page Requirements:
- Your UI Prototype need use WebGL as base of UI Prototype engine.
- You can use another frameworks that can help build WebGL application like three.js
- 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)
General
- Screen Resolutions: 1280px X 720px
- 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
- Client fonts need render consistently across required browsers (Styleguide > Page 6)
-- UPC Digital Regular
-- UPC Digital Bold
-- Interstate Light
-- Interstate ExtraLight
-- Interstate Bold
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.
- 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
- Press Left or Right Arrow will navigate on current list (screenshot: 02-Highlight-Thumbnails-2.jpg)
- 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: 04-Highlight-More.jpg)
- Press “Enter” on this button need load another Poster thumbnails (screenshot: 05-Continue-One-Asset.jpg)
- 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)
WebGL Page References:
https://www.khronos.org/webgl/
https://developer.mozilla.org/en-US/docs/Web/WebGL
http://learningwebgl.com/blog/?page_id=1217
http://fhtr.org/BasicsOfThreeJS/#1
https://github.com/mrdoob/three.js/wiki
http://stemkoski.github.io/Three.js/
http://code.tutsplus.com/categories/webgl
http://learningthreejs.com/blog/archives/
http://www.johannes-raida.de/tutorials.htm
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient WebGL code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype
The following pages are required in your submission:
Collection Page and the interactions inside the page
CODE REQUIREMENTS:
WebGL
- Is your WebGL codes using best practice solution?
- 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 WebGL code 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