Project
Back
11

Yannick Gregoire

Category
Year
2021

Awards

AWWWARDS / 2022
Site Of The Day / SOTD

AWWWARDS / 2022
Developer Award

AWWWARDS / 2022
Honorable Mention

CSS DESIGN AWARDS / 2022
Website Of The Day / WOTD

CSS DESIGN AWARDS / 2022
Special Kudos Award

Best UI / Best UX / Best Innovation

Adobe Behance Gallery

Adobe Behance Interaction (UI/UX) Gallery

Info

For Yannick Gregoire we used Gatsby, a light-weight javascript framework that generates a static website. This makes loading the website really fast. The website is based on a font sized grid. This means, using the custom designed monospace typeface we can extrapolate a grid. The title of the site is "Yannick Gregoire" which is 16 characters wide (including the white space). From here, every heading, subheading or paragraph font is a multiplication of 16, which results in a perfectly aligned grid. Kind of how typewriters produce that same sort of grid.

To stay in the "typewriter / command line" feel we developed an intro based on ascii art. We load a video onto a canvas and then calculate the colour of each pixel, and map that colour to a character. In this case colours are mapped to "x/c=⮐;+,. " going from dark to light.

Furthermore we used a typewriter effect for headings that scroll intro view, and are shown when projects or services are clicked, to amplify this command line aesthetic. Upon opening a project, the project video gets drawn to a canvas in the background for a couple of frames, until the background gets reset.

Using CSS "--variables" implementing dark-mode is a breeze. All we have to do is toggle a class on the body element to invert the colours.

Loonatiks Design Crew-Yannick Gregoire-1
Loonatiks_Design_Crew_Yannick_Gregoire_Typeface_Ratio
Loonatiks_Design_Crew_Yannick_Gregoire_Typeface_Testimonial
Loonatiks_Design_Crew_Yannick_Gregoire_Typeface_Detail
Loonatiks Design Crew-Yannick Gregoire-4
Loonatiks_Design_Crew_Yannick_Gregoire_Logo_Stretch
Loonatiks_Design_Crew_Yannick_Gregoire_Projects_Hover
Loonatiks_Design_Crew_Yannick_Gregoire_Bio_Invert
Loonatiks_Design_Crew_Yannick_Gregoire_Projects_Desktop
Loonatiks_Design_Crew_Yannick_Gregoire_Glitch
Loonatiks_Design_Crew_Yannick_Gregoire_Project
Loonatiks_Design_Crew_Yannick_Gregoire_Services_Desktop_Invert
Loonatiks_Design_Crew_Yannick_Gregoire_Services
Loonatiks_Design_Crew_Yannick_Gregoire_Services_Open
Loonatiks_Design_Crew_Yannick_Gregoire_Homepage_Tablet
Loonatiks_Design_Crew_Yannick_Gregoire_Project_Tablet
Loonatiks_Design_Crew_Yannick_Gregoire_Services_Tablet
Loonatiks_Design_Crew_Yannick_Gregoire_Services_Open_Tablet
Loonatiks_Design_Crew_Yannick_Gregoire_Mobile

Want to contact us?

Back to top