CSFV Game Mini Site 4 Storyboard Design Contest

Welcome to CSFV Mini Site 4 Storyboard Design Contest. We need you to design the look and feel of a game mini site. It has two pages only and you will be using an existing design as guidance/base for your work. Don’t let the requirements text length fool you, it’s really simple. Come and join!

Round 1

For your R1 deliverables please submit the following screens:
1) Home
2) Logged in Home

Round 2

Final design will contain all the requested screens plus any updates from client feedback.
1) Home
2) Logged in Home

The primary goal of this contest is to design the look and feel of two pages for a game mini site. We need you to keep the same flow/layout of the current storyboard design but also add special customized details in order to make this game page unique at certain level.

There is a global community website with sub-sites focused on games, a mix of social features and large information delivery (social network + gaming website). The website concept is about breaking it down into global website and sub-sites, we will have 5 unique games, and each game will have a dedicated sub-site with content specific to that game, that means the sub-sites will have the same layout and navigation of the global website with different theme/colors/styles but delivering content specific to the game.

This description is meant to guide you on how the site works. This contest only focuses on designing pages of the game mini site. You are provided with the global community site storyboards for visual reference overall, with the game mini site wireframes for layout requirements, and a template to work with.

Branding and Guidelines
- Use Minisite.psd as template for your mini site design.
- See CSFVStoryboards.zip for graphic reference about page elements of the global site overall.
- See GameReference.zip for graphic reference about the game branding.
- You can modify the page height but NEVER the width.
- Colors and overall feel should match the game reference design.
- Use web-safe fonts for the pages content. Declare your fonts according to the Studio font’s policies. If you don’t have any of the fonts from the provided storyboard replace them with Arial and add a note about it. You will be asked to replace the font if you become a winner.
- Show all the hover states for all the new UI elements you create or modify (buttons, hyperlinks, dropdowns, etc).

Storyboard Requirements
Game brief
The game is about solving puzzles as a tool to solve real world problems in a way that isn’t mutually exclusive, so the mini site graphics should suggest both. The player may be a human attempting to prevent software agents from escaping, or he may himself be a software agent, trying to escape. Which way that goes shouldn't affect the look and feel of the site, though, it’s just for you to know.

The mini site look must be clean, modern, technologically advanced with a page background that suggests flat colors, blue-shaded squares and lines on a field of black.

Overall Requirements - Customization Guidelines
- See MinisiteGuidelines.zip. Especially MinisiteGuidelines_4.jpg shows the work design areas.
- Add a logo place holder for this game to replace the current “minisite logo”.
- Navigation menu is: Home, Play Game, News, Achievements, Contests, Tournaments, Forums, Blog.
- Design 8 navigation icons to match the game branding. You are free to suggest the dimensions (all equals), shapes and colors. Show how they look when they are “selected” or “active”.
- Design a background that will be used in all the pages of this mini site. This background should be large enough to cover the whole area like shown in the template sample. The design height should be flexible in the way to solve the problem that all pages won’t have the exact same height, so the design should adapt to the different heights of the pages. Width should be 1200 pixels at least.
- Background style should be strongly associated with the game branding. See the game reference images and read the game description to get an idea of how it looks. DO NOT JUST COPY any of the game images, design something unique using the game images as reference only.
- You are allowed to change font colors and sizes.
- Don’t change any font family (except if it’s one you don’t have in your system).
- Design-rethink the widgets header backgrounds to match the game branding.
- Design-rethink the widgets content backgrounds to match the game branding.
- Design-rethink the widgets icons to match the game branding (optional).

1) Home
- See “1.infographic” in the provided template.
- You won’t design anything special for this page; just place the background and updated navigation.
- Keep the infographic placeholder, exactly as it is - don’t touch!

2) Logged in Home
- Design this page following the layout found in the wireframe page “Home (Logged in)”.
- When clicking “How to play” it should display a popup with the infographic (use a placeholder).
- You can reuse/redesign widgets from existing global site pages such as home, logged in home, help center, and any other resource you find useful.
- Make sure to show chat and logged in header (make visible “LOGGED IN” layer group from the template).

Note: there is footer with 5 games in the wireframes. Ignore that for your design.

Target Audience
Casual game players and people who are interested in contributing to the mission of making widely used pieces of software bug-free.

Judging Criteria
- Capability of making the design customized to the game related graphics.
- Quality.
- Originality.

Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.

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.