Loading ...

Responses by Adrien Laurent, interactive designer

Background: This website highlights the projects I’ve created so far since I became a web student at HETIC (Hautes Études des Technologies de l’Information et de la Communication). Fellow developer Gregoire Mielle and I are currently looking for internships; so the main goal, through this portfolio, was to convince worldwide digital agencies that we are the interns they are looking for. Moreover, it was an opportunity for us to challenge our creativity, without any constraints or barriers.

Challenges: Once the homepage concept was set, I wanted to find a way to build transitions between the different projects, in order to keep the consistency throughout the website. As I was using masks to reveal the visuals on the homepage, the idea of reshaping those visuals while entering a single project came into mind. The purpose was to avoid using simple fading page transitions that wouldn’t look as smooth as the other animations.

Favorite details: Since it’s pretty hard to find a concept that users have never seen before, I believe that the small details can play a major part on your site and can turn something ok into something neat. I’m proud of the little GIFs that are visible on the about page. You don’t expect them to be there and they reflect what I specialize in: motion design and subtle interactions.

Navigational structure: When I first started thinking about what the homepage should look like, I had the idea of visuals being split in half. Based on that concept, I thought it would be cool if, on scroll, those images could rotate, following the movement of a wheel. Then, as the scroll takes some time on the homepage, we concluded that a project list would also be a nice add-on.

Technical features: Because we wanted the overall experience to feel really smooth, we had to imagine ways to transition between the wheel to projects and vice-versa. Vue.js was used for DOM management and routing, and GSAP was used for animations and timelines.

adrienlaurent.fr

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In