September 12, 2017 A How To: UI Prototype Challenges at Topcoder

In UI Prototype challenges, members use their rapid prototyping skills and their knowledge of responsive frameworks to convert the design of a web or mobile application into a clickable web page using mainly HTML/CSS & JavaScript.
Matching the designs as close as possible is the main goal of a UI prototype competitor but keep in mind that your code will be later used by developers who will make it functional thus writing clean and well-documented code is equally important.
The process of working on a UI prototype challenge is quite simple.

  • Register for the challenge.
  • Read the spec carefully to make sure you have a strong understanding of what you have to create.
  • If you have any doubts, ask in the challenge private forum as soon as possible to get clarifications by the challenge co-pilot.
  • Start coding 🙂

How to organize your submission

Organizing your project folder structure should be very straightforward in UI Prototype challenge.
Here’s an example of a project folder structure on a UI Prototype submission:

Folder structure

Folders should be self-explanatory about their content.
Maintaining a clean folder structure makes your submission look professionally created.

If you haven’t seen the `.md` file extension before, that stands for Markdown which is a lightweight markup language with plain text formatting syntax.
Since most projects are hosted in git repositories (eg Github) it’s a very convenient way to write all the instructions on how to deploy your project and how to use various functionalities like “build a production version” or “login credentials” in a `` file.


This is where you put any notes for the reviewers.
For example:
If you’ve implemented something in a different way than it was mentioned in the challenge spec but the co-pilot confirmed that your approach is acceptable, it’s good to leave a note with a link to the corresponding thread to make sure that reviewers won’t miss it and they won’t score you down.
Check out some of our past UI Prototype Challenges:

This article is part of the 5 Weeks to Learn Topcoder educational series. Want to learn more? Check out the entire series and all the helpful content here.


Guest Blogger


Sign up for the Topcoder Monthly Customer Newsletter

Thank you

Your information has been successfully received

You will be redirected in 10 seconds