Challenge Summary
Recently we designed an eBook about crowdsourcing with TopCoder platform. We need to dazzle the TopCoder website users to make them realize they can download the eBook. You will design a banner and widget for downloads.
Round 1
For your R1 deliverables please submit the following screens for a review.
1) Homepage Updates
2) Download Widget (only blog page)
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the required screens plus any updates from client feedback:
1) Homepage Updates (include the separate large icon file)
2) Download Widget (all pages)
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design elements that work as gateway to download the TopCoder eBook. We need you to take care of the TopCoder homepage, some inner pages and to create a banner to download the eBook.
Branding and Guidelines
- Use the TopCoder Website GUI Kit as visual reference for your UI Design. You should reuse as much elements as possible. It's "TopCoder Website GUI PSD Kit.zip" from the attachments.
- Check “Home_Design_Areas.jpg” to identify the parts of the TopCoder homepage that need to be updated.
- Use web-safe fonts for the page/s content.
- Colors are open to designers but keep in mind the current overall the TopCoder website look from the PSD GUI Kit.
Storyboard Design Requirements
1) Homepage Updates
- We have two areas from the homepage where we want to see a connection to download the eBook. Deliver two versions of the homepage (TCEOI_Home.zip) following the next requirements.
- All of the areas must display the following:
- Title: 10 Burning Questions on Crowdsourcing.
- Place the following text “Learn how to start, scale, and succeed in Crowdsourcing and Open Innovation”. You can use “lorem ipsum” to fill other areas that might need to be filled with text if you feel it’s worthy.
- Add a “Download” button/link.
- Area 1 is the main banner. Design an attractive banner with a prominent “Download” button somewhere. Use the eBook cover and/or its graphical elements (TopCoder_EBook.zip) to enhance the banner look. Don't be afraid of use colors for the background and elements, keep in mind they should feel part of the site. The banner dimensions are 960x174 pixels. You’re provided with the original source file of the TC home website so you can place your design in there. You must use the same frame provided in the source file, it means your design must be inside the rounded rectangle. However you could use overlapping elements like the current “Learn More” button you can see in the design, that kind of layout is allowed.
- Design a new icon for Area 2 that represents the eBook download. The icon should be available in two dimensions. The dimensions you need it to be placed in the Area 2, and an extra file at least 300x300 pixels dimension, Photoshop or Illustrator (just for the icon), it’s up to you.
- Note: you’re free to suggest a new area to place the download action.
2) Download Widget
- Design a section where the user can interact with a download form to get the eBook for the attached pages: Blog (Blog-FF.zip), News (News-FF.zip), Webinars (TC Webinars And Innovation Series FFv2.zip), and Events (TopCoder_Events_FF2.zip).
- The design of this section must be attractive and sharp, focused on the book itself (bold book design helps). Make the user notice and want to download it.
- You can place it on the right side column or in an interesting place that you want to suggest.
- The design must be consistent among all the pages. If you're using right column widgets try to keep the same height for all the widgets. On the Events page you will have to come up with a different solution since there is no right column on that page.
- The widget must show the following elements for all the pages:
- Title: 10 Burning Questions on Crowdsourcing.
- Place the following text “Learn how to start, scale, and succeed in Crowdsourcing and Open Innovation”.
- Place a graphic from the eBook or the cover somehow to identify what the user is about to download.
- Place two textboxes, “Name” and “Email”.
- Add a checkbox below with the text “Yes, sign me up to receive blog posts by email”.
- Add a “Download” button.
- Don't be afraid of colors. This zone/widget needs to be very attractive. Keep in mind it must feel part of the TopCoder visual style.
Target Audience
The eBook is targeted at Companies Director and Executives. Overall, anyone interested to know about Crowdsourcing and who is doing Open Innovation in the right way.
Judging Criteria
- Consistency with the TopCoder site concept.
- Creativity.
- Quality of design.
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.