Dive into the scroll hole with April’s Double Click!

Long ago, web pages were configured as one long vertical document, almost like a scroll that unravelled as you navigated the page. Down was really the only direction to go and the act of rolling your mouse wheel or trackpad upwards became synonymous with “the scroll”. However as web design advanced and became more bold and experimental, we started to see new ways of mapping this scrolling action to what happens on the webpage.

From endless zooms into images to donkeys that cheekily pop in and out of your screen, we’re focusing on sites that make creative use of the scroll gesture as a key interaction element for their users in this month’s Double Click.

Vincent Tavano: tavanovincent.com

On his portfolio site, art director Vincent Tavano wanted to do something tech-oriented with a different page for each client that he worked with. Vincent looked for interesting devices or connections between the creative idea behind each project with what appears on-screen. “The Nina Ricci page is inspired by the ‘speak and spell’ game well-known in the 80s and from which I sampled the keys, the Wempe mosaic effect comes from a camcorder effect and for Jack Davison, I had laid out images on the ground to have a birds-eye view of the project,” Vincent tells It’s Nice That. “I also had to make a choice about the mobile version and make it a lot lighter, but I knew that by differentiating the experiences on desktop, I would have a better chance that all the pages were visited.”

When designing websites, Vincent usually focuses on unique visual elements and tries to include an interactive twist on the navigation, all while trying to maintain the readability of the site. “For this site, it was also important to remain original in the interactions offered and to remain very playful, to consider the screens as a succession of small, fun and playful interactions,” he says.

In another segment, Shade Interlude, Vincent sets up a repeating scroll bar to display the photo novel that he made with his daughter Shade. “These images of my daughter are personal and intended for the making of a single-copy book for the most part, but I wanted to show some of them on this site,” Vincent says. “Intimate projects of this type are always successful because they capture a moment and an emotion for which the aesthetic aspect then seems secondary to me.”

Vincent’s top tips:

1. “I now think of website design as a game of Tetris with a multitude of combinations. The more we browse the internet, the more we remember interactive building mechanisms.”
2. “There is something akin to architecture in website design. We must therefore always look at and analyse the different interfaces we use in our daily life in order to understand how they work.”
3. “Personally, I also draw inspiration from books. I have always found their layouts very inspiring in the way content is indexed. I guess you could apply a similar method to certain interactive articulations.”
4. “I think the best advice I could give is to be curious, to search endlessly, to test, to change, to start over and over again.”

Dirk Laucke and Johanna Siebein: studio-laucke-siebein.com

Upon opening Studio Laucke Siebein’s site, you are greeted with three flashing triangles that read Scroll Down! Straightforward, to say the least. Once you follow the imperative sign, the magic starts to happen. If you expect that your scroll will neatly show you the studio’s projects with the page crawling upwards, you’re in for a surprise. Here, the site’s background, innocent at first, starts zooming towards you. As the image gets bigger, a transition effect comes into play.

Dirk Laucke and Johanna Siebein, the duo behind the studio, initially set up their portfolio site in a more commonplace way. At one point, however, they asked themselves if that approach would be interesting for future clients. Would they really read text about the problem and solutions of others, problems and questions that are different every time? “We think that this approach does not fit. At the same time we had the feeling that we couldn't get rid of what we actually wanted to tell,” the pair says. In the end, they went for this unique approach to a portfolio site.

The studio notes that the randomness between the foreground and background that they introduced in the interaction to be a favourite feature of the site. “Due to the different movement patterns and perspectives of the foreground and background, there are fantastic and always surprising effects. The thing simply remains exciting,” the pair says. “At the same time, the random principle always creates new combinations of our works. Even works that have nothing to do with each other suddenly get a relationship with each other, strengthen each other or tell new stories.”

Dirk and Johanna’s top tips:

“We find it difficult to come up with tips in this wide field. But basically, what goes for all creative processes applies”

1. “Don't always follow the established standards, but look for new ways.”
2. “Communication and interaction are not only about the error-free transmission of information.”
3. “Communication is also a sensual process. The audience should be tickled, have fun, be surprised.”
4. “Avoid the same. Look for the distinctive.”

Jonathan Morin: doncarlomtl.com

Don Carlo, a Montreal-based design studio, always looks to embrace the funny and unusual in their work. This is reflected in the site that they built for themselves: a lighthearted and pleasant site to browse that’s full of playful character illustrations. “We basically tried to rethink what a design portfolio should be. We also wanted to see just how much silliness we could get away with,” says Jonathan Morin, the site’s designer. “Hopefully, every potential client visiting the site will leave with a similar impression; those girls know what they’re doing, and they look like enjoyable people to work with.”

As you scroll through the site, a little donkey-like illustration pops up after the projects have been fully browsed through, marking the end of the viewer’s journey. Within each of the project pages, the images float about, inviting you to drag each image that expands with each click. Scrolling out of these project pages bring the images closer together, letting you see a fuller view of the visuals.

Looking back at the project, Jonathan mentions that he might have done two things differently. On the technical side, more prototyping would have been beneficial for the site. “Things did get a bit messy and I spent a lot of hours dealing with issues and trying to come up with solutions. To be fair though, a lot of the hassle turned out to be great learning experiences, so it wasn’t all bad,” Jonathan says. On the conceptual side, he recommends sticking to a handful of concepts to expand on to avoid spreading these concepts too thinly.

Jonathan’s top tips:

“I find that most website tips depend on the context and project goals. To me, listening to the client and being able to advise on what’s in their best interest is the best place to start. At the end of the day, a website is a tool and what companies use those tools for can vary a lot. So definitely knowing the intent and the different business goals should always be the jumping-off point.”

Mat Desjarins/Pangram Pangram: editorialnew.com

How do you make a site that showcases a new typeface that you’re releasing? The approach that Montreal-based type foundry Pangram Pangram took was to look at the design language and concept for the typeface itself. For Editorial New, Pangram Pangram’s site features a lot of small, delectable pieces of interaction as well as a retro-inspired animation when scrolled. “Editorial New started as just an idea, a feeling, a sense of trend. Looking at old 70s and 80s ads for computers and cars, I got a feel for what could become a strong trend in the near future: elegant, clean, robust, legible narrow serifs,” says Mat Desjarins, the foundry’s creative director. “Not only did the site have to showcase the font properly but we thought it could have an editorial retro feel to it: turning newspaper effect as you scroll, columned texts, retro ad creator, a ‘table of content’ type menu and so on.”

“Most websites I designed in my life began with the why. Why does the website need to exist? What is its purpose? Inform? Convert? Drive users? Build brand awareness? Maybe some of those things at the same time? Everything starts from there, if you strip the website down to its minimum, the essence of what it needs to do has to still be there. I usually build up from that,” Mat says. “I think my favourite feature is the retro ad creator. The people at Locomotive had a blast finding awkward images, stretching pixels and adding text that would fit the concept and keep it fun.”

Mat’s top tips:

1. “My greatest advice is to make it functional but fun. Depending on the client, I think it’s important to make sure it resolves the issue first and then you can push the boundaries of what’s been done in your client’s industry.”
2. “Research, find references that support this concept.”
3. “Make sure, and that might be my best advice, to look at projects or designs from other unrelated industries to see how they deal with the problems they have and how they resolved them.”
4. “Involve the client but not too much. It’s important to have the client’s feedback at certain moments of the process because they usually have all the knowledge of the business but learn to ask the right questions and to structure them but ultimately, you’re the professional.”

Superhero Cheesecake: nextrembrandt.com

Amsterdam-based digital creative studio Superhero Cheesecake worked with Wunderman Thompson Amsterdam to create a website for The Next Rembrandt, a project that attempts to create a new painting in Rembrandt’s signature style. The website tells the story of the journey of this project, driven by the scrolling feature that tells the user a data-driven narrative on how this painting was created. “The layout ensures that the painting, the main subject, gets all the attention it needs and deserves, by staying minimalistic and white. This really helps to tell the data-driven story in an elegant way and brings a beautiful balance between modern technology and historical content,” the team at Superhero Cheesecake says. “The idea was that we would allow the user to explore different aspects of the project upon entry, with a clear and defined experience where they could choose to tap into relevant information as they so wished.”

Superhero Cheesecake is particularly proud of the way that the visual and motion design works together to tell the story elegantly. “As you scroll through the experience, you’re really able to discover more about the idea and the ‘digital painting’ which was the end result, with supporting copy diving in and out to really tell the full story behind the ambition and execution of what was a very ambitious project,” the studio mentions. The studio notes that mapping out the initial stages of ideation and ticking off the basics before delving into design elements was the reason for the success of the project.

Superhero Cheesecake’s top tips:

1. “Always ask yourself (and your client) the important questions before diving into the design process.”
2. “Don't be afraid to kill your darlings – you can’t be sensitive to feedback and sometimes just have to let go!”
3. “Find a process that allows for everyone’s creativity to flow. Sometimes 'non-creatives' in your team can come up with a solution that can save the day.”
4. “Create a grid AND stick to it – build the design around this, it’s what the grid is for!”
5. “Don’t be afraid of white space – trying to fit all the elements in at once will make the site feel crowded. Making use of negative white space will give breathing room to some of the core features of your design.”

Wix Playground supports young creatives by offering education and networking opportunities, inspirational content, and curated events. Our mission is to share our extensive web design knowledge and experience with the next generation of designers, giving them the tools and skills they need to start building their careers.