Challenge Overview
Welcome to Cloud Dealer UI Prototype Challenge
The main task of this challenge is to create the Cloud Dealer HTML-CSS3 UI Prototype based on the provided PSD Storyboard design. UI Prototype will use Responsive Design solution that will works within Desktop/Tablet and Mobile Platform.
On this challenge, we need you focus to create prototype that will fully work within DESKTOP platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version.
Final Submission Guidelines
Read more details UI Prototype Requirements and Flow below.
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.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.
CSS3
- 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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
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.
Documentation Provided
Cloud-Dealer-Storyboard.zip - Cloud Dealer Storyboard Design
PAGE REQUIREMENTS:
Notes
- All pages of Cloud Dealer UI Prototype must support responsive design solution.
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Match All Fonts like on storyboard. Use @font-face technique.
- For this Desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme.
1. Landing Page
screenshot: 1.1.Landing.png
- This landing page before user logged in
- Page background need use fluid layout as width as browser screen, while main content area has max 980px width
- Put dead link for logo
- Click Top Navigation menu will scrolling to required sections.
- Make sure transition running smooth and no lag.
- You also need set active state after click some menu navigation
- Login button will open the Modal Windows.
- When user click on Notification icon, need show flyout (12.LayoverAlert.png)
- View All will be dead link
- Click outside the flyout will close the flyout
Login Modal Windows
screenshot: 1.2.Login.png
- Match styling for input and check, we need round corner created use css properties
- Click “X” button will close the modal
- There’s default value on username and password input.
- On focus, default value will hide and user can start typing
- Sign In will take user to dashboard page
- Modal windows should always place center while scrolling
“What is Cloud Dealer?” section
- This section background need to be fluid as wide as browser screen
- Laptop image need remain in place
- Enroll Now button will load the modal
- Learn More will be dead link
- In the right side, there’s floating Facebook, Twitter and Email button. Put dead link for them all
Enroll Modal Windows
screenshot: 1.3.Enroll.png
- This modal show up after click Enroll Now button
- Click “X” button will close the modal
- There’s default value on inputs
- On focus, default value will hide and user can start typing
- Enroll button will take user to dashboard page
“Why”
- Match text content and properties
- Icons will be background image based
- Tablet image in the right side need remain in place when browser resized
“How”
- Each Timeline need easily updated with different border in the future
- Content area need remain centered
“Pricing”
- This pricing show 3 columns format
- The center column is active column
- When navigate the prev and next button it need resize the column size and style like the Diamond column
- The other inactive column will show white background and small size
- Put dead link for Sign Up button
“Marketplace”
- This area use slideshow
- Suggest how animation works. Just make sure display correctly and have smooth transitions
- User can navigate when click prev and next arrow
- Below slideshow, user see video information
- Put random vimeo and match content in the right side
- Build Your Cloud Solution background need fluid as browser width.
- Enroll Now button need show up modal window stated above
- Client logos displayed in dark background. All logos will be clickable. Put dead link for now
“Contact”
- This is Contact section
- Match form fields
- Show defaults values, when user focus values need to be hidden
- Put deadlink for social icon link
- Map should load google map. You can put random place.
Footer
- Footer background need fluid as browser width
- CloudDealer and copyright text will be plain text
- Put dead links for footer links and social icons
2. Dashboard
screenshot: 2.Dashboard.png
- This is Dashboard page after user logged in.
- For this dashboard Layout, we need all content area fluid as browser width. Different than landing page.
Header Layout
- Logo always placed in left side, click the logo will take user to Dashboard page
- Main navigation menu placed in the right side when browser resized
- Notification icon and Cart icon need support the numbers indicator.
- Make sure when red rounded can filled up than 3 characters
- “Welcome Robin and icon” should works like dropdown menu with arrow in the right side. Show us sample design look.
Left Sidebar Layout
- Sidebar must displayed on the left side of browser screen with fixed width.
- Left sidebar background must always fill the browser height.
- By default Sidebar show expanded state
- User can collapse the sidebar by just displayed the icons only by click Arrow in the right side of Dashboard title. Refer screenshot: 7.Service-Detail.png
- Match active state style
- Notice there’s number indicator next to sidebar menu title. Make sure it not break when filled with more characters
- My Project, Solution and Application menu have children menus and expand/collapse functionality
- On each of them, show tree view link
- You need anticipate easy when user add/remove the children menu. So, the style remain consistent
- Logout button use blue color and always placed in the bottom, stick to the footer area
- Browser need remember last state of sidebar in expanded or collapsed state. Use browser cookies.
Main Content Area Layout
- Main content area must fluid as browser width.
- When resize browser all content inside it will need adapt the fluid layout.
- You can see below the header, there’s “Solution 12”. This need works like dropdown menu. Show us sample design look.
- Seach input placed in the right side. When user focus/click on "Search" text, will allow user type.
- Press enter or Search button will take to Search Result page.
- For this Dashboard page, main content area filled with:
Statistic Area
- Create tab functions to access Day, Week and Month. Show random content for each tabs
- Progress bar need show animation on page load
- Show different style when reach complete progress
- We need easy way to config the progress bar and content inside progress bar
- Notice there’s “!” button for each statistics, put dead link for now.
Dashboard tabs
- Create tab function for Projects, Solutions and Applications
- Match style for active/inactive tab
- Each boxes have shadow style
- Project Name and icon will be link, put dead link
- Refresh and Setting will be dead link
- Icon will be dead link
- url will be dead link
- Opt and Run will be dead link
- Border on each icons need rendered as css property
- Add new Project button will linked to 10.AddProjectInfo.png
- You can add some random content for other Solutions and Applications tabs
Footer Layout
- Footer will always display in the bottom
3. Marketplace
screenshot: 3.Marketplace.png
- This is Marketplace, set active state for left sidebar menu
- Notice, for this page, top right contains Grid and List View buttons
- Show Grid view by default. List View will be dead link
- Search Area show up on top. User can change the filter by click arrow in the left side. Show design content look.
- On focus search input will be blank.
- There’s checkboxes for Third Party, Community and Experimental
- Press Enter on keyboard or click Search button take user to Search Result page
- Remember on wider screen, all boxes need automatically move up fill the main content area place in the right side.
- “!” on every section title will be dead link
- Show tab functions for Featured Latest and View All
- All boxes have hover state with bigger size and blue border.
- View More will take user to Service Detail page
- Need Help Banner displayed in the bottom, when resized, background need filled window area
- Get Started will be dead link
4. Search Result
screenshot: 4.Search-Grid.png
- This is Search Result page
- Search Result information displayed below the title
- “Java” is a keyword text, click “x” button need remove the keyword
- View All Categories need works like dropdown menu. Show how sample design look.
- Grid view and list view button in the right side
- Each boxes will have hover state
- View More will take user to Service Detail page
- Need Help Banner displayed in the bottom
- This is how List view look (5.Search-List.png)
- Icon boxes not have hover state
- Click the Service Name will take user to Details page
- Match table content on List View
5. Service Detail
screenshot: 6.ServiceDetail.png
- This is Service Details page, user access this page after click boxes in Marketplace and SearchResult
- Match area below top navigation to show search area
- For this page, you need show up right sidebar.
Service Details Area
- Click Arrow in the page title take user back to Marketplace page
- Third Party box will not have hover state
- View Docs will be dead link
- “!” will be dead link
- Match table content
- Compare will be dead link
- Add to Cart button will take user to Cart page below
- There’s tab function for “Feature”, “Specification” and “Review”
- Similar Solution area, each boxes hover will show bigger size and blue border with more detail button
Add Service Area
- Right sidebar will use fixed width, only the center area will be fluid.
- There’s 3 dropdown for Project App and Selected plan
- Follow style on storyboard and create sample content for drop down menu function
- Create button will take user to 11.CostumSolution.png
- Build Custom Cloud Solution
- Get Started links will take user to 11.CostumSolution.png
- Need Help Building banner displayed in the bottom
6. Cart
screenshot: 7.Cart.png
- This is Cart page, you can see page divided by 2 columns:
Cart area
- Back arrow will take user back to Service Detail page
- Read our Faq is dead link
- Match table content
- Boxes will not have hover state
- Title will take user go to Service details page
- Simulate when user click “x” button to remove the row
- Edit can just use dead link
- Unit should can updated, show us how it works
- Discount code, Redeem just dead link
- Update and Check out will be dead link
- Latest Order displayed in the bottom
- Match the status color differences
- View all will be dead link
User Info area
- This area will use fixed width
- User info placed on top with Edit button. Put dead link for Edit button
- Account Type, match content
- Budget, show animation progress on page load
- Need Help Building banner displayed in the bottom
- Get Started links will take user to 11.CostumSolution.png
7. Manage
screenshot: 8.Manage.png
- User land on this page from Manage menu on main navigation
- Create tab functions Day, Week and Month
- Statistic, show animation progress on page load
- Notice there’s Problems type on progress bar
- Projects, Sort by menu placed in the right side, show sample content look
- Boxes need blue border hover state
- These boxes need fluid as browser width,
- Add new Project button will linked to 10.AddProjectInfo.png
- Recent Orders need show last 30 days menu and view all link
- Show table content
- Hover on each boxes need bigger size and blue border with View More button
- Recent added user, need also use hover stat. Refer 10.Project-Detail.png
8. Project Detail
screenshot: 9.ProjectDetail.png
- This Project details accessed from left sidebar children menus Under My Project
- Show active state in left sidebar menu
- Company information show up on top area.
- Budget and Resource use different background color
- No hover state for this box
- Latest Order showing table content
- Services area need create Grid and List view button
- Add New User will be dead link
- Hover state need add for each boxes
- Users section need show Grid and List view. Refer details info below.
- Users section show hover state for each boxes
- Add New User will be dead link
- Project Details information display in table format
- Add “Edit” button in the bottom of Project Details. FYI: this is not exist in storyboard
- Click the Edit button will take user to Add Info below
- Match column background
- Use Drop Down on table
- Project status in the bottom use progress step format
- Colored section is completed step
- Grey color use is incomplete step
9. Add Project Info
screenshot: 10.AddProjectInfo.png
- Project Information displayed on top
- No hover state for box
- Match the form field
- make sure all datepicker, dropdown style and functions works on any required browsers.
- Submit button will be dead link
10. Custom Solution
screenshot: 11.CostumSolution.png
- This is Custom Solution page
- Create Custom Solution form placed on top.
- Match all input/dropdown style
- You need build autocomplete for Preffered Program Language
- Click X button will remove selected value
- Put dead link for submit button
- Our Recommendation placed below
- Service you will need display as table list.
- Get a Quote will be dead link
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
The following pages are required in your submission:
1. Landing Page
2. Dashboard
3. Marketplace
4. Search Result
5. Service Detail
6. Cart
7. Manage
8. Project Detail
9. Add Project Info
10. Custom Solution
HTML/CSS Requirements:
You're encouraged to use and take advantage of CSS3.
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.
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.
No inline CSS styles- all styles must be placed in an external stylesheet.
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
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)
Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
Your code must render properly in all browsers listed in the Browser Requirements section.
Browsers Requirements
- IE9
- IE10
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version