Challenge Summary
Welcome to the 2 Screen iPad App – Styx Video Surveillance Storyboard contest. This iPad application is intended for a mobile viewing of video surveillance and a way of alerting the users. This will be the first phase of building the look and feel of an iPad Application.
We need to have base screen design for an iPad App outlined below that will serve as our guidelines in creating other screens.
NOTE: This contest will be run as a private competition. This means all documentation and forum discussion will be private and only available to members who have signed a CCA.
Round 1
1) All required screens mentioned in the Requirement sections
2) Any notes for the client about your submission
Round 2
1) All required screens mentioned in the Requirement sections
2) Any notes for the client about your submission
Primary Goal & Design Considerations
For this contest, you will create the base screens of the provided wireframe for Video Surveillance System outlined below. The target platform of this application will be the Apple iPad.
We are interested in ideas on how to display the content effectively that will be easy to navigate on an iPad and with accordance with iOS standard.
You will be given HTML wireframes for the screens outlined below. You should think about iPad interactions, any functionality should needs to be represented in your designs. We are also open to new ideas you might have.
General Guideline:
* iOS Standards:
- We are looking for a iOS standards, the app should use as the native/iOS User Gestures
- Use standard Buttons like back, delete, and cancel. Use the red button color ONLY if you need to provide a button that performs a potentially destructive action like delete.
- Badge like the red notifications circle should be standard as well, avoid using the arrow icon that looks like the recycle icon
- Use of standard search field for all the text entry field with the "x" to clear the field regular text fields
- Main Menu/Device List should be standard Popover
- It is critical that your design takes advantage of user gestures - multi-touch, swipe, pinch, grab, tapping, etc. Please clearly document how you intend users to physically interact with your interface.
- For guidelines on iOS standard, please refer to this page (http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html)
* Branding:
- use branding color in toolbar at top of screen (like header of the provided web app screenshot)
* Size:
- iPad 2 - 1024-by-768-pixel resolution at 132 pixels per inch (ppi)
* Colors:
- should complement the provided screenshots
- any required fields should not use the same coloring as selected items
* Device List button
- at the top left of the screen, there will be a button for accessing the main menu
- when this button is tapped it will show the main menu by using the iOS Popover way
- this Device List should be displayed like the standard iOS "phone book" with search functionality
Requirements
You are only designing the Portrait View screens.
Screens
1) Main Screen - Portrait View
- create a version on Play mode (clicking any of the video placeholder will show this view)
- create a version on Edit mode (clicking Edit button on the top right of the screen will show this view)
- create a version of this screen to shows Device List Popover
- create a version of this screen that shows the Events Popover (clicking the Events button on the top right part of the screen)
2) Full Screen Live (p)
- create a version of this screen that shows the screen controls (you can show this screen by clicking on the video placeholder)
- PZT Controls (PZT is the Photographic Zenith Tube, it's basically controlling the remote camera's direction; left, right, up, and down) - we don't need to have a PZT control icon, but this functionality should be implemented on the iPad device using standard iOS finger gestures (pinch, etc).
- Digital Zoom functionality needs to be implemented too
- The play / stop / time controller for the video needs to be thought through some more, since this is a live feed, we need a way to illustrate the timeline on the display
- the other controls I think is not needed like the rewind/go to start and fast forward/go to end.
- you also need to show the Action Popover (you can display this Popover by click the button on the top right of the screen)
Target Audience
- mobile security professionals
Judging Criteria
- Cleanliness of your graphics and design
- User Experience
- Use of iOS Standards
- Branding
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All Requested Contest Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Adobe Illustrator or equivalent, and saved as VECTOR layered format.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (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.