Challenge Summary
Welcome to the TopCoder Studio Help Area- Simple Template Styles Design Contest. We are revamping the Studio Help area to contain a lot of new visuals like tutorial videos, slideshows, screenshots, and member-created content. We would like all of the help area content to have the same look and feel, so we are looking for your designs to help us determine a simple, clean, standardized look and feel.
We want you to show us how a screenshot with instructional overlays should look as well as what a Member Tips page would look like.
Round 1
Please submit the following for Round 1:
- Designed "Member Tips" page
- 4 screenshots with your overlays and other design changes
Round 2
Your designs with the milestone feedback incorporated.
Contest Details
TopCoder Studio is continuing with improvements to the Studio Help Area.
This project is focused on designing themed "help/instructional" templates that the Studio Community could access and use to provide and post helpful tips, hints, and tricks within the member generated content sections. As a Studio member, think about how you want to find information and how you want to view information within the Studio help topics.
Required Template Elements (5 screens total)
- Design a template for all screenshots that we will use in the Help files. Show examples from your template by transforming the 4 “boring” sample screenshots into nice looking instructional screenshots with overlays that point to sections within the screenshot and contain explanation/instructional text. (reference attached files: sample1_upload_screen.zip, sample2_studio_cup.zip, sample3_active_contests.zip, sample4_contests_page.zip)
- Design the content area of the “Member Tips” page (reference attached file: MemberTipsTemplate.zip)
- Do not resize the provided screenshots, keep them at their current size
- You can use "lorem ipsum" (greeked copy) for overlay text or write something up if you want. You will not be judged on the copy content.
1. Member Tips Page:
- IMPORTANT - we are NOT asking you to design a webpage. We’re asking for something a bit different... we want you to show us how the actual "help" page content should look.
We are providing you a “blank” Member Tips page (see the attached file: MemberTipsTemplate.zip) that shows where the header, footer, heading, breadcrumb and navigation will be on the page. Do not redesign these features! The only part of the page you need to focus on is the content.
You will need to decide:
- How long should the instructional tips be? A sentence? A paragraph? Should each tip be approximately the same length (like a tweet?) or can they be various lengths?
- How will the credit look? Each tip will be credited to the member who provided it. Should it be at the front or back of the tip? Should the tip be in quotes? Find a creative but clean way to show this.
- What font styles should be used? We do not want to see a large number of font changes, etc. but it would be great to see some creativity in the font usage.
- The font should be a web-standard font that is used in all browsers, even older versions. Note: We will be bulding this in WordPress
- What colors should be used? Again – do not go crazy with this. Subtlety is best.
2. Screenshot Styles
We want you to design the screenshot "styles" that will be used within the help area.
You will need to decide:
- Should the screenshot have a border or any other framing elements?
- Should the overlays be all one color or should some of them be color-coded if they represent different things? Should the colors complement the Studio site or should they contrast the Studio design?
- Are there any other filters or changes to the screenshot needed to enhance or improve their look and feel?
Requirements:
---- You must provide a step-by-step description of exactly how to recreate your design styles and overlays. Write up these instructions and put them in a text file or PDF. The instructions should explain the steps you used in photoshop to get to the final design you are submitting. The winning submission will need to be turned into an action later, so you must be precise.
---- It must be something that will work well on all types of screenshots (varied backgrounds and sizes)
---- It must not be complicated.
---- It must be tasteful. Please don’t go crazy with filters or other effects.
You must supply your PSD file and step-by-step instructions on how to recreate the styles in your SUBMISSION.ZIP file so we can evaluate your layers and instructions.
Branding Guidelines
- Incorporating other colors that compliment the Studio brand is ok
- Make sure the designs are consistent
Target Audience
- New TopCoder Studio members
- Current TopCoder Studio members
- TopCoder and TopCoder Studio Admin and Staff
Judging Criteria
- SImple, clean designed templates
- Templates for screenshots with nice looking overlays
- The layout of the template
- Ease of use for Studio Admin or Studio Members to create a help document using these templates
What to Submit
Preview JPG/PNG Image File
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission ZIP File
- 4 PSD files for all 4 screenshots
- Text file or PDF of the instructions on how to create the styling for the screenshots
- One PNG or JPG files of the Member Tips page
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
All files above with the addition of PSD file for the Member Tips page
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.