Responses by Gilles Tossoukpé, art director/UI/UX
Background: As a freelance digital designer, my online presence had to reach a wider audience in order to develop new partnerships with creative studios and agencies. I had to showcase my work from the past few years with a website that reflects who I am, what I enjoy and what I do.
Highlights: The typeface. As a graphic element, it was great to play with typographic shapes to make significant compositions on the landing page. The purpose was to make users feel something inherent to typography and create a strong impact. In addition, the typeface’s bold shape highlights the projects to make them memorable and leave a long lasting impression. At the same time, a minimal layout allows clear understanding and a smooth navigation through projects.
Challenges: Being satisfied! I have done countless versions of this site in the past years, but none of them felt good enough to me. I had to start from scratch, wondering what was the essence of the site design. I’ve discovered that the answer is type and simplicity, and I’ve made my portfolio based on these two ideas. I’m truly happy with the result.
Favorite details: The mobile version of the site is quite nice. The homepage feels like a poster, and the type and image composition is really pleasant. I’m also proud that the site was recognized by Awwwards and CSSDA as Site Of The Day. I also have two hidden animated GIFs in the Profile section—a little reminder that we are all in this design industry to have fun.
Navigational structure: Type is all over the website, from the homepage to the smooth “zoom out” transition to the project list. Type is the most important element in making the web experience as immersive as possible. The transition between the homepage and the project list required some scale and axis development in order to render the intended effect.
Technical features: Regarding the back-end, we used the flat-files CMS Grav that uses the YAML language and the template engine TWIG. It was easy to create a full custom back-office with custom fields required for each template. I used Adobe After Effects to show site developer Michaël Garcia what I wanted in terms of animation. Then, we used the Google plugin “Inspector Spacetime,” which delivers the data required to replicate motion in the GSAP’s TweenMax library.