Creation of landing pages for quovadis.eu

Scroll

Brief

The goal of the project was to create a series of landing pages around a specific theme (travel, creative people, teachers, schoolchild ect ...), to communicate on new products (agendas, notebooks) of the brand. This page should be a template that can be declined in several universes.

Prototyping with Principle

At the beggining I imagined that the line is drawn as you go along the scroll. The technique used to achieve this kind of effect is only feasible if the path is a continuous line (without dots or dashes).

Here is the trick :


CSS Tricks
Animated line drawing SVG

The simplest alternative method to reproduce a similar effect is to play on the opacity and on a desynchronization of the animations.

The final Mockup

We worked with my collegue to mainly bring more space to the product, especially on mobile devices with a square carousel. We put the Call to Action on the terminal zone inside the cover. We wright the name of the product inside the diptych pictures to evoke it again during the scroll and we improved the bottom part.

Feel free to contact me!