BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the Cessna - iPad Apps GUI Kit Contest. In this contest, we need you to create two GUI Kits i.e. 'Cessna Marketing GUI Kit' and 'Cessna Calculators GUI Kit'. At the end of the contest, client would like to have two neatly organized PSD GUI Kits which will help them build and brand the all Cessna Mobile Apps.

Round 1

Items we would like to review at the Milestone
- We are looking for the initial PSD GUI Kits for both: Cessna Marketing and Cessna Calculators. We would like to provide feedback on direction and if your gathering the correct items, desiging the Kit correctly.
- Submit the form UI elements that you have newly created for Cessna Marketing Apps 
- We need to see your PSD files for Round 1 and Round 2, so please add them to your submission.zip

Notes.jpg: Any comments about your design for the Client 
NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.

Round 2

Final Submission
- Final PSD GUI Kits with the feeback applied as suggested by the client

- Notes.jpg: Any comments about your design for the Client 

- Number and name your GUI KIT files


For this contest you will be creating GUI kits for Cessna Marketing Apps and Cessna Calculator Apps (used by pilots). See below for more details about the GUI Kits and what we need to achieve with this contest.

IMPORTANT:
- Create your GUI Kits in Photoshop (PSD).
- Make sure you DO NOT rasterize the screens and place them in the GUI kits; we need the exact UI element to be placed in the GUI Kit.
- Show us the grouping of all the identified UI elements in the PSD file.
- Note that you are creating the GUI kit for apps in Retina display, So please make sure you are using the icons/shapes that supports retina display resolution (2048 x 1536 px). 
- We need to see your PSD files for Round 1 and Round 2, so please add them to your submission.zip

Contest Downloads
Cessna Marketing Apps
- (Cessna Info App), you can download the Source files here:
Download Cessna Marketing Source

Cessna Calculator Apps
- (Cessnav Apps) source files below,
Cessna Loading Calulator: Landscape and Portrait
Cessna Performance Calculator: Landscape and Portrait

General GUI Kit Considerations:
- Design your GUI Kit "page" - create a header, add the Cessna logo at the top and design a GUI version/branding at the top of every PSD file you generate.
- Create Headers/Titles for the different sections to make it more useful for future designers. 
- The look and feel of the GUI Kit should complement the current designs.

A) Cessna Marketing (Cessna Info App and other apps) GUI Kit: 
- Create a GUI kit for the Cessna Marketing iPad Apps
- Show the Color Scheme used for these apps
- Organize the UI elements based on category, For example: 

Page Layout Elements
- Cover Page
- Navigation (which will include primary/secondary/ tertiary navigations)
- Navigation Icons
- Background styles
- Logo Usage 

Form Elements
- Note that we currently do not have Form UI Elements for Cessna Marketing Apps, so we need your help in creating all necessary form UI elements. 

Other UI Elements/Shapes
- Tab 
- Table styles
- 360 degree page view shapes/elements
- sliders
- buttons
- Settings Screen Style and icon placement
- Pagination Controls
- Video Page Elements and also Add video controls (05-view.png) as that does not current exist, for example: Play, pause, stop etc.
Currently, we do not have the UI for a Modal window, so please come up with the modal window that complements the new branding. Have some dummy content in the modal window with a "Done" button


- Anything else you identified, please add them. If you feel certain UI elements doesn’t exist then we request you create those elements 

Typography
- Basic Paragraph styles and colors
- Heading Styles and colors
- Sub-Heading Styles and colors 
- For the above typography (basic/heading/sub-heading), use the font sizes appropriately as how it is used in the app. 

B) Cessna - Cessnav (Calculator Apps) GUI Kit:
- Create a GUI kit for the Cessna - Cessnav Calculator iPad Apps.
- Show the Color Scheme used for these apps
- Organize the UI elements based on category, For example: 

Page Layout Elements
- Navigation (which will include primary/secondary/ tertiary navigations)
- Navigation Icons
- Background styles
- Logo Usage 

Form Elements
- Capture all the form Elements which has been designed and also if you feel certain UI elements don’t exist, then please create them.

Other UI Elements/Shapes
- Tabs
- Table styles
- Rotary Dials in Graph Page
- Sliders
- Buttons (all types of buttons)
- Pagination Controls
- Settings Screen Style
Currently, we do not have the UI for a Modal window, so please come up with the modal window that complements the new branding. Have the content of the Modal as shown in Modal Window.png

Anything else you identified, please add them. If you feel certain UI elements doesn’t exist then we request you create those elements
 

Typography
- Basic Font styles and colors
- Heading Styles and colors
- Sub-Heading Styles and colors
- For the above typography (basic/heading/sub-heading), use the font sizes appropriately as how it is used in the app. 

We request you go through each and every page in the attached screens and design a GUI Kit, that will be very helpful for the designers /developers to use it in Rebranding the existing mobile apps and also any other future apps that are being developed.

Reference PSD GUI Kits
Please see below some of the reference guides that will help you to organize and create better GUI kits: 
iPad PSD GUI Kit (Retina Display)
Facebook PSD GUI Kit
Android GUI Kit
iPhone PSD GUI Kit
These are for reference - DO NOT COPY

Target Audience
- Designers and Vendors
- Developers

Judging Criteria
- How well you design, plan and develop your PSD GUI Kits.
- Cleanliness of your graphics, design and ability to stay within the given design reference.
- How well you create the Form UI elements for Cessna Marketing Apps
- How well it conveys the Cessna Mobile branding in GUI Kit.

Submission & Source Files
Preview Image

Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
We need your PSD files, PNG/JPG screens and any notes to your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.

Final Fixes 
As part of the final fixes phase you may be asked to modify the organization of your graphics (sizes or colors) within the GUI Kit.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2013 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30031042