Challenge Overview
Welcome to Gridmates Parallax Landing Page Responsive Web UI Prototype Challenge
For this UI Prototype challenge we need you to create Gridmates Landing Page by use Parallax Scrolling effect as main attraction. Also, Landing page must support responsive layout when viewed on Desktop and Tablet/Phone platforms (Landscape and Portrait Layout) using CSS3 Media Query technique.
Read more details about UI Prototype Requirements and Click Flow below.
Note: Submission timeline is just 72hr! We compensate you with higher prize to create single landing page of responsive web.
Final Submission Guidelines
File Downloadables:
storyboard.zip - Storyboard Design
Important!
- In this challenge you just need build 1 Landing page by using Best Practice of Responsive Design solution for Desktop/Tablet and Phone(Landscape and Portrait View).
- We are encouraged you to use CSS3 Media Query instead of device detection for this UI Prototype submission. So, when we resize your UI Prototype in desktop browser, tablet or mobile width breakpoints must adjust fluid layout.
- Use CSS3 Media Query to load different styles for each page and don't build different HTML for different device/layout.
- We not provide Tablet layout storyboard. We need your best judgments to show fluid layout on Tablet view. No score down!
- We also need make sure all graphics inside your UI Prototype submission look sharp when viewed on Retina Device!
- You need embed “Lato” fonts in your UI Prototype submission. Grab from this site: https://www.google.com/fonts/specimen/Lato
Gridmates Landing Page UI Prototype Requirements
screenshot: 01_Default.png
- This is default look and feel of Gridmates Landing Page
Parallax Scrolling
- As the content in the page is limited, we designed this page as a Parallax scrolling and feel that could make the concept more interesting for users to work on.
- We are looking for your creative thoughts on how best this page can be builded, please have a look at the parallax scrolling references to get inspired.
- Any other interaction within this parallax scrolling that you think would make the concept more interesting?
- Parallax scrolling library MUST use open-source license
- Parallax effect not limited to background image only, feel free use effects for ALL elements inside your prototype
- The important things is Parallax Effect need run consistently across required browsers
- Explore the Parallax Library references below to let you inspired more about parallax scrolling:
-- http://dzinepix.com/2015/best-jquery-parallax-scrolling-tutorials-2015/
-- http://webdesigncone.com/2014/best-jquery-parallax-scrolling-tutorials/
-- http://www.webhostingreviewboards.com/default/10-best-jquery-parallax-plugins-for-web-developers/
-- http://jquer.in/tag/parallax/
Layout
- All areas background need should fluid layout when viewed on wider desktop screen
- Main content area can use fixed width on desktop browser
- Tablet and mobile must use fluid width for all elements
Header
- Header bar need use floating technique as user scrolling the page
- Gridmates logo placed on top left, click this logo need move to top
- Click Main navigation menu should let user scrolling to related page.
- When scrolling need placed on exact top side of related sections
- Make sure header bar not overlapping with related sections
- Here’s the stop point for each menus:
-- Home > Scroll to “Welcome to Gridmates”
-- How it works > Scroll to “How it Works”
-- Send Energy Now > Scroll to “Let Your Light Shine” section
-- News > Can be dead link for now
-- Contacts > Can be dead link for now
Welcome to Gridmates
- Background image need show fluid layout as browser width
- Show hover state for both buttons
- Fix "Whatch Who You Help" typo into "Watch Who You Help"?
- Put dead link for now for both buttons
How it works?
- This section explains about the purpose of this site
- Show animated progress bar behind the graphics
- Show 3 columns layout format
- Each text for each columns need editable
- “Start Now” button should scroll page to next section
Send Energy Now
- The flow is broken down into two steps:
Step 1:
1.1. User will need to enter their zip code
- Need to ask a question if the user has rooftop panel, with YES or NO options.
- By Default, Do you rooftop panel set with “NO” option
- Based on the option chosen by the user, we need to show the below flow.
- If user chooses “NO”, we need to show questions given in point 1.2
1.2. User has not installed rooftop panel (If users chooses “NO” in 1.1)
- User need pick “Square feet of solar panels” OR “Installed Capacity” radio options
- Input will be disable before user select related button radio button
- Match radio button style for selected and not selected style
- User see measurement before the arrow
- Calculate button enabled after user type the value
1.3. User has installed rooftop panel (If users chooses “YES” in 1.1)
screenshot: 02_Estimation.png
- If user chooses “YES” option, basically show same layout just need add new link for “Already have enphase credentials?” link below “Calculate” button
- “Click Here” link need show another input that ask the user to enter their Enphase Key and Password. (screenshot: 03_EphaseKey.png)
- If the user doesn’t know the credentials (or isn’t an Enphase user), show a link to Register with Enphase.
- You can put dead links for now.
- If the combination is incorrect show an error message with the option to Register with Enphase. See Error message below "Calculate" button
- Once they enter the login credentials and click Calculate button, page scrolling to Step 2 below
Step 2:
Based on the above inputs, we need to show these below results and additional options for the use to choose.
- “Last Month Energy Production” in KWh and the amount it would have cost in $ (dollars).
Your Impact:
- We let user select a percentage for these range : 2%, 5%, 10%, 25%, 50% and 100%
- Based on the chosen percentage, we show them the amount of energy that in KWh and $ (dollars) and how many days it will help the user in need of energy.
- When user drag the slider, they can see the change in amount of energy and cost that will be shared.
- Create function to show auto calculation: “Selected Percentage”/”Last Month Amount and Energy”
- Send Energy button placed below the slide. Put dead link for now.
Client Priorities (The items that are considered highest prototype priorities)
- Exciting Parallax implementation for GridMates Landing page
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
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.
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.
CSS3
- 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
- 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.
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.
Browsers Requirements
- Safari Browser on Desktop (Mac & Windows)
- Firefox Browser on Desktop (Mac & Windows)
- Chrome Browser on Desktop (Mac & Windows)
- Safari Browser on iPad Standard/Retina (Landscape & Portrait View)
- Safari Browser on iPhone/Retina (Landscape & Portrait View)