76 of 300

Navigation 76

Bar layout: Masthead

At the top of the page a masthead: a large wordmark in the middle of a band, a line about the company on the left, actions on the right and the menu in a band of its own below. Scroll down and each element moves to its place in an ordinary bar, and back again when you return to the top.

Same-document View Transitions between a masthead and a bar

  • WhyA first impression like a magazine, and then a bar that takes no room. The change is a movement: each element has its own name and travels to its new place.
  • RiskA masthead becomes decoration if the content is not editorial.
  • TechniqueSame-document View Transitions, with a view-transition-name on the wordmark, each menu item and each button.