Les sites à ne pas manquer #1 - Septembre 2013

Les sites à ne pas manquer #1 - Septembre 2013

Je vais tenter chaque mois de regrouper dans un article mes découvertes en terme de sites web que j'estime "à ne pas rater". Dans ce premier article, je vais faire référence à des sites plus anciens que ce mois-ci pour rattraper mon "retard", et cet article sera de ce fait assez chargé par rapport à ceux des mois suivants.

Flash VS HTML5

Un très joli site basé sur Pixi ainsi que TweenLite, qui sont des librairies JavaScript. Son but est de vous montrer le résultat d'une "expérience" réalisée par GoodBoyDigital (qui a d'ailleurs un site sympa mais qui reste commun). Cette expérience est la création d'un jeu avec Flash d'une part et en HTML5 d'autre part. Mettons-nous d'accord que "en HTML5" ne veut rien dire, mais j'entends par là qu'il a utilisé tout ce qui gravite autour, à savoir canvas, webGL, ... On peut donc y voir ce qu'il conclue de cette expérience : il aime à la fois Flash et HTML5, oui je spoil, mais je vous laisse le plaisir de savoir pourquoi dans ce site one page tout en scroll (ou drag, au choix).

Le design ici est très travaillé, loin du flat design ultra à la mode (le site n'est pas non plus d'hier) mais il correspond tout à fait à l'esprit du contenu, à savoir les interfaces dynamiques.

Le site FLASH VS HTML5

Here is Today

C'est tout bête, mais bien pensé et intelligent : ce site montre l'aspect ridicule du jour présent par rapport à de très grandes unités que je vous laisse le plaisir de découvrir. Rien de très folichon mais un usage sympathique de canvas pour avoir quelque chose de très fluide pendant les animations.

Le site Here is Today

League of Legends

Chez Riot, ils ont le goût du parallaxe. Au cas où : Riot est l'éditeur du jeu League of Legends. Au cas où bis : ce que l'on décrit par parallaxe est le fait de travailler son site sur plusieurs plans et de les mouvoir de façon à avoir un effet de profondeur. Je vais vous présenter là deux sites événementiels qui commencent à dater un peu.

Le premier : Festival Lunaire. Je trouve ce site là bien fait en ce sens où il y a une parfaite maitrise du parallaxe tandis qu'il y a une navigation horizontale et verticale à la fois. Je vous laisse seul juge. Ça n'est pas non plus époustouflant, mais ça mérite d'être vu.

Le second : Freljord. Très gros événement qui a fait du bruit dans la communauté du jeu et le site promotionnel est en conséquence bien fait ! Toujours du parallaxe, mais cette fois ça part dans tous les sens : vous pouvez scroller puis à la fin de chaque décor vous pourrez aller au suivant. Certains plans sont vraiment bien faits et me font penser à des plans de caméras dignes d'un clip vidéo.

Les sites en question : Festival Lunaire - Freljord (attention il y a de la musique de fond)

Wandi

Une agence web qui fait dans l'originalité, pas tant en terme de design. On aura ici affaire à du flat design, bien que le carrousel (ou slider) soit vraiment bien fait et immersif. L'aspect intéressant, mais inutile, de ce site est sa possibilité d'être contrôlable via votre smartphone. Comme je l'ai dit : c'est complètement inutile, mais cela reste néanmoins techniquement remarquable. Ainsi, dans le menu cliquez sur "Remote access" puis démarrez l'expérience en flashant le QRCode qui vous est proposé (votre smartphone doit - bien sûr - être connecté) et vous aurez alors une interface de contrôle qui vous permettra de naviguer de page en page sur l'ordinateur.

Le site de l'agence Wandi

The Dangers of Drug Driving

Derrière ce nom tape-à-l’œil, il y a le site qui a été élu Awwward du 21 septembre. Le site est très créatif et vous met en garde de façon assez fun et décalée. Vous vous trouvez au volant d'une voiture et vous pouvez choisir la drogue dont vous souhaitez voir l'effet dans une liste, et c'est alors que la page change d'apparence pour vous donner un aperçu de l'effet de la consommation de celle-ci. Le site en lui-même est très propre et bien réalisé, flat design, très agréable à l’œil.

Très intéressant et instructif, à droite vous trouverez une icône de cerveau qui vous dévoilera les zones affectées par la drogue en question. Le truc hallucinant dans ce site est ici : vous pouvez glisser et déposer une barre verticale pour voir une sorte d'avant/après de l'image du cerveau, mais vous pouvez surtout déposer le cercle dans une zone qui vous invite à le faire (Drop here to zoom) et vous arrivez alors dans une vue 3D avec des détails plus précis.

Le site Interactive Guide to the Effects of Drugs on Driving

Ultranoir

Cette agence web française est ma source d'inspiration première durant le processus de création de mon site personnel. C'est en voyant leur site que j'ai eu envie d'une navigation asynchrone, car c'est fait avec élégance et permet de garder une certaine fluidité dans la navigation ce qui est très agréable. La façon dont on passe du site en général au blog est simple mais efficace, et faite avec humour (notez les titre et sous-titre du blog une fois dessus). Vu le nom vous pouvez vous douter des couleurs employez : noir et blanc, la sobriété à l'état pur.

Pour le reste, le site parle de lui-même.

Le site de l'agence Ultranoir

Nouvelle Vague

Je vous propose en bonus de (re)découvrir cette démonstration des possibilités de WebGL (mais qui commence à dater sérieusement) par Ultranoir, justement.

Nouvelle Vague by Ultranoir

ROME

Pour finir cet article en beauté, le clou du spectacle : ROME. Un clip interactif, une expérience WebGL très réussie.

Pas besoin d'en parler davantage : http://www.ro.me/

Votre gravatar