What is a Videosite ?

The link to this project is in the end of this article

The Context

Our experience with websites has evolved a lot since 1995, when JavaScript was beginning to give signs of life, CSS wasn't even in W3C specification and HTML standards were still being determined.

Currently, those languages are well defined and it's natural to incorporate many frameworks when developing a website, from data analytics to 3D graphics, transforming them into glamorous art presentations.

However, 2 core website features remain the same, untouchables, as if they were the final optimal design.

Starting with the scrollbars, it's evident how little they changed and still break the page's symmetry. Safari hides it if you are not scrolling, but they appear otherwise. After all, if you want to scroll the page up or down faster, you'll need the scrollbar.

With the menu bar, same story. In almost all websites it's a horizontal bar crossing the top of the page and the menu options side by side. In the old Mozilla website they even tried bringing the menu to a vertical bar on the left side, but nothing too different.

The big question is: "If it's working, do we need to change it ?". In my personal opinion, if we don't try new ideas, we'll never know. Design techniques constantly focus on the costumer, the problem, and then think about a solution, but sometimes we only need to experiment.

The Insight Moment

With that in mind, while watching a Youtube video, I noticed how the video chapters seem a little like a menu, naming and separating the contents of the video.

That's when I realized I could merge both the menu and the scrollbar into one component: the video scrollbar.

The Videosite Design

That's where the Videosite comes into the scene. A website without a menu or lateral scrollbar, with only one navigation component that is so familiar to us, we all know how to use it, but now built into a web page.

With the auto scroll feature(play button) the website becomes a presentation moving on it's own pace, independent from user input(manual page scroll).

Referencing the traditional menus, the name of the section you are on is positioned in the right corner and it changes as you go through to other sections. Here, one limitation becomes clear: if the website has parallel pages instead of one page with many sections, this design is not so appropriate.

For traditional websites it's possible to embed the scrollbar into the menu, again indicating how much of every section you've seen.

Another interesting implication of the Videosite approach is how animations work. Traditional animations work like fireworks, you trigger them at some point and they happen independently from you, forward in time.

Now, if we are talking about a video, nothing happens independently from the scrollbar. Every time you go back to some point in the video you find the same thing, a static frame.

Because of this, this design incorporates scroll linked animations, which animate as you scroll the website. That way, when you scroll back the animation goes back in time too. This was a perfect match, so natural to our perceptions that nobody asked me why I did it.

When it comes to responsiveness, this concept also adapts very well, maintaining the design and intuitiveness.

To deepen the video experience, it's possible to also add music.

The Videosite technology

I mentioned how our web technologies evolved, to the point we now have libraries and frameworks like scrollMagic and Three.js to build incredible experiences.

In this project, however, I opted for a personal challenge: to build scroll linked animations with vanilla Javascript, as a way to develop my skills and explore the possibilities of the language.

There are many details to it, but it's interesting to consider that literally ALL animations in my website work with only one super simple function I created. It surprised me that I could do so much with so little.

The website was built with Javascript, CSS/Sass, HTML and launched with Next.js.

To sum up

The Videosite concept may not be appropriate for e-commerce or real state websites, but it is important that we try to find other alternatives for consolidated patterns, experimenting and even pushing the standards to more interesting experiences and designs.

I hope this project can inspire other designers and developers to be part of this experimentation.

Reach me on LinkedIn if you have any questions. Thank you.