Challenge Summary
Welcome to TopCoder-CloudSpokes New Blog Page Storyboard Design.
We are building a NEW website from scratch and we need the Design Studio Community to help design it! The audience for our new site consists of both our customers and our community. It is our goal to give everyone a great user experience.
For this contest we need you to design some pages for our new blog page by following the provided storyboard theme/look and feel from our previous contest (attached to the contest).
So, what are you waiting for? Jump in now and get involve in our great change and improvements :)
Round 1
Your initial submission for checkpoint feedback:
- All the screens for Computer/Desktop size (check the storyboard)
- Any notes for the client about your submission.
(But we recommend you to submit the mobile screens too. By doing this the client can see your consideration about the responsive view)
Round 2
Your final submission with all the screens and checkpoint feedback applied.
Primary Goal:
The goal of this contest is to design the new blog page theme for our new website. We are looking for your best approachment and concept how this should work by using the provided storyboard as your base design. We also provide some mockups that containt every single elements that need to be included in your design.
We are looking for a very clean, simple layout for these pages. Keep using the spacing and styles we like from the content page storyboard.
At the final you must provide your design in both devices, PC and mobile (see the provided storyboard as guidance)
Design Consideration:
- Please use the provided storyboard as your base design. Your design need to match the theme of this storyboard.
- These pages should be very clean and simple.
- Please keep things consistent.
- Please follow the spacing and styles we like from the content page storyboard.
- Your design should be responsive, see the provided storyboard. We need you to design these pages in 2 (two) devices, pc and mobile.
- Feel free to design some icons or any other elements for the new pages to make the design more standout where you think appropriate. But please keep in mind your graphics should follow the look and feel of the provided storyboard.
- Make sure your submission images name are arranged properly (i.e 01_Blog_Page_Main.png, 03_a_Blog_Page_Search_Result.png)
General Requirement:
We’ve provided some mockups that you can treat as a sort of wireframe. Redesign all of the following elements, which will show on every blog page within your design:
1. The global header (logo and global navigation can be found at the top of the storyboards).
2. The global footer(see the storyboard)
3. A new header/banner that says “Welcome to the TopCoder-CloudSpokes Blog”
--Feel free to explore your ideas in designing this section. Make sure this section make the page pop and enticing.
4. A new blog navigation that runs under the blog header/banner and contains these categories:
- Strategy
- Platform
- Design Studio
- Challenges
- Stories
5. A sidebar that contains the following elements:
---- Search
---- Subscribe option. We want people to be able to subscribe to ALL of the categories, just some of them, or just one. Show the best UI solution here.
---- ebook promo (use the exact promo in the mock).
---- categories
---- popular posts
6. A social media bar that hugs the right side of the page. Use the provided sample. DO NOT redesign this bar.
Required Screens:
1. Main blog page:
- Refer to the mock up provided (see new_blog_placement_mockHOME.png), but only use it for layout and informational purposes - do not copy the design.
- The main page will show excerpts of the blog posts. Please show title, author, thumbnail and excerpt.
- There should be a read more link/button to show the details of the blog post. We are looking for your best approachment here.
- Your new design must be cohesive with the Content pages in the provided storyboard.
- Do you have something in mind that you want to show in our new blog page? Feel free to show us what you have.
- Again, keep things simple. Follow the spacing and style from the stoyboard.
2. Categories page:
- This is the page user will see upon clicking one of the links from the blog navigation or from the sidebar links.
- See new_blog_placement_mockCATEGORY.png
- Show which category page you are on within the blog navigation somehow.
- Show a subscribe feature for RSS at the top of the page (above the posts).
- Show the title, author, etc. and thumbnail, content, etc. as you see it in the mockup - but with your own font choices and font sizes.
3. Search Results page:
- Assume a user try to search something on the blog page.
- Show us a solution that makes sense for this page. Should a thumbnail be shown here? Or just text? Excerpt? No excerpt? What do you want to see here when searching for something on the blog page?
- Show us a simple result when none of search result found.
4. Individual Post Page:
- This is the page user will see upon clicking one of the blog posts title or read more link/button.
- See new_blog_placement_mockINDIVIDUAL.png
- Please show this page with content and a photo placeholder left or right justified somewhere in the text. See the Content pages of the storyboard for styling.
- Show the title and then show the date, author and categories (see mockup).
- Show tags at the bottom of the post
- Show a placeholder area for banners or other promos.
- Show a “previous” and “next” option. We don’t like this current look, so give us something a little smaller and better looking.
- Comments area. Don’t redesign this area - we’ll use the code they provide.
Important:
- The mockups provided only to show the contents we want to see on the page. Feel free to explore your ideas on designing every pages. The most important thing, you must follow the spacing and styling of the storyboard provided.
- Keep in mind that these pages should be responsive. We need to see your solutions on the mobile screen too.
- Do some research to find out how some other great website provide large amount of information in an easy way, with simplicity and usability. Add "from your research" at the end of "DO NOT copy anything
Target Audience:
- Current and potential customers
- Current and potential community (The entire TopCoder Community AND the entire Cloudspokes community)
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard
- Cleanliness and consistency of your graphics and design
- How well your layout work with the new theme of the site
- Is your design for all the screens responsive for all the devices?
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 image files based on contest submission requirements stated above.
Source Files
All original source files. Original source files should be saved as layered Photoshop PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.