BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$75‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to CSFV Style Guide Kit Website Storyboards Design Challenge. We need to create a website (two pages) that works as styling guide of the CSFV gaming site. These pages will display all of the available UI elements and explain how to use them.

Round 1

For your R1 deliverables please submit screens that cover all the features under “Storyboards Requirements” section.
1) Style Guide
2) UI Components

Round 2

Final design will contain all the requested features under “Storyboards Requirements” section plus any updates from client feedback.
1) Style Guide
2) UI Components


The primary goal of this contest is to create a GUI Kit in website mode. This website will contain two pages with information about all of the UI elements, graphics and style related to the CSFV Website (verigames.com). This GUI Kit should allow grabbing UI elements to be used in another design projects/contests for designers and coders.

Branding and Guidelines
- The overall look and colors must match the current website design (gray, black, green, yellow, white, etc).
- Use the verigames logo (VerigamesLogo.zip).
- Fonts must look consistent with the current design. Declare your fonts according to the Studio font’s policies.
- Show all the hover states for all the navigation items.

Design Requirements
Overall
- Follow Mockup.zip layout for guidance of the pages. This is a modern and common way to create GUI Kits. You can check this live reference for inspiration. DO NOT COPY ANYTHING, use for reference only.
- Browse, review and analyze the website pages and the linked PSD sources. You need to capture all the possible UI compositions and represent them in your GUI Kit.
- Pages in scope for this challenge:
-- Home | Source Files
-- Games | Source Files
-- My Home (logged in user) and User Profile | Source Files
-- News | Source Files
-- Forums | Source Files
-- Wiki | Source Files
-- Chat
- Notice some of the source files versions are outdated (navigation mostly) compared to the current website version. You must follow the current version as main source. If there are no source items for any component you must create them.
- Identify UI inconsistencies and propose the fixes.

1) Style Guide Page
This page displays branding and look information.
- See 1.style.png from the mockups for layout reference. You can suggest better organization.
- Extract branding style items from the references and group them wisely.
- Cover the following at least:
-- Main pages layout.
-- Logo.
-- Colors.
-- Typography.
-- Icons.
* Plus any other branding items you can extract. You’re encouraged to do so, that’s the goal.

2) UI Components Page
This page displays the UI components from the site with information about their proper usage and coding tips.
- See 2.components.png from the mockups for layout reference. You can suggest better organization.
- Extract UI components from the references and group them into the pages below.
- Cover the following at least:
-- Page Loader.
-- Buttons.
-- Labels.
-- Text fields.
-- Radio/check buttons.
-- Widgets (panels, containers, etc).
-- Modal dialogs.
-- Hover cards.
* Plus any other UI components you can extract. You’re encouraged to do so, that’s the goal.

Target Audience
Graphic designers and software developers of the website.

Judging Criteria
- How well you design, plan and develop your GUI Kit.
- Cleanliness of your graphics, design and ability to stay within the given design reference.

Submission File
All requested requirements as 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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30043454