By Anastasia Kuznetsova 

Seamless page transitions. This one crucial topic has remained on my most coveted design list for several reasons. First, I think we can all agree that seamless page transitions “look” pretty. This subtle yet impactful element elicits a “wow” factor that other websites simply cannot claim.

Beyond this, seamless page transitions help immerse the audience into an entire digital experience that delights, engages and educates. There’s been a lot of buzz surrounding the end of the page, and the following sites prove why this statement couldn’t be more true.

Coloured Lines has been the object of my affection for quite some time.

The movement on this site is incredible and, in many ways, has become a benchmark for our work. With every new project, we have great plans to incorporate movement and animation that will enhance the overall site experience. Somehow, these details seem to always fall behind in priority. But does this happen because there was no time or because the vision for the animation was not clearly communicated? It begs to question whether the static comp will soon become a thing of the past.

Perhaps taking a storyboard approach to site “pages” is the obvious next standard for site design. The modern website has the possibility to house some amazingly complex animation that is impossible to capture in a static comp. By creating a storyboard, animation and transitions will no longer be afterthoughts. In fact, they will become as important as setting type styles or creating a color palette for a look and feel. In the end, it is these details that make a site experience exceptional.

In addition to the site shown above, below are two more examples that pay great attention to the small details through animation and transition.

The AIGA site transitions from page to page in a way that seamlessly strings the experience together by removing jarring, jumping, or loading from page to page.

The Aquatilis site is great example where the typical page no longer exists, and the user is taken into a long scroll experience which is broken up into horizontal spans. As we move from span to span, a user experiences movement in the background as well as different speeds at which the assets move in both the fore- and backgrounds.

When looking at a site like this, or building something similar, it is easy to see how applying a “storyboard” approach would be very beneficial when attempting to communicate the final vision.

I’m looking forward to implementing these techniques into future designs and working closely with our Dev team to make seamless transitions a priority instead of an afterthought.