best websites of the world

Loading ...

Browser

Navigate by dragging


Navigate with your keyboard

Kévin Lagier logo Kévin Lagier

I'm a 22 year old student at Hétic,
I'm looking for a postgraduate training
For 2015, beginning in january

Drag to discover projects

Tour de France 100 ans de Tour

Drag it

Social Coke Social Coke Logo

Or how to turn social writing
into advertising messages

Partech

Corporate website for Partech, a design office
specializing in manufactured chairlifts, in industrial
equipment and mountain.

View the case study View the case study
  • Date : June 2013
  • Client : Hétic
  • Role : Design - Html - Css

100 ans de Tour

Data-visualization project about the 100 years of the Tour de France. A couple months before the 100th occasion, the Grande Boucle grabbed all my attention. With my project team, we realized this huge annual event might deal with a fascinating database to explore: 100 years of data to discover between ranking, circuits and legendary racing cyclists…

Check the site

The Context

An outstanding event

The Tour de France is without doubt the most prestigious worldwide bicycle racing. And so is the Tour de France 2013, taking place for its 100th occasion. It goes without saying it’s a special year for this event, which is one of the most broadcasted edition in the history of the Tour.

  • A trend The Tour is a regular sporting event that takes place every summer. As part of the national heritage of the French culture, on the one hand it plays on the constituent landmark of our identity, and on the other hand it remains continuously updated and globalized to promote cycling all over the world and to see a real resurgence of interest in this noble sport.
  • Logo 100 ans de Tour, 100ème édition
  • 100 years of data It’s been a hundred years that the Hexagon lives to the rhythm of pedals of super trained athletes in order to win the Grande Boucle.
    A hundred years of racing, rankings and anecdotes, which means many possible analysis and statistics.

The data

Choices and concessions

  • 0 Stages
  • 0 km traveled
  • 0 Runners

Data recovery for the 100 years of the Tour de France has been a long process. We had to make choices and concessions. It was difficult to find the information we were looking for, especially for the first editions of the Tour.

Websites and users who providing the data of the Tour de France, have enabled us to create a data base fundamental to the realization of this project. A big thank to them.

We have created scripts that allowed us to retrieve the data to make a formatting process of this data to create JSON files and to build our database.

We had to adapt the development of our interface based on the data collected. All our graphics has been produced with the D3 javascript library.

The Design

A graphic design based on the Tour de France’s colors

A flat design, based on the Tour de France’s colors, in order to manipulate more easily vector elements and interactions. A full screen interface, where we navigate year after year into the different analyses of each edition of the Tour.

Context

The "Context" part of the site aims to discover the different routes of the Tour, relive each stage, the crossed cities, the kilometers traveled in numbers and images!

Stages

Each tour is represented here by category, but also according to the distance traveled. You can also find runners who animated the Tour de France and their victories.

Participation

Runners are presented here according to their country of origin, so we can measure internationalization of the Tour over the years and the growing success of the Grande Boucle.

Rating

Rediscover full rankings for the selected year, runners’ time and their nationality, as well as runners who have distinguished themselves for their general performance, at the sprint or at the mountain.

Thanks

A very special thanks to all the sites and users who provide the data of the Tour de France. They allowed us to create the database to this project. Do not hesitate to contact us to pull up for any errors or just to say hello!

A project made with ...

They talk about us

  • Huffingtonpost C'est une mine d'or pour tous les amoureux de statistiques et de classements. Le site 100ansdetour.fr a effectué un colossal travail de compilation de données [ ... ] See article
  • Codrops A beautifully designed hommage to celebrate 100 years of the Tour de France. Some great effects and a brilliant way to present data made us pick this website for this week's inspiration. See article
  • Webdesignermag The Tour de France is one of the most famous cycling tests in the world. This site celebrates 100 years of the race with an imaginative and interactive look at the facts and figures [ ... ] See article
  • Design Spartan Je ne comprendrais jamais ce qui intéresse tant les gens dans le Tour de France, mais ce site web mérite de l’attention [ ... ] See article
  • Blog du webdesign Le Tour de France fête ses 100 ans !
    Pour l'occasion découvrez un site qui fait la rétrospective des 100 dernières années du Tour [ ... ] See article
  • John's Graphisme Whaouu, ça faisait un petit moment que je n’avais pas fait un article dans cette thématique, les sites qui envoient du poney [ ... ] See article

That’s all folks

Thank you for watching

  • Date : March 2013
  • Client : Hétic
  • Role : Design

The Whole logo The Whole

The Whole is a web interface that brings together your news feed from various sources and presents it on only one platform. The Whole is currently a project in design phase.

The Concept

Connect and follow the world

The Whole concept is to propose a platform that unifies all your services on a single interface. Social networks, RSS, music or any other service would be available on the same application and propose the same functionality.

The Whole is currently a prototype, which was achieved with only 6 services (Facebook, Twitter, Pinterest, Sound Cloud, Last Fm Rss Feed). However, itwas thought that any other service could be integrated.

The interface

The interface offers a horizontal navigation to present clearly a larger number of postings than it could have been done with a vertical navigation.

  • News feed

    The source of each posting can be identified thanks to the design that is adjusting according to the kind of posting it deals with.

  • Bookmarks

    Save your favorite postings by clicking on the bookmark that appears on rollover.

  • Flow filter

    Easily control your news feed
    thanks to the filter of the
    menu bar.

ClearElements

It was necessary to make a set of elements with a common visual theme that can work separately and together to create a rich and interactive atmosphere.

Each element has been thought before production. I had then the pleasure to design and make small details on each of those elements.

That’s all folks

Thank you for watching

  • Date : December 2012
  • Client : Hétic
  • Role : Design - Html - Css

Social Coke Social Coke Logo

Social Coke is a (fake) worldwide digital campaign for Coca-Cola based on an innovative concept of collaborative website using Twitter. The site immerses its users in a rich, captivating and entertaining experience in which they can discover different modules of games or dynamic contents.

Social Coke Link Social Coke Link hover

The Context

Coca Cola, an active and creative brand

Year by years, Coca-Cola has shaped its image and reputation thanks to large-scale advertising campaigns, notable for their originality and quality achievements.
The brand has also often worked in collaboration with artists and renowned designers to achieve visual concepts still etched in our minds.

Today, Coca-Cola aims to carry on this tradition of innovative and creative campaigns, staying aware of the new online challenges of 2014.
The brand targets a pretty young audience, sensitive to digital innovations, to strengthen its notoriety and its image as a state-of-the-art brand.

An active and creative brand in terms of communication campaign : Recurring themes in Coca-Cola's communication: wonderment, dream, magic...
A strong link between the brand and art (campaigns, packaging, logo)
A brand that caters to a rather young target therefore sensitive to digital and innovation in general

Image : To maintain and to strengthen the image of a young and innovative brand, close to artistic circles and active in the field of digital. Notoriety : To maintain the brand awareness on social networks and more precisely on Twitter.

The Idea

Digital campaign for Coca Cola

The website offers users to discover a vast universe highly illustrated. At the heart of this universe, a bottle is getting drawn gradually thanks to the names of users who tweet with the hashtag #socialcoke. The first goal of this page is to encourage people to talk about the brand on Twitter. They also have the opportunity to do it directly from the homepage.

What interest to the user?

When the user visits the website, he delves into a graphic universe that captures his curiosity and wonder. Thus, it relies on one of the best Coca-Cola's key of communication: the prominent place of amazement.

More specifically, the interaction between the users and the site is primarily based on the tweet. For each tweet posted with #socialcoke, the nickname of the user completes the design of the bottle. It appears directly into the bottle and we discover a little more of its shape.

Furthermore, tweets have a second function in our campaign. They allow us to build the universe of the website. Users take part in the construction of the "out of phase" universe that is gradually emerging.

The Universe

Offers the user a rich, exciting and entertaining experience

This universe presents the Coca-Cola brand in terms of art. It is composed as an infographic presenting in a playful way historical graphs of the brand, the evolution of its branding, or even the shape of its bottles over the years.

The universe is deliberately very illustrated, with no framework to allow great freedom in the navigation.
Particular attention is given to details in the illustrations, animations and other visual reports that allow to stir the curiosity and enthusiasm of the visitor.

And when the bottle is full?

The campaign ends when the bottle is full. However, it does not stop here because it's now the occasion to thank the participants and to enjoy the reputation of the website as its height.

Afterwards, the customized bottle will be really produced as a new "Socialbottle" collector edition. It will be offer to participants of the campaign and it will be possible to order the bottle on the site.

The website will also be available in its entirety. Visitors will be able to enjoy the fully experience, in the manner of an infographic showing the strong links between Coca-Cola and the world of art.

That’s all folks

Thank you for watching

  • Date : January 2011
  • Client : Partech S.A.R. L.
  • Role : Design - Development

Partech logo Partech

Realization of graphic design and development of a static website for Partech, a design office. Responsive website, created in HTML 5 / CSS 3, Javascript and Flash. Check the site

partech cinema display

The Client

Design office, engineering mechanics

Founded in 1992 by Yves Lagier, Partech offers its engineering solutions and achievements in the world of industry and ski lifts.
With an experience of many years spent in major manufacturers (Skirail VON ROLL CWA) Partech brings its experience in industrial equipment and mountains

Featuring a powerful tool in design, 3D software, finite-element calculations. Serious and motivated, its strengths are also experience and customer listening. Moreover, Partech proves to be an economic and serious alternative in opposition with manufacturers that are penalized by heavy structures, a rigid policy and costly alternative solutions.

Single Rack

Horizontal navigation

An original navigation that allows the presentation of a large number of projects and the visitors to soak up the atmosphere.

Safari Window Screen partech
Sketch Spad Rail 1 Sketch Spad Rail 2 Sketch Spad Rail 3 Sketch Spad Rail 4 Sketch Spad Rail 5 Sketch Spad Rail 6

Responsive Design

Mobile web is becoming increasingly important, it was necessary to adapt to new forms available for consultation.

Iphone screen Partech
  • Partech mobile 4
  • Partech mobile 2
  • Partech mobile 1
  • Partech mobile 3
  • Partech mobile 5

UI Element

Creation of graphic elements helping the website consultation for people with little computer skills.

  • UI Element 1
  • UI Element 2
  • UI Element 3
  • UI Element 4