Challenge Summary
Welcome to CSFV Mini Site 1 Storyboard Design Contest. We need you to design the look and feel of a game mini site. It has 7 pages/screens, very similar among each other and you will be using an existing design as guidance/base for your work. Come and join!
Round 1
For your R1 deliverables please submit the following screens:
2) Home Not Logged in
3) Play Game Logged in
Round 2
Final design will contain all the requested screens plus any updates from client feedback.
1) Home Logged in
2) Home Not Logged in
3) Play Game Logged in
4) Play Game Not Logged in
5) Character Profile Badges
6) Character Profile Achievements
7) Character Profile Honors
The primary goal of this contest is to design the look and feel of seven 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 logo and 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
* If you’ve participated in other CSFV Mini site contests please notice this contest has slightly different requirements. Read carefully from now on.
Game brief
This game is about a fantasy world that will make players into powerful magic-users who are struggling to resurrect a dying world. The story that unfolds depends on the players and their actions. This site is to be their portal into that world. The overall palette we want to see should work well with rich golden, blues and brass tones mainly. Dark colors, stone and wood textures, jewel tones underneath, lit by magically amplified natural forces such as fire, ice and lightning. Use the UI screens elements (GameReference.zip) as inspiration, shapes, colors, machinery.
Overall Requirements - Customization Guidelines
- See MinisiteGuidelines.zip. Especially MinisiteGuidelines_4.jpg shows the work design areas.
- Replace the logo place holder with the provided game logo.
- Navigation menu is: Home, Play Game, News, Character Profile, Achievements, Quests, Forum.
- Design 7 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 Logged in
- Design the layout and elements according to “01b-home- logged-in.png” in wireframes.
- Add a “Game Image” placeholder as shown in the wirefame.
- Show content for “How to Play” tab only. You don’t need to design content for the other tabs.
- 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).
2) Home Not Logged in
- Design the layout and elements according to “01a-home-not-logged-in.png” in wireframes.
- Participants, Available Levels and My Friends should be “off” colored on this scenario.
- Add a button or some way to “Click to sign in” functionality as shown in the wireframe.
3) Play Game Logged in
- Design the layout and elements according to “02b-play-game-logged-in.png” in wireframes.
- The client sent hand made sketches (site-sketches.pdf) of some machinery figures they'd like to see integrated into this page. In the graphic placeholder area use ui_v4_comp_top_decoration.jpg (960x540 pixels) (from GameReference.zip > Game UI). Use it as inspiration, the game UI has some sort of wrapped machinery controls. These should be represented wrapping the image placeholder and page overall. The idea with these sketches is to show you that the design for the site could integrate with the game screen (ui_v4_comp_top_decoration.jpg). You can feel free to come up with whatever graphic you think is cool, these are style suggestions only.
- Make sure to show chat and logged in header (make visible “LOGGED IN” layer group from the template).
4) Play Game Not Logged in
- Design the layout and elements according to “02a-play-game-not-logged-in.png” in wireframes.
- Add a button or some way to “Click to sign in” functionality as shown in the wireframe.
- Same machinery wrapping goes here too.
5) Character Profile Badges
- Design the layout and elements according to “04a-character-profile-badge-detail.png” in wireframes.
- Use a placeholder for the whole area instead of the badges green graphic from the wireframe.
6) Character Profile Achievements
- Design the layout and elements according to “04b-character-profile-achievements-detail.png” in wireframes.
- Notice that “Achievements” is the same as “Awards”, it’s just a renaming and adding tabs. Check 04_Achievements_Awards.psd from the provided storyboards source files. You can reuse those elements.
7) Character Profile Honors
- Design the layout and elements according to “04c-character-profile-honors-detail.png” in wireframes.
- Notice that “Honors” is very similar to “Awards”. Check 04_Achievements_Awards.psd from the provided storyboards source files. You can reuse those elements.
Note: there is footer with 5 games in the wireframes. Ignore that for your design.
Reference
The client has specified some features from external sites they like. Please notice they are just reference, DON’T copy anything.
- Blizzard.com: liked tones, cleanliness of layout.
- http://www.wizards.com/Magic/Multiverse/Default.aspx: for integration of UI elements / buttons with theme (stone texturing, etc).
- http://assassinscreed.ubi.com/ac3/en-gb/index.aspx: layout is clean, readable, strong. Don’t like the tech UI elements though.
Target Audience
The demographic is 17-70. Mainly they will be followers of Fantasy Adventure. The younger players will be attracted to the implied fantasy world they are immersed in. The older players will be more attracted to the puzzle elements of the game.
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.
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.