Challenge Overview
Welcome to Wissenkarten Projekt HTML5 Prototype
Wissenkarten Projekt is an application that provides many services to the end user is the form of "knowledge cards". Think of these as widgets with additional functionality associated with them. For this UI Prototype challenge you need create prototype that works on Desktop browser only. Read more details requirements below.
Final Submission Guidelines
Attachment Files
storyboard.zip - Storyboard Images
XFINITY Sans.zip - Client fonts
UI Prototype Requirements:
Important!
- We not provided PSD or AI for this challenge, you need slice each icons/graphic from provided PNG only. It’s okay they not look good as long they are use correct HTML/CSS and JS Structure
- Use AngularJS for your Prototype frameworks
- jQuery can be used as additional library
- Make sure your submission code passed HTML/CSS and JS validation with no error and warning
- All text need editable. You need embed the fonts in your submissions. Match all font properties as close as possible
General Requirements
- For this challenge, you just need submit in required 1280px x 720px height.
- Main content area can placed centered of browser screen
- Show click flow between pages, read details instruction below
- Place “Fireworks-XTV-KnowledgeCards_v2-STB.png” as main background image. And for all content above the image need slice and created as separated codes
- Body background color can use black color.
Details Page Requirements:
1. General Knowledge
- At first load you need show just background image by default (Fireworks-XTV-KnowledgeCards_v2-STB.png)
- After some seconds, the gradient transparent bottom bar slide up from the bottom of image.
- Animation transition need quick and show no lag
- Gradient transparent need created as css properties
- Match bottom bar height as possible like storyboard look
- This the default slide user see (screenshot: 02_Video-Command-GeneralKnowledge_Holiday.png)
- Follow guideline clickable area (screenshot: 02_Video-Command-GeneralKnowledge_Holiday-Spec.png)
- Click left and right side need slide to related slideshow
- Say “More” for more button” is a link, click this need take to page (2. Sports). Apply same link for all slides
- This is another slide look. Match how content look (screenshot: 02_Video-Command-GeneralKnowledge_President.png)
- Image need created as separate file
- Match font properties and area guideline (screenshot: 02_Video-Command-GeneralKnowledge_President-Spec.png)
- This is the last slide look (screenshot: 02_Video-Command-GeneralKnowledge_Question.png)
- Match font properties both title and content
2. Sports
screenshot: XTV-KC_Sports-NoImage.png
- This is how Sport type look
- Icons need created as separated images
- Match how content displayed as separated columns
- Say “Sport” to launch X1 Sports App” is a link, click this need take to page (3. Stocks).
3. Stocks
screenshot: Stocks.png
- Stocks page divided by 2 columns
- In the left side, there’s Stock information and in the right side user see
- Icons need sliced as separated image
- Feel free to suggest us chart library that will match storyboard look
- Match color labels, chart line styling
- User can also slide for another content, refer how area guidelines look (screenshot: Stocks-guidelines.png)
- Say “Stock” to launch Stocks App” is a link, click this need take to page (4. Weather).
4. Weather
screenshot: XTV-KC_Weather.png
- All text need editable
- Slice icons for different weather
- Match different color text
- Say “Weather” to launch Weather App” is a link, click this need take to page (1. General Knowledge).
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 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
CODE REQUIREMENTS:
HTML5
- 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 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 in the scorecard.
CSS3
- 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 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 own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- You can use separated images for this challenge. We need easy way to swap with correct graphics in the future updates
Windows & Mac OS
- Safari latest version
- Firefox latest version
- Chrome latest version
Prizes
1st Place: $ 1000
2nd Place: $ 500