Challenge Overview
Welcome to "TeckedIn - Simpler Content Management Platform UI Prototype Challenge". We are looking for your help to create responsive HTML prototype for our new TeckedIn platform that will be used by technology users and technology solution providers. Read more details below and Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
We want to build a platform that will be used by technology users and technology solution providers. We provide a platform that IT users can go to to search and save web content and where Technology Providers use our site to upload content and market to IT end users. This platform will talk about technology and this is not a social media site. This apps will be available to all users in mobile, tablet and desktop.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) on mobile, desktop and tablet.
- Create an interaction for basic scenario e.g. search, save to personal vault, etc.
Application User
There will be 2 kind of user that will use this application, we need both user have their own pages created:
- IT End User, to make our platform/site become the number one site they go to on a daily basis for their technology information.
- Technology Solutions Providers, to make our platform/site become the number one site that they post their news, blogs and information on.
Device Screens
- Desktop, Tablet and Mobile - Focus on Desktop and Mobile!
- Tablet design will follow Desktop
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
General Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
01) Homepage (Non Logged In User)
- Desktop - 01-1Home-Page.jpg/Mobile - 14-1Home-Page.jpg
- Default page that will appear when non logged in user open the platform/application
- This page contains informations about TeckedIn platform purpose (marketing purpose)
- Every click/tap action in this page should bring user to login page.
- What would you suggest for the scrolling effect? Parallax effect? etc?
- After checking the content for a while (for ex, 10 or 20 seconds), there should be a prompt/modal window asking non-logged in user to login to their account (Desktop - 01-2Guest-login-Popover.jpg). Please notice that we don't have mobile version for this modal window, please re-create one for this.
- Clicking Login link will bring user to Login Page.
- Clicking Sign Up link/button will bring user to Sign Up Page.
- Popular Content have carousel features in it, clicking the left or right arrow will change the content list. In mobile, feel free to create it either as carousel or unordered list.
- Clicking title content in popular content will bring user to content details page but all buttons in content details page will be disabled.
- Clicking membership button will bring user to login page
- Pagination in testimony area needs to be works/simulated.
02) Login and Sign Up Feature
- Allow users to register and log in using their email address and a password.
- There will be 2 kind of user in this platform:
-- IT End User (Desktop - 02-Login-as-Tech-User.jpg/Mobile - 15-1Login-Page.jpg)
-- Solution Provider User (Desktop - 10-1Login-as-Tech-Provider.jpg/Mobile - 15-1Login-Page.jpg)
- Users can change their password or recover a forgotten one (provide forget password link in the login page).
- Provide error login scenario (create one, no storyboard).
- When a member joins/register, we want to present them with a checklist of what categories they are interested in, i.e. cloud computing, data analytics, etc. And also a section for other, if we don't have that category yet.
- Sign Up Process for IT End User (Desktop - 03-1SignUp-as-Tech-User_Step1.jpg to Desktop - 03-5SignUp-as-Tech-User_Selected.jpg/Mobile - 16-1SignUp-TechUser-Step1.jpg to Mobile - 16-5SignUp-TechUser-Selected.jpg)
- Sign Up Process for Solution Provider User (Desktop - 11-1SignUp-as-Tech-Provider_Step1.jpg to Desktop - 11-3SignUp-as-Tech-Provider_Step3.jpg/Mobile - 25-1SignUp-as-Tech-Provider.jpg to Mobile - 25-3SignUp-as-Tech-Provider.jpg)
- Once user successfully login or signup, bring them to dashboard page depends on their credential.
03) User Dashboard
- Once user login to the platform, they will be provided with custom content list based on their preferences when register/join.
- User can modify/customize their home screen with personalized content or basic performance indicators, such as content category that they want to see, number of popularity of content, etc.
- Show summary of each content in this screen, the solution provider, content summary, time to read whole content, time the content published, and recommendation to the user like how match/good the content for themselves, etc.
- Different navigation/menu will be appear based on user roles (Mobile - 18-2Taps-on-Menu-Icon.jpg to Mobile - 19-1Navigation-Menu.jpg)
IT End User Dashboard
- Dashboard for IT End User (Desktop - 04-1Dashboard_Tech-User.jpg/Mobile - 17-1Dashboard_Tech User.jpg)
- Show list of their activity in the platform (favourites categories/saved contents/etc)
- There should be an easy way to access user personal vault from the dashboard area
- 3 Sub navigation menu: My Category feed, Recommended Content, Recently Read
- Ability to filter content from all selected category (Desktop - 04-2Filter-Options.jpg/No Mobile Storyboard, Create one)
- Ability to sorting content based on different parameter (Desktop - 04-3Sort-by-Option.jpg/No Mobile Storyboard, Create one)
- Notification regarding user activity (Desktop - 04-4Notifications-Option.jpg/Mobile - 17-1Taps-on-Notifications-Icon.jpg to Mobile - 18-1Mobile-Notifications.jpg)
- My Category Feed, showing all content from category that being selected when user sign up. clicking "load more" button will load more content/continous scrolls, clicking category title will bring user to detail content page.
- Recommended Content, showing all recommendation content from user interest. Same design with my category feed.
- Recently Read, showing all content that user recently read, same design with my category feed.
Solution Provider Dashboard
- Dashboard for Solution Provider User (Desktop - 12-1Dashboard_Tech-Provider.jpg/Mobile - 25-1Dashboard_Tech-Provider.jpg)
- Show company logo, summary of content reading, number of total posts, and active user.
- 3 Sub navigation menu: My Posts, Most Read Posts, Recently Uploaded Read
- Filter, Sorting and notification have similar interactions with IT End User dashboard.
- In top navigation, there will be a "Create Content" button to create post for Solution Proivder user.
04) Create Content Feature
- This page only available Solution Provider user (Desktop - 12-2Create-Content.jpg/Mobile - 25-2Create-Content.jpg)
- User will be able to create new post/content in this page.
- Needs a new button to save half finished draft (create Save as Draft button beside Post button)
- Needs a new button to preview the draft before posting it to the platform (create Preview button beside Save as Draft and Post buttons)
- When user click "save as draft" button, show modal window saying "Content is Saved as Draft" and provide an "OK" button, clicking the ok button will bring user to create content page again.
- When user click "Preview" button, show the preview page in modal window, take design from "Desktop - 06-1Content-Details-Page.jpg" for the content layout reference. Provide close button somewhere in the modal window to close the preview.
- When user click "Post" button, show modal window saying "Content is successfully posted" and provider an "OK" buttton, clicking the ok button bring user to user dashboard -> My Post sub page.
05) All Content Features
- This page is belong to IT End User (Desktop - 05-1All-Content-Page.jpg/Mobile - 20-1All-Content-Page.jpg to Mobile - 20-3Categories-Selection.jpg)
- User can check all recent content that being available in the platform via this page.
- User can perform search, filter, sort or select content category to find the content they looking for.
06) Details Content Feature
- This page will show details content/post from Solution provider user (Desktop - 06-1Content-Details-Page.jpg/Mobile - 21-1Content-Details-Page.jpg)
- The page will Utilize video, image and text to present the details content from Solution Provider.
- Show recommended content list at the bottom.
- Provide some ability like send email, subscribe in this screen. these features is future release, just provide the clickable UI here.
- Clicking "Save this to my vault" will trigger action to save the content to IT End User personal vault (Desktop - 06-2Save-to-Personal-Valut-Popover.jpg/Mobile - 21-2Save-to-Personal-Vault.jpg). User can choose how long they want to keep the content in their personal vault (1 day, 1 weeks, 1 month, 6 months, 12 months,1 year, 5 years, forever).
- Clicking "Add to Favorites" will filled the heart icons and reverse the button gradient.
07) Solution Providers Homepage
- "Desktop - 07-1Tech-Provider-Details-Page.jpg" and "Mobile - 22-1Tech-Provider-Details.jpg"
- When IT End user read post content and then click the providers content profile, this screen should showed up.
- We want a template for solution providers to put their company/product information in (Posts by this provider).
- We need a section where IT End User can find complete information of the solution provider (About the Provider).
08) Personal Vault Features
- When users are on our platform and seeing/searching content, we want them to easily be able to save the content to their personal vault.
- This page is for IT End User. There will be 4 sub pages available in this page:
-- My Saved Content (Desktop - 08-1Personal-Content_Saved-Tab.jpg/Mobile - 23-1Personal-Vault.jpg)
-- Favorite Tech. Providers (Desktop - 08-3Personal-Content_Fav-tech-Providers-Tab.jpg/No Mobile Storyboard, Create one)
-- My Activity (Desktop - 08-4Personal-Content_Your-Activity.jpg/No Mobile Storyboard, Create one)
-- Settings (Desktop - 08-5Personal-Content_Settings.jpg/No Mobile Storyboard, Create one)
- User should be able to save content to personal vault in an easy and quick way. Using page source, at a minimum, the metadata captured should be title, content date, date saved, all text for full text search. And then keywords where the member can type in their own keywords or reference for future search.
- Think of bookmarking features in browser, but it's inside the platform.
- User will be able to arrange their personal vault content (provide drag and drop features here)
- User will be able to set guidelines on how long they want to keep things in their personal vault. We're not sure yet if most people will just say keep forever or if they want to be able to save for 6 months, 12 months,5 years, etc.
- All content that being saved in personal vault will appear as list (Desktop - 08-1Personal-Content_Saved-Tab.jpg/Mobile - 23-1Personal-Vault.jpg)
- Clicking any list content in the title or click "details" link will open up the content summary (Desktop - 08-2Personal-Content_Content-Details.jpg/Mobile - 23-2Personal-Vault_Details.jpg)
- In Favorite Tech Providers, change text "Unfavorite" to "Remove", clicking title will bring user to Solution Providers Homepage
- Settings, user can update their password, change their category selection, set their notifications, and plan their membership.
09) External Personal Vault (Out Of Scope)
- Desktop - 13-External-Personal-Vault.jpg/Mobile - 26-Extrnal-Vault.jpg
- Please create External personal features vault for our plugin that will be placed in user browser toolbar.
- Create an icon from our provided logo for the browser toolbar (external-personal-vault.zip) and show us how the icon/button will looks in browser.
- If someone is on a different website and wants to save that content to their personal vault in our platform then they would click the "teckedin" button on their browser to do so.
- Users will be able to save the external content to their Personal Vault (it will be connected to their Personal Vault in our platform).
- Create the UI/UX for the external personal vault layout as a plugin in user browser.
10) Payments Feature
- Desktop - 08-6Payment-for-Membership.jpg/ No mobile storyboard, please create one.
- User will reach this page if they click Purchase button in payment options under settings page
- Allow users to pay in some way; for example, using credit cards, PayPal, or Bitcoin. Please specify your desired functionality below.
- This page is for membership payments for IT End User, While for Solution Providers User, we will probably bill them outside of the platform
- Right now we won't be charging for membership, however, we might in the future.
- Just provide the clickable UI here (no action needed).
11) Help
- Include a section dedicated to FAQ or Help content (Desktop - 09-1Help-FAQ-Page.jpg/Mobile - 24-Help-FAQ.jpg)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 scorecard in both Mac and PC environments.
JavaScript
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use Bootstrap for this challenge.
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 images look sharp for All devices
Browsers Requirements
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
Documentation
- Storyboards: https://drive.google.com/drive/folders/0B1alHNSmZI7_aHN6VkI4RkpPbms?usp=sharing
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
We want to build a platform that will be used by technology users and technology solution providers. We provide a platform that IT users can go to to search and save web content and where Technology Providers use our site to upload content and market to IT end users. This platform will talk about technology and this is not a social media site. This apps will be available to all users in mobile, tablet and desktop.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) on mobile, desktop and tablet.
- Create an interaction for basic scenario e.g. search, save to personal vault, etc.
Application User
There will be 2 kind of user that will use this application, we need both user have their own pages created:
- IT End User, to make our platform/site become the number one site they go to on a daily basis for their technology information.
- Technology Solutions Providers, to make our platform/site become the number one site that they post their news, blogs and information on.
Device Screens
- Desktop, Tablet and Mobile - Focus on Desktop and Mobile!
- Tablet design will follow Desktop
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
General Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Provide hover and active condition for all link and buttons
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
01) Homepage (Non Logged In User)
- Desktop - 01-1Home-Page.jpg/Mobile - 14-1Home-Page.jpg
- Default page that will appear when non logged in user open the platform/application
- This page contains informations about TeckedIn platform purpose (marketing purpose)
- Every click/tap action in this page should bring user to login page.
- What would you suggest for the scrolling effect? Parallax effect? etc?
- After checking the content for a while (for ex, 10 or 20 seconds), there should be a prompt/modal window asking non-logged in user to login to their account (Desktop - 01-2Guest-login-Popover.jpg). Please notice that we don't have mobile version for this modal window, please re-create one for this.
- Clicking Login link will bring user to Login Page.
- Clicking Sign Up link/button will bring user to Sign Up Page.
- Popular Content have carousel features in it, clicking the left or right arrow will change the content list. In mobile, feel free to create it either as carousel or unordered list.
- Clicking title content in popular content will bring user to content details page but all buttons in content details page will be disabled.
- Clicking membership button will bring user to login page
- Pagination in testimony area needs to be works/simulated.
02) Login and Sign Up Feature
- Allow users to register and log in using their email address and a password.
- There will be 2 kind of user in this platform:
-- IT End User (Desktop - 02-Login-as-Tech-User.jpg/Mobile - 15-1Login-Page.jpg)
-- Solution Provider User (Desktop - 10-1Login-as-Tech-Provider.jpg/Mobile - 15-1Login-Page.jpg)
- Users can change their password or recover a forgotten one (provide forget password link in the login page).
- Provide error login scenario (create one, no storyboard).
- When a member joins/register, we want to present them with a checklist of what categories they are interested in, i.e. cloud computing, data analytics, etc. And also a section for other, if we don't have that category yet.
- Sign Up Process for IT End User (Desktop - 03-1SignUp-as-Tech-User_Step1.jpg to Desktop - 03-5SignUp-as-Tech-User_Selected.jpg/Mobile - 16-1SignUp-TechUser-Step1.jpg to Mobile - 16-5SignUp-TechUser-Selected.jpg)
- Sign Up Process for Solution Provider User (Desktop - 11-1SignUp-as-Tech-Provider_Step1.jpg to Desktop - 11-3SignUp-as-Tech-Provider_Step3.jpg/Mobile - 25-1SignUp-as-Tech-Provider.jpg to Mobile - 25-3SignUp-as-Tech-Provider.jpg)
- Once user successfully login or signup, bring them to dashboard page depends on their credential.
03) User Dashboard
- Once user login to the platform, they will be provided with custom content list based on their preferences when register/join.
- User can modify/customize their home screen with personalized content or basic performance indicators, such as content category that they want to see, number of popularity of content, etc.
- Show summary of each content in this screen, the solution provider, content summary, time to read whole content, time the content published, and recommendation to the user like how match/good the content for themselves, etc.
- Different navigation/menu will be appear based on user roles (Mobile - 18-2Taps-on-Menu-Icon.jpg to Mobile - 19-1Navigation-Menu.jpg)
IT End User Dashboard
- Dashboard for IT End User (Desktop - 04-1Dashboard_Tech-User.jpg/Mobile - 17-1Dashboard_Tech User.jpg)
- Show list of their activity in the platform (favourites categories/saved contents/etc)
- There should be an easy way to access user personal vault from the dashboard area
- 3 Sub navigation menu: My Category feed, Recommended Content, Recently Read
- Ability to filter content from all selected category (Desktop - 04-2Filter-Options.jpg/No Mobile Storyboard, Create one)
- Ability to sorting content based on different parameter (Desktop - 04-3Sort-by-Option.jpg/No Mobile Storyboard, Create one)
- Notification regarding user activity (Desktop - 04-4Notifications-Option.jpg/Mobile - 17-1Taps-on-Notifications-Icon.jpg to Mobile - 18-1Mobile-Notifications.jpg)
- My Category Feed, showing all content from category that being selected when user sign up. clicking "load more" button will load more content/continous scrolls, clicking category title will bring user to detail content page.
- Recommended Content, showing all recommendation content from user interest. Same design with my category feed.
- Recently Read, showing all content that user recently read, same design with my category feed.
Solution Provider Dashboard
- Dashboard for Solution Provider User (Desktop - 12-1Dashboard_Tech-Provider.jpg/Mobile - 25-1Dashboard_Tech-Provider.jpg)
- Show company logo, summary of content reading, number of total posts, and active user.
- 3 Sub navigation menu: My Posts, Most Read Posts, Recently Uploaded Read
- Filter, Sorting and notification have similar interactions with IT End User dashboard.
- In top navigation, there will be a "Create Content" button to create post for Solution Proivder user.
04) Create Content Feature
- This page only available Solution Provider user (Desktop - 12-2Create-Content.jpg/Mobile - 25-2Create-Content.jpg)
- User will be able to create new post/content in this page.
- Needs a new button to save half finished draft (create Save as Draft button beside Post button)
- Needs a new button to preview the draft before posting it to the platform (create Preview button beside Save as Draft and Post buttons)
- When user click "save as draft" button, show modal window saying "Content is Saved as Draft" and provide an "OK" button, clicking the ok button will bring user to create content page again.
- When user click "Preview" button, show the preview page in modal window, take design from "Desktop - 06-1Content-Details-Page.jpg" for the content layout reference. Provide close button somewhere in the modal window to close the preview.
- When user click "Post" button, show modal window saying "Content is successfully posted" and provider an "OK" buttton, clicking the ok button bring user to user dashboard -> My Post sub page.
05) All Content Features
- This page is belong to IT End User (Desktop - 05-1All-Content-Page.jpg/Mobile - 20-1All-Content-Page.jpg to Mobile - 20-3Categories-Selection.jpg)
- User can check all recent content that being available in the platform via this page.
- User can perform search, filter, sort or select content category to find the content they looking for.
06) Details Content Feature
- This page will show details content/post from Solution provider user (Desktop - 06-1Content-Details-Page.jpg/Mobile - 21-1Content-Details-Page.jpg)
- The page will Utilize video, image and text to present the details content from Solution Provider.
- Show recommended content list at the bottom.
- Provide some ability like send email, subscribe in this screen. these features is future release, just provide the clickable UI here.
- Clicking "Save this to my vault" will trigger action to save the content to IT End User personal vault (Desktop - 06-2Save-to-Personal-Valut-Popover.jpg/Mobile - 21-2Save-to-Personal-Vault.jpg). User can choose how long they want to keep the content in their personal vault (1 day, 1 weeks, 1 month, 6 months, 12 months,1 year, 5 years, forever).
- Clicking "Add to Favorites" will filled the heart icons and reverse the button gradient.
07) Solution Providers Homepage
- "Desktop - 07-1Tech-Provider-Details-Page.jpg" and "Mobile - 22-1Tech-Provider-Details.jpg"
- When IT End user read post content and then click the providers content profile, this screen should showed up.
- We want a template for solution providers to put their company/product information in (Posts by this provider).
- We need a section where IT End User can find complete information of the solution provider (About the Provider).
08) Personal Vault Features
- When users are on our platform and seeing/searching content, we want them to easily be able to save the content to their personal vault.
- This page is for IT End User. There will be 4 sub pages available in this page:
-- My Saved Content (Desktop - 08-1Personal-Content_Saved-Tab.jpg/Mobile - 23-1Personal-Vault.jpg)
-- Favorite Tech. Providers (Desktop - 08-3Personal-Content_Fav-tech-Providers-Tab.jpg/No Mobile Storyboard, Create one)
-- My Activity (Desktop - 08-4Personal-Content_Your-Activity.jpg/No Mobile Storyboard, Create one)
-- Settings (Desktop - 08-5Personal-Content_Settings.jpg/No Mobile Storyboard, Create one)
- User should be able to save content to personal vault in an easy and quick way. Using page source, at a minimum, the metadata captured should be title, content date, date saved, all text for full text search. And then keywords where the member can type in their own keywords or reference for future search.
- Think of bookmarking features in browser, but it's inside the platform.
- User will be able to arrange their personal vault content (provide drag and drop features here)
- User will be able to set guidelines on how long they want to keep things in their personal vault. We're not sure yet if most people will just say keep forever or if they want to be able to save for 6 months, 12 months,5 years, etc.
- All content that being saved in personal vault will appear as list (Desktop - 08-1Personal-Content_Saved-Tab.jpg/Mobile - 23-1Personal-Vault.jpg)
- Clicking any list content in the title or click "details" link will open up the content summary (Desktop - 08-2Personal-Content_Content-Details.jpg/Mobile - 23-2Personal-Vault_Details.jpg)
- In Favorite Tech Providers, change text "Unfavorite" to "Remove", clicking title will bring user to Solution Providers Homepage
- Settings, user can update their password, change their category selection, set their notifications, and plan their membership.
09) External Personal Vault (Out Of Scope)
- Desktop - 13-External-Personal-Vault.jpg/Mobile - 26-Extrnal-Vault.jpg
- Please create External personal features vault for our plugin that will be placed in user browser toolbar.
- Create an icon from our provided logo for the browser toolbar (external-personal-vault.zip) and show us how the icon/button will looks in browser.
- If someone is on a different website and wants to save that content to their personal vault in our platform then they would click the "teckedin" button on their browser to do so.
- Users will be able to save the external content to their Personal Vault (it will be connected to their Personal Vault in our platform).
- Create the UI/UX for the external personal vault layout as a plugin in user browser.
10) Payments Feature
- Desktop - 08-6Payment-for-Membership.jpg/ No mobile storyboard, please create one.
- User will reach this page if they click Purchase button in payment options under settings page
- Allow users to pay in some way; for example, using credit cards, PayPal, or Bitcoin. Please specify your desired functionality below.
- This page is for membership payments for IT End User, While for Solution Providers User, we will probably bill them outside of the platform
- Right now we won't be charging for membership, however, we might in the future.
- Just provide the clickable UI here (no action needed).
11) Help
- Include a section dedicated to FAQ or Help content (Desktop - 09-1Help-FAQ-Page.jpg/Mobile - 24-Help-FAQ.jpg)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 scorecard in both Mac and PC environments.
JavaScript
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use Bootstrap for this challenge.
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 images look sharp for All devices
Browsers Requirements
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
Documentation
- Storyboards: https://drive.google.com/drive/folders/0B1alHNSmZI7_aHN6VkI4RkpPbms?usp=sharing
Final Submission Guidelines
Submission Deliverables:- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.