Challenge Overview
Welcome to the “AutoGuys New Tire Experience UI Prototype Challenge”. In this challenge, we are looking to create a single responsive page (Desktop and Mobile) to quickly help showcase the Topcoder process. This HTML Prototype is focused on the “New Tire Experience” page of the AutoGuys website.
Let us know if you have any questions!
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Test in all the required browsers.
Required Screens
This challenge will be focused on the “New Tire Experience”. We are looking to create this screen as
Responsive (Desktop/Mobile)
https://marvelapp.com/7f6jg94/screen/25648670
Desktop: 05-04_Tires_PRP.png
Mobile: 05-04_Tires_PRP.png
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
1) Desktop Screens
1.4) 05-04-Tires-PRP.png
- This is the Product Result Page.
- We are looking for this page as both Desktop and Mobile (Responsive using Bootstrap)
- Default View is the Grid View.
- List View: As list view wasn’t designed for this page, you can use the format and layout designed on page “02-00-DIY-PRP-List-View.png”.
- Tabs: We would like to see the Tab interaction from All to the 2016 BMW. Only need the two tabs
- As this is an ecommerce site make sure to break up your page sections properly. Products returned in the search results should easy to add/remove and the page structure should still work if there are less than 3 products
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages in the site.
2) Mobile Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens from “05-01_Tires.png” to “05-06_Tires_Comparison.png” under the Mobile folder for look and feel reference.
Image Requirements
- 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.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You can use SASS for this challenge (Recommended)
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can use any of this libraries on this challenge:
- - Bootstrap 3
- - Grunt
- - Less
- - JQuery
- - Enquire.js
- - OWL Carousel
- - BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- See Forum
Platforms
- HTML
- Technologies
- CSS
- HTML
- HTML5
- JavaScript
Final Submission Guidelines:
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip
Let us know if you have any questions!
Final Submission Guidelines
This challenge is focused on creating the initial Responsive experience (Desktop and Phone). We want customers to be inspired and enjoy the (simple) experience of searching, selecting and buying tires.Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Test in all the required browsers.
Required Screens
This challenge will be focused on the “New Tire Experience”. We are looking to create this screen as
Responsive (Desktop/Mobile)
https://marvelapp.com/7f6jg94/screen/25648670
Desktop: 05-04_Tires_PRP.png
Mobile: 05-04_Tires_PRP.png
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
1) Desktop Screens
1.4) 05-04-Tires-PRP.png
- This is the Product Result Page.
- We are looking for this page as both Desktop and Mobile (Responsive using Bootstrap)
- Default View is the Grid View.
- List View: As list view wasn’t designed for this page, you can use the format and layout designed on page “02-00-DIY-PRP-List-View.png”.
- Tabs: We would like to see the Tab interaction from All to the 2016 BMW. Only need the two tabs
- As this is an ecommerce site make sure to break up your page sections properly. Products returned in the search results should easy to add/remove and the page structure should still work if there are less than 3 products
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages in the site.
2) Mobile Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens from “05-01_Tires.png” to “05-06_Tires_Comparison.png” under the Mobile folder for look and feel reference.
Image Requirements
- 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.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You can use SASS for this challenge (Recommended)
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can use any of this libraries on this challenge:
- - Bootstrap 3
- - Grunt
- - Less
- - JQuery
- - Enquire.js
- - OWL Carousel
- - BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- See Forum
Platforms
- HTML
- Technologies
- CSS
- HTML
- HTML5
- JavaScript
Final Submission Guidelines:
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip