Challenge Summary
Welcome to CSFV Xylem Minisite Storyboards Updates. This is a FAST contest where we need to update a game website navigation and page elements, just two pages. Jump in now!
* Notice the deadline is quite tight. Come on!
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 redesign the Xylem website navigation, to update the layout and certain page elements. You are provided with base design as branding guideline and instructions to follow.
Branding and Guidelines
- Use XylemMinisite.zip as baseline for your work, Home and Logged In pages.
- Use XylemLogo.zip as new page logo.
- Colors and overall feel should match the 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
1) Home
- Replace the pages logo with the new provided logo. Add a “beta” label to the logo, similar to the sample shown at betalabel.jpg.
- Remove the navigation and design new items that are in line with the logo style and branding. We need: Forum, Wiki, News and Get Game. The new navigation icons dimensions should be something relative to the existing icons, not too large, not too small.
- Make sure to provide hover and active states with the new navigation.
- Both pages have an area below navigation that reads “Solve puzzles and discover…”, replace the play button with a “Get Game” button which would be similar (smaller/sleeker version of the main navigation “Get Game” item). Also, work with font, kerning and color to make text “pop” more “SOLVE PUZZLES … etc”.
2) Logged In Home
- All updates from home must be applied to this page (logo, navigation, get game button).
- See Layout.jpg for visual reference about the location of new widgets we need to design.
- Gamescreenshot area. We need to modify the dimensions of the game pic area to 640x480pixels (dimension of the raw visible picture, without considering border decoration). Therefore, the game description area would need to be adjusted. Also replace the Xylem logo on that description area.
- Create a reduced version of the news widget.
- Create a forum activity widget. Sample of a forum activity: “Post thread sample title. Posted by username, 1 day ago”.
- Create a wiki activity widget. Sample of a wiki activity: “username posted a new wiki article. 3 days ago” or “link-to-article was updated. By username. 5 minutes ago”.
- Create a “How to Play” widget. It will contain a space for a picture (user a placeholder - not too big) and one paragraph with information about how to play the game (it should be 4 lines minimum).
- Create a “Tips and Tricks” widget. It will contain a scrolling panel that illustrates a particular puzzle situation (use a placeholder or game picture). There will be a larger box to the left that contains tips about how to play that particular situation. Player should be able to click through to larger file of tips and tricks.
- Create a “Puzzle of the Week” widget. It will contain a very large picture of a game puzzle (use a placeholder or game image) and a caption.
- You can use XylemGamePlayUI.zip images for temporary filling the required pictures on the widgets.
Target Audience
Thoughtful, scientifically-minded puzzle gamers. People who enjoy Sudoku and those kind of games.
Judging Criteria
- Consistency with the existing design.
- 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.