Stages

Homepage stage with video and stage navigation

At the top, homepage stage with open navigation showing four elements. Below, homepage stage with closed navigation.

Homepage stage with video and stage navigation

Interaction concept: Homepage stage animation of navigation and changeover of the stage topics.

When the user opens the website, the navigational layer on stage is open and closes automatically after one second.

  • Start-up animation: Navigation bar is extended and stage content 1 is displayed.
  • Time: 0 seconds
  • After a delay of 2 seconds navigation bar is closed

When the user touches the sensitive navigation area (highlighted red) with his mouse the navigational stage layer extends. Moving the mouse off the navigation bar closes navigation bar.

Start-up animation:

  • Navigation bar is displayed / closed
  • Animation: navigation bar is displayed/closed (see pictures)*
  • Transition: easeOutCubic
  • Time: 0.5 seconds*

*(The quick moving from the stage to the teaser area across shall not cause an opening of the layer.)
As long as the user has his mouse cursor within the layer, it does not close.

With mouse-over above a topic box it becomes highlighted white. With click the stage changes and the layer is closed.

  • Change of content display

Animation:

  • Alpha from 100 to 0% (former content)
  • Alpha from 0 to 100% (new content)
  • Transition: easeOutCubic
  • Time: 0.5 seconds

Homepage stage with static content

Homepage stage with static content

Entry page stage – product subpage

The "next" and "back"-arrow is centered.

Entry page stage – product subpage

Entry page stage - other subpage

The arrow is centered. The frame size is fixed. The background color is #ffffff, with opacity of 85%.

Entry page stage - other subpage

Interaction concept: Entry page – stage/link carousel

When the user enters the entry page, the stage shows the picture and text referring to the first navigation point in the list.

If the user takes no action, the stage changes automatically within 2 seconds to the next navigation link in the list below.

The fitting navigational link in the list is underlined.

If the user clicks the left arrow button on the stage, the topic of the stage changes and in the list below the related link is highlighted.

If the user clicks the right arrow button on the stage, the topic of the stage changes and in the list below the related is highlighted.

If the last topic in the list is shown and the user clicks on the right arrow button, next the first topic in the list is shown.

If the first topic in the list is shown and the user clicks on the left arrow button, next the last topic in the list is shown.

Movement of the stage content

  • Animation: horizontal movement of the stage content, by stage width
  • Transition: easeOutCubic
  • Time: 0.5 seconds

If the user moves the mouse over a link, the stage changes after a delay of 0.3 seconds.

If the user moves the mouse over a link that is nearer to the beginning of the list than the current link, the stage changes from right to left.

If the link is nearer to the end than the current link, the stage moves from left to right.

If the user changes from one link to another one, which is not directly above or below in the link list, the stage changes directly. The topics “between” the links aren’t shown in the animation (even if it is a carousel).

Subpage stage – product

The link below the stage text is bottom-aligned.

Subpage stage – product

Subpage stage – other subpage

The text in the box is bottom-aligned. The height of the box depends on the content. It has a maximum extension of 228 pixels.

Subpage stage – other subpage

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines

More Information