Challenge Overview
Welcome to $100 Release Note Design1 Release Notes Selection Style Fixes F2F
For this F2F, you just need to update existing prototype to meet new design directions. Refer detail specification below:
Important!
- All X1 Interactive TV Screen will use Responsive solution.
- You need check and test by re-size the browser, to make sure all elements inside the page need adjusted in proper ratios. We provide x1-ads-1st-prototype.zip to let you follow the expected ratio implementation.
- A user will navigate every element by TV Remote, in your prototype that will achieved by press some explained buttons via keyboard
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- Data must loaded in separated files, you might need adjust data from
- Your prototype submission needs to be “lightweight”, minimize the amount of HTML/CSS/JS in use as these will need to run on the “low” processor boxes
GITLAB RULES
- GITLAB branch as Base of UI Prototype Updates: https://gitlab.com/Hercules-ReleaseNotes/prototypes/tree/develop
- UI Prototype as Base Updates Path: public/design1
- Post your gitlab username in challenge forum if you don't have access to our code yet.
- Fork based on "develop" repo and then work based on the specified branch.
- For the F2F Winner, you also need submit a merge request for issues you fix.
- Submit to O/R your updated prototype to let us notice your submission ready for review. And watch for any feedbacks!
F2F Tasks
1). Change Selection Style
- Currently we are using the blue box to show focus. Client would like to tweak this to shows focus by adding a line above and below the selected text and turning the selected text blue.
- Apply to these following locations:
—- Locations
—- Header (Years)
—- Left (Months)
—- Right (Highlights)
2). Arrow content selection
1-arrow-content.png
- Reduce width of blue to only show around the arrow, not full area
3). Highlights area
2-highlight-section.png
- Highlights title need to be bold
- Sections title need add bullet point
- Also apply selection style like mentioned above
BROWSER REQUIREMENTS
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
F2F GUIDELINES
We will review submissions as they are submitted! Pay attention to Forum activity!
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have questions or need clarification on some things
Thank you
Final Submission Guidelines
F2F REQUIREMENTS:For this F2F, you just need to update existing prototype to meet new design directions. Refer detail specification below:
Important!
- All X1 Interactive TV Screen will use Responsive solution.
- You need check and test by re-size the browser, to make sure all elements inside the page need adjusted in proper ratios. We provide x1-ads-1st-prototype.zip to let you follow the expected ratio implementation.
- A user will navigate every element by TV Remote, in your prototype that will achieved by press some explained buttons via keyboard
- Prototype Performance is our main concern, make sure your solution fast and lightweight!
- Data must loaded in separated files, you might need adjust data from
- Your prototype submission needs to be “lightweight”, minimize the amount of HTML/CSS/JS in use as these will need to run on the “low” processor boxes
GITLAB RULES
- GITLAB branch as Base of UI Prototype Updates: https://gitlab.com/Hercules-ReleaseNotes/prototypes/tree/develop
- UI Prototype as Base Updates Path: public/design1
- Post your gitlab username in challenge forum if you don't have access to our code yet.
- Fork based on "develop" repo and then work based on the specified branch.
- For the F2F Winner, you also need submit a merge request for issues you fix.
- Submit to O/R your updated prototype to let us notice your submission ready for review. And watch for any feedbacks!
F2F Tasks
1). Change Selection Style
- Currently we are using the blue box to show focus. Client would like to tweak this to shows focus by adding a line above and below the selected text and turning the selected text blue.
- Apply to these following locations:
—- Locations
—- Header (Years)
—- Left (Months)
—- Right (Highlights)
2). Arrow content selection
1-arrow-content.png
- Reduce width of blue to only show around the arrow, not full area
3). Highlights area
2-highlight-section.png
- Highlights title need to be bold
- Sections title need add bullet point
- Also apply selection style like mentioned above
BROWSER REQUIREMENTS
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
F2F GUIDELINES
We will review submissions as they are submitted! Pay attention to Forum activity!
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have questions or need clarification on some things
Thank you