Challenge Summary
The Studio Homepage is due for a new look and we want you to design it!
In this contest, you will be redesigning the TopCoder Studio Homepage based on the provided wireframe and visual design. We are not looking for production work, but a highly creative and innovative design that will show off the Studio contests and community.
This is your Studio site, so show us what you've got!
Entries must be your original work, and must not infringe on the copyright or licenses of others. Stock art, clip art, templates and other design elements from other sources are prohibited unless specifically permitted here in the Contest Details.
Content Overview The provided Photoshop file shows the early stages of a design concept that we like for the secondary pages of the site. The provided JPG wireframe shows the page elements and high-level layout of the new Studio Homepage. We are asking you to combine these two things and put your own stamp on it - to create the final design for the new TopCoder Studio homepage. We are happy with the direction this concept is heading. We would like you to take this design concept and apply it to the homepage - then add the "finishing touches" that make the design look polished and slick. Make it yours. Wireframe Considerations You are encouraged to use the wireframe as BOTH a content reference AND a layout resource. We are happy with the placements and encourage you to follow the layout indicated in the wireframe. You DO NOT need to follow the actual pixels size or other minute details of the wireframe, but please do use is as a general layout reference. Design Requirements - You must use the header and footer from the provided Photoshop file. - You must follow the colors shown in the Photoshop file. You are free to add to the color palette, but the main colors must be followed. - You must include all content shown in the wireframe Design Considerations Please note the generous use of whitespace in the provided visual design (PSD) and apply this to the homepage design. While the Photoshop file is an unfinished design, the overall look and feel is very spacious, clean and simple. Design Showcase Area For all of the Design Showcase thumbnails in the wireframe, you are free to use placeholder images or create thumbnails from past winning Studio submissions. You MUST use screenshots of only winning submissions if you choose this option. Carousel Messaging Area This is a space-saving message carousel, which will contain messaging such as: - Member-specific content - Client-specific content - Recent winners - Individual contest promotions The overall size of this area should follow the wireframe, but it does not have to be exactly the same pixel size. The placement and display of the various elements is up to the designer - usability is key! Note: initially these messages will be images - eventually the messaging will be converted to flash or some other highly interactive technology. There are several important considerations for this area listed below: - Page Label Nav Items (required) These carousel navigation items (5 small boxes in wireframe) are there to note what messages you are currently viewing in the carousel and allows the user to skip to a particular message. This can be visually represented by thumbnails of the current message, a number (1-5) or another option that you are free to create. - Forward & Back Nav "Arrows" (optional) Some versions of these message carousels have the options to "skip forward" or "back" - usually presented as arrows on each end of the carousel. You may include this additional navigation option if you like but you are not required to use arrows - it is simply an option. - Client or Member Tabs or Buttons (required) Since there will always be a client-specific and a member-specific messaging in the carousel, these two buttons/tabs are for the user to quickly go to those messages regardless what the user is currently viewing. These are currently labeled as "Compete" (referring to members) and "Launch" (referring to clients), but you are free to rename them if you feel there is a better option. It is up to you how to present this option (buttons, tabs, etc) but it should be the first and foremost action the user takes on the page, so make sure it's noticeable - i.e. there should be a very clear call for the user (member or client) to choose their message. Carousel Examples You can see some examples of the functionality of messaging carousels at the following links. DO NOT duplicate the look and feel of these samples. They are only meant as a functional references: www.bestbuy.com www.walmart.com www.lowes.com www.homedepot.com Judging Criteria Your submission will be judged on the following criteria: Usability - How well the design enhances the user experience and how easily the user understands the tasks at hand. Consistency - How well the Homepage design fits together with the new look of the overall site and provides a complete user experience. Clean Design - Design a look and feel that compliments the provided PSD files. Clean and spacious designs with simple (but slick!) touches are what we are looking for in this contest. Preview Image Use a screenshot of the Studio Homepage that you designed as your preview image. Do not skew, enhance or modify the image for dramatic effect. The client should be able to focus on the design itself.
Content Overview The provided Photoshop file shows the early stages of a design concept that we like for the secondary pages of the site. The provided JPG wireframe shows the page elements and high-level layout of the new Studio Homepage. We are asking you to combine these two things and put your own stamp on it - to create the final design for the new TopCoder Studio homepage. We are happy with the direction this concept is heading. We would like you to take this design concept and apply it to the homepage - then add the "finishing touches" that make the design look polished and slick. Make it yours. Wireframe Considerations You are encouraged to use the wireframe as BOTH a content reference AND a layout resource. We are happy with the placements and encourage you to follow the layout indicated in the wireframe. You DO NOT need to follow the actual pixels size or other minute details of the wireframe, but please do use is as a general layout reference. Design Requirements - You must use the header and footer from the provided Photoshop file. - You must follow the colors shown in the Photoshop file. You are free to add to the color palette, but the main colors must be followed. - You must include all content shown in the wireframe Design Considerations Please note the generous use of whitespace in the provided visual design (PSD) and apply this to the homepage design. While the Photoshop file is an unfinished design, the overall look and feel is very spacious, clean and simple. Design Showcase Area For all of the Design Showcase thumbnails in the wireframe, you are free to use placeholder images or create thumbnails from past winning Studio submissions. You MUST use screenshots of only winning submissions if you choose this option. Carousel Messaging Area This is a space-saving message carousel, which will contain messaging such as: - Member-specific content - Client-specific content - Recent winners - Individual contest promotions The overall size of this area should follow the wireframe, but it does not have to be exactly the same pixel size. The placement and display of the various elements is up to the designer - usability is key! Note: initially these messages will be images - eventually the messaging will be converted to flash or some other highly interactive technology. There are several important considerations for this area listed below: - Page Label Nav Items (required) These carousel navigation items (5 small boxes in wireframe) are there to note what messages you are currently viewing in the carousel and allows the user to skip to a particular message. This can be visually represented by thumbnails of the current message, a number (1-5) or another option that you are free to create. - Forward & Back Nav "Arrows" (optional) Some versions of these message carousels have the options to "skip forward" or "back" - usually presented as arrows on each end of the carousel. You may include this additional navigation option if you like but you are not required to use arrows - it is simply an option. - Client or Member Tabs or Buttons (required) Since there will always be a client-specific and a member-specific messaging in the carousel, these two buttons/tabs are for the user to quickly go to those messages regardless what the user is currently viewing. These are currently labeled as "Compete" (referring to members) and "Launch" (referring to clients), but you are free to rename them if you feel there is a better option. It is up to you how to present this option (buttons, tabs, etc) but it should be the first and foremost action the user takes on the page, so make sure it's noticeable - i.e. there should be a very clear call for the user (member or client) to choose their message. Carousel Examples You can see some examples of the functionality of messaging carousels at the following links. DO NOT duplicate the look and feel of these samples. They are only meant as a functional references: www.bestbuy.com www.walmart.com www.lowes.com www.homedepot.com Judging Criteria Your submission will be judged on the following criteria: Usability - How well the design enhances the user experience and how easily the user understands the tasks at hand. Consistency - How well the Homepage design fits together with the new look of the overall site and provides a complete user experience. Clean Design - Design a look and feel that compliments the provided PSD files. Clean and spacious designs with simple (but slick!) touches are what we are looking for in this contest. Preview Image Use a screenshot of the Studio Homepage that you designed as your preview image. Do not skew, enhance or modify the image for dramatic effect. The client should be able to focus on the design itself.
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.