Material Design is more than a set of specifications. There are many aspects in it that can inspire, shape and enhance your next project. Material colors convey harmony, motion elevates user interactions and imagery strengthens your narrative. Dig into the specs, find what you’re looking for, add your personal touch and creativity to it.

Because we learn from the best, we met with the two guys behind the beautiful Trippeo website, to talk about blending just enough Material Design inspiration with one’s own savoir-faire. Meet Benjamin Guedj and Jean-Christophe Suzanne, respectively art director and front-end developer from Paris who, together, create incredibly elegant websites — and not just because they’re french.

Q. Hi! Can you briefly introduce yourselves?

Ben — My name is Benjamin Guedj. I am originally from Paris and am a freelance art director specialized in web design, identity and user interfaces. I have been freelance for 3 years after having designed at ultranoir Agency.

JC — Hi, my name is Jean-Christophe Suzanne. I’m a creative front-end developer, working in Paris. I worked as lead developer at ultranoir, for about 5 years and now I’ve been freelancing for a year and a half.

By “creative”, I mean “giving life to design”. As a front-end developer, my role is to transcribe a design to a browser — roughly speaking. A creative developer brings his vision, his interpretation of the design by adding some ideas of interaction, transition or animation to enhance the user experience and create an emotion for the user.

Q. And how did you become developer and designer?

JC — When I was 18, I did not imagine that more than 10 years later I’d be building websites. At the very beginning I dreamed about working in video games as a game designer or 3D modeler. But I was not good enough in drawing and I was more comfortable in programming. I started by learning Lingo, than ActionScript, then PHP.

I think that the project that helped me a lot was the ultranoir website. It was a great, rewarding and sometimes exhausting project. At that time, we did not have all the amazing tools, which I will sum up as “the HTML5 thing”, that we have today. Years after years, I improved my skills by working on innovative projects. We learn everyday, just by making a mistake or visiting a new website.

I remember spending many days on a slideshow just to have the perfect smooth animation or working hard to have this full ajax website, recognized by the googlebot (search escaped fragment). We worked on every detail and we weren’t really sure how the website was going to be received. But it was huge! Really huge!

Ben — I really began designing when I created my first web service company in 2005 (which I subsequently sold in 2011). I learned design to fulfill my desire to initiate something. I had a great need to create something and by chance I discovered one of the first versions of Photoshop thanks to my father. That piqued my interest right away and I haven’t been able to stop since then.

Q. We really love the experience ou created for the Trippeo website. Why was Material Design a good fit for Trippeo?

JC: I really like how Google kicked our ass with the Lollipop update on Android Phone. Everything was so smooth, and it was exciting for me to give life to a design that was inspired by Material Design.

Q. What Material Design elements did you use or got inspired by to design Trippeo?

Ben — The blue is a Material color and was an important element in my graphic choices. Trippeo being a financial service, it was necessary above all to reassure the target users without falling into a boring design trap. So I combined the Material color palette to make the identity of the site more exciting.

The site’s concept was to recount a week’s business trip by showing the typical progress of a businessman’s expenses. I was therefore looking for a sexy way to tell this story by creating a genuine interaction with the user and certain Material animations really inspired me.

Q. Why did you decide to go with Christian Robertson and the Material Design team’s font, Roboto?

Ben — There were many figures to highlight, and I found that the robotic square side of Roboto brought true meaning to this mechanism.

Q. The transitions on the menu bar and between sections are absolutely stunning! Was it inspired by Material Design or is it more of a personal taste?

JC: Thanks for your kind words :) Without a doubt, when we worked on Trippeo, we had in mind this “Material Design look’n’feel’ but all the animations are more based on personal taste.

I think it was the most natural one for the website. My work consisted into giving life to all theses jpg, without corrupting the designer’s work.

Q. What front end technologies did you use? I noticed you haven’t used any tools provided by Google such as Polymer or Angular Material, was it conscious choice?

JC: On Trippeo, I worked with the libraries I’m used to work with. Laravel for the whole structure and the skeleton (I assume that this is too much for a small website like Trippeo, but it’s my beloved framework :), and the natural triangle HTML5/CSS3/JS. Some of the animations are only made in CSS3 — like states behaviors — and others are driven by the marvelous Greensock library. I also use Snap SVG to manipulate svg elements and all theses sources are controlled by Gulp for transformation or optimisation operations.

To be honest, I never thought about using tools like Polymer or Angular Material. Maybe, these tools can help us a lot but in my opinion, we can’t use them for product websites like that, just because of browser compatibility. Our primary focus is to make sure that everybody lives the experience we want to create.

Q. Did you have fun designing this project? Were the Material Design guidelines your main source of inspiration and if not, what was?

Ben — At the time, I loved to throw little balls of paper on Jc Suzanne during work hours. As time went on, I wanted to throw more sharp-edged things and tried to propose a different vision of the web to people. I think that it is for that reason that we are here today taking pleasure in creating beautiful things that work, and that was the case with Trippeo, where we were completely in agreement all the way to the end of the project.

Without necessarily perfectly respecting the Material guidelines, I was especially inspired by the notion of “continuity design”, as one can see from the introduction to the site, where one sees the timeline transform into a circle of primary navigation. Afterwards, the idea was to challenge ourselves to find better compromises.

Q. Material Design is set to evolve over time — what elements do you think will stay? How will it influence your future projects?

Ben — The way in which Material Design was made has really brought about another vision of the the way to effect an action and to navigate within an interface. I think that this vision will stay for awhile and will continue to inspire me, in particular in mobile applications.

It is important to be inspired from codes without perfectly reproducing the guidelines, at the risk of seeing, as has been the case in the past, a radical standardization of design.

On that note, if someone from Manual Creative stops by, I would really like to buy your book !

Q. Last question: what’s your favorite Material Design inspired website?

JC: The latest Google IO website was very cool. But the best I’ve seen so far was the Abbey Road Studios website. An awesome experience with very interesting content. I remember that the first time I visited it, I spent around 30 minutes on it. A superb work.

Yep, so did we! Thanks a lot Benjamin and Jean-Christophe!

Follow Jean-Christophe Suzanne on Twitter and Benjamin Guedj on Twitter and Dribbble.

Read Next:

Is Material Design Just For Web And Mobile Design?