Challenge Summary
Welcome to the Topcoder Track Homepage Template Design Challenge!
In this challenge we are looking to design a homepage template for all tracks: design, development and data science. You will also be designing a helpful page about how to compete as a designer on Topcoder.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
1. Homepage Template (desktop)
2. How to Compete (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Homepage Template (desktop + mobile)
2. How to Compete (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
The purpose of this challenge is to come up with a modern layout for our new updated homepage template that fits within the Topcoder style. Right now, we are looking to have it customized with content from the Design track, but keep in mind that this template should be easy to adapt to the other tracks as well (have a good grid!). The current page you are to be redesigning is located here https://www.topcoder.com/community/design/. The objective is to create a sleek and clean looking page that introduces a new member to the Design community with ease and displays information that all design members would find helpful and interesting.
Screens Requirement
On this challenge, we need you to come with the design for following pages:
1) HOMEPAGE
We need to see the following information on this page:
Template Information (common to all tracks)
- Video introduction to the Design Track Homepage (you may use any youtube video from our channel as a placeholder)
- Text introduction to the Design Track Homepage
- Link to the active design challenges
- Explanations of different competition types we have (web design, wireframe, design first to finish, widget or mobile design, application front end, and print/presentation), what they mean and how much time it takes to complete – check this link
- Link to How To Compete page (side note: you will also be designing this page) that guides new members how to start
- Link to the design general forum
- Hot tips and quotes from actual members - here is a list of some themes for these tips:
- Topcoder great for learning and improving
- Making money on Topcoder
- Importance of challenge forums
- Working on big name company projects (and examples) for portfolio
- Design Members who are already a lock for TCO (Currently TCO18 Stage 1 and 2, prepare to fit all 4 stages)
- Top 3 designers on TCO Leaderboard for UI Design track on current period and link to what is TCO
Specific Information (this applies only to design track)
- Tutorials
- Policies (Font Policy, Stock Art Policy, Icons Policy) and links to Help Center for more info
- Top designer with biggest earning last month/ List of countries that get the biggest prize money
- Different Design Badges (We want to see some examples like: MVP member badge, TCO17 Champion, Victory level, but don’t spend too much time designing as we’ll take care of them at a later date)
- Design Member of the Month
2) HOW TO COMPETE
Video with detailed steps: A full walkthrough from registration to submitting and final fixes, etc. (You may use any youtube video from our channel as a placeholder)
Below the video, there will be detailed information that will explain each step:
- How to register
- Guides on how to read specifications / which areas are more important
- Different types of deadlines: checkpoint and final
- Challenge forum access
- How to submit
- Screening process
- Winner announcements and final fixes
- Getting paid
Design “How-to” Extras
- How to create and declare Marvel prototypes?
- Signing forms
- Other (feel free to add few more)
FAQ:
- When will my payment be entered in PACTs?
- How long does it take before my payment processes?
- Can I use the designs I submitted in my portfolio?
- Add other examples here….
Branding
- We have provided a Sketch file with the GUI KIT and the templates for desktop and mobile devices.
- The GUI KIT includes everything you need to get started including typography, colors, form elements, icons, etc.
- Fonts: use only Roboto font as that is the standard font we are using for the new Topcoder site. It is mandatory and important you follow only the defined sizes for labels, headings and body texts as well as only the defined colors.
- Icons: you can use stock icons only from Nucleo: https://nucleoapp.com/ to keep consistency with the rest of our pages.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiply of that.
- If there is something else you need or have questions, ask the in the forum.
Stock Artwork & Icons
- Stock photo is not allowed for this challenge. Use photos from our Flickr album.
- Stock icons are allowed only from Nucleo website.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: 1366px width with height adjusted accordingly
- Mobile: 320px width with height adjusted accordingly
Note: you can use same font sizes from desktop to mobile on 320px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder members
- Topcoder staff
- Topcoder clients
Judging Criteria
- How attractive is the homepage for new members?
- How easy can new members find to compete for the first time?
- Hierarchy and organization of content
- Cleanliness of your graphics and design
- Consistency with our Topcoder style
- Creative, graphics appeal, originality
- Overall design aesthetics
In this challenge we are looking to design a homepage template for all tracks: design, development and data science. You will also be designing a helpful page about how to compete as a designer on Topcoder.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1. Homepage Template (desktop)
2. How to Compete (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1. Homepage Template (desktop + mobile)
2. How to Compete (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
The purpose of this challenge is to come up with a modern layout for our new updated homepage template that fits within the Topcoder style. Right now, we are looking to have it customized with content from the Design track, but keep in mind that this template should be easy to adapt to the other tracks as well (have a good grid!). The current page you are to be redesigning is located here https://www.topcoder.com/community/design/. The objective is to create a sleek and clean looking page that introduces a new member to the Design community with ease and displays information that all design members would find helpful and interesting.
Screens Requirement
On this challenge, we need you to come with the design for following pages:
1) HOMEPAGE
We need to see the following information on this page:
Template Information (common to all tracks)
- Video introduction to the Design Track Homepage (you may use any youtube video from our channel as a placeholder)
- Text introduction to the Design Track Homepage
- Link to the active design challenges
- Explanations of different competition types we have (web design, wireframe, design first to finish, widget or mobile design, application front end, and print/presentation), what they mean and how much time it takes to complete – check this link
- Link to How To Compete page (side note: you will also be designing this page) that guides new members how to start
- Link to the design general forum
- Hot tips and quotes from actual members - here is a list of some themes for these tips:
- Topcoder great for learning and improving
- Making money on Topcoder
- Importance of challenge forums
- Working on big name company projects (and examples) for portfolio
- Design Members who are already a lock for TCO (Currently TCO18 Stage 1 and 2, prepare to fit all 4 stages)
- Top 3 designers on TCO Leaderboard for UI Design track on current period and link to what is TCO
Specific Information (this applies only to design track)
- Tutorials
- Policies (Font Policy, Stock Art Policy, Icons Policy) and links to Help Center for more info
- Top designer with biggest earning last month/ List of countries that get the biggest prize money
- Different Design Badges (We want to see some examples like: MVP member badge, TCO17 Champion, Victory level, but don’t spend too much time designing as we’ll take care of them at a later date)
- Design Member of the Month
2) HOW TO COMPETE
Video with detailed steps: A full walkthrough from registration to submitting and final fixes, etc. (You may use any youtube video from our channel as a placeholder)
Below the video, there will be detailed information that will explain each step:
- How to register
- Guides on how to read specifications / which areas are more important
- Different types of deadlines: checkpoint and final
- Challenge forum access
- How to submit
- Screening process
- Winner announcements and final fixes
- Getting paid
Design “How-to” Extras
- How to create and declare Marvel prototypes?
- Signing forms
- Other (feel free to add few more)
FAQ:
- When will my payment be entered in PACTs?
- How long does it take before my payment processes?
- Can I use the designs I submitted in my portfolio?
- Add other examples here….
Branding
- We have provided a Sketch file with the GUI KIT and the templates for desktop and mobile devices.
- The GUI KIT includes everything you need to get started including typography, colors, form elements, icons, etc.
- Fonts: use only Roboto font as that is the standard font we are using for the new Topcoder site. It is mandatory and important you follow only the defined sizes for labels, headings and body texts as well as only the defined colors.
- Icons: you can use stock icons only from Nucleo: https://nucleoapp.com/ to keep consistency with the rest of our pages.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiply of that.
- If there is something else you need or have questions, ask the in the forum.
Stock Artwork & Icons
- Stock photo is not allowed for this challenge. Use photos from our Flickr album.
- Stock icons are allowed only from Nucleo website.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: 1366px width with height adjusted accordingly
- Mobile: 320px width with height adjusted accordingly
Note: you can use same font sizes from desktop to mobile on 320px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder members
- Topcoder staff
- Topcoder clients
Judging Criteria
- How attractive is the homepage for new members?
- How easy can new members find to compete for the first time?
- Hierarchy and organization of content
- Cleanliness of your graphics and design
- Consistency with our Topcoder style
- Creative, graphics appeal, originality
- Overall design aesthetics
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.