Challenge Summary
Welcome to TopCoder Archive Storyboards Contest. We need to build a single page which compiles all of the events held or sponsored by TopCoder. We provide a page template which you will use to design the list of events. It’s quite simple and straight forward. Join now!
Round 1
For your R1 deliverables please submit the screens that show your design (see “Storyboard Design Requirements” section).
Round 2
Final design will contain screens that show your design (see “Storyboard Design Requirements” section) plus any updates from client feedback.
The primary goal of this contest is to design the look and feel of the content of the TopCoder Archive page. We’re looking forward to see a consistent design with the TopCoder website overall and for a nice way to represent ALL of the events that TopCoder holds. These events/items will be just links to other pages. This archive page connects the user with the past events in a history mode.
Branding and Guidelines
- Colors and style must be consistent with the current look of the TopCoder website, sharp, clean and modern. Download the TopCoder Website GUI Kit, you should re-use these elements as much as you can.
- Use PageTemplate.psd as base for your work. Width for the page content is 960px. Don’t modify the header or footer. You’re allowed to modify the height only.
- Use web-safe fonts for the page/s content. Declare your fonts according to the Studio font’s policies.
Storyboard Design Requirements
- Create a consistent Page title that reads “Archive”.
- This page should chronologically display past events held or sponsored by TopCoder.
- There should be a way to filter these items by year, month, etc.
- Each event must display title, date, location and call to action button (which is a link to an external page). You must include all these events.
- Events are (you can extract logos and content from the links and/or Logos.zip):
- TCO (TopCoder Open)
- TCCC (TopCoder Collegiate Challenge)
- TCHS (TopCoder High school Challenge)
- Invitational events (i.e. 2001 TopCoder Invitational, 2002 TopCoder Invitational, etc)
- TopCoder Road show
- CRT (Customer Round Table)
- Innovation Summit
- Webinars
- Others (there could be events that don’t belong to a particular category, like one-single-time events or something similar).
- We have an idea with the layout that we’d like you to design. We envision two or three columns grid layout that groups the events per category. We have a very rough reference with ArchiveMockup.jpg. It has to be improved of course. You are free to propose a different layout though, if you feel there is a better way to represent these events in a “history” mode. We’re open to suggestions.
- We need to provide a way to browse all the events of a category, like a pagination or scrollbar for each group if a group has a lot of past events. Make it easy to understand.
- We’d like to see some interactions. For instance, when you mouse over some of the items inside the category group that specific item should grow or call more attention in some manner with more details. Show the necessary screens to let us see how you envision a possible interaction here. Show us some magic!
- Update TopCoderEvents.psd. Place a link or button on a strategic location that reads “View All TopCoder Events (Archive)”.
Target Audience
TopCoder members, customers, visitors.
Judging Criteria
- Consistency with the TopCoder website concept.
- 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.