Overview
|
UI Prototype Competitions are designed to take the graphics (UI storyboards) and Information Architecture (IA Wireframes) of a web site or application and create a demonstration of the working application. Storyboards and Wireframes are developed in TopCoder Studio Contests .
Prototypes in this type of competitions are created in HTML/CSS/JavaScript and are generally used as the input of the next phase of development, although some prototypes move directly into production (simple web sites, for example).
The UI Prototype track has the following contests:
|
 
|
Introduction to UI Prototype Contests
Comparison between HTML, WordPress and JavaScript UI Prototype Contests
UI Prototype Guide
Section 1: HTML/HTML5 Prototype
In the HTML Prototype contests the storyboard is converted into a prototype using HTML and CSS (HTML5 and CSS3). HTML is used to structure the content of the Prototype while CSS formats the content of the web pages.
The inputs to this contest are the storyboard or images, deliverable is the working prototype which is a static web page(s). HTML markup and CSS code should be validated with the W3C validation services.
Additional resources can be found here.
Section 1.1: Technologies
- HTML and CSS (HTML5 and CSS3)
The versions of HTML and CSS to be used for a particular contest will be specified in that contest's detail page. For example, HTML 4.01, HTML 5, CSS2, CSS2.1, CSS3, etc.
Section 1.2: Key Features
The UI Prototype contest track often includes contests focused on creating HTML Prototypes. HTML Prototype contests have unique set of features:
- HTML Prototypes are created using HTML and CSS.
- HTML Prototype contests are scored based on a specific review scorecard.
- HTML5 Prototypes are created using HTML5 and CSS3.
- HTML5 Prototype contests are scored based on a specific review scorecard.
Section 2: WordPress Prototype
A WordPress Theme is a folder containing all the images, CSS, JavaScript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, its categories, and more.
The inputs to this contest are the storyboard and wireframe, deliverable is the working prototype which is a dynamic web page(s). The competitors can use the third party WordPress plugins and JavaScript libraries if allowed for the particular contest.
Additional resources can be found here.
Section 2.1: Technologies
- PHP, HTML, CSS and JavaScript
The versions of HTML, CSS, JavaScript and PHP to be used for a particular contest will be specified in that contest's detail page. For example, HTML 4.01, HTML 5, CSS2, CSS2.1, CSS3, PHP 5.4.10, PHP 5.4.11, JavaScript 1.2, JavaScript 1.3 etc.
Section 2.2: Key Features
The UI Prototype contest track often includes contests focused on creating WordPress themes. WordPress theme UI Prototype contests are similar to regular UI Prototype contests in many ways, but there are some unique features:
- WordPress Themes are created using PHP, HTML and CSS.
- WordPress Themes must include specific template files and follow a standardized theme / folder structure.(Anatomy of a WordPress Theme).
- WordPress Themes can include plugins, which allow developers to extend its abilities beyond the core features built into the WordPress software. Please be sure to read the contest specification before using plugins since some clients allow the use of plugins while others do not.
- UI Prototype WordPress contests are scored based on a specific review scorecard.
Section 3: JavaScript Prototype
In the JavaScript Prototype contests the storyboard is converted into a prototype using JavaScript, HTML and CSS. In UI prototype JavaScript contests only the client side JavaScript code is required. The inputs to this contest are the storyboard and wireframe, deliverable is the working prototype which is a dynamic web page(s).
The competitors can use the third party JavaScript libraries if allowed for the particular contest. The appearance of the prototype will be as given in the storyboard and the functionality as given in the wireframe. JavaScript code should be unit tested using QUnit, YUI Test, JS Test or JSTest.NET.
There are many JavaScript libraries which can be used to achieve functionalities like HTML document traversal and manipulation, event handling, animations, and Ajax calls. The most frequently used JavaScript libraries are jQuery, jQuery UI, Dojo Toolkit, Yahoo User Interface (YUI), etc.
Additional resources can be found here.
Section 3.1: Technologies
- JavaScript, HTML and CSS
The versions of HTML, CSS and JavaScript to be used for a particular contest will be specified in that contest's detail page. For example, HTML 4.01, HTML 5, CSS2, CSS2.1, CSS3, JavaScript 1.2, JavaScript 1.3 etc.
Section 3.2: Key Features
The UI Prototype contest track often includes contests focused on creating JavaScript UI Prototypes. JavaScript UI Prototype contests are similar to regular UI Prototype contests in many ways, but there are some unique features:
- JavaScript UI Prototypes are created using mainly JavaScript (JS), although they usually include HTML and CSS as well.
- Contests for JavaScript UI Prototypes are more code intensive than regular UI Prototype contests. This means the scorecard focuses more on code quality and testing (such as functional testing and unit testing).
- JavaScript code can be reusable by taking the JavaScript component only and can be plugged into other HTML pages easily.
- JavaScript code can be implemented using modern design patterns like Prototype Pattern, Module Pattern, MVVM Pattern, Observer Pattern, etc.
- JavaScript code can be unit tested using JavaScript frameworks QUnit, YUI Test, JS Test, JSTest.NET or any other testing frameworks specified in the contest requirements.
- UI Prototype JavaScript contests are scored based on a different review scorecard specific to JavaScript UI Prototype Contests.
Section 4: Contest Posting
TopCoder posts the competition details, specification deliverables, IA deliverables, UI deliverables and timeframe for Active Contests. Members can read through the documentation and decide in what capacity they would like to be involved, as a Competitor or as a Reviewer.
- When the contest is posted the competitor can view it in the Active Contests.
- The contest will be going through stages such as Submission, Screening, Review, Appeal, Appeal Response, Aggregation, Final Fix, Final Review, Approval etc. Competitor can view the status from Contest Status.
- When the competition is over (after the approval phase) the contest can be viewed in Past Contests.
- Upcoming contests can be viewed in Upcoming Contests.
 | In any phase of a contest, extensions can be requested if the submitter or reviewer requires. The extensions in the submission phase will be granted only if there's still more than 24 hours before the Submission deadline. (And also depends on factors such as how many competitors require an extension. For example, if only one competitor is requesting an extension and all the others do not require any extensions, request for extension will be rejected). The extensions can be requested via the forum or by contacting the copilot. For more details on extensions click Contest Management. |
Section 4.1: Active Contests
Competitors can view the current UI Prototype contests list through the Active Contests page. This page will consist of the following information:
Contest : This is the name of the current contest.
Register by : Registration ending date and time.
Submit by : Submission ending date and time.
Payment : Prize of the 1st place.
Reliability Bonus : Reliability bonus prize for the First place winner. For more details click Reliability Bonus.
DR Points : This is the total Digital Run Points allocated for the contest. For more details on DR Points click: DR Overview.
Registrants (Rated/Unrated) : The competitors who are registered to the contest and whether they are rated or not rated.
Submissions : Number of submissions received for the contest.
Section 4.2: Contest Status
Competitors can view the status of the UI Prototype contests that are not currently ended through Contest Status page. This page will consist of the following information:
Contest : This is the name of the contest.
Registrants (Rated/Unrated) : The competitors who are registered to the contest and whether they are rated or not rated.
Submission due date : The date by which the competitor should upload the submission.
Final Review due date : The date by which the final review should be finished.
Current phase : The stage in which the contest is currently in, such as Submission, Screening, Review, Appeal etc.
Winner : The competitor who received the highest marks for the submission.
Second place : The competitor who received the second highest marks for the submission.
Section 4.3: Past Contests
Competitors can view the past UI Prototype contests which are currently ended through the Past Contests page. This page will consist of the following information:
Component : This is the name of the past contest.
Category : Name of the Category.
Complete date : The date the contest ended.
Registrants : The number of competitors who were registered to the contest.
Submissions : Number of submissions received.
Passed screening : Number of submissions that passed the screening.
Winner : The competitor who received the highest marks for the submission.
Score : The score of the winner.
Contest details link : This is the link to the completed contest detail page where further details on winners, screening marks, Review marks can be found.
Section 5: Competition
During the competition the competing individuals create the prototype utilizing the wireframes and storyboards provided. The creation of the prototype is based on the specification deliverables included in the Contest Posting phase as well as any other documentation and instructions that are included in the contest posting. The end result of UI Prototype Competitions is a prototype that exactly matches the storyboards with all pages linking together. The goal is to demonstrate how the web site or application will appear to the end user after it is fully developed.
Each competitor will be responsible for creating their working environment unless otherwise specified in the competition details.
Given below is the screen shot of the contest detail page which contains all the information of the contest.
Contest type : This is the current contest type heading which is a UI Prototype contest.
Contest name : This is the name of the current contest.
Register button : Competitors click Register button to register to the contest. Upon registration it is required to agree to Terms of Use applied to the particular contest.
Submit button : To submit their submissions the competitors must access online review tool by clicking on the Submit button.
Winning prizes : These are the winning prizes for the First and Second places.
Reliability bonus : Reliability bonus prize for the first place winner. For more details on Reliability Bonus click Reliability Ratings and Bonuses.
DR Points : This is the total Digital Run points allocated for this contest. For more details click DR Overview.
Contest timeline : The contest posted date, registration dead line, submission and final submission dates are given in this section.
Contest detail section : This section contains the detailed requirements of the contest including main tasks, technologies to be used, submission deliverables, etc.
Review board : Use this link to view review board of the UI Prototype contests.
Contest forum : This is the link to the forum of the contest where you can post your questions and get them clarified.
Screening scorecard : Screening scorecard is used to screen the submissions of this contest.
Review scorecard : The submission will be reviewed according to the guidelines in this review scorecard. ( UI Prototype, JavaScript, WordPress)
Downloads : The support documents required for the contest such as Storyboard, Wireframe are provided here. Only the registered competitors can download them.
|
If you reviewed a contest that failed and you had access to other members' submissions, you may not submit for the reposted contests (but you may still review them). |
 |
You can get notifications about active UI Prototype contests by RSS. |
Section 6: Forums
For any extra requirements or clarifications you can access the forum of the contest. Only the registered users have access to the forum. For each contest a separate forum is available.
Section 7: Scores
Section 7.1: Screening
Screening Scorecard - Submissions must score 100% to pass.
Section 7.2: Review
| Contest Type |
Review Scorecard
(minimum passing score) |
| HTML Prototype |
Scorecard (75%) |
| HTML5 Prototype |
Scorecard (75%) |
| WordPress Prototype |
Scorecard (75%) |
| JavaScript Prototype |
Scorecard (75%) |
Section 8: Review
At the completion of the Submission phase, the contest will enter the Screening phase. Screening will be done according to the Screening Scorecard. Submissions that do not have the proper file folder structure and/or cannot be viewed in a browser will be disqualified. (Please visit the Screening Scorecard link provided in the Section 7.1)
The submissions which pass the screening will enter the Review phase. This phase will consist of testing the prototype in all applicable browsers and reviewing the code. Each submitter will have a scorecard set up in Online Review. Reviewers will score each submission based on a scorecard. The scorecard will ensure all prototyping standards are followed, and each requirement is met as outlined in the contest deliverables. (The links to score cards and the passing marks are given in the Section 7.2)
The Review phase is followed by the Appeals and Appeals Response phases. Each submitter may appeal any reviewer's statement, as long as it is factually wrong. The Reviewers will respond to the appeals.
Based on the final scorecard standings after all appeals have been settled, a winner will be determined. Winners in this contest are designated based solely on their scores from the Review phase.
In Aggregation phase any defects identified by each of the reviewers are consolidated into a single list of fixes that the winner must make before the competition is completed. This list is put together by the primary reviewer.
The winner will then do the Final Fixes. During this stage, all identified bugs and Review Board comments must be integrated into the prototype. After Final Fixes have been completed, the prototype will be reviewed again to verify the correctness and completeness of the fixes and pass for the Approval. All prize winners are subject to Final Fixes and must meet their deadlines to avoid payment penalties see Late Deliverables.
|
Ratings and reliabilities are calculated for a particular contest after the approval phase. For more details on Reliability Bonus click Reliability Ratings and Bonuses. |
Section 9: Support
The first place winner will be awarded 75% of the prize at the completion of the UI Prototype competition after Final Fix. The remaining 25% of the prize will be awarded after the first place winner has successfully supported the work as described below.
The second place winner will be awarded 100% of the prize at the completion of the UI Prototype competition.
After the Review phase, the winning submission will move on to the Support phase. The winner will support the prototype for 30 days following the Final Fix phase, by fixing all the bugs. After the 30 days support period, any identified bugs will run through the standard TopCoder bug fixing processes which the winner may or may not choose to participate in. Any requests for enhancements will result in additional payments to the winner.
If a defect is found in a prototype, it will be fixed through TopCoder's standard component bug fixing process. An appropriate deadline will be set to fix the prototype and the winner will integrate the patched prototype once it has been fixed. If the prototype fix fallsoutside the scope of the 30 days support period, the winner will be paid additional money to integrate the prototype into the web site/application once it has been fixed.
If the winner misses any deadlines for fixing defects, they will lose a percentage of their remaining prize in accordance with the following schedule:
- If 3-5 bug fixes are late 5% will be deducted.
- If 5-10 bug fixes are late 15% will be deducted.
- If more than 10 bug fixes are late 40% will be deducted.
View more on Late Deliverables.
Section 10: Review Board Creation
Members to the UI Prototype Review Board will be selected based on a set of predefined requirements. Please click on the Reviewer Qualification Requirements page to see the required qualification to become a UI Prototype Reviewer.
If you would like to review Prototype Competitions, you may send an email to support@topcoder.com requesting permission to perform reviews. You can view the latest UI Prototype Review Board from the following link : Meet the Review Board. Once you become a "Reviewer", you can apply to review the listed contests from the following page: Review Opportunities.
Section 11: Tools and Resources
Section 12: Competitor Restrictions
Most of the UI Prototype competitions require CCA (Competition Confidentiality Agreement). Refer this link to get more details: CCA (Competition Confidentiality Agreement)
Common Resources
UI Prototype Review Board Guidelines - An explanation on the review process and guidelines that should be followed during UI Prototype contests.
UI Prototype Review Board - List of current members on the UI Prototype Review Board.
UI Prototype Ratings - An explanation on how UI Prototype Ratings are calculated.
TopCoder Test Case Development - A useful tutorial on the TopCoder wiki about test case development.
TopCoder Component Design Overview - The TopCoder coding conventions for software versions to use, documentation standards, coding standards to follow.
UI Prototype Scorecard - The latest scorecard for UI Prototype contests.
UI Prototype HTML5 Scorecard - The latest scorecard for UI Prototype HTML5 contests.
UI Prototype JavaScript Scorecard - The latest scorecard for UI Prototype JavaScript contests.
UI Prototype WordPress Scorecard - The latest scorecard for UI Prototype WordPress contests.
UI Prototype Scorecard Reference Documentation - The latest UI Prototype Scorecard Reference Documentation.
UI Prototype HTML5 Scorecard Reference Documentation - The latest UI Prototype HTML5 Scorecard Reference Documentation.
UI Prototype JavaScript Scorecard Reference Documentation - The latest UI Prototype JavaScript Scorecard Reference Documentation.
UI Prototype WordPress Scorecard Reference Documentation - The latest UI Prototype WordPress Scorecard Reference Documentation.
Additional Coding and HTML/CSS Resources
W3 Schools - HTML - Useful reference material and a good resource for new developers to learn HTML.
W3 Schools - CSS - Useful reference material and a good resource for new developers to learn CSS.
W3 Schools - HTML5 - Useful reference material and a good resource for new developers to learn HTML5.
W3 Schools - CSS3 - Useful reference material and a good resource for new developers to learn CSS3.
Additional Coding and WordPress Theme Resources
W3 Schools - JavaScript - Useful reference material and a good resource for new developers to learn JavaScript.
WordPress.org - Theme Development Guide - WordPress Theme development standards and resources.
WordPress Codex - The online manual for WordPress and repository for all WordPress documentation.
Building a Custom WordPress Theme - Tutorial from Web Designer Wall on how to create a custom WordPress theme.
Create a WordPress Theme - Tutorial from WP Designer on the basics of creating a WordPress theme.
Additional Coding and JavaScript Resources
JavaScript Tutorial - A tutorial focused on JavaScript from the W3C School.
Codecademy's JavaScript Lesson - A series of interactive lessons designed to teach you JavaScript from scratch.
Understanding Design Patterns in JavaScript - A tutorial from Nettuts+ explaining the basics of JavaScript design patterns.
JSLint tool - JSLint focuses on the quality of code, and it will scan JavaScript for syntax errors, style convention errors as well as structural problems.
QUnit - A popular a JavaScript unit test suite. They also provide a good introduction to unit testing.
jQuery Library - Useful reference material for jQuery library.
jQuery UI Library - Useful reference material for jQuery UI library.
Dojo Toolkit - Useful reference material for Dojo Toolkit library.
Yahoo User Interface (YUI) - Useful reference material for Yahoo User Interface (YUI) library.
YUIDoc - Javascript Documentation Tool - Useful reference material for JavaScript Code Documentation.
