Narative Thiago Costa

Mobile Navigation — Narative.co

  • Save
Mobile Navigation — Narative.co animatoin menu dark iphone flat 3d black branding web ux navigation menu navigation mobile design mobile dark app dark mode user inteface ui design app

Creating the new Narative.co

"Navigation is just one area of the site where we take advantage of animations to make the experience feel faster and more familiar to the device the user is browsing from. While the content and design of the site are nearly identical across all devices, the way it feels to interact with can greatly differ — as it should."

• When the user toggles the navigation open, the current page content slides down to reveal the menu. The primary menu options are located within the easiest-to-reach section of the screen, with social media links — a lower priority for us here — kept further up.

• The user can close the menu either by pressing the menu toggle again, or more likely, by simply tapping or, more likely, by simply swiping up on the content that is still in view at the bottom of the screen. We keep this content in view to make it easy to toggle back to it, to remind the user where they already are and to create a sense of space within the site.

• When the user selects a menu option, we mask the content from the previous page, close the navigation and then load the new page in. This feels like a more native experience on mobile devices, and makes the transition between pages feel seamless.

Read more about how we built the new Narative.co at https://ntve.co/new-narative-co

keyboard shortcuts: L or F like