Challenge Summary
We are always glad to introduce design challenges regarding to our websites. This time we need you to design several versions (dimension-related) of the TopCoder home page in order to build a responsive home. Welcome and join!
Round 1
For your R1 deliverables please submit all the requirements for client review.
Round 2
Final design will contain all the requirements plus any updates from client feedback.
The primary goal of this contest is to design the look and feel of the TopCoder home page with the sole focus of making it Web Responsive. You’ll adjust/redesign an existing home page at several dimensions to adjust to certain screen resolutions.
Branding and Guidelines
- Use TCHome.psd as baseline for your work.
- Follow the same branding shown in the design. Sharp, shiny and professional.
- Use same color guidelines and web-safe fonts. Beware of declaring your fonts according to the Studio font’s policies.
- Show hover effects for all buttons and UI elements that you create (buttons, hyperlinks, etc).
Storyboard Design Requirements
Design and make adjustments to the provided design to build a set of screens with the following conditions.
Screen dimensions
1) 1600px width / 800px height.
2) 768px width / 1024px height.
3) 320px width / 480px height.
- Note: display the page content at full height, don’t cut it out. Use the height limit as reference on deciding the importance level of the items you place at the top, since that height specifies when the browser starts scrolling the content.
Responsive Guidelines
- The most important elements to keep always visible no matter what resolution are: community count, join TopCoder button, talk to sales/pricing buttons, video players in white iPads (no particular order).
- You can resize any element of the page.
- You can suggest repositioning of any element of the page anywhere.
- You can rethink the layout responsive wise (1600, 768 and 320 versions only).
- You can not dismiss any content of the page. The same content must appear in all the resolution versions.
- Notice on TopCoder website the main navigation items. There should be a way to access those same links on any resolution. Community (Developer, Graphic Design, etc), Platform (Pricing, What is it, etc), About Us (Leadership, News, etc), Contact Us (Sales, etc), Blog.
- The footer must be considered in the resolution changes too.
* As final deliverables we expect to receive three screen designs at the specified width resolution BUT at full height. 1600px width, 768px width and 320px width; three screens.
Reference
These articles are meant to show you how responsive web design works. DON’T COPY ANYTHING.
- Responsive Web Design Samples
- Responsive Web Design Showcase
- Responsive Design at Code level (not necessary but it may help to understand some factors).
Target Audience
TopCoder members and customers.
Judging Criteria
- Capability of rethinking the page at several resolutions.
- Quality of design.
- User Experience.
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.