TCO20 SEAO UI Prototype Challenge

Welcome to TCO20 South-Eastern Asia and Oceania Regional Event UI Prototype Challenge!

Note: This challenge is only open to attendees for TCO20 South-Eastern Asia and Oceania Regional Event. If you are not attending the event, please do not register.

The UI Prototype will be run as a single 3-hour round of coding. The challenge will focus on HTML5/CSS/JavaScript conversion of desktop design.

We are asking you to use your UI Prototype skills to help create an HTML5, CSS & Javascript Prototype for a landing page using Desktop screen size

Please read the challenge details and review the associated storyboard design and assets in Zeplin Handoff.

Let us know any questions you have through the Challenge Forum or Live Session. Good luck and have fun!

Challenge Objectives

• Create HTML5, CSS, Javascript UI Prototype on a Desktop screen size.
• Add simple motion UI animations on any sections and elements when scrolling the page

Challenge Assets:

• Zeplin: https://zpl.io/25WrZre
• Pull icons assets as SVG, image assets as PNG on Zeplin.
• Let us know if you need some assets adjusted when building your submission
• Fonts: https://fonts.google.com/specimen/Montserrat
• Embed fonts on your submission
• Make sure you select correct font-weight based on storyboard

Submission Requirements
General

• Current desktop storyboard source file using 1370px
• Your submissions need make the prototype fluid from 1370px to 1920px
• You can set limit the min-width of your browser to 1370px
• Make the background filled the browser screen
• Use CSS flex to build page layout

Header

• TCO logo placed on top left side of header bar
• Header bar need remain fixed in page when scrolling the browser
• Click menu need scrolling down to related section below

Introduction

• This section need build as slideshow format
• Some libraries you can use or come up with your own solutions:
  • https://swiperjs.com
  • https://kenwheeler.github.io/slick/
  • https://splidejs.com
  • https://glidejs.com
  • https://www.jssor.com
• You can re-use same slide content
• Need apply auto slide effect
• Click the dot and navigation need change the active slide
• Follow design style for slideshow
• App Store & Google Play are using button format

Features

• We need show 3 features for this section
• Use random text for all 3 features
• Shadow effect need use CSS based

Blog

• Blog are using 2 columns layout
• Blog title need to be clickable

Subscribe

• User need able to fill the email address
• Put dead link for submit button

Footer

• Footer area using left and right column alignment
• Topcoder copyright on the left side
• Social icons need to be clickable

Scoring Priorities (The items that are considered highest prototype priorities)

• Creating quality and efficient UI Prototype - smoothness, sharpness of graphics and the key items that can be captured and demo-ed
• Responsive Solution on Desktop screen size
• Viewport UI Animation effects
• Matching the storyboards (as close as possible) across the required browsers.

CODE REQUIREMENTS:
HTML/HTML5

• Provide comments on the page elements 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 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

• You can use plain CSS for this challenge submission
• 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 creating 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. It is fine to use GPL/MIT/Open Source code.
• 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.

Images

• For all the images/photos, please pull them as PNG format from provided Assets

Browsers Requirements

• MS Edge latest
• Safari latest
• Chrome latest
• Firefox latest

Final Submission Guidelines

Placement and Winner Selection

• All submissions from the UI Prototype finalists will automatically pass screening.
• We will using HTML5 Scorecard for TCO20 Championship
• After the Submission Deadline, the Judging Panel is presented with all of the submissions and will have sole discretion in determining the placements.

Overall Champion Winner Selection

• The winner of the UI Prototype Competition will be the Onsite UI Prototype Competitor with the highest placement given by the Judging Panel Round. The champion will be announced during the awards ceremony.