Challenge Summary
Welcome to “TopCoder University – Responsive Storyboard Design Contest”. This contest is the continuation process to Re-design TopCoder University look and feel in attempt to make it more user friendly and eye catching for TopCoder Customer. The first contest to redesign the homepage is finished and can be seen here. In this contest, we need your help to re-design several pages from TopCoder University (TCU) to have the same styling with the new homepage.
Register now and read all requirements from contest details below.
Round 1
Requirements 1 to 3 as stated in contest details
Round 2
All contest requirements as stated in contest details with client feedback applied.
We’ve successfuly replace the look and feel for TopCoder University homepage (screenshot provides in contest attachment). In this contest, we need your help to create new design for several pages from TopCoder University to have same styling with our new homepage. Please see the screen requirements below.
Screen Requirements
There are 4 screens that needs to be re-design in this contest, here they are :
1. Setting Up your First Project
Page Link : http://www.topcoder.com/university/setup-first-project/
- Please remove the sidebar to become top navigation like shown in the latest homepage design (latest_homepage_design.zip).
- Under main content area, the bottom area should be able to handle not just the 3 boxes (watch the videos, search our FAQ's and Need more help), it should be able to handle others design like video section or big image placeholder section. show us the variation.
2. Platform Announcements Page
Page Link : http://www.topcoder.com/university/platform-updates/
- Please remove the sidebar to become top navigation like shown in the latest homepage design (latest_homepage_design.zip).
- This is an archive page, pay attention to every elements in this page, sidebar, post list, etc. Make sure your design cover all the design elements in this page (including social media share button).
3. Help Center Page
Page Link : http://www.topcoder.com/university/help-center/- Please remove the sidebar to become top navigation like shown in the latest homepage design (latest_homepage_design.zip).
4. Single Page
Page Link : http://www.topcoder.com/university/platform-updates/cockpit-task-management-part-2/
- Please remove the sidebar to become top navigation like shown in the latest homepage design (latest_homepage_design.zip).
Branding and Design Guidelines :
- We want to keep the same sharp and shiny look of the current TopCoder website and our new homepage. Let’s stick with that style.
- Use the same font we’re using in the homepage for the sub pages.
- Show hover effects for all buttons and UI elements that you create (buttons, hyperlinks, etc).
- All design elements (button, text, pagination, etc) from the previous TCU screen must be appear in the new design.
- We want the TCU site to be responsive, so create all page requirements in 4 screensize :
o Mobile : 320px
o Tablet : 768px
o Netbook : 1024px
o PC : 1600px
If you are not familiar with “responsive" web design, do your research about it and you can learn from these links :
- Wiki information : http://en.wikipedia.org/wiki/Responsive_Web_Design
- Working Example : http://www.thismanslife.co.uk/projects/lab/responsiveillustration/, http://twitter.github.com/bootstrap/, http://foundation.zurb.com/index.php (try resize your browser screen)
- Great Gallery Examples : http://mediaqueri.es/
Target Audience
TopCoder Customer.
Judging Criteria
- Creativity.
- Quality of design.
- User Experience.
Submission and Source Files
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.