BLT Communications + HBO

1. HBO
1This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
10
9
8
7
6
5
4
3
2
Table Of Contents
v2Last modified on Wed Oct 23 2013
by Darren Lou
Navigation Option A: Dots & Things
Landing Page A
3rd Section Selected
Exploring 3rd section
Nav Rollover State
Nav Pagination
Navigation Option B: Tile Menu
Landing Page B
Menu Overlay

2. Navigation Option A: Dots & Things
HBO
2This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration

3. Lorem Ipsum Dolor
Lorem Ipsum Dolor
True Detective
The World NeedsBad Men
Erath, La.
Little Details
Darkness Touches You Back
Smart / Steady
Landing Page A
HBO
3This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Landing Page Nav State
Once the page loads, the navigation titles will be displayed next to the nav icons.
The user may jump to any of the sections by clicking either the icons or the titles.
When the user selects a navigation item other than ‘True Detective’, the titles will
hide and only the pagination dot icons will be visible (see p.4)
1
1

4. Erath, La.
3rd Section Selected
HBO
4This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Nav Selected State
Clicking or tapping a nav item will jump to the section that was selected. The icons
and titles of the nav items that weren’t selected will fade out. The title of the
selected nav item will remain visible for a few seconds once the page has jumped to
the appropriate section then fade out at the end of the timer..
1
1

5. BACK
Erath, La.
Exploring 3rd section
HBO
5This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Navigation During Exploration
As the user is exploring content within a section, the nav items will only be
represented by icons. If the user scrolls vertically, the title of the section that the
user has scrolled to will be made visible for a few seconds before fading out.
1
1

6. Lorem Ipsum Dolor
Lorem Ipsum Dolor
True Detective
The World Needs Bad Men
Erath, La.
Little Details
Darkness Touches You Back
Smart / Steady
Nav Rollover State
HBO
6This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Rolling Over the Navigation
Rolling over the navigation area, no matter where in the site, will make all navigation
items visible for the user to select from.
1
1

7. Second page nav item
Second page nav item
Darkness Touches You Back
Smart / Steady
Lorem Ipsum Dolor
Lorem Ipsum Dolor
Second page nav item
Second page nav item
Nav Pagination
HBO
7This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Scrolling within the Navigation Menu
If there are a large number of navigation items, the user may click the icon to
scroll the navigation sidebar and view the remaining navigation items. Click the
icon to scroll back up within the navigation menu
1
1

8. Navigation Option B: Tile Menu
HBO
8This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration

9. Landing Page B
HBO
9This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Menu Icon
User may click/tap the menu icon to show the menu overlay (see p.10)
1
1
1

10. True Detective The World Needs Bad Men Erath, La. Little Details
Darkness Touches You Back Smart / Steady Lorem Ipsum Dolor Sit Lorem Ipsum Dolor Sit
Menu Overlay
HBO
10This document is a conceptual overview of the project. It is not an indicator of animation, copy, final elements, or design. © 2013 BLT Communications, LLC. All rights reserved.
True Detective Nav Exploration
Close Menu Overlay
Tap the menu icon again when the menu overlay is visible to hide the overlay
1
1
2
3
Content Item
Tap a content item to jump to that content section
2
Pagination
If there are a large number of content items in this menu, pagination will be
available for multiple pages of 8 content items.
3
This menu overlay will generally work really well with mobile and tablet devices and is
scalable up to a moderate number of content items