Slack.fr front-end development

Taking up the front-end Slack!

The slack.fr website, not to be confused with the slack.com communications platform, is one of the most creative and fun projects I have worked on during my time as front-end developer at Data Projekt.

Slack is a French company that designs, produces and distributes slacklines, a less tight kind of tightrope that will stretch and/or bounce like a small trampoline, allowing for a more freestyle discipline. Being the pioneers in the slackline world, Slack expressed the desire for a new and responsive showcase website that focuses on high quality images.

From scratch

Given that I was entirely responsible for the front-end development, I worked closely with the graphic designer on the various user interface animations and effects. As the website’s design is very out of the ordinary, I decided not to use the popular front-end frameworks such as Bootstrap or Foundation to code this design, as it does not easily fit into columns and rows. This allowed me to build everything from scratch and be creative with the techniques and tools used. As for the CMS, I used Data Projekt proprietary solutions, a PHP back-end and a front-end templating system using the Smarty syntax. The site has been made “multilingual ready” and English content is currently in the works.

Responsive images

The main focal point of the website is its high quality images, but naturally, that comes at a price: slow loading times. Users on mobile networks might not have the broadband or the patience to wait for a desktop-size image to be loaded. Which is why I researched the best way to load different images based on the user’s screen size (responsive images). I provided the analysis of the different technical solutions to the digital project manager to ensure that we picked the solution that was within the quality requirements of the project.

UI Animations

Check out the gifs below showing the custom made animations of the site.

Multi-level Menu & Logo animations
Multi-level Menu & Logo animations

 

Loading and scroll effects
Loading and scroll effects

 

Page loading effects
Page loading effects