Challenge Summary
Welcome to topcoder Cockpit Storyboard Re-Branding Challenge
In this challenge we want you to re-skin some elements from our current topcoder cockpit pages. We need a new color scheme and branding on these elements to be simple, modern and have a flat design trend.
Round 1
- Your initial design for checkpoint feedback
- Any notes about your design for the client.
Round 2
- Your final design with checkpoint feedback implemented.
- Any notes about your design for the client.
Overview:
Topcoder Cockpit is the web application platform we use to help copilots and clients manage their projects, challenges and the community.
Primary Goal:
In this challenge we only need you to re-skin some elements from the cockpit pages as listed in the requirements below. We are looking for a new modern and flat design style. We attached our new topcoder web GUI kit as your reference about the style we like and want to see in your solution.
Design Consideration:
1. Feel free to explore the topcoder web GUI kit provided. We want the same style and theme on your design.
2. Your new design colors does not need to be an exact copy of style of the GUI kit, but it should be obvious that it's the same BRAND with the new topcoder website. Take a look at the top level navigation for example, the current dark brown colors blend well with the topcoder red and black theme. Please keep this in mind.
2. Remember, you only need to re-skin the elements, DO NOT change any graphics or add anything, including lines or borders.
3. We attached the Design elements.docx containing the elements that need to be re-skinned.
4. We suggest you to arrange your design elements in an appropriate file and arranged the name accordingly. See how we do it on the GUI kit.
Design Requirement:
You need to re-skin all these elements in your design:
1. Top Navigation
- See TopCoder Cockpit Navigation and Right Sidebar.zip --> Dashboard.psd
- In the headers group layers you will find the complete navigation style for all the 4 tabs (Dashboard, Projects, Reporting, and Admin), the search bar and some links.
- We want you to re-skin this top level navigation to have a new flat and design style.
- Remember, DO NOT change the layout or placement, just simply re-skin the elements.
2. Right Sidebar and Feedback Sidebar
- See TopCoder Cockpit Navigation and Right Sidebar.zip --> Dashboard_Sidebar.psd
- You need to re-skin these sidebar to have a new flat and design style.
- DO NOT change the graphic icons on the sidebar, instead, you only need to change the color and style.
3. Modal Windows and preloader
- See Modal Windows and Preloader.zip --> 01. Modals.psd
- You need to re-skin all the modal windows and preloader in this psd source.
4. Table
- See Tables and filter.zip --> active_contests_table.psd
- Re-skin this table with the new flat design theme
5. Filters
- See Tables and filter.zip --> all_Filters_1024px.psd and all_Filters_wide.psd
- Re-skin all these filters elements.
6. Buttons and icons
- see Buttons and Icons.zip --> Final Fix V2.psd
- Re-skin all the buttons and icons on this psd storyboard to have a new flat design style
- Do not change the design of the icons, we only need to change the colors.
- We are looking for your best judgment on the color choice.
IMPORTANT NOTES:
- We use a lot of rounded corners on the current cockpit title headers or tables, we want to simplify and re-skin this.
- We want to see a new and fresh color options for these elements above, the most important thing, keep it simple and have flat design theme.
- NO extra lines or borders in your design solution. Re-skin. Reskin.!!
Target Audience:
- TC Cockpit User (Client, PM, and Copilots)
- Potential clients/customers.
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard to make it has the same brand.
- Simplicity and Cleanliness of your graphics and design
- Design consistency.
- How well your design think about user experience.
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.
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.