Challenge Overview
Welcome to FAST 72hr! Styx Dashboard Responsive Application UI Prototype Challenge
We just get new look for Styx Dashboard application. We need your help update existing prototype into fluid and responsive look and feel that will works within Desktop and Tablet Platform. You must use CSS Media Query so prototype can use different layouts when viewed on tablet and mobile.
Submission deadline just 72 Hours. Post your questions soon and submit early!
Final Submission Guidelines
Attachment Files
FreeVersion.zip - Existing UI Prototype as Base Updates
Storyboard.zip - New Storyboard Look and Feel (Adobe Illustrator Fomat File (.ai))
OnGuard-WATCH_concepts_121114.pdf - Guideline of Updated New Look
RobotoTTF.zip - Use this font in your updated UI Prototype
PAGE REQUIREMENTS:
Notes:
- Match All Fonts like on storyboard. Use @font-face technique.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- First priority for this prototype is you need make sure all charts in all pages display consistent and correctly in all required browsers.
- Existing chart plugin need remain works on updated look and feel display consistent and correct in all required browsers.
Lite Version Responsive Updates Tasks:
screenshot: 01-Lite.png
- Whole UI Prototype page need to fluid as browsers screen.
- Use system-management.html as base of your updates
- Sidebar can use fixed width in the left side
- Logo and main navigation is part of left sidebar
- This expanded sidebar only show up on Desktop platform (screenshot: 03-Sidebar.png)
- On tablet platform, sidebar only showing the buttons/icons only
- Another main content and header must use fluid width
- Header bar showing fluid red background
- Calendar button use fixed width in the right side
- Whole area of Calendar button is clickable
- Click Calendar menu on top right need show up calendar information (screenshot: 02-Calendar.png)
- When calendar show up, whole content area covered with overlay background.
- Calendar month need show arrow in the left and right side
- Match Calendar Style
- List View displayed in the bottom
- “+” button need show up Add New Event in the left of list view. You can use existing form.
- Make sure all boxes in the content area use fluid width
- On top of content area, match system check information
- system check information slideshow function need remain works
- All boxes need use rectangle shape format instead rounded like old version
- System Information and Database Backups displayed on top
- Match System Information and Database Backups content
- View Log is text link
- System Performance, match graphic style with single line and the legend style
- Match boxes style and any content inside it
- Follow Calendar button look and feel. You also need suggest us how calendar style designed based on new look and feel
- New Badges Created and Alarms Generated per Day. Match hover style look to show rounded icon
- Error Log Monitor in the bottom show updated graph look and legend.
- Let us know if need clarification if unclear updated look.
- Important!: When resize browser screen, make sure all section and area use fluid width and not break any layout and functions!
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 Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype
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.
BROWSER REQUIREMENTS
Windows & Mac OS
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet/Mobile
- Safari Browsers on iPad