One of the core principles of the UI is that the content hierarchy builds from left to right, anchored by the Main Menu.
As the user navigates down the hierarchy, new levels appear.
To go back, the user simply navigates to the right to bring the previous level back into view. For mobile phones, landscape only will be initiated.
The main menu is a simple vertical scrolling list; it is activated by tapping the menu icon in the top left, or swiping to the right in the left side nav region area.
When the main menu is activated, panels expand to the right, these are populated with content linked to the focused menu option.
Focus is linked to the content displayed. Tapping an item in a vertical table will shift that option to the horizontal bar, change the background asset and update content in its subsequent panel(s).
Alternatively, swiping left to the expanded view (Main Menu not visible) will switch focus to that item in the center of the screen. If the menu is off screen due to the user navigating, focus will shift to the nearest table.
Panels animate when the Main Menu has been opened. Panels that appear from the left animate under each other and ease into place.
The Main Menu will be the top of the hierarchy. Panels that appear from the right will overlay panels in position 3 (see below), they will have a strong shadow and when the screen is dragged, it will display a parallax effect.