The Ferrari California-T website has been designed in the same mood than the 458 Speciale website (which initially results from the car-page of the main GT Ferrari website). This time, the layout has been thinking full responsive for a fullscreen experience. A better way to increase the beauty of this new masterpiece.
The website is designed in a single page, so you have to scroll to see the main different parts of the content : Overview, Design, Innovations, Specifications, Multimedia, Partners, ... This display is simple and trendy, but obviously, the page becomes very tall. So the main menu stays in the top of the screen when you scroll to help you in the navigation.
A special attention has been given to the «responsiveness» of the website. Indeed, the graphic elements follow a grid which finally gives us a real harmony whatever the resolution is (desktop,laptop,tablet or mobile).
960 grid system / 12 columns / Width 1150px / Gutters 50px
First of all, and as we said above, the menu stays in the top of the screen, then it’s an anchor system to navigate, so each category is linked to each part of the page. Also, you’ve got some useful functions staying in the right of your screen, like a «share» button to share the page at any time, or a «Back to top» to return at the top of the page.
A better way to improve the management and the appearance of the content on the layout was to employ some useful «tricks». Here are some great examples of what we use (notice that many systems have been used on every Ferrari website, I think about especially the GT website, or the 458 Speciale launch website).
The Ferrari 458 Speciale launch website was inspired by the car-page of the main GT Ferrari website. The car is added to the current Ferrari lineup next to its two ‘sisters’ 458 Spider & 458 Italia. A powerful masterpiece designed in an evident sporty spirit that we find in this website, especially due to the blue lines circling the main layout.
So this is the main full page where you can access to an overview and some technical specifications. Indeed, this page announce the real release of the car, happening few days after. A second version of the page has been made then and covers all the different aspects of the car (design, innovations partners, ...).
Each photos on the grid was asssigned with an animated rollover which gives you the possibility to see a full view or share the photo on social networks Facebook, Twitter, Google+ and Linkedin.
Considering that, most of the time, Ferrari give us a lot of content which describes the car or anything else, some parts were hidden thanks to easy tricks like the «Read more» button. So when you clicked on this, the content was revealed and push the rest of the initial content below.
A new page has been designed after the released of the car. The layout is similar but includes some new parts describing the car (Design, Innovations, Partners, Medias).
We created a mobile version which is a little bit different. The content is not full scrolling like the desktop version, here the menu loads the content of the multiple categories whereas on the desktop it’s an anchors system.
For Christmas 2012, a special event has been launched by Thierry Mugler giving a chance to win a holiday gift and the delivery man along with it ! It’s a «Special Delivery To Your Door» to break the routine of Christmas I guess.
You have to make a choice between 3 delivery men : Raphaël, Bruce & Alexandre. If you are nominated at the end of the game, the one you’ve selected will bring you the christmas gift... and maybe more...
Description / His «advantage» / 4 Details views / Introduction movie / Zoom / Social Stuff
You’ve got the man, now you can select which fragrance he will have to bring to you for christmas.
Alright, it seems ok now, you just have to give a couple of informations about you, and good luck.
Elle.fr is a female magazine which is talking about Mode, Beauty, Culture, People, Cooking, Decoration, etc. The pitch was to re-design the website of the magazine and to give a fresh feeling to the massive contents of each categories. For this work, the inspiration comes from the graphic guidelines and layouts you can see in the real magazine.
Don’t be intimidated by Katie Holmes...
Well, this is an example of a main page category (’Mode’), working essentially with 3 columns.
The website has been designed in a responsive way.
In 2012, Lancel wanted to renew the prestige of its brand. La Maison Lancel which was born in 1876 had to make dream customers more than ever, so the pitch was to emphasize the beauty of the brand and its collections.
Here is the main page which works really like a portal where we push the last collection, new store, etc in a slideshow. Then a second part is dedicated to «The Spirit of Maison Lancel» which talks about the origin of the brand or the know how and craftmanship. Then promotional pushes come to complete this first page.
La Maison Lancel is the chapter which tells the story of Lancel. It’s the occasion to discover all vintage bags and accessories which have contributed to create the legend of the brand and its uniqueness.
The Collections part is the entry to discover all the main categories of products (Women’s Handbags, Men’s leather goods, Wallets & Purses, Accessories, etc) The content is associated with some quotes/lyrics to increase the poetic aspect of the brand.
This is an example of a collection page, here is «The Daligramme Collection». The page comes before the selection of products and is intended to tells the story of the collection, how it is borned, its evolution, all little details you have to know about it, etc. This is a really inspirational view of the collection.
Here it comes, the Catalogue page where you can access all the handbags etc of Lancel.
The product page or the end of the tunnel. Here you can admire the product, but also the associated products, the related subjects and the products you may also like. A specific navigation follows you when you scroll.
«Floral Revelations» talks about the new olfactive solutions created by Givaudan.Indeed, Givaudan wanted a website they can show to their prospects in order to introduce them new fragrances with a real immersive experience, «Floral Revelations» was born.In this way, we created a full Flash website using video as a journey into a floral universe.
Before we produce the website, we discover the different fragrances with the Givaudan’s team to immerse ourselves with the sophisticated perfumes. Then, we began to understand the wealth of the olfactive solutions, we could create something great.
So here we are, the website contains 5 clusters (composed by 3 or 4 fragrances) you can explore one after the other. You just have to let you guide through the floral experience.
Inspirations: Retro Modernism / Past Recomposed / Timeless Glamour / Neo Classic
Fragrances: Fleur de Rocher / You-Tuberose / Acassie / Vinaigre de Violette
Florals / Textures: Pensées, Violettes / Gardenia / Mimosa / Honey
Inspirations: New Floral Freshness / Universal Freshness / Universal Floralcy
Fragrances: Sacre du Printemps / Gin Dew / Bacchus / Cactus Bloom
Florals / Textures: Fleur, Feuille de vigne / Fleur de cactus, Aloe leaves / Freesia
Inspirations: Voyage / Escapism
Fragrances: Passion Flower / Litchi Song / Guilin
Florals / Textures: Passion flower, Passion fruit / Osmanthus / Rose, Lychee / Peach skin
Inspirations: Dressing Up / Textures / Material
Fragrances: Suede Petals / Burning Blush / Rhubarb Blossom / Sand,Salt
Florals / Textures: Fleur de Safran / Pivoine / Resinous / Sand, Salt
Inspirations: Delight Addiction /Epicurean Chic / New Gourmandise
Fragrances: Fragrances: Fée des Lilas / Naia / Rosa Gothica
Florals / Textures: Lilas / Black Crystallized Rose / Fleur de Lotus / Cotton
The aim of the experience was to show an extract of the different fragrances formulas.
The Bic Wall is a full Flash website created to celebrate the 60 years of the Cristal Bic pen. The experience is simple : you can draw your own drawings on a huge map with a pen, and you can see other people drawing at the same time and anywhere on the map. Then you can save your drawings, share them, etc.
The website had a great success, the funny experience enjoyed thousands of people worldwide. You know everybody has already used a Bic once in his life, at least, so it was great to try one virtually I guess. At the end, we have to admit that the Wall just looks like a massive scribble ! But, it was a really interesting challenge.
It was possible to participate to a contest with the drawings you had made or just to post your work into a global gallery. Everything was headlined by a jury who marks the propositions, so you could win some prizes etc.
This category was dedicated exclusively to the history of the Cristal Bic pen. You’ve got a representation of 6 decades which illustrate each main event linked to the Bic Cristal. It begins in the 50’s and continues to the 2000’s.
Here is just few examples of popup we had on the website.