Challenge Overview
Welcome to Horizon VOD Three.js - Page Layout and Typography UI Prototype Challenge Series. Horizon VOD provides cable TV to countries all across Europe and they are looking to improve the user interface of their future cable TV boxes and other technologies. We are looking to explore, learn and build interfaces around WebGL and similar 3D technologies.
The goal of this challenge is to start using three.js as the base of a UI prototype engine to help build the layout, animation and interactions. This is Part 1 of the Horizon VOD Three.js UI Prototype Challenge Series. We are breaking the project apart to help you ramp into and learn about WebGL and help us build this project! There will be additional challenges with different scope and goals to continue building this prototype using the Three.js framework.
Part 1 is focused on building the Page Layout and Typography.
We are providing an extra $150 for every submission that passes screening! Take some time and learn about this framework and let us know if you have any questions.
Final Submission Guidelines
Overall UI Prototype Requirements:
- The goals of this challenge is to use three.js and for you to learn more about this technology/framework
- Only use three.js to build your UI Prototype (framework)
- Size: Do not exceed 64MB application size including assets
- Structure: 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 design guidelines (VOD_2.0_STYLEGUIDE_V.0.0.10.pdf)
Files
- VOD_2.0_STYLEGUIDE_V.0.0.10.pdf = VOD StyleGuide
- fonts.zip = Fonts that need to be used and embedded in your UI Prototype
- storyboard.zip - User interface of what we would like to build
Page Layout and Typography UI Prototype Requirements
This challenges is focused on the following tasks:
Screenshot: 02-Highlight-Thumbnails-1.jpg
- Build this page layout and typography without any interaction and animations
- Focus is creating a solid layout that will look good across required browsers.
- Required Screen Resolution: 1280px x 720px
Fonts
- Use the attached font in your UI Prototype below. All text must render consistently across required browsers (Styleguide > Page 6)
-- UPC Digital Regular
-- UPC Digital Bold
-- Interstate Light
-- Interstate ExtraLight
-- Interstate Bold
- What is the best way to use custom fonts using three.js framework. If it’s not possible, let’s discuss in Challenge forum.
- Is font fallback supported for three.js framework?
- Follow Font properties for all elements based on (Styleguide > Page 7)
Layout
- Background image needs to automatically implement then blur effect when change with another image.
- Remember, the Background image will be dynamic in the future when navigating the posters.
- “On Demand” title placed on top left of page
- In the right side, show time and date information with right alignment
- Main navigation showing blur line in bottom of menu.
- Bold text is for Active State in Main Navigation
- Regular text is for Inactive State in Main Navigation
- Search Icon placed in the right side, aligned with Date and Time
- 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)
- Below main navigation, there are 2 lists: “Movies For You” and “Continue Watching” list
- “Movies For You” is an active list, you can see transparency difference.
- This Grid Poster Overlays when Poster highlighted (Styleguide > Page 42)
- Poster images need to load into correct placement for each boxes.
- Poster image will show different size on highlighted state
- For every Poster, you’ll see Movie Poster, Movie Title, IMDB icons, IMDB score and sometime Free tag.
- On “Movies For You”, match style for Highlighted Poster Font properties (Styleguide > Page 10)
- There’s a blur effect in the bottom of Highlighted Poster.
- And this one for Highlighted Poster Spacing properties (Styleguide > Page 28)
- Also, the important thing is the border size needs to match storyboard when Poster on highlighted or not highlighted Poster.
- Poster Stroke when Poster not highlighted (Styleguide > Page 45)
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/
http://fhtr.org/BasicsOfThreeJS/#1
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 and Challenge 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 prototype
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