Challenge Summary
Welcome to the TIS - IT Website Storyboard Contest.We just completed wireframe in previous contest. Right now we need your help create the storyboard design of the TIS IT Website pages based on provided wireframe. In the end of this contest, we're looking for clean, professional storyboard design that will show great User Experience of the TIS IT website application.
If you have any question, please raise in the forum, Let's discuss!.
Round 1
Your submitted design solution for client review.
1.Homepage
2. Single Content Page
3. Columned content Page
4. Table content Page
5. Map content Page
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of storyboard
1.Homepage
2. Single Content Page
3. Columned content Page
4. Table content Page
5. Row content Page
6. Map content Page
7. Contact Page
8. Search Page
9. Comments and Feedback Page
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Contest Details
The purpose of this contest is to build TIS - IT website pages storyboard based on provided wireframe but stick with our design requirements. The result of this contest need create simple, professional and ease to use website application that will help let the world know about our products or services.
Design Requirements
Page Size
- 1024X768px resolution
Color
- See the IT Landing Page Color Set attachment (TIS-Color-Set.png)
- The Primary color is:
-- RGB: 51 119 168
-- Web Color: 3377a8
-- CMYK: 82 48 51 1
Fonts
- Standard website safe fonts (Don't forget to declare your font when submit!)
Reference Designs
- www.microsoft.com
- www.amazon.com
- www.saphana.com
Submission Requirements
- All pages based on provided wireframe (tis-wf.zip) are required as submission in this contest.
- The wireframe pages help you starting point to design layout/UI elements of this storyboard contest. We're encouraged you to improve design/functions that will leverage the website application user experience.
- Based on client reference design, their expected design should be simple, clean and professional .
- Read more details informations for each pages below:
1. Homepage
- This is default page of the website application
Page Layout
- Use placeholder for logo
- Show a search feature at the top of the page
- Search feature need use auto suggest function
Navigation Bar
- Navigation bar with expanded detail feature when clicked on.
- Bread crumb links on pages to navigate back to the homepage
- Match content on navigation bar
Discover Navigation
- This area will be “Quick Links” of Navigation bar
- There will be some numbers of page to navigate.
Main slideshow
- Create separate screen show some each of slides structures:
-- slide 1, 2 & 4 - slide, icon, title, links
-- slide 3 - slide, title, links
- Include the functionality where the picture automatically rotates every 10 seconds
- Include the pagination so user can click one of the circles in the bottom right to manually switch the picture
Comments/Feedback
- This are will show quick info and quick button to let user do comments/feedback.
- Make sure you use proper typography for links, content, like/dislike icon
- Need "Add" button in the bottom side.
Tab Box
- Kontiki Video will show by default, it will re-use kontiki Player
- But, this will show not only tab of Videos, also Images, Articles, For Home and For Office
- Show clear difference design for active and inactive tab
Videos Tab
- Kontiki standard video player show in the left side
- In the sidebar, it show list of Kontiki video
Images Tab
- Images, show grid view of products
Articles Tab
- Articles displayed on list view
- Read more need clearly visible.
- Did we need alternate rows?
For Home Tab
- This tab will show 3 columns, match the content.
For Office Tab
- This will be same like For Home tab layout, match the content.
Footer
- The bottom of the page should include an area to Contact Us
- Quick links displayed all footer area, how you organize them?
2. Single Content Page
- Check Security and Support page on Wireframe
- Photo placed on top
- Description placed below photo
- For download links, need icon represent that link is downloadable
- View Additional link need clearly visible.
- Suggest us proper typography
3. Columned content Page
- Check Download page on Wireframe
- Quick description placed on top side.
- Table show in the left bottom side
- Suggest/Design how those 4 boxes in the right column looks.
4. Table content Page
- Check In Stock Software page on Wireframe
- Table show in the left side
- Define how links and action links on table should looks.
- Need alternative rows
- Did we need add pagination here?
- Quick information placed on the right side.
5. Row content Page
- Check Product details page on Wireframe
- This page show Product image, price and description
- Need add clear "Buy" button
6. Map content Page
- Check Store page on wireframe for how Map content page looks.
- This page will show store details address and map.
- User can navigate between numbers store.
- Did we need another feature on this page like "Near Me" now?
7. Contact Page
- Contact page will be simple
- It will show image in the left side and Corporate Address in the right side
- Did we need show a map here?
8. Search Page
- This page triggered from Search button on top navigation.
- In the left side need "Discover" box
- Need Sort By functions
- Need RSS in the top right
- Design how clean pagination looks.
- Your design should anticipate how search result looks on these following section: "Product", "Download", "Security", "Support" and "Store" pages. Did we need filter related those different areas?
9. Blog Page
- Out of Scope of this contest
10. FAQ Page
- Out of Scope of this contest
11. Comments and Feedback Page
- In the left side need "Discover" box
- Comment form need simple.
- Add Required mark
- Make sure you just use standard browser style for inputs
- Need action button, Reset and Submit button.
Target Audience
This site is intended for the Business employees to find IT service, training, and news information
Judging Criteria
- Uniqueness and Creativity Design
- User Experience
- How well you create the storyboard designs
- Cleanliness of your graphics and design.
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 source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.