Challenge Summary
Welcome to the 30hr TopCoder-CloudSpokes Refinement Design Contest. We are building a NEW website from scratch and we now need you to review the provided designs and create a final solution/vision based on our instructions and your design skills!
The audience for our new site consists of both our customers and our community. It is our goal to give everyone a great user experience.
This is a FAST contest - I am looking for refinement and finishing touches!
Contest Description
We have run a couple of design contests to design the new TopCoder/CloudSpokes site design - we now need you to take some of the ideas and designs and complete the final version!
Design Problem
- We are merging two brands into one!
- We have some designs we like and would like to merge different items and concepts into a final design
- We need a finished design so we can start creating the HTML this week!
IMPORTANT
- We are providing the winning designs from the last contest $2500 New TopCoder-CloudSpokes Website Design Contest
- We would like you to use these as a "base" - look to improve, combine, fix and update the user experience.
- This is now the FINAL design so we can start building it and then continue refining it in the future :)
Design Goals
We are looking for you to merge and refine the following pages (with appropriate views)
- Home page page
- Challenges page
- Community page
Primary Design Considerations:
- Continue with the Flat design and great use of white space.
- Notice all of the designs are simple, to the point. No clutter.
- Note we need a mobile version (responsive)
"Home Page"
Notes
- Review "Wireframe-mashup.png"
- Review "Wireframe-outline.png"
- Review files in Reference-Base-Artwork folder
Home: Base Design
- Review "iamtong-01_1_home.png"
- Review "abedavera-01-Home-1024.png"
- Review "amelblitz-01-Home���.png"
Navigation Module
- Use the navigation shown in the wireframe mashup (based on abedavera but with navigation items)
- Use the "Register Now/My Account shown in the "amelblitz" design solution
- Use the button design shown in "abedavera1" design solution (flat design)
- Navigation dropdown - use "iamtong" design solution
Banner Module
- Use the "abedavera1" banner design
- Banner height: use the "iamtong" banner height/grid
- Cloud icon: Order of icons from left to right should be Design, Development, Algorithm
- Cloud icon: need a third color to replace the purple
Stats
- Use the "amelblitz" stats design
Content 1: What We Do
- Use the content and messaging from the "iamtong" design
- Note how this section is talking about "what we do" (what the community builds etc)
- Order of icons should be: IA/UX Design, Software/Mobile Development, Analytics
- Icons: What colors shuld these be?
- Icons: Update their look to fit with the overall page design
Content 2: What You Can Do
- Use the content and messaging from the "iamtong" design
- Note this is two columns now
- Make sure the colors and overall look is correct with the top part of the page
Content 3: Customers/Community /Challenges
- Use "iamtong" design for the base here
- Modify to work similar to the wireframe
- Make sure the colors and overall look is correct with the top part of the page
Footer: Customers/Community /Challenges
- Modify to work similar to the wireframe
- Make sure the colors and overall look is correct with the top part of the page
Mobile
- Update the responsive mobile view
"Challenges Page"
Notes
- Review files in Reference-Base-Artwork folder
Challenge Base Design
- Review "iamtong 02_1_Challenges.png, 02_2_Challenges.png
- Review " amelblitz-09 challenges"
- Review "abedavera-02 Challenges���.png"
- Update these pages based on the design/colors you created on the Home screen (everything needs to work together)
- Continue to refine and use "abedavera" flat design
Navigation Module
- Navigation Modules: Should be carred over from the home
Banner Module
- Banner height: Needs to be shorter and show the correct icons (make sure the grid is consistent)
- Goal is to get you seeing the Challenges faster
- Top just seems a bit busy (might just be the colors in this design?) Can you refine it?
Challenges Table
List View
- Keep the simplicy of "iamtong" design direction
- Challenges Table: Needs a subtle header color
- Remove the vertical line next to Start Date, Round 1, End Date
- Add subtle alternating row color
- Make sure to use "abedavera" button designs (where appropriate)
Grid View
- Update the colors (they are hard on the eyes)
- What design tweaks should be brought over from your List view updates?
- Remove the vertical line next to Start Date, Round 1, End Date
Content 3: Customers/Community /Challenges
- Reuse what you had on the Home page
Footer: Customers/Community /Challenges
- Reuse what you had on the Home page
Mobile
- Update the responsive mobile view
"Community Page"
Notes
- Review files in Reference-Base-Artwork folder
Community Base Design
- Review "abedavera-06-Community-Logout.PNG"
- Review " amelblitz-07-Community.png"
- Review "iamtong 03_Community.png���"
- Would like to somehow use the little banner looking icons that show contest count, member count, etc. from "amblitz" design
- Would like to incorporate the "Join Now" from "iamtong" design
Navigation Module
- Navigation Modules: Should be carred over from the home
- Show logged in view (based on "amelblitz" design)
Banner Module
- Use "abedavera2" page layout
- Banner height: Needs to be shorter and show the correct icons (make sure the grid is consistent)
- Make sure to use the correct colors and icons from the Home page you just created
Active Contests
- Update as needed to be consistent with your design
Community News
- Update as needed to be consistent with your design
Stars of the Month
- Update as needed to be consistent with your design
Content 3: Customers/Community /Challenges
- Reuse what you had on the Home page
Footer: Customers/Community /Challenges
- Reuse what you had on the Home page
Mobile
- Update the responsive mobile view
Final Deliverables
1) Home Page
2) Home Page Mobile view
3) Challenges Page
4) Challenge Page Mobile view
5) Community Page
6) Community Page Mobile view
Note: All source files are attached
Target Audience:
- Current and potential customers
- Current and potential community (The entire TopCoder Community AND the entire Cloudspokes community)
Branding Guidelines:
- Start with "abedavera's" flat design
- Use "Iamtong" grid design
- Refine and simlify the colors (make them consistent)
Judging Criteria:
- Did you capture the requested items and refine/design the items to work well together?
Submission & Source Files:
Preview Image
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 File
Submit JPG/PNG image files based on contest submission requirements stated above.
Source Files
All original source files. Original source files should be saved as layered Photoshop PSD files or AI / EPS (Illustrator) files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.