Challenge Overview
Welcome to TC.com 2.0 Responsive - Desktop UI Prototype Challenge
The main task of this project is to create Responsive UI Prototype based on the provided PSD Storyboard design and Specification explained below.
We need focus building Desktop version for this challenge, but you need make sure your submission easy to develop the Tablet and Mobile in the future challenges
https://drive.google.com/folderview?id=0B31nrwic_6z0d0c0MU5CWEJwcVE&usp=sharing
Storyboard.7z - Use this storyboard design
Proxima Nova.zip - Storyboard Font
50/50-UI-Prototype.zip - UI Prototype as Reference with fluid background image implementation
Full-Size-Images.psd.zip - Full Size Background Images
Important!
- Suggest best practice Responsive Web Design Breakpoints
- It’s important that the code be well organized and easy to read.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Follow fonts like storyboard look, you need use Proxima Nova Font
- Your prototype submission need support these following sizes:
a. Desktop Size
- Provided storyboard using 1360px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
- Need your help for margin/spacing adjustment between 1025px and 1360px
b. Tablet Size
- Create separated CSS Media Query for Tablet Size
- Important!: For this challenge, we need your prototype able to scale down the background image and text size when viewed on Tablet size.
- Refer to provided 50/50-UI-Prototype.zip for expected scale implementation
- It’s okay if page layout/column breaking, we’ll do adjustment on another challenge
c. Mobile Size
- Create separated CSS Media Query for Mobile Size
- This can be empty for now
TC.com 2.0 Responsive - Desktop UI Prototype Challenge
1). Landing Page
screenshot: 01-a-Landing-Page.jpg
General
- All landing page sections need use fluid width
- Need your help for margin/spacing adjustment between 1025px and 1360px. For screen start from 1360px and upper can follow storyboard look
- When resize browser on desktop sizes, you need make sure margin/spacing use fluid implementation
- Suggest us how hover state look for every buttons/links as long look proper with storyboard look
Important: All Sections of Landing Page
- For Desktop screen, we need build dynamic height for all sections that covered browser height.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
Introduction Area
- Background image need covered browser height and width
- Topcoder logo need always placed on the top left side of browser screen
- Login button, Get Started and Menu button need always placed on top and right side of browser screen
- Topcoder logo need link to this Landing Page
- Menu button will open the sidebar menu, refer more detail information below
- All text information and buttons need always placed using left alignment and centered of section height
- Click the button take user to 6). What Can you Do
Why you should use Crowdsourcing
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Create 3 columns layout, match the content
- There’s icons on top of text information
- Button can be dead link
Your on-Demand Community…
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Text information and buttons placed on the left side
- Click the button take user to 3). About Topcoder - Community
What Can you Get Done
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Laptop image placed on the left side
- Text information and buttons placed on the left side
- Click the button take user to 6). What Can you Do
The Topcoder MarketPlace
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Text information and buttons placed on the left side
- Button can be dead link
Our Products
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Use 3 columns layout
- Icons placed on top of each sections
- Click the button take user to 6). What Can you Do
Quotes
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- User can navigate other quote by click the user thumbnail
- Match active/inactive state for thumbnail
- Button can be dead link
Clients
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Clients logo are clickable, put dead link for now
- Make sure logo placement is fluid when browser width increase/reduce
- Button can be dead link
Contact
- Background image need covered browser height and width
- Form need placed centered of section height
- Match text placeholder
- On text input focus, text need to be hidden
- Button can be dead link
Footer
- Background image need covered browser height and width
- All text need placed centered of section height
- Topcoder logo placed on the left side and take user to landing page
- Footer links use 4 columns layout
- Section title not clickable
- Footer menu need linked to available pages based on storyboard screens
Sidebar Menu
screenshot: 01-b-Landing-Page-Sidebar-Menu.jpg
- Sidebar need covered whole browser screen height
- Sidebar menu need linked to available pages based on storyboard screens
- When sidebar show up, need push the main content to the left side
- X button need close the sidebar menu
- There’s social icons placed on the bottom, put dead links for now
2). About Topcoder - Company
screenshot: 02-a-About-Topcoder-Company.jpg
- This is About Topcoder - Company page
- Background image need follow consistent implementation like Landing page with fluid height like
- Title placed on the left side
- Company Tab selected by default
- Tabs need linkable
- Match active/inactive state for tabs
- Match typography for the main content like storyboard look
- Footer menu placed on the bottom.
Important: Header Area
- For header part of all About pages, we need build dynamic height for all sections that covered browser height. Other sections can follow storyboard look.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
- Navigation area must also included as part of header area that always placed on bottom of browser height
Important: Navigation Area
- When scrolling the page, we need navigation/tab area floating on top. Similar like this website: https://www.squarespace.com/
- Click to another tabs need load another page explained below dynamically
- You also need update the url parameters like on that sample site
- The plan is when user typed the address, then need take user directly to correct navigation/tab
- Click to another tabs need automatically scroll to the content area below the navigation tab
- Scroll up then need show the fluid height of Header area
3). About Topcoder - Community
screenshot: 02-b-About-Topcoder-Community.jpg
- This is About Topcoder - Community page
- Background image need follow consistent implementation like Landing page
- Company Tab selected by default
- Match typography for the main content like storyboard look
- Map Image can be image based
- Blue Text below the image need to be editable
- Member of the month area placed in the bottom
- Button can be deadlink
- Footer menu placed on the bottom
4). About Topcoder - Team
screenshot: 02-c-About-Topcoder-Team.jpg
- This is About Topcoder - Team page
- Background image need repeat the graphic.
- Team Tab selected by default
- Match typography for the main content like storyboard look
- Executive Team placed on top
- Create hover state for the social buttons
- Box area need created from css
- The Topcoder Team placed below
- Follow hover state with transparent blue background, name and title placed on top of hover background
- Match the Team columns layout
- Footer menu placed on the bottom
5). About Topcoder - Contact
screenshot: 02-d-About-Topcoder-Contact.jpg
- This is About Topcoder - Team page
- Background image need follow consistent implementation like Landing page
- Contact Tab selected by default
- Match typography for the main content like storyboard look
- Map background image
- Match information for Contact page like storyboard look
- Drop us a line area contains form elements
- Display text placeholder by default then on focus text need to be hidden
- Submit button can be dead link
- Footer menu placed on the bottom
6). What Can you Do
screenshot: 03-a-What-Can-you-Do.jpg
- This is What Can you Do page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
- Match active/inactive state for tabs like storyboard look
- Match the placement of graphics, icons and texts for each sections
- In the bottom there’s form element, match all content and styling
- Button can be dead link
- Footer menu placed on the bottom
Important: Header Area
- For header part of all What Can you Do pages, we need build dynamic height for all sections that covered browser height. Other sections can follow storyboard look.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
- Navigation area must also included as part of header area that always placed on bottom of browser height
Important: Navigation Area
- When scrolling the page, we need navigation/tab area floating on top. Similar like this website: https://www.squarespace.com/
- Click to another tabs need load another page explained below dynamically
- You also need update the url parameters like on that sample site
- The plan is when user typed the address, then need take user directly to correct navigation/tab
- Click to another tabs need automatically scroll to the content area below the navigation tab
- Scroll up then need show the fluid height of Header area
7). Mobile App Design & Development
screenshot: 03-b-Mobile-App-Design-&-Dev.jpg
- This is Mobile App Design & Development page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Match active/inactive state for tabs like storyboard look
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Mobile Application Design and Development Products
- Under Mobile Application Design and Development Products there are collapsible sections
- Notice there’s shadow behind each sections
- Whole row need clickable. Make sure not affect View Details button
- Follow styling for collapsed state, icon on the left side
- Section title need support 1 and 2 lines
- Duration & Deliverables need displayed as 2 lines
- View Details button can be dead link
- Arrow button placed on the right side
- On expanded state, user need click x button to close the expanded content
- There’s graphic with play button placed on the left side
- Click play button need in page need load 11). Video Modal Window
- Match content on the right side
- Options button need works like radio button group. Only 1 can selected
- Selected button need use blue colored border
- Unselected button need use blue colored border
- Watch Video button need load 11). Video Modal Window
- View Details need take user to 12). Details Page - App Visual Design
- Download and Get Started can be dead link
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use existing layout from completed Landing page
- View All can be dead link
- User can navigate by press Left and Right Arrow
- Dots pagination need placed centered. Refer the next screen for correct placement
- Active slide use white color & Inactive slide use grey color
- Click dots need take user related slide
Contact
- In the bottom there’s form element, match all content and styling
8). Web App Design & Development
screenshot: 03-c-WEb-App-Design-&-Dev.jpg
- This is Web App Design & Development page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Web Application Design and Development Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- There’s only button here, no form elements
- Button can be dead link
9). Algorithm & Analytics
screenshot: 03-d-Algo-&-Analytics.jpg
- This is Algorithm & Analytics page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Algorithm & Analytics Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- In the bottom there’s form element, match all content and styling
10). Innovation Catalyst
screenshot: 03-e-Innovation-Catalyst.jpg
- This is What Can you Do page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Innovation Catalyst Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- In the bottom there’s form element, match all content and styling
11). Video Modal Window
screenshot: 03-f-Video-Modal.jpg
- This is Video Modal Window Look
- Grey Background overlay need covered whole screen and placed vertically/horizontally centered
- No scrollbar show up when Video Modal Window
- Use white background for the modal window area
- Use youtube video player
- Use this video https://www.youtube.com/watch?v=Qc_PcN6ECjg
- Video need autoplay when load modal window
12). Details Page - App Visual Design
screenshot: 03-g-App-Visual-Design.jpg
- This is Detail page look
- This page look little different layout than another page
- Main content area need to be fixed and centered of browser screen
- Other sections can use fluid width
- Back button need take user to 6). What Can you Do
- Background image covered whole browser screen
- Get Started button can be dead link
- Watch Video button need load modal window
- Download one pager can be dead link
- Use rounded corner for top left and right corner
- There’s social icons placed on the left side
- Play/Watch button need load the modal window
- Timeline can be image based
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Clients logo need use fluid placement
Contact
- In the bottom there’s form element, match all content and styling
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS 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.
- Consistency Margin/Spacing on your UI Prototype
- Usage of Bower, Sass and latest technology
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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this project is to create Responsive UI Prototype based on the provided PSD Storyboard design and Specification explained below.
We need focus building Desktop version for this challenge, but you need make sure your submission easy to develop the Tablet and Mobile in the future challenges
Final Submission Guidelines
Downloadable Files:https://drive.google.com/folderview?id=0B31nrwic_6z0d0c0MU5CWEJwcVE&usp=sharing
Storyboard.7z - Use this storyboard design
Proxima Nova.zip - Storyboard Font
50/50-UI-Prototype.zip - UI Prototype as Reference with fluid background image implementation
Full-Size-Images.psd.zip - Full Size Background Images
Important!
- Suggest best practice Responsive Web Design Breakpoints
- It’s important that the code be well organized and easy to read.
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Follow fonts like storyboard look, you need use Proxima Nova Font
- Your prototype submission need support these following sizes:
a. Desktop Size
- Provided storyboard using 1360px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
- Need your help for margin/spacing adjustment between 1025px and 1360px
b. Tablet Size
- Create separated CSS Media Query for Tablet Size
- Important!: For this challenge, we need your prototype able to scale down the background image and text size when viewed on Tablet size.
- Refer to provided 50/50-UI-Prototype.zip for expected scale implementation
- It’s okay if page layout/column breaking, we’ll do adjustment on another challenge
c. Mobile Size
- Create separated CSS Media Query for Mobile Size
- This can be empty for now
TC.com 2.0 Responsive - Desktop UI Prototype Challenge
1). Landing Page
screenshot: 01-a-Landing-Page.jpg
General
- All landing page sections need use fluid width
- Need your help for margin/spacing adjustment between 1025px and 1360px. For screen start from 1360px and upper can follow storyboard look
- When resize browser on desktop sizes, you need make sure margin/spacing use fluid implementation
- Suggest us how hover state look for every buttons/links as long look proper with storyboard look
Important: All Sections of Landing Page
- For Desktop screen, we need build dynamic height for all sections that covered browser height.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
Introduction Area
- Background image need covered browser height and width
- Topcoder logo need always placed on the top left side of browser screen
- Login button, Get Started and Menu button need always placed on top and right side of browser screen
- Topcoder logo need link to this Landing Page
- Menu button will open the sidebar menu, refer more detail information below
- All text information and buttons need always placed using left alignment and centered of section height
- Click the button take user to 6). What Can you Do
Why you should use Crowdsourcing
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Create 3 columns layout, match the content
- There’s icons on top of text information
- Button can be dead link
Your on-Demand Community…
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Text information and buttons placed on the left side
- Click the button take user to 3). About Topcoder - Community
What Can you Get Done
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Laptop image placed on the left side
- Text information and buttons placed on the left side
- Click the button take user to 6). What Can you Do
The Topcoder MarketPlace
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Text information and buttons placed on the left side
- Button can be dead link
Our Products
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Use 3 columns layout
- Icons placed on top of each sections
- Click the button take user to 6). What Can you Do
Quotes
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- User can navigate other quote by click the user thumbnail
- Match active/inactive state for thumbnail
- Button can be dead link
Clients
- Background image need covered browser height and width
- All text information and buttons need always placed centered of section height
- Clients logo are clickable, put dead link for now
- Make sure logo placement is fluid when browser width increase/reduce
- Button can be dead link
Contact
- Background image need covered browser height and width
- Form need placed centered of section height
- Match text placeholder
- On text input focus, text need to be hidden
- Button can be dead link
Footer
- Background image need covered browser height and width
- All text need placed centered of section height
- Topcoder logo placed on the left side and take user to landing page
- Footer links use 4 columns layout
- Section title not clickable
- Footer menu need linked to available pages based on storyboard screens
Sidebar Menu
screenshot: 01-b-Landing-Page-Sidebar-Menu.jpg
- Sidebar need covered whole browser screen height
- Sidebar menu need linked to available pages based on storyboard screens
- When sidebar show up, need push the main content to the left side
- X button need close the sidebar menu
- There’s social icons placed on the bottom, put dead links for now
2). About Topcoder - Company
screenshot: 02-a-About-Topcoder-Company.jpg
- This is About Topcoder - Company page
- Background image need follow consistent implementation like Landing page with fluid height like
- Title placed on the left side
- Company Tab selected by default
- Tabs need linkable
- Match active/inactive state for tabs
- Match typography for the main content like storyboard look
- Footer menu placed on the bottom.
Important: Header Area
- For header part of all About pages, we need build dynamic height for all sections that covered browser height. Other sections can follow storyboard look.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
- Navigation area must also included as part of header area that always placed on bottom of browser height
Important: Navigation Area
- When scrolling the page, we need navigation/tab area floating on top. Similar like this website: https://www.squarespace.com/
- Click to another tabs need load another page explained below dynamically
- You also need update the url parameters like on that sample site
- The plan is when user typed the address, then need take user directly to correct navigation/tab
- Click to another tabs need automatically scroll to the content area below the navigation tab
- Scroll up then need show the fluid height of Header area
3). About Topcoder - Community
screenshot: 02-b-About-Topcoder-Community.jpg
- This is About Topcoder - Community page
- Background image need follow consistent implementation like Landing page
- Company Tab selected by default
- Match typography for the main content like storyboard look
- Map Image can be image based
- Blue Text below the image need to be editable
- Member of the month area placed in the bottom
- Button can be deadlink
- Footer menu placed on the bottom
4). About Topcoder - Team
screenshot: 02-c-About-Topcoder-Team.jpg
- This is About Topcoder - Team page
- Background image need repeat the graphic.
- Team Tab selected by default
- Match typography for the main content like storyboard look
- Executive Team placed on top
- Create hover state for the social buttons
- Box area need created from css
- The Topcoder Team placed below
- Follow hover state with transparent blue background, name and title placed on top of hover background
- Match the Team columns layout
- Footer menu placed on the bottom
5). About Topcoder - Contact
screenshot: 02-d-About-Topcoder-Contact.jpg
- This is About Topcoder - Team page
- Background image need follow consistent implementation like Landing page
- Contact Tab selected by default
- Match typography for the main content like storyboard look
- Map background image
- Match information for Contact page like storyboard look
- Drop us a line area contains form elements
- Display text placeholder by default then on focus text need to be hidden
- Submit button can be dead link
- Footer menu placed on the bottom
6). What Can you Do
screenshot: 03-a-What-Can-you-Do.jpg
- This is What Can you Do page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
- Match active/inactive state for tabs like storyboard look
- Match the placement of graphics, icons and texts for each sections
- In the bottom there’s form element, match all content and styling
- Button can be dead link
- Footer menu placed on the bottom
Important: Header Area
- For header part of all What Can you Do pages, we need build dynamic height for all sections that covered browser height. Other sections can follow storyboard look.
- You can see similar approach like this provided 50/50-UI-Prototype.zip OR this site: http://www.hugeinc.com/
- We also provide you High Resolution images to make sure background image look good on wide screen. Refer to Full-Size-Images.psd.zip
- Navigation area must also included as part of header area that always placed on bottom of browser height
Important: Navigation Area
- When scrolling the page, we need navigation/tab area floating on top. Similar like this website: https://www.squarespace.com/
- Click to another tabs need load another page explained below dynamically
- You also need update the url parameters like on that sample site
- The plan is when user typed the address, then need take user directly to correct navigation/tab
- Click to another tabs need automatically scroll to the content area below the navigation tab
- Scroll up then need show the fluid height of Header area
7). Mobile App Design & Development
screenshot: 03-b-Mobile-App-Design-&-Dev.jpg
- This is Mobile App Design & Development page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Match active/inactive state for tabs like storyboard look
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Mobile Application Design and Development Products
- Under Mobile Application Design and Development Products there are collapsible sections
- Notice there’s shadow behind each sections
- Whole row need clickable. Make sure not affect View Details button
- Follow styling for collapsed state, icon on the left side
- Section title need support 1 and 2 lines
- Duration & Deliverables need displayed as 2 lines
- View Details button can be dead link
- Arrow button placed on the right side
- On expanded state, user need click x button to close the expanded content
- There’s graphic with play button placed on the left side
- Click play button need in page need load 11). Video Modal Window
- Match content on the right side
- Options button need works like radio button group. Only 1 can selected
- Selected button need use blue colored border
- Unselected button need use blue colored border
- Watch Video button need load 11). Video Modal Window
- View Details need take user to 12). Details Page - App Visual Design
- Download and Get Started can be dead link
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use existing layout from completed Landing page
- View All can be dead link
- User can navigate by press Left and Right Arrow
- Dots pagination need placed centered. Refer the next screen for correct placement
- Active slide use white color & Inactive slide use grey color
- Click dots need take user related slide
Contact
- In the bottom there’s form element, match all content and styling
8). Web App Design & Development
screenshot: 03-c-WEb-App-Design-&-Dev.jpg
- This is Web App Design & Development page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Web Application Design and Development Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- There’s only button here, no form elements
- Button can be dead link
9). Algorithm & Analytics
screenshot: 03-d-Algo-&-Analytics.jpg
- This is Algorithm & Analytics page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Algorithm & Analytics Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- In the bottom there’s form element, match all content and styling
10). Innovation Catalyst
screenshot: 03-e-Innovation-Catalyst.jpg
- This is What Can you Do page look and feel
- Background image need follow consistent implementation like Landing page
- Click the Watch Video buttons in page need load 11). Video Modal Window
- Explore buttons can be dead link
Introduction Area
- Match introduction area and graphic like storyboard look
- See the results can be dead link
Innovation Catalyst Products
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Re-use existing layout from completed Landing page
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Contact
- In the bottom there’s form element, match all content and styling
11). Video Modal Window
screenshot: 03-f-Video-Modal.jpg
- This is Video Modal Window Look
- Grey Background overlay need covered whole screen and placed vertically/horizontally centered
- No scrollbar show up when Video Modal Window
- Use white background for the modal window area
- Use youtube video player
- Use this video https://www.youtube.com/watch?v=Qc_PcN6ECjg
- Video need autoplay when load modal window
12). Details Page - App Visual Design
screenshot: 03-g-App-Visual-Design.jpg
- This is Detail page look
- This page look little different layout than another page
- Main content area need to be fixed and centered of browser screen
- Other sections can use fluid width
- Back button need take user to 6). What Can you Do
- Background image covered whole browser screen
- Get Started button can be dead link
- Watch Video button need load modal window
- Download one pager can be dead link
- Use rounded corner for top left and right corner
- There’s social icons placed on the left side
- Play/Watch button need load the modal window
- Timeline can be image based
Results Matter
- Re-use completed style/function from previous page
- You need match content differences based on storyboard look
Clients
- Clients logo need use fluid placement
Contact
- In the bottom there’s form element, match all content and styling
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS 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.
- Consistency Margin/Spacing on your UI Prototype
- Usage of Bower, Sass and latest technology
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.
SASS/CSS
- Use SASS as CSS Pre-Processor.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser