Challenge Overview
Welcome to “Cloud Site Web Prototype Challenge”. This challenge purpose is to convert our wireframes and storyboard into a working HTML prototype that able to simulate all front end required interactions. This challenge will produces the full UI Prototype for our upcoming new cloud site applications. This challenge requirements is very straight forward.
The project purpose is to create an internal education site for our client employees to learn about the cloud and our client cloud capabilities, services, resources, education and certification programs. Primarily, this site must convey that there is a LOT going on the cloud and that our client is right in the middle of it.
Please read more details about screens requirements below :
General Requirements :
- We want this site adopt metro style UX interaction, if you're not familiar how the metro style works, you can browse for references or check these references :
* http://athemes.com/collections/best-metro-style-wordpress-themes/
* http://www.scratchinginfo.com/metro-style-html-templates/
* http://www.andysowards.com/blog/2012/50-epic-metro-style-design/
- Wireframes for all screen requirements can be found online from this link : http://eupvxv.axshare.com/
- All screens must be linked together.
- Make sure all UX interactions works (carousel, etc)
- Create hover state for all links and button
- For any layout that have differences between wireframes and storyboard, please confirm in forum.
Screen requirements :
1. Homepage (use template 1_Home.png)
2. What is the Cloud ( use template 2_Cloud-101.png)
- History (use template 3_0_history.png)
- Ecosystem (use template 3_0_history.png)
3. Capabilities (use template 4_cloud-capabilities.png)
o Capability Name (use template 3_3_capabilities.png)
4. Engage (use template 5_engage.png)
o Training (use template 3_3_capabilities.png)
- Training Detail (use template 3_1_Training.png)
o L&D (use template 3_3_capabilities.png)
- L&D Detail (use template 3_3_capabilities.png)
o Certifications (use template 3_3_capabilities.png)
- Certifications Detail (use template 3_3_capabilities.png)
o Opportunities (use template 3_3_capabilities.png)
- Opportunities Detail (use template 3_3_capabilities.png)
5. Resources (use template 5_engage.png)
o Case Studies (use template 6_case-studies-page.png)
- Case Study Detail (use template 3_2_case-studies.png)
o Demos (use template 6_case-studies-page.png)
- Demos Detail (use template 3_1_Training.png)
o Architectures (use template 3_3_capabilities.png)
- Architectures Detail (use template 3_3_capabilities.png)
o Firm Assets (use template 3_3_capabilities.png)
- Firm Assets Detail (use template 3_3_capabilities.png)
o External Resources (use template 3_3_capabilities.png with link)
o Cloud Services (use template 3_3_capabilities.png)
- Cloud Service Detail (use template 3_3_capabilities.png)
6. News (use template 7_0_News.png)
o Recent Wins (use template 7_1_recent-wins.png)
o New Opportunities (use template 7_2_new-opportunities)
o Yammer (use template 7_3_yammer.png)
7. Contact Us (use template 8_contact-us.png)
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and CSS3 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
- IMPORTANT!! we will use drupal as the back end engine for the cloud site, so your prototype code must be clear and easy to be converted into drupal templates.
Javascript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
You are free to use jQuery library and plugins that met the requirement stated above.
Documents Provided:
- Cloud Site Storyboards (and source files)
Browsers and Standards
Mac:
Chrome Latest & Safari 6+
Windows:
Chrome Latest, IE 9+ & Firefox 7+
Final Submission Guidelines
N/A