Challenge Summary
We are always glad to introduce design challenges regarding to our websites. This time we need you to come up with a very solid design for our homepage, one single page. 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. We are looking for a solid design oriented to satisfy marketing strategies and possible client recruitment. That’s why it needs to have “smart designs” and eye catchy elements; details are everything.
Branding and Guidelines
- Use template.psd as baseline for your work. You can increase page height (you’ll probably need it).
- We want to keep the same sharp and shiny look of the current TopCoder website. Let’s stick with that style.
- We are open to colors suggestions. We want to see good use of white space and soft colors such as light grays, light blue.
-. Make good use of fonts. Play with a good combination of 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).
- Your design must fit 1024 pixels wide screen resolution.
Storyboard Design Requirements
See Mockup.png from the attachments. We already defined a layout for this page we want to try out. We need you to bring these ideas to life. We split this mockup in four (4) parts, you can see them grouped in gray backgrounds.
Heading
- The top part is very important, from the community area to “talk with sales” and “editions & pricing”.
- The silver TopCoder icon with rings is EOI_Light.psd but we want to showcase it a bit different, maybe angled so you get the really nice 3-D effect going. You can create a new icon if you want; this is a reference of TC + silver + dramatic rings. See how the rings have those little bits of energy coming off of it. We’d like to see those throughout the page and used so the image comes together as one, beautiful, cohesive design. It’s a nice subtle gold/yellow and with some blue accents on the page against a lot of white with some shadows. That’s the vision!
- We want to see that same “community” icon with the map of the world behind it, so we can base a lot of the colors off of that color blue. It’s in TC_Home.psd file.
- The two buttons with “triangle play” icon need a special requirement. These are “play video” buttons. Design two iPad icons in landscape orientation with an image inside and a typical play button, very eye catchy. You would probably need to smartly insert “Watch the Video” words in those button areas.
- There are three main call-to-action buttons that really should draw user eyes attention in this top part: Join TopCoder (in red), Talk with Sales and Editions and Pricing (in green).
3 Bold Links
- Right below the area described above, we want to display three (3) large and beautiful items where users can perform an action.
- Each item will display the icon shown in the mockup with a title, description and a button/link.
- Icons need to be very large and attractive. All the icons can be found in the resources attachment. Take care of the eBook icon; it should look like a book.
Digital Assets
- Below the 3 bold links we need to display nine (9) contests tracks we support in TopCoder: Architecture, Development, Algorithms & Analytics, Design Concepts, Wireframes, Bug Races, Logos, Testing and Prototypes.
- Use 3 rows and 3 columns to display each item.
- Each item should have a title, three lines paragraph text and icon at proper size, relatively large but much smaller than the icons from “3 Bold Links” area.
- Icons are located in ContestTrackIcons.zip.
- Right below those icons arrangement, design an area for text like shown in the mockup with the “See All Editions and Pricing” button.
Clients
- The final area, before footer.
- We want to showcase very nice three (3) clients with company logo, title and quote from a person about the job done with TopCoder.
- Place a “See All Clients” button somewhere.
- This area should have the success stories icon somewhere.
Target Audience
TopCoder members and customers.
Judging Criteria
- Creativity.
- 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.