Challenge Summary
Welcome to the CSFV - News and Static pages Design Concepts Challenge! This challenge is focused on creating design concepts/visual ideas to change the current news and static pages to be more visually attractive and modern.
We are providing you with content. We are looking for you to provide new design concepts and ideas on how this page should be. This is the first step in planning our new user experience!
In this challenge we are looking for DESIGN CONCEPTS on how this could work. What should the user see and experience?
Round 1
Submit your design for a Checkpoint feedback:
1. News Listing Page.
2. News Details Page.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
1. News Listing Page.
2. News Details Page.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
CSFV is looking to revamp news and static pages to improve UX and user interaction with the content.
We are looking for the [topcoder] design Community to help us with planning our new UX "user experience".
Supporting Documents:
- CSFV PSD Kit (CSFV PSD Kit.zip)
- Games Storyboard (CSFV Games Page Design.zip)
- Empty Widget Screenshot (empty widgets.png)
Design Concept Goals:
- How quickly could you find information?
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN design!
Design Considerations:
- Focus on page content; keep the header and the footer as they are.
- We need fresh ideas that contribute with a very modern design, something out of the box and also that implement good UX practices.
- Design must be consistent with Games UX page (CSFV Games Page Design.zip)
Required Screens:
1) News Listing Page:
- Open current News view for real content; don’t use lorem ipsum text.
- The new page should use the full width of the content area; we don’t want to see any left or right widgets.
- Reference how medium, mashable and livefyre are representing their articles as tiles, we want something like this.
- Some news will have images and some will not have images, how can we represent this?
- Each news tile will have following information :
-- News Title
-- Image (if exists!), otherwise, news excerpt.
-- News Category
-- Posted User Photo
-- # of shares, # of comments, with ability to share right from there.
- We need to include sharing options on hover, see how mashable did it.
- We will need a “View More” button at the bottom for progressive loading.
- At the bottom of the page we need the following:
-- What’s Hot?
-- Recent Forum Posts
-- Verigames Tweets
Note: Those widgets can be found in CSFV Games Page Design.zip at the bottom of 00 Game Not Logged In.png.
- For the new widgets you are designing, we want to see how they would look like when they are empty on first page load, see how facebook do it (empty widgets.png)
2) News Details Page & Static Pages:
- Open current News Details view for real content; don’t use lorem ipsum text.
- The new page should use the full width of the area content; we don’t want to see any left or right widgets.
- Some news will have images and some will not have images, so you need to show us 2 versions for this page; one with an image and one without.
- Refer to existing news details pages, the information we will display will be identical to what is currently displayed there.
- We need to include sharing options.
- Comments widget will take full width also; we will be using Disqus commenting system.
- We want the related news widget to come under comments widget.
- At the bottom of the page we need the following:
-- What’s Hot?
-- Recent Forum Posts
-- Verigames Tweets
Note: Those widgets can be found in CSFV Games Page Design.zip at the bottom of 00 Game Not Logged In.png.
- For the new widgets you are designing, we want to see how they would look like when they are empty on first page load, see how facebook do it (empty widgets.png)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- Casual gamers, everyone who likes games from children to adult persons.
Judging Criteria:
- Capacity to provide a design out of the box.
- Design Quality and execution.
- Originality.
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for 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 file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.