Challenge Summary
Contest Summary
Welcome to the Styx Mobile Application Style Guide Design Contest. The goal of this contest is to review the provided Storyboards and help create Style Guide for our Styx Application.
You will need to research Style Guide and how they should be used. The purpose of this contest is to document the User Interface of the Application.
At the end of this contest the Client is looking to have a clean, intuitive, and easy-to-use Style Guide that they can provide in future Development to keep their Application look consistent.
Read the Contest Details carefully and let know if you have any questions.
Round 1
Style Guide.doc - First Draft = Your submitted design solution for a review
Design Element(s) - PNG/JPG Files of any New design items you would like the Client to review and comment on.
Round 2
Style Guide.doc - Final = Final Design
Design Element(s) - PSD Files (Final Design) of any New design items you created.
Contest Details
Styx looking to give their customers a better user experience by providing new and up-to-date features in their Application. We are now at a stage in the process where we need to start documenting and defining the Style Guide to keep the User Interface consistent with all future design and development work.
What are Style Guide?
Style Guide is document that clearly defining the User Interface and maintaining consistency in design, color and font usage of UI elements as details as possible..
Before you create submission, Please research about Style Guide and how they are used.
Here's some references of Web Style Guide as your starting point:
http://www.paulrobertlloyd.com/2010/12/styleguides_for_the_web/
http://static.bbci.co.uk/gel/0.2.14/downloads/GEL_web_styleguide.pdf
http://www.smashingmagazine.com/2010/07/21/designing-style-guidelines-for-brands-and-websites/
Application Style Guide
- In this contest you must submit document created on Microsoft Word.
- We need you design and create a Word Template for your Style Guide
- Keep your Word template simple and take design cues from the Application
- Create Sections/Pages defining the items below (a section detailing font uses, a section detailing color usage etc.)
- You must include screen shots within your document to illustrate correct usage.
- The overall design and layout of the Standards Manual is up to you but it should read like a quick reference guide.
- You can download Styx Storyboards from this page (156.8 Mb)
Graphic Standard items to Define
Note: Some graphic items are not consistent across screens (buttons, links etc) - we are looking for you to help define what the correct standards should be.
- Define differennces of truPortal and goEntry application. Should they be on separate document?
- Define application looks on iPhone and iPad.
- Define Colors, Color usage and correct Hex numbers.
- Fonts (Fonts Names etc.)
- Define Font sizes (H1, H2, Copy, Link etc)
- Font Colors and correct usage - Link Colors, Hover and Active states.
- Button Colors, Hover and Active states.
- Background Colors and correct usage
- Gradients and correct usage
- Define the Page Grid, Templates, Modules
- Logo dimensions and placement
- Define the Navigation/dropdowns and how they should work/hovers/active.
- Define the Breadcrumb Navigation
- Content Area pixel dimensions
- Define the Left Navigation - placement, fonts, colors.
- Define Alert message (How should they look and correct placement)
- Define the Modal window look and feel
- Define Tooltips. - Define icon usage.
- Make sure the blues are consistent across screens
- Pages need to load fast - look to remove any unnecessary gradients, curves etc.
- Define any Best Practices?
This is an initial list of graphic items and ideas that we think the Style Guide should contain.
You are encouraged to add additional items you feel are necessary/useful. If the graphic items listed won't be found/available in the referenced screens.
We would like you to create/define any missing items based on your UI analysis and design knowledge/skills.
This document will continue to grow beyond this contest as more areas of the application will need to be documented in the future.
Resources & Requirements
- We will provide the graphic design/look and feel - reference the provided PSD files.
- We would like you to create any NEW graphics to fill-in any missing details.
Target Audience
- Future Designers and Developers of the Application
Judging Criteria
- How well you create the Styx Style Guide
- How through you are in your UI analysis
- Cleanliness of your graphics and design
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screen-shot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All Requested Contest Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Microsoft Word and Adobe Photoshop. Adobe Photoshop files should be saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to edit or add-on additional items to your Style Guide Word file.
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.