Challenge Overview
Welcome to SunShot - Simplify Solar - Responsive Learn Solar UI Prototype Challenge
For this UI Prototype challenge we need you to create Simplify Solar pages by that will 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.
Final Submission Guidelines
File Downloadables:
https://www.dropbox.com/sh/9mw7lxh0u2a7vnz/AAAzjkkJrXLTtfXA0OkeRN_Na?dl=0 - Storyboard Design
Important!
- In this challenge you just need build some required pages by using Best Practice of Responsive Design solution for Desktop/Tablet and Phone(Landscape and Portrait View).
- You must 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 don’t provide Tablet layout storyboard. We need your best judgments to show fluid layout on Tablet view. No score down!
- Make sure all graphics inside your UI Prototype submission look sharp when viewed on Retina Device!
- Match all Fonts like storyboard look:
1. Lato : http://www.fontsquirrel.com/fonts/LATO
2. Roboto : http://www.fontsquirrel.com/fonts/roboto
3. Open Sans : http://www.fontsquirrel.com/fonts/open-sans
SunShot - Simplify Solar UI Prototype Requirements
Layout
- All background need to use fluid layout when viewed on wider desktop screen
- Main content area can use fixed width on desktop browser
- On Tablet and mobile must use fluid width for all elements
1. Landing Page
Desktop Version
- This is how Landing page screen look (screenshot: 01_Home.jpg)
Background header
screenshot: 00_Home_Loading.png
- Background image need covered whole screen area
- At first load of this landing page, background header need filled browser screen height and show a loading progress.
- Pie chart and text percentage need show animation effect
- Loading progress need use actual preloader functions to load all files inside the your prototype
- After progress completed, background header need reduced a bit like shown in this screenshot (screenshot: 01_Home_Navigation.jpg)
- There’s a “Scroll down” button to let user scrolling down to next black bar that contains user information
- Use simple Parallax scrolling for the header background. You can see sample for this site: http://pixelcog.github.io/parallax.js/
Floating Dotted Navigation
- You can see there’s floating dotted navigation in the left side of screen
- Orange colored dotted reflecting current section in browser screen.
- Click each dotted need scrolling to related sections explained below
- Here’s the dotted navigation target from top to the bottom for floating navigation
-- 1st dotted: scroll to background header
-- 2nd dotted: scroll to black bar consists of user information
-- 3rd dotted: scroll to “Solar 101”
-- 4th dotted: scroll to “Solar Physics De-Mystified”
-- 5th dotted: scroll to “Rooftop Solar”
-- 6th dotted: scroll to “Money Matters”
-- 7th dotted: scroll to “The Simplify Solar Way”
- When user scroll up/down to related screen, also need reflecting to the active dotted menu navigation
Black Header Bar
- Black header bar need use transparent color.
- Black header bar background width need filled whole screen area
- When user scroll down the page below the background image, black header bar need remain floating on top of screen
- Logo can be use image based and can be dead link for now.
- In the right side of black header bar, click the menu button need show up the sub-menu navigation (screenshot: 01_Home_Navigation.jpg)
- Set the “Home” menu to linked to “Dashboard” pages
- Other menus can be dead link for now
- Show orange background and white text for the menu hover state
- Notice different color for “Terms and Conditions” and Privacy Policy
- User information border need created as css stylesheet
- Click the “user information” area need show flyout (screenshot: 01_Home_Notif&MyProfile.jpg)
- All menus can be dead link for now
- For the alert button, there’s number indicator placed above the icons
- Make sure the number indicators not break when we filled 3 digits of numbers
- Click the “Alert” button need show flyout (screenshot: 01_Home_Notif&MyProfile.jpg)
- Flyout need automatically expand the height when we filled with more row
- Each “Alert” rows need clickable, put dead link for now
- Click the “Search” button need show flyout for “Search” input (screenshot: 01_Home_Search.jpg)
- Search buttons need created using css stylesheet instead of image based
- Only need allow one flyout opened at one time for every buttons in black header bar
- Click outside the flyout need hide related flyout
- Below the header bar, there’s 3 big rounded shapes. All text need editable
- Orange background need filled whole screen area
Course List
- Match different color styling for Completed, Current and Incomplete Courses
- Pay attention to small differences like background, text, color, border etc.
- Read more detail requirements for each list below
“Solar 101” Course List
- For all Course list in page, in the left side of rows you need show animation on page load
- Show us easy way to modified the progress bar percentage
- This course list show “Complete” status.
- “Take a Test” buttons can be dead link
- Match content like storyboard look
“Solar Physics De-Mystified” Course List
- This course list show “Complete” status.
- “Take a Test” buttons can be dead link
- Match content like storyboard look
“Roftop Solar” Course List
- Update the title into “Rooftop Solar”
- This is course list with last modified Course
- At the 1st row, progress bar only show “50%” and “Continue Test” button in the right side
- Another row show “0%” percentage and the “Take a Test” button in the right side
- You need simulate the flow, when click “Continue Test” button need expand the content below (screenshot: 02_ROOTPROOF_Solar_Component.jpg)
- Show paragraph and graphic information like storyboard look
- Below the graphic, there’s information message with the “Start Quiz#1” button
- When user click the “Start Quiz#1” button, 1st row need update the percentage into 100% and button in the right side become grey colored and row content auto collapsed
- Then, the “2nd row” become active and automatically expanded the content (screenshot: 02_ROOTPROOF_How_To_Design.jpg)
- The expanded content need show progress step in the top of this area
- Orange colored step meaning the step completed
- Show paragraph information like storyboard look
- You need simulate when user “Start Quiz” button need take user to “2nd row” collapsed then expand the “3rd row” (screenshot: 02_ROOTPROOF_Installation.jpg)
- Show paragraph information like storyboard look
- Click “Start Quiz#4” need show Questions area below (screenshot: 03_Quiz_rev.png)
- On top of Questions area, there’s progress step.
- Progress step need reflected correct progress based on completed questions
- Click Show More button need load another Questions list and expand the content area height
- For this prototype you can show 10 questions sample
“Money Matters” Course List
- This is sample of incomplete course list
- “Take a Test” buttons can be dead link
- Match content like storyboard look
The “Simplify Solar Way” Course List
- This is sample of incomplete course list
- “Take a Test” buttons can be dead link
- Match content like storyboard look
Footer
- Footer need remain centered of browser screen
- Footer background need filled whole screen area
- There’s 3 columns for Footer content
- In the left column, put quick information about “Simplify Solar at Glance”
- In the center column, there’s information of “Hotline Call” and Sunshot logo below it
- In the right column, you need show “Sign Up for Newsletter” input
- On text input focus, please hide the text placeholder
- Social buttons and copyright placed below the input
- Put dead link for all social buttons
Mobile Version
screenshot: 00_Home.jpg
- For mobile version, on page load background header need filled whole screen area
- After progress completed, background header need reduced a bit like shown in this screenshot (screenshot: screenshot: 01_Home.jpg)
- For mobile version, there’s differences of layout:
- Black header bar moved to the top
- Black header bar show search button in the right side, logo in center and menu button in the left side
- Click the search button need show up the search input below the black header bar (01_Home_Search.jpg)
- Click menu button need show additional content (screenshot: 01_Home_Menu.jpg)
-- User information moved to the top of this menu
-- User cannot slide the content area
-- Below “Privacy Policy” menu, user see some additional menus from user flyout like in desktop version
-- Notifications menu show number indicator in the left side
- Rounded shapes displayed stacked in mobile layout
- All Course List adapt mobile fluid width
- This example of expanded content (screenshot: 02_ROOTPROOF_Solar_Component.jpg)
- Do your best adjust other row to fits within fluid width
- Here’s how questions list and progress bar look (screenshot: 03_Quiz.jpg)
- Show center alignment for the title
- Footer need displayed all content in stacked layout and center alignment
2. Dashboard
Desktop Version
screenshot: 01_Dashboard_A.jpg
- This is default look of Dashboard page
- Dashboard page need use fixed width while the background color need filled browser screen
- Dashboard page divided by:
Header
- Header bar no need to be floating for Dashboard page
- Logo placed in the left side and can be dead link for now
- User information placed in the right side
- Click the user information area need show the flyout (01_Dashboard_A_Profile.png)
- There’s search, friend request, message and alert buttons displayed next to user information
- Show flyout when click buttons in the header, similar like what we have in Landing page
Main Content
- This is main content area show title bar, there’s address information in the right side
- Main content show tab navigation for “Dashboard” and “Content Manager”
- For Dashboard tab, you need show “Overview” and “Student” content
Overview section
- In the right side of header there’s dropdown to change the year
- Update the year, need automatically update chart
- Show different line chart look when change the year
- You can use this library to build the chart http://nvd3.org/examples/line.html
- Match storyboard look for chart label, legends, and coloring
- Below the charts there’s information of big text numbers
- You might need add animation effect for all text below the chart, see this site for example http://artbees.net/themes/jupiter/shortcodes/countdowns-milestones/
Student section
- Filter by dropdown placed in the right side
- User can search when type in the Search input
- Each row need created using css stylesheet
- Blue colored texts are links, put dead link for now
- Match spacing in every row
- View More button can be dead link
- User can expand the row by click the arrow (screenshot: 01_Dashboard_B.jpg)
Student Classroom section
- New View dropdown placed in the right side
- Then Filter by dropdown placed next to it
- User can search when type in the Search input
- There’s a pagination below the title bar
- Each round shape need created using css stylesheet
- Hover on each shapes need show tooltips contains for date, level and “Detail” button (screenshot: 01_Dashboard_A.png)
- Detail button can be dead link
Footer
- Hotline Call placed in the left side
- Put dead links for all footer links
- Copyright message displayed in the bottom of links
Mobile Version
screenshot: 01_Dashboard_A.jpg
- For mobile version, tab width divided equally for “Dashboard” and “Content Manager” tabs
- Whole content need adapt fluid width
- Chart need use fluid layout
- Header look similar with Landing page for mobile version
- Menu navigation show different sub-menu (screenshot: 01_Dashboard_A_Menu.jpg)
- This is how row expanded (screenshot: 01_Dashboard_B.jpg)
3. Content Manager
screenshot: 02_Manage_Content_A.jpg
- This is Content Manager tab look
- Set active state for Content Manager tab
- Category Courses show table format
- There’s checkboxes in the 1st column
- Select this make the related row become hidden
- User can expand each row by click the arrow in the right side of table (screenshot: 02_Manage_Content_B.jpg)
- inside the expandable area, there’s Topic list
- User can remove each line by click remove button
- Click Edit button take user to “Edit Topic” form
- “Add New Lesson” placed in the bottom. Click this button need show “Add New Lesson” form
- “Create Quiz” and “Add New Topic” placed in the bottom right of Content Manager Page
- “Add New Topic” button need show the “New Topic” form
- “Create Quiz” button need take user to Create Quiz page
New Topic
screenshot: 02_Manage_Content_C.jpg
- Show dropdown list for “Category Course” (screenshot: 02_Manage_Content_C_1.jpg)
- Click “Add New” button take user to Content Manager page
- Match every form content like storyboard look
Edit Topic
screenshot: 02_Manage_Content_C_Edit.jpg
- Update the title into “Edit Topic”
- This form similar like New Topic form, the differences are need filled with some values
- Click “Update” button take user to Content Manager page
- Match every form content like storyboard look
New Lesson
screenshot: 02_Manage_Content_D.jpg
- This is new Lesson form, there’s text editor for description
- Use open source library for text editor
- Click “Add New” button take user to Content Manager page
Create Quiz
screenshot: 03_Quiz.jpg
- This form divided by Question and Answer section
- Match every style for dropdown, textarea, and radio buttons
- For the Answers section, there’s radio button in the right side to select “True Question”
- When change to another radio button, “True Question” text also move to related radio
- User can add answer input by click the “+” button
- Alphabet need auto generated
- Click Preview button need show Quiz modal window (screenshot: 03_Quiz_Popup.png)
- Create button take user to Content manager page
Mobile Version
screenshot: 02_Manage_Content_A.jpg
- For mobile version, each row show different layout
- You can see there’s “Create Quiz” and “Add New Topic‘ buttons for every row
- Each buttons need take to correct form page
- This is how row expanded look for mobile version (screenshot: 02_Manage_Content_B.jpg)
- New Topic form look for mobile version (screenshot: 02_Manage_Content_C.jpg)
- Create Quiz layout for mobile version (screenshot: 03_Quiz.png)
- Adjust another form layout to fits with Mobile version
Client Priorities (The items that are considered highest prototype priorities)
- Exciting Parallax implementation for 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 (Landscape & Portrait View)
- Safari Browser on iPhone (Landscape & Portrait View)