Challenge Overview
Welcome to MyDiary - Personal Insight App UI Prototype Challenge.
"MyDiary" application will run on all Desktop (all OS). This App addresses the market of people with electronic diaries. People will use the app to access personalized insights based on their diary entries. Using this app, our users will understand more about themselves - for example, the way their mood fluctuates in relation to the topics they write about - based on what they write in their diaries. Our language analytics will process their entries, generate data points that will yield insights about them, and our app will help them navigate through and understand these insights.
Project Overview
The goal of this challenge is to develop a prototype using HTML/CSS/Javascript. You will be provided with the storyboard (screen design source files) which you will need to implement.
Prototype Requirements
- All data to be displayed (charts numbers, dropdowns content, etc) must come from JSON files instead of being hardcoded on the UI.
- All charts must be properly styled in the markup, use D3.js to render graphics through JSON data files.
- The prototype implementation must match the design.
- All screens from the design are in scope.
- The charts shown in the design should be implemented as real charts instead of using static images, things like tooltips must work too, and data to render the charts should come from json files.
- You MUST NOT use any web framesworks (for example: angular.js / vue.js / react are NOT allowed, any submission that uses these will fail review). Instead you should use standard HTML5 / CSS3 to implement the prototype. If you want to use any pure javascript library (like jQuery), you must get approval first.
- jQuery and d3.js are pre-approved and you can use them.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build 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 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 Requirements
- 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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
"MyDiary" application will run on all Desktop (all OS). This App addresses the market of people with electronic diaries. People will use the app to access personalized insights based on their diary entries. Using this app, our users will understand more about themselves - for example, the way their mood fluctuates in relation to the topics they write about - based on what they write in their diaries. Our language analytics will process their entries, generate data points that will yield insights about them, and our app will help them navigate through and understand these insights.
Project Overview
The goal of this challenge is to develop a prototype using HTML/CSS/Javascript. You will be provided with the storyboard (screen design source files) which you will need to implement.
Prototype Requirements
- All data to be displayed (charts numbers, dropdowns content, etc) must come from JSON files instead of being hardcoded on the UI.
- All charts must be properly styled in the markup, use D3.js to render graphics through JSON data files.
- The prototype implementation must match the design.
- All screens from the design are in scope.
- The charts shown in the design should be implemented as real charts instead of using static images, things like tooltips must work too, and data to render the charts should come from json files.
- You MUST NOT use any web framesworks (for example: angular.js / vue.js / react are NOT allowed, any submission that uses these will fail review). Instead you should use standard HTML5 / CSS3 to implement the prototype. If you want to use any pure javascript library (like jQuery), you must get approval first.
- jQuery and d3.js are pre-approved and you can use them.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build 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 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 Requirements
- 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.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
Final Submission Guidelines
Provide all your files within a zip file.