#iOS Honeycomb v2.0

Register
Submit a solution
The challenge is finished.

Challenge Overview

Display
  1. The honeycomb grid cell must be evenly spaced and able to display provided image undistorted, fit within each cell. For exact spacing please reference the designs and images provided.
  2. The Detail panel slides open in split view that needs to adjust its marker position based on what row on the grid it was opened from. Several top rows should open the panel at their bottom orientation and display a marker. The last 2 rows should open the panel from top orientation.
  3. Detail panel needs to have all elements shown on the design, display real controls and respond to events. Following elements to display set from program data:
  4. Use image provided for panel identification, example - construction icon
    • Label Text - identifying name of the active item, example - realestate, Construction etc.
    • Description text - formatted in a center of the panel
    • Learn More button - event action to direct to new view with more details (for contest can be empty view.
    • Set of 5 related hexagon button/images - each need to be wired to the event that will simply open a different panel for related item. Example - Construction can have Real Estate as one of the related items, when clicked will open panel for corresponding cell in the grid. Grid has list of all the items, detail panel will have possibly 5 related cells that also available on the main grid. The hexagons here should be placed as exactly as shown in the graphic files. They should show the same on/touch state.
UI

The code needs to function using the designs provided. Please refer to the PSDs, PNGs and design guide provided. Designs must include everything as shown, details include:
  1. Header: Header height is 150px. Placeholder header should be shown.��
  2. Main Icons: Icons (245px x 255px) with spacing and padding as defined in the design guide. Must include 3 states.��
    • On: Icon with reflection, clickable
    • Disabled: gray icon, non clickable
    • Touch State: reflection removed. This is the state shown when selected.
  3. Panel: Panel height is 613px. Panel should slide as detailed above. The ���carrot��� should be pointing from the selected icon. Please use the transparent icons provided. the background should be a gradient that is color per the selected icon. The orange background gradient is provided at 1px width and can be a background set to repeat-x.
Imagery Provided
  • Background and panel screens with grid elements and pixel measurements
  • Icon sample in 3 states
  • Selected carrot in up and down position
  • Panel Images:
    • BG gradient
    • Large construction hat
    • Learn More button in orange
    • X close icon
  • PSD file of all elements
A Zip file of all imagery is in the Asset's Section

If you need any other imagery provided, or have questions, please ask.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30037935