Challenge Overview
Competition Task Overview
The purpose of this challenge is to develop HTML/CSS UI prototypes based on the designs we provide. For this challenge, you can assume the app will primarily be used on a desktop browser with a minimum width of 1280px - this should be your primary focus for this challenge, but please do not use code that will make it hard to change this to a responsive web in the future, that probably means you should use responsive components such as bootstrap's fluid grid system etc. Also, your prototype must work properly in all the required browsers.
If any requirements are unclear in the screens please ask on the forum and we’ll be happy to help clarify!
Good luck! We look forward to seeing your submissions!
General
- Source code and design text must be written in US-English
- The prototype must be built using HTML5 / CSS3, and keep in mind we'll add d3.js charts into some of the prototype pages in a later challenge
- Test in all the required browsers
- 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.
- Ensure your submission is free of HTML and CSS validation errors and warnings
- 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 tables of data/information 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- No data should be hardcoded, instead you must create some reasonable mock data to test the prototype. The left sidebar filters must work (based on data from json) and the filters will affect the data on the right side mair area. We do NOT have any sample data so just make reasonable assumptions based on the design.
- The charts must be built using d3.js, please make the charts reusable since some charts are used in many different pages.
Detailed Requirements
We are actually building three very similar prototypes for three different tools, so we expect the submission to have 3 separate folers:
- AR_AP
- BMT_Pursuits
- Polaris
Please check the "Scope" folder inside each folder to see scope details. Charts enclosed in red rectangles are out of scope and you can use static images for placeholders, charts enclosed in blue rectangles are in scope and you can reuse the charts from prototype part 1.
Ask in the forum if you have any questions.
These three are independent of each other, so they are essentially three different prototypes.
Design
- The design should be 1280px wide.
- Grid: The design is not pixel perfect towards its grid/gutters; you should choose so it approaches the design. We prefer a consistent design with well defined grid/font/gutter sizing over pixel perfect styling.
- Use Bootstrap’s included responsive fluid grid system where appropriate. You are not required to use Bootstrap and you can use other fluid grid system. For example: Foundation (http://foundation.zurb.com) is another framework that is similarly fully featured (lots of pre-configured styles). There are also some responsive CSS frameworks that are lighter weight by leaving out the styling elements. Skeleton (http://getskeleton.com) and Toast (http://daneden.github.io/Toast/) are examples.
- Image file sizes should be reasonable to allow for quick transfer while still maintaining an appropriate level of quality.
- Images intended to span the full width of the screen must be at least 1920 pixels wide.
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.
Browser Requirements
- IE11+
- Chrome latest
- Safari latest (Mac only)
- Firefox latest
Technologies
- Bootstrap (or other similiar CSS frameworks)
- CSS3
- HTML5
- JavaScript
- D3.js
- jQuery (not required)
- Avoid Angular.js unless there's a really good reason to use it (you need to get our approval first)
Documentation Provided
Please register to download the PSD files from challenge forum.
We have also provided the json file and explanation on it in the forum.
Timeline
Pay attention to the shortened timeline and make sure you don't miss the deadlines.
Final Submission Guidelines
Submission Deliverables
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.