Challenge Overview
Welcome to Horizon VOD Three.js - Animations and Interactions UI Prototype Challenge Series
Horizon VOD 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 three.js as the base of a UI prototype engine to build layout, animation and interactions.
We just completed the 1st part Horizon VOD Three.js UI Prototype Challenge Series that build the Layout and Typography. For this 2nd part challenge, we need you fix some issues in existing UI Prototype and also building Animations and Interactions part.
FYI: We will give extra $100 for every submission that passed screening and capture challenge tasks! Let’s join and start learning this framework.
Final Submission Guidelines
Files Downloadable
three-js-prototype.zip - Use this UI Prototype as Base Updates
AngularJS-Prototype.zip - Prototype Reference with AngularJS engine
Collection-Screens.zip - Storyboard design
Preloader-Sequences.zip - Preloader Design Guideline
Future UI preview 14.mp4 - Interactions Guidelines
VOD_2.0_STYLEGUIDE_V.0.0.10.pdf - VOD StyleGuide
fonts.zip - Storyboard Fonts
Overall UI Prototype Requirements:
- Your UI Prototype need use three.js as base of UI Prototype engine. No other framework allowed!
- Avoid too much http requests in your submission
- 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 MUST match the client design guidelines (VOD_2.0_STYLEGUIDE_V.0.0.10.pdf)
Horizon VOD Three.js - Animations and Interactions UI Prototype Requirements
For this challenge deliverables you need focus on these following tasks:
1. Fix issues on UI Prototype
1st task of this challenge is you must fix issues on existing three-js-prototype.zip:
- Font renders MUST look sharp, we still see some crisp look on existing UI Prototype
- Move page content to center alignment of browser screen.
- At first load you need make sure all elements/text and image load with no delays
- Posters border line not look sharp for both selected and not selected posters
- The highlight effect (white border) of the movie poster is not implemented properly. It will break if the height of the image increases. Ideally it should not be implemented using any image.
- The name of the background image file should not be hard coded. Because it will change as per the movie selected.
- All items of “Movies for you", should have a little bit transparent effect, check StyleGuide > page 42.
- Currently all movie images are darked, dark properties need load via webGL code.
- All of the code is written in single file. They should be broken into separate files for easy maintainability.
- JSlint errors exists.
- Tabs are used for indentation
- All the methods should have comments explaining the functionality, parameters, return type and example usage. Written in YUIDoc (http://yui.github.com/yuidoc/)
- Time information should capture actual time
- When date and time updated, need remain in right placement
Consistency Font and Spacing Properties
Note: Double check every Font and Spacing Properties in existing prototype. Let discuss if you need additional library to achieve the expected look and feel!
- We need you DOUBLE CHECK existing prototype to follow consistent Font and Spacing properties across required browsers
- Follow Font properties for all elements based on (Styleguide > Page 7)
- Follow Spacing and Margin properties for all element based on (Styleguide > Page 17) and for Highlighted poster (Styleguide > Page 18) also for another list (Styleguide > Page 19)
- This Grid Poster Overlays when Poster highlighted (Styleguide > Page 42)
- On “Movies For You”, match style for Highlighted Poster Font properties (Styleguide > Page 10)
- And this one for Highlighted Poster Spacing properties (Styleguide > Page 28)
- Poster Stroke when Poster not highlighted (Styleguide > Page 45)
2. Animation and Interactions Requirements
Preloaded Poster Thumbnails
screenshot: 01-Preloaded-Posters.jpg
- On page load All text and layout structure need to load first
- On each list, all posters displayed use stacked style at first load
- Notice only the 1st poster have image at first time, another posters show empty placeholder before load the images.
- See animation sequence when posters loaded (Preloader-Sequences.zip), as possible apply same effect.
- Notice the title fade in then fade out after posters placed in correct placement.
- FYI: each list need support around 10 posters per-list. You might need add new posters after preloader done in the area out of browser screen.
- Show 3 sections list in this Collection page. Refer AngularJS-Prototype.zip
- Also you can see another list in the bottom showing same effect at the same time
- Preloader need auto calculate the progress when related posters loaded and then hide the preloader.
- Match preloader style based on sample on screen. Show proper size when compared with poster size
- You need create preloader function and style inside webGL engine
Collections Page
- This is Collection Page after all posters loaded. (screenshot: 02-Highlight-Thumbnails-1.jpg)
- On page load, there’s no highlighted poster in page.
- We need disable Mouse usage in this application, just need support with Press Buttons on Keyboard.
- When user start click the arrow in the keyboard, need highlighted 1st posters by default
- Press Left or Right Arrow will navigate on current list (screenshot: 02-Highlight-Thumbnails-2.jpg)
- Change selected posters, create function that will show different background page.
- You need use continuous loop slideshow function (screenshot: 02-Highlight-Thumbnails-3.jpg)
- You can show around 10 posters to let us check the continous loop.
- You also need create function to remember the last position if user selection go to main navigation or another list
- In the last slide there’s a “Browse More Movies” button. (screenshot: 04-Highlight-More.jpg)
- There’s extra margin between the last slide and first slide
- When user press Up button, 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 and use same underline effect like other main navigation.
- 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 or navigation must smooth, refer video preview (Future UI preview 14.mp4)
- 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 screen need load dynamically on this Collection page
- You might need re-use existing preloader when load this screen
- For More Movies screen you just need display 1 list only.
- Press delete/backspace button in keyboard need take user back to Collection page
- Existing functions need remain works in More Movies Page
Long Title
- Update existing poster title to show long title
- Highlighted Poster Spacing properties with long title (Styleguide > Page 29)
- For Collection poster with long title, follow this spacing (Styleguide > Page 20)
Important: Pay attention to the details! Have fun learning three.js!
Lets learn Three.JS!
http://threejs.org/
http://threejs.org/docs/
Getting Started
http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
http://learningthreejs.com/
http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningwebgl.com/blog/?tag=three-js
Three.JS Tutorial References:
http://threejs.org/examples/
https://github.com/mrdoob/three.js/wiki
http://stemkoski.github.io/Three.js/
http://www.johannes-raida.de/tutorials.htm
http://www.smartjava.org/content/all-109-examples-my-book-threejs-threejs-version-r63
Client Priorities (The items that are considered highest prototype priorities)
- Creating high quality, efficient Three.js UI Prototype code that works in all the requested browsers.
- All elements should be Pixel Precision, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your UI Prototype Codes
CODE REQUIREMENTS:
Three.js
- Is your Three.js code using best practices?
- 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 Three.js code so future developers can follow the code.
- When we develop another pages in the future, is your submission easy to improve?
- When we merge your codes with other submission, is your submission going to be problem free?
Browsers Requirements
- Chrome Latest Version
- Qt Portable Browser