Challenge Overview
Welcome to "Planning and Zoning Report System UI Prototype Challenge". The main task of this competition is to develop a HTML5 prototype based on the provided wireframes and storyboard designs. The prototype must follow our standards and our guidelines. Please see more details below.
Project Overview
This project purpose is to re-architect the old PZR application into a modern technology and create several new features as an enhancement to the application. We already have wireframes that able to simulate the flow and provides content information for the new PZR application and storyboard that showing how the application should look and feel.
Key Requirements
- Test in all the required browsers.
- Layout position and information arrangement must use PZR wireframes.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements :
00. General requirements :
- Login / Login error Screens.
- Register screen
- Recover Password screen
01. Information Specialist Screen Groups :
- Information Specialist Dashboard
- IS - Sites
- IS - Jurisdiction
- IS - Report Query List
- IS - Help
02. Manager Screen Groups :
- Manager - Portfolio List
- Manager - Company List
- Manager - Jurisdiction
- Manager - Sites
- Manager - Report Query List
- Manager - Resource Availability
- Manager - Invoice
- Manager - Help
03. Report Writer Screen Groups :
- Report Writer Dashboard
- RW - Jurisdiction
- RW - Sites
- RW - Portfolio List
- RW - Report Query List
- RW - Resource Availability
04. Admin Screen Groups :
- Admin - Users
- Admin - Teams
- Admin - Jurisdiction
- Admin - Dropdown
- Admin - Sites
Importants :
- All screens in the wireframes including the complete interactions is needed to be create in your submission.
- Please use the wireframes for all navigation, layout content, layout position and interactions.
- Please use the storyboard only as your references for look and feel.
- Even though the screen requirements looks overwhelmed, actually many of the screens can be duplicated to another.
- Ask in forums for any unclear requirements.
Specific HTML/CSS/JS Requirements
HTML5/CSS Requirements:
- Your HTML code must be valid HTML5 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/titles, 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.
- Test in all the required browsers.
- Watch word typos in every place including the source code. Make sure they have correct meaning.
Javascript Requirements:
- All JavaScript used must not have any copyrights to any 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 allowed to use JQuery for this contest.
Browsers Requirements
- IE 8 and above
- FF latest Mac & PC
- Safari latest Mac & PC
- Chrome latest Mac & PC
Attachment :
- PZR wireframes, attached in forum.
- PZR storyboard, attached in forum.
Final Submission Guidelines
Submission Deliverables:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
For each member, the final submission should be uploaded to the Online Review Tool.