Challenge Overview
Welcome to Hercules Release Note UI Prototype Challenge
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:
Release-Note-Storyboard.zip - Storyboard as Base Updates
X1-V2-UIPrototype.zip (114Mb) - Reference Prototype of proper ratio implement on Client TV Application
https://drive.google.com/file/d/0B31nrwic_6z0bk4wNEZoajhyZUE/view?usp=sharing
XFinity-Sans-Fonts.zip - Fonts to use in your submission
Important!
- You need build this prototype using Responsive solution.
- Provided storyboard using 1920px × 1080px. You need check and test by re-size in all required browser all elements inside the page need scale up/down in proper ratios.
- We provide you prototype that runs well on our TV application. Please follow the code implementation (X1-V2-UIPrototype.zip)
- User will navigate every element by TV Remote, in your prototype that will achieved by press some buttons via keyboard
- Use client's provided font size in your submission (XFinity-Sans-Fonts.zip)
- All text and graphics in your submissions need to be editable
- 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!
- All required screens need rendered in single dynamic page, no need to load to another html pages.
- All data content need load from JSON files
- Your prototype submission needs to be “lightweight”, minimize the amount of HTML/CSS/JS in use as these will 1need to run on the “low” processor boxes
1). Homepage
screenshot: 00.home.png & 17.home.png
- This is home page look and feel
- Follow the margin/padding of safe in percentage for 1920px x 1080px screen width(screenshot: 01.safe-area.png)
- Follow correct grid implementation (screenshot: 02.home-grid.png)
- Use plain black background in your submission
- Main content need placed center
- Xfinity Release Note can be image based
- On the left side is area for selected Month Release Note quick information.
- Match image, date and text description
- This area will be change based on selected month
- Year Navigator placed on top aligned with logo
- Highlight current year by default
- There's "Number of Updates" placed below the year
- Match unselected Year color transparency
- User can navigate by press left and right on Year navigator
- Change the year should display different months
- Current Month placed on top of list and highlighted by default
- User can press down/up to navigate the month
- Notice in the last option using gradient effect
- Press enter via keyboard will take to Detail page
- When user navigate to year, you need highlight selected Year (screenshot: 18.year-selection.png)
- Use blue bottom border for highlight styling. Notice Month not highlighted
- Selected Year always in center. Press left and right need moving another year.
- Statistics placed on the left side
- When press down again and highlighted the Month, need display quick information on the left side (screenshot: 19.april-selected.png)
- Show us different content when navigate to other month.
2). Detail Page
screenshot: 03.details.png
- This is Detail page look and feel
- Follow safe area margin/spacing (screenshot: 04.details-safe-area.png)
- Follow correct grid implementation (screenshot: 05.details-grid.png)
- Back button placed on top
- Press Delete via keyboard need take user back to Homepage
- Background image placed on below Back button
- Match all text placement
- Detail page content use 2 column layout
- Left side bar will for detail information of each Highlight
- And the right for Highlight list
- User need able to scroll up/down see the message
screenshot: 06.details-grid-no-scroll.png
screenshot: 07.details-grid-scroll1.png
screenshot: 08.details-grid-scroll2.png
- When reach the Highlight position. Highlight area remain fixed on top while main content scrollable (screenshot: 09.details-scroll3.png)
- All Highlight text need use transparency by default
- When reach correct title in the main content area, highlight title need use 100% transparency. Refer to this screenshot: screenshot: 16.details-scroll10.png
- Apply the same effect to other highlighted title. Ignore other storyboard screen look.
- Match content with variation text and image like flow below
screenshot: t10.details-scroll4.png
screenshot: 11.details-scroll5.png
screenshot: 12.details-scroll6.png
screenshot: 13.details-scroll7.png
screenshot: 14.details-scroll8.png
screenshot: 15.details-scroll9.png
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.
BROWSER REQUIREMENTS
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser