Loading ...

Responses by Sylvain Theyssens, design director and Tim Roussilhe, creative developer

Background: As a freelance design director, Sylvain Theyssens wanted to have a simple and efficient, yet memorable site to showcase his work amongst a busy and crowded design portfolio landscape. The index page showcases the projects in their minimalistic states—with an image, a video and a color.

Highlights: Reduced to its basic purpose, the index page remains playful as users discover the different project previews and play with the Hover state effects—a subtle combination of shaders that create an elegant distortion on the project images and videos. The main challenge was to bring a unique personality (color palette, hover states effects, cursor, screensaver and ticker navigation) while maintaining the efficiency of an index page (a simple list of clickable projects).

Challenges: Keeping it visually simple to let the content shine while adding a subtle twist to make it unique. We had experience working together on multiple projects for various brands in the past, so the process was simple, seamless and efficient. We could rely on each other and had enough room to bring our own skills. Navigational structure: A portfolio is a tool and a product used by recruiters, clients and designers, so the navigation should remain as minimalistic and functional as possible. However, a portfolio’s navigational structure is often a good opportunity to create a unique experience and differentiate portfolios from the mass.

Technical features: In the end, it’s a pretty simple stack. Nothing but simple Javascript, Sass and HTML. To manage the content, we used the Headless CMS Prismic, AWS and Cloudfront for hosting and delivering the assets, and Netlify for hosting and continuous integration. Also, the site has been developed on the framework Plato.js, a simple es6 framework coupled with a static site generator with build in performances in mind—like Gatsby without React. The other technical challenge was the interactive hover effects. To achieve this, we used native WebGL rather than a framework for optimal results.

sylvaintheyssens.com

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