Challenge Overview
Welcome to SunShot - Building DataCloud Application UI Prototype REPOST
The main task of this project is to create the SunShot - Building DataCloud Application UI Prototype based on the provided Storyboard design. For this challenge you just need focus on Desktop layout with responsive solution. We reduced some screens for this challenge, let us know for any clarifications.
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Storyboard.zip - Storyboard Design
Important!
- For this UI Prototype submission we need your submission support responsive solution with focus on Desktop only!
- Provided storyboard for Desktop version using widescreen display (1280px width).
- All pages inside this UI Prototype submissions will use fluid layout
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- Match similar fonts in your submission. Use "Helvetica Neue” font in your UI Prototype Submission
- For this challenge you must use AngularJS and Bootstrap
- All datas as possible need loaded by JSON
- Your submission need only contains screen that explained below.
UI Prototype Page Requirements
1) Regular User Login Page
screenshot: bdc_01 Regular User Login Page.png
- Match login text above the form
- Put a checkbox to Remember me option
- Forgot Password placed in the right side, put dead links for now
- Show us validation error screen with red border.
- Login button take user to Dashboard - All Sites page
2) Dashboard - All Sites
screenshot: bdc_07.1.1 All sites.png
- This is dashboard look and feel
- In the header bar there’s search, setting and help buttons
- Click Search button need show overlay background and search input (screenshot: bdc_08.2 Search.png)
- User can select option between Global and in this section link
- Click “x” button need hide the search
- Settings and Help button can be dead link.
- User see “All Sites” page by default
- User button not show active state
- Enterprise is menu link and take user to Enterprise page
- In the left sidebar, there’s main menu navigation for Sites, Notification and Reports.
- Notification and Reports can be dead link.
- Show active and inactive menu
- There’s + button in the right side of Sites menu
- User can expand/collapse sub menu by click the “+” button (screenshot: bdc_07.2 Overview tab.png)
- Show input search below the Sites menu
- Active state indicated by bold text and blue highlighted background row.
- User can scrolling sub menu options
- Scrollbar can use browser based style
- Click the “-” button again need collapse the section
- In the main content area, you need build tabs function for “Table View” and “Map View”
- Notice there’s All Sites title in the left side
- And “Table View” and “Map View” in centered of page
- Show “Table View” by default
- Table View Tab, basically table content will be same like in Profile Edit page
- Map View Tab, map need build with Google Map (screenshot: bdc_07.1.2 All sites - Map View.png)
- There’s some different marker in map
- Show map buttons like zoom in/out, street view icon etc
- There’s marker with numbers too
- Below map, there’s scrolling area for Site information
- When user expand Sites menu by click the “+” button
- User can selected another Site
- And then need open Site Detail screen in the right side area
2) Site Details Page
screenshot: bdc_07.2 Overview tab.png
- This is Site Detail screen look and feel
- Selected Site marked with blue background in the sidemenu list
Overview Tab
- Overview tab show by default
- User can navigate to other Site by click “<” and “>” button that placed below the User button
- OR by navigate to another row from Site menu
- OR user can change to another site when click another marker in map
- Show overview information below the title
- Map area show black marker as Site Details placement
- Other site indicated by smaller and blue colored marker
Notification Tab
screenshot: bdc_07.3 Notifications tab.png
- Notification Detail show table layout format
- All row collapsed by default
- Click each row need ability to expand the row and show up another additional information
- When additional information show up, need displays button, and checkboxes
- All buttons can be dead link
- There’s icon in the right side of each row
- Click the icon need show the modal window (screenshot: bdc_07.4 Details pop-up.png)
- In the modal window, user can access another row by click “<” and “>” button
- Click “x button need hide the modal
- Click Filter button need show up Filter modal (screenshot: bdc_07.5-Filter-pop-up.png)
- Match each column forms
- Need set fixed height for each column
- And need ability to scroll the content for each columns
- Click Reset button need clear all filter selection
Data Tab
screenshot: bdc_07.6 Data tab.png
- This is Data tab
- Show list of All “Sites” status with different color of Progress Bar
- Show animation progress bar on page load
3) Notifications
screenshot: bdc_08.1 Notifications.png
- This is Notifications page look
- Notification page show table layout format
- There’s Notification Preferences in the right side of title. Put dead link for now
- All rows need collapsed by default
- Click Search button need show overlay background and search input (screenshot: bdc_08.2 Search.png)
- User can select option between Global and in this section link
- Click “x” button need hide the search
- Match table information for Notification layout
- Click each row need ability to expand the row and show up another additional information
- Put all buttons to be dead link for now
6) Enterprise Page
screenshot: bdc_9.3 Enterprise.png
- Show active menu for Enterprise
- In the main content area, show blocks of Enterprise
- Match data for each blocks
- Site link take to Site page
- Notification and Report can be dead link
- In the bottom right of each block there’s some icons need displayed
- Brand title are clickable and take user to Brand Page
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/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.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Android Browser