Challenge Summary
Welcome to topcoder Website GUI PSD Kit Design Challenge. 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 challenges.
Notice this is a FAST challenge, 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.
- Usage-Guide: create a PDF file with common usage information about the elements you group for the GUI Kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
- PNG/JPG Files: of any design items/inconsistencies you would like the Client to review and comment on.
Round 2
- topcoder-GUI-Kit-PSD(s): final version of your GUI Kit plus client feedback.
- Usage-Guide: final version of the PDF file with common usage information about the elements you group for the GUI Kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
- PNG/JPG Files: of any design items/inconsistencies you would like the Client to review and comment on.
The primary goal of this challenge 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 plus a PDF common usage guide. This GUI Kit should allow grabbing UI elements to be used in another design projects/challenges 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
- Browse, review and analyze all the TopCoder website pages and 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.
- The new website is responsive. Include desktop and mobile versions of your designs.
- 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.
- Provide a PDF that explains the common usage of the UI elements you gathered properly organized and easy to understand/apply. Imagine you’re designing pages from the new topcoder website. What information you need to properly follow the same branding guidelines? Think about the best way to deliver this information.
- Help center is out of scope. Don’t include it.
- The provided set of PSD files from the site are grouped by section (home, challenges, content pages, etc). Some of those files have updates that need to be considered as current for the Kit. Wherever you see a file ending with “_Updated” it means it contains a couple of updated screens that are being used from that set and you should use those as reference.
GUI Kit Sample
The following structure is a raw sample you could start with. This obviously needs a proper analysis and improvement based on the requirements stated above.
- topcoder Website Home Page
- UI Elements
- Navigation
- Login and Registration overlay/popup
- UI Elements
- Buttons
- Forms
- Icons
- Page Layout Element
- Tabs
- Tables
- Alert/Notification
- Container
- Modal Window
- Secondary Page
- Text/parragraph style
- Page Title wrapper
- Community
- Challenges
- My topcoder
- About topcoder
- Blog
- Case Studies
- News
- etc, etc…
- etc, etc…
** Note ** This is for sample purposes, please analyze, add and categorized UI Elements from attached PSD Sources and the website exploration.
References
Notice these are just for reference. DON’T COPY ANYTHING.
- Previous website PSD kit attached (OldTopCoderWebsite-GUI-Kit.zip).
- 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 GUI PSD Kit.
- Cleanliness of your graphics, design and ability to stay within the given design reference.
Submission File
Add the PSD files, PDF, 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.