News

Site of the week: Suspended Animations

French flair meets refreshing subtlety in a studio site showing that in design terms, it’s hip to be square

SAstudio

French flair meets refreshing subtlety in a studio site showing that in design terms, it’s hip to be square

SAstudio

URL: sa-studio.fr DESIGNER: bbriel.me, flavinsky.com

Suspended Animations is a multiple award-winning creative studio based in Nantes, France. Founded in 2011 by Flavien Guilbaud and Baptiste Briel, this latest portfolio was also crafted by the pair and features a selection of works across digital art direction, design, branding and of course web development.

The site juxtaposes subdued colours against sumptuous, colourful project imagery to deliver an experience both understated and confident. Perhaps most notable though is the navigation and a reflective scrolling menu for accessing projects. “Design-wise, we wanted to create a portfolio with an unusual and original navigation,” explains art director Flavien Guilbaud. “Every piece and page of the website is based on a square, like the loading animation, the menu and homepage. We used a massive serif font called Rasmus and a Typekit font, Aktiv Grotesk.”


“Design-wise, we wanted to create a portfolio with an unusual and original navigation”


For all that style, sa-studio.fr isn’t all surface with plenty going on development-wise to drive some slick front-end transitions. “The site was built using Jekyll, a static site generator that uses Markdown files as data,” elaborates creative developer Baptiste Briel. “I would highly recommend this when building your own portfolio and stuck on the back-end development. If you’re into the front-end development thing, my workflow consists of npm as package management with gulp for building minified CSS and JavaScript files. The site also uses page.js, a tiny JavaScript router and the tween engine GSAP.”

SA01
Project pages inject much more colour and stack sumptuous assets down a lengthy two-column structure

SA02
Never afraid of keeping things simple, main navigation is also made easy via bold rollover text links on the Suspended Animation site

×