Challenge Overview
Welcome to the Sunshot - SolarMerchant - Commercial Portal Pages Prototype Challenge! Solar Merchant is a platform for commercial developers to scope new projects. The businesses who don’t own building is very difficult for them to go solar. The goal of this project is to simplify and shorten the purchasing of solar for selling to commercial businesses.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML/CSS/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery or jQuery for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the HTML prototype of this app by using industry standard best practices.
Overall Requirements:
1. Layout
- Left and Right sidebar are fixed width.
- Main content will be fluid.
- Minimum width as per storyboard. The provided storyboard is retina version, the page width should be 939px (50% of the storyboard) .
- Provide retina and non-retina according to display.
2. Font - use font stack (avenir, 'avenir next', helvetica, arial, sans-serif) instead of embedding Avenir.
3. Graph
- Use D3JS for all the graphs/
- Data should be pulled from JSON file(s).
4. Header
- Link the logo to http://pickmysolar.com/
5. Left Sidebar
- “Logo Here” including the box is an image placeholder.
- The elements listed in this sidebar are not navigation items but labels.
Page Requirements:
The following are the screens and functionalities needed for this challenge.
1. Index page
- Create an index page that will link all the pages outlined below.
2. NorthPoint HOA
- Refer to Page1.png
- Top maps are embedded Google maps. The left side is in Earth View, while the one on the right is in Map View.
- Use this address for the maps.
- “CONTIUNE” should be “CONTINUE”.
- Implement form validation.
- All buttons are dead links.
3. Anywhere Building Complex
- Refer to Page2.png
- Top map section have similar functionality as outlined in “2.NorthPoint HOA” page.
- “Placeholder image for co-branding” is an image placeholder including the box.
- Make the email a link.
4. Public RFP
- Refer to Page3.png
- All links/buttons are dead links.
- Implement the graph using D3JS.
5. Shared Solar Market Place
- Refer to Page4.png
- Implement Google map in Map view. Use this address in the map.
- “Hide Map” button will hide the map section including this button and move the bottom content up.
- When the map section is hidden, show the “Show Map” button. This will be beside the dropdowns (see Page5.png for reference).
- Use dummy options for the dropdowns.
5. Project Dashboard
- Refer to Page5.png
- Implement all graphs using D3JS.
- “Show Map” button will show the map section similar to the map in Page4.png.
6. Project Profile
- Refer to Page6.png
- Implement all graphs using D3JS.
- Top map section have similar functionality as outlined in “2.NorthPoint HOA” page.
7. Proposal Building
- Refer to Page7.png
- Implement Google map in Earth view. Use this address in the map.
- Implement all graphs using D3JS.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
HTML
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
Javascript
- 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.
- Use jQuery library for this challenge.
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.
- Use separate retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.