Challenge Summary
Welcome to Dynamics Form Framework Storyboards contest. We are looking for the look and feel of this web application, a design that follows the IBM design patterns and standards.
Round 1
For your R1 deliverables please submit following screen for client review:
1) Form Types
2) New/Edit Form Type
3) View Form Type
4) New Form Version
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all following screens plus any updates from client feedback:
1) Form Types
2) New/Edit Form Type
3) View Form Type
4) New Form Version
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design the look and feel of a short web application that provides a dynamic form for users to register and submit potential deals for IBM and the IBM Business Partner.
The users of this application will be IBM employees, which makes very important to follow IBM web standards (see “About IBM W3 Standards” below).
Branding and Guidelines
- FOLLOW IBM W3 STANDARDS for your design (layout, colors, form elements, etc).
- The design should be simple and easy to understand. Avoid over populating spaces with too many form elements.
- Your design must fit 1024 pixels wide screen resolution.
- Use web-safe fonts for the pages content.
Storyboard Design Requirements
In your submission, you need to create the necessary pages to show workflows:
1) Form Types
2) New/Edit Form Type
- Show all the popups. Take care of error or success messages.
- Take care of resources and recipients inline edition.
- Show a filled out form plenty of data (Edit Form Type).
3) View Form Type
- Show all the popups. Take care of error or success messages.
4) New Form Version
- Notice there is interaction with the “three view” on the left. Clicking and picking different options make the form/tabs on the right behave differently.
- Show all the popups. Take care of error or success messages.
About IBM web standards
- IBM provides these standard guidelines for web purposes. You can access this documentation here: http://www.topcoder.com/ibm/v17-A-v1t/pokgsa.ibm.com/~uxguy/public/standards/site/v17_cov_draft_ws/index_list.htm. If you can’t access the provided link follow the instructions below.
- CCA (Competition Confidentiality Agreement) is required. If you have a signed CCA on file, send the access request to: support@topcoder.com.
- If you don’t have a signed CCA on file you need to follow these instructions and then request for the access: http://apps.topcoder.com/wiki/display/tc/Competition+Confidentiality+Agreement+%28CCA%29
- Keep your attention at “Page elements” on the left menu of the documentation. Those are the ones you should pay more attention (page layout samples, forms, tabs, etc). You’re free to explore the whole documentation anyway.
- Use the IBM w3 default masthead in your design.
- Use the IBM w3 footer bar in your design.
- There is a defined color palette in the docs.
- There are guidelines for basic page elements, such as: pagination, tables, message formats (error, warnings, etc), breadcrumbs, and icons. Take advantage of those elements.
- Limited use colors are to be used sparingly to identify errors, required form label asterisks, call attention to "new" or important content items or to call out important data.
- Accent colors are to be used only when necessary to differentiate between the contents of various table cells.
Target Audience
IBM employees and corporate managers.
Judging Criteria
- Follow the IBM W3 web design patterns and standards.
- Quality of design.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.