Challenge Overview
Project Overview
Welcome to Gerber KOL Customer Community UI Prototype Challenge. Gerber, a subsidiary of Nestlé is going to create an application that allows companies and expert speakers to interact with each other. It allows its users to share files and discuss within the community. In this challenge we need your help to convert the provided storyboard into a responsive HTML5 Prototype based on provided storyboard and specifications document. The prototype must follow our standards and our guidelines. Please see more details below.
This UI Prototype will be designed for the desktop but is expected to function on mobile devices as well. As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Resources
- Storyboard (Storyboard.zip)
- Wireframe (Wireframe.zip)
- Layout Requirements document (Layout Requirements.doc)
- Functionality Requirements document (Functionality Requirements.doc)
- Method.js
- A set of image preview in a single document (Screen Set.pdf)
Challenge Requirements
- Convert the storyboard into the HTML5 Prototype.
- You may want to explore the provided wireframe to get the sense of the application.
- Storyboard has higher level than Wireframe, if there is conflict between Storyboard and Wireframe, follow the Storyboard.
- In creating the layout of the application, follow the rules and guides in Layout Requirements document.
- We have created some methods in Method.js to help you demonstrate data retrieval of some functionality. Follow Functionality Requirements document to get details how and where to use them.
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.
- You’re encouraged to use HAML to make the HTML code clean, and provide source files on your submission.
- Each of the HTML pages need adapted both difference of tablet and phone layout.
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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
- You MUST use CSS media queries for tablet and phone.
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.
Javascript
- AngularJS is preferred.
- JQuery is allowed.
- Bootstrap is allowed.
- 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.
Browsers Requirements
IE 9+, Chrome (latest version), Safari (latest version), Firefox (latest version).
Final Submission Guidelines
Submit your solution into Online Review.