Challenge Summary
Welcome to TopCoder Website GUI PSD Kit Contest. We need to create a set of PSD files that contain all the UI elements from the new TopCoder website in order to provide ready-to-grab graphics for further design/development tasks.
Notice this is a FAST contest, jump in now!!
Round 1
TopCoder-GUI-Kit-PSD(s): give us an idea of how you are going to present and package your GUI Kit - Contain as much information as possible for Review.
PNG/JPG Files: of any design items/inconsistencies you would like the Client to review and comment on.
Documentation: notes within the PSD layer and any additional stand alone documentation files.
Round 2
TopCoder-GUI-Kit-PSD(s): final version of your GUI Kit plus client feedback.
PNG/JPG Files: of any design items/inconsistencies you would like the Client to review and comment on.
Documentation: notes within the PSD layer and any additional stand alone documentation files.
The primary goal of this contest is to create a GUI Kit, which is a set of PSD files that contain all of the UI elements and graphics related to the TopCoder website. This GUI Kit should allow grab UI elements to be used in another design projects/contests with the feature of letting customization for some UI elements such as button labels, texts and data.
General Guidance
- Group/package each of UI elements in its own PSD folder layer with appropriate name.
- Categorize PSD's based on specific UI elements.
- Use the reference links below as guidelines for setting up your files.
- You might need to recreate some graphics if the PSD source is not available.
Design Requirements
- Review and analyze the attached PSD sources. You need to capture all the possible UI compositions and represent them in your GUI Kit.
- Add the TopCoder logo, title and GUI version/branding at the top of every PSD file you generate.
- Create Headers/Titles for the different sections to make it more useful for future designers.
- The look and feel of the GUI Kit should complement the TopCoder website graphics.
- We are not looking for new items to be added, just all the current UI items to be consolidated and made useful for future designers.
GUI Kit Model
The following structure represents the minimum amount of sets we're looking forward to see. You're encouraged to go beyond because this obviously needs a proper analysis and improvement based on the explored PSD files and website pages below.
- TopCoder Website Home Page
- UI Elements
- Navigation
- Registration overlay/popup
- Banner wrapper
- UI Elements
- Buttons
- Forms (Registration form - https://www.topcoder.com/reg2/)
- Icons
- Page Layout Element
- Page title
- Parragraph style
- Alert/Notification
- Container
- Modal Window
- TopCoder Webinars
- Calendar
- Carousel/Slider
- What Is EOI Page
- Case Studies
- TopCoder News
- TopCoder Events
- TopCoder Blog
References
Notice these are just for reference. DON’T COPY ANYTHING.
- Facebook PSD Kit
- Android PSD Kit
- iPhone GUI PSD Kit Version 4
- iPad GUI PSD Kit
Target Audience
Designers and developers of any TopCoder website task.
Judging Criteria
- How well you design, plan and develop your Cockpit GUI PSD Kit.
- Cleanliness of your graphics, design and ability to stay within the given design reference.
Submission File
Add the PSD files, PNG/JPG screens and any notes to your submission files.
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.