Challenge Overview
The primary goal of this contest is to design the look and feel of a web application which has very defined guidelines and the look is dashboard oriented, for business purposes. We are trying to provide a simple interface to a complicated tool. Our users need to be gently pushed to particular flows through the application so they don’t get overwhelmed by the total number of choices available to them.
EMP is a migration planning application that's used to streamline the planning process for data migrations onto storage arrays. It's currently implemented as a stand-alone single user desktop installed Windows application, but is in the process of being ported a web application. The goal of this project is to replace the existing EMP UI with a web UI. So, for this contest, you will be designing the first phase of the Web UI transition.
In this contest we need your help to convert the storyboard into working prototype. The wireframe is provided to get the flow of the application, but the storyboard has higher priority than wireframe.
Following are specific requirements for HTML, CSS and Javascript files:
- Follow Google HTML/CSS Style Guide
- Your HTML code must be HTML5 Compliant. Note that this doesn't imply use of any HTML 5 features. If any HTML 5 features are used they must either be supported by all of the browsers above or there must be an alternative way of achieving the same functionality.
- 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 lay out your page. Only use table tags for tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- 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".
- 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. You are allowed to use the JQuery JavaScript library for this contest.
- All elements that will eventually need to be accessible for automated testing (e.g. any type of input) must have the 'id' attribute set.
Your submission must works on browser in the list below:
- IE7+
- Latest Firefox
- Safari 5
- Latest Chrome
Final Submission Guidelines
N/A