Challenge Overview
Welcome to SISN Responsive UI Prototype Challenge
The main task of this project is to create the SISN Responsive UI Prototype Challenge based on the provided PSD Storyboard design.
Final Submission Guidelines
IMPORTANT!
- For this challenge, your submission must use best practices of responsive layout that works on Desktop and Tablet platform.
- Use Gotham.zip for fonts in your submission with @Font-Face solution
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Files Downloadable
Storyboard.zip - Storyboard screens and PSD files
SISN Responsive UI Prototype Challenge Requirements
1. Landing Page
screenshot: 1.Collaborate.png
- This is Landing page of SISN app before user logged in
- Logo placed in the left side and can be dead link
- Main Navigation and Login button placed in the right side.
- Collaborate, Share, Manage in main navigation are anchor linked to corresponding sections of the page
- Dots on right hand of the screen indicate which section of the page the user is on
- A user should be able to click each dot and the page will animate/ scroll to that section of the page
- Top Nav should be sticky to the top of the browser as the content scrolls underneath
- Click Login button need show up the modal window (screenshot: 4.1.Login.jpg)
- Create separated Landing page with different modal login (4.2.Login-ALT.jpg). Notice, this version show smart card image in the left side.
- Login modal window need always placed centered on browser screen
- “X” button need close the modal window
- Modal Login divided by 2 columns, Smart Card and Organization Credentials
- There’s text placeholder on input fields, on cursor focus, text need to be hidden
- User can select other option for “Organization Name” dropdown
- You can use browser base style for dropdown. Match height and spacing
- “Click Here” & “Learn/register” can be dead link
- Both Login button take user to Dashboard page.
- Click Main navigation menus need scrolling to related section below.
- Animation scrolling need smooth across required browsers
- Main content area need use fixed width and remain in center of browser screen
- While page background need use fluid width and covered all screen area. You need use css background color.
Introduction section
- Clicking on "Learn More" in these areas would anchor link to the corresponding page sections below
- All Title need editable, match font properties
- User can hover each “+” buttons and show the tooltips
- This section includes an interactive graphic that has rollover states for the 3 sections of the main graphic (Share, Manage, Collaborate)
- Tooltip content height need auto expand when filled with more data
- This is tooltip when user hover on Manage button (screenshot: 2.Manage.png)
- This is tooltip when user hover on Share button (screenshot: 3.Share.png)
Collaborate section
- Match column layout format
- All text need editable
- Notice there’s icons in the right side of rows in the bottom
Share section
- Share information text placed on top of section
- Image in the right side
- Play button need clickable, put dead link for now
Manage section
- Manage quick information use center alignment
- Manage screenshot in the bottom of section
Share, Comment and Secure Knowledge section
- This section divided by 3 columns layout
- Match font styling and properties
Twitter section
- Twitter section has slideshow function that will update the content regularly
- Slideshow need auto slide function and by click on dots pagination
- Slideshow animation should have a timer between showing different Tweets
Ready to Connect
- Login button need load Login Modal Window (screenshot: 4.1.Login.jpg)
- Learn More can be dead link
2. Dashboard
screenshot: 5.Dashboard.png
- User landed on this page after logged in
- Dashboard page need use fluid width as browser screen
- Sidebar can use fixed width and height must fluid as browser height. You can use javascript function
- The right side of Dashboard page need use fluid width
- User can hide/close the sidebar by click “hamburger” menu button
- You need create cookies function to store “collapsed/expanded” state of left sidebar
- On collapsed state, sidebar only need show icon + numbers (screenshot: 6.MyNetworks.png)
- Show active state on left sidebar bar
- There’s number indicator on sidebar menu
- Notice there’s rounded for “Alerts” menu
- Logout button always placed in the bottom of browser screen
- Header bar need to be fluid width
- user can type on Search text
- Alert icon show number indicator
- Welcome User need arrow in the right side. Put dead link for now
- Gear icon can be dead link
- User information placed below the header, match font size and properties
- Each columns need to be fluid
- There’s sub-navigation in the bottom of User information
- Match active and inactive state
- “Grid” and “List” icon placed in the right side
- Each Network use different colors in the left border
- Network Name and Pencil Icon need take user to Network Detail page
- Share, Edit and Delete buttons placed in the right side. When hover need show tooltips (screenshot: 11.Tooltip-Hover.png)
- Make sure you show tooltips for every buttons in another pages.
- Click on Share button take to Share Network page
- Delete button can be dead link
- icons information in the bottom filled with number indicator
- There’s tree chart icon in the right side. Put dead link for now.
- Loading Bar at the bottom would load more networks or files as a user scrolls down
- Simulate how animation preloader works, then after some seconds more row show up
- In the right column, there’s “Create Network” button. Put dead link for now
- Network Summary, progress bar need easy to config
- There’s different color for progress bar
- Recent Activity, show line connection in the left side
- Recent File, need show icons in the left side
3. My Networks
My Networks Tab
- User landed on this page after click “My Networks” in sidebar menu
- This tab show by default
- Page title displayed below the header
- Tab navigation displayed below page title
- Grid and List view button in the right side
- Grid view show by default
- FYI: Active state need show “blue” color. Storyboard look is not correct
- New Folder and Create Network buttons can be dead link
- Grid layout need use fluid width
- Network Name need take user to Network Detail page
- When browser resized, box need auto move up
- Match color for each border boxes
- There’s icons in the left side of each boxes for this page
- This is how List View look (screenshot: 10.ListView.jpg)
- No need display right sidebar for List view, whole row need to be fluid.
- My Networks content display as table list format
- No bottom margin below each row
- Loading Bar at the bottom would load more networks or files as a user scrolls down
- Simulate how animation preloader works, then after some seconds more row show up
Shared With Me Tab
screenshot: 7.SharedWithMe.png
- This tab show list layout of Networks shared with user
- Show active state for row
- Details section placed in the right side
- Shared user information need created as rounded css
- Recent activity need show connection line
4. Network Detail
screenshot: 8.NetworkDetail.png
- Back button take user to My Networks
- Breadcrumb are clickable, except the last child
- 3 Buttons in the right side can be dead link
- below breadcrumb, there’s numbers with icons
- Grid and List View placed in the right side
- Network detail page divided by 2 columns, each columns need use fluid width
- Search input show on top left. User can type the title
- New Folder, Add New File and Delete button can be dead link
- Overview description expanded by default
- Click the arrow need collapse the overview description (screenshot: 9.FolderContent.png)
- You need always show the “Networks 123 > Marketing Resources” text
- Click on each row need take user to Document Detail page
- Networks File display in table list format
- File Type Icons placed in the left side
- User can sort by Modified column. No need build sort function
- In the right column, user see “Network Activity”, “Shared With” and “Users” list
- There’s edit button in the right side of “Shared With”...this links to sceen shot 12.NetworkSettings.png
- “Show more” can be dead link
- In the bottom of “Users” section, there’s “Add New User” button, put dead link
5. Document Details
screenshot: 13.DocumentDetails.png
- This page use different layout than other Dashboard.
- You still need show fluid layout for this page
- User landed on this page after click File row in Network Detail page
- Logo place in the left side
- Menu Button would expand main navigation left hand bar
- Documents Title placed next to menu button
- In the right side, click “x” button need take user back to Network Detail page
- Document samples placed in the left side. You can put image based.
- Background need created as css properties
- Document Activity placed in the right side
- User can type on Type Reply input for comments
6. Share Network
screenshot: 12.NetworksSettings.png
- User landing on this this page after click the Share button
- Back button take user to previous page
- Breadcrumb placed next to back button
- Shared With show some list of Share information
- Create “toggle” function for “Upload Permissions” and “Read Uploaded Files”
- In the right side, there’s dropdown for “Organization Name” and “Username”
- “Share” button can be dead link
7. User Dashboard
screenshot: 14.UserDashboard.png
- Use same template as 5.Dashboard.png as the starting point for this page
- Create this in separated page
- Basically this page use same layout like Dashboard page
- Match different username for this page
- Notice there’s no “Users” and “Add User” menu in page
- Notice there’s no “Create Network” button in 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 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.
Browsers Requirements
Desktop
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet
- Safari Browsers on iPad (Landscape & Portrait)