Challenge Overview
Welcome to Hercules X1 Interactive Advertising Template UI Prototype Challenge
Hercules is experimenting with displaying "full-screen" interactive TV advertising pages that will feature a specific product, brand or program. Essentially an interactive Ad but on your TV.
The main task of this UI Prototype is to create Hercules X1 UI Prototype for TV platform based on the requirements listed in spec details. On this challenge, we need you focus to create UI prototype with plain HTML5/CSS3/Javascript based code.
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Dropbox Link: https://www.dropbox.com/sh/qrs4giall9ar7vu/AABjHb7CnFPxSnnhoV52C_jaa?dl=0
sample-videos.zip - Sample Videos for your prototype
Storyboard.zip - Storyboard Design
XFinity-Sans-Fonts.zip - Xfinity Sans Font
Overscan_examples.png - Safe Area Screen
Important!
- All X1 Interactive TV Screen will be Responsive.
- You need check and test by re-size the browser, to make sure all elements inside the page need adjusted in proper ratios. Let us know if you need clarification.
- A user will navigate your design by TV Remote
- We will develop your design into various TV sizes.
- Use client's provided font size in your submission (XFinity-Sans-Fonts.zip)
- All text and graphics in your submissions need to be editable
- Create separated page for these 2 required page sizes below.
- Match every buttons styling on default, and selected. Pay attention to the transparency and other design setting
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
Safe Area
- We need your prototype follow the TV safe area. Refer provided screenshot (Overscan_examples.png)
- For 1920px, use 16:9 Aspect Ratio
- For 720px, use 4:3 Aspect Ratio
- Background image/video can covered all screen areas, but action buttons/clickable things need placed in the "action safe area"
- Use % (Percentage) width of safe area.
A). HDTV Size ( 1920px × 1080px)
1). Text Ads
1.0.0-Submission-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
1.1.0-Submission-TextAd-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- This is the default look of Advertising page.
- Background is HTML5 video type.
- Use provided sample-videos.zip in your submission
- There’s no highlight state for all the action buttons by default
- White background is for Running text. Need looping everytime
- Press Up, Down, Left and Right by default need auto selected the first “Text Ads” menu
1.0.1-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip and Remote Control in your Prototype submission
- Overlay background need covered whole video background screens except the action buttons area
- Match highlighted state for the Text Ads button
1.0.2-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip and Remote Control in your Prototype submission
- Expand the section just show initial information
- Match transparent gradient style
- There’s More Details button to see complete information
1.0.3-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip and Remote Control in your Prototype submission
- User need move up via keyboard then, highlight the More Details button
1.0.4-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
1.1.1-Submission-TextAdDetails-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip and Remote Control in your Prototype submission
- Press the enter via keyboard need expand show the complete information
- If user press right need change to another menu, but cursor remain in 1st menu. Read more details below
- Notice the Remote Control graphic show selected state when user press the right arrow
2). Video Ads
1.0.5-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
1.2.0-Submission-VideoAd-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip in your Prototype submission
- This screen is display application look after navigate to Video Ads menu
- The highlighted cursor remain in fixed position and menu section need scroll horizontally
1.0.6-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
1.2.1-Submission-VideoAdDetails-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- IMPORTANT: No need show the tooltip in your Prototype submission
- Press enter need show up the another video inside the panel information. That video need to be autoplay.
- Press more details button need expand complete information below the mini video
3). Image Ads
1.0.7-Submission-1920x1080-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
1.3.0-Submission-ImageAd-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- This screen is when user navigate to Image Ads menu
- Press enter need show up autoslide image section
- Use dummy image for the slides
1.3.1-Submission-ImageAdDetail-1920x1080-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter button need show up complete information below the autoslide image
B). DVD Size (720px x 576px)
1). Text Ads
2.0.0-Submission-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Default look of Text Ads
2.1.0-Submission-TextAd-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter need show initial panel information
2.1.1-Submission-TextAdDetails-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter on More Detail button need show complete panel information
2). Video Ads
2.2.0-Submission-VideoAd-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter on Video Ads need show information contain of Autoplay Video
2.2.1-Submission-VideoAdDetails-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter on More Details button need show complete information and expand the height
3). Image Ads
2.3.0-Submission-ImageAd-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter on Image Ads need show information contain of Autoslide Image
2.3.1-Submission-ImageAdDetails-720x576-NoExpand-Hercules-X1-Interactive-Advertising-Template-Design-Challenge.jpg
- Press enter on More Details button need show complete information and expand the height
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give the 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 on the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build the 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 to 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
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere on the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Browsers Requirements
- IE11
- Latest Chrome Browser (Windows & Mac)
- Latest Firefox Browser (Windows & Mac)
- Latest Safari Browser (Windows & Mac)