Comme chaque début de mois, notre agence digitale vous propose sa sélection de sites internet incontournables pour le mois de Mai 2017. Découvrez notre TOP 3, ainsi que notre mention spéciale d’expérimentation du scroll sélectionnés par notre expert du Webdesign. Vous trouverez ici les expériences UI/UX* de site web qui nous ont interpellé :
Trüff Art : le diamant noir du svg
Au prémisse, une jeune “truffeuse” du Périgord commençait à cultiver des chênes en espérant récolter la mystérieuse truffe noire. Un champignon rare et précieux aux arômes uniques qui pousse aux côtés de certaines racines d’arbres.
Cette jeune femme a fait appel au designer Carl Brenner pour construire son identité de marque. L’idée principale fut simple, lorsqu’une truffe noire est coupée, elle révèle des veines représentant des formes blanches aussi intrigantes que captivantes. Ces formes ont été ensuite utilisées pour créer le logotype de la truffeuse et certains paterns. À partir de là, une multitude de possibilités s’ouvre à nous et laisse notre imaginaire adapter cette technique pour façonner nos pensées ! À la manière de Patrick Seymour qui a su créer un effet de profondeur à ces créations juste par le trait.
L’exploration de ce type d’illustration a conduit à des résultats inattendues. Plus nous avançons dans l’expérience, plus notre inconscient se laisse porter par le jeux de découvrir à quoi correspond l’accumulation des svg. Grâce aux nouvelles technologies Web telles que : React, AWS ou encore Progressive App, l’utilisateur à la chance d’assister à la naissance de chaque forme vectorielles.
Notre seul bémol, le menu qui n'est pas forcément intuitif à trouver dans son coin en haut à droite. Mais finalement pour une passionnée de truffes, quoi de plus normal que de prendre le temps de chercher !
#Web & interactive #Art #Illustration #Portfolio #SVG #Parallax
7Up : une nouvelle rafraîchissante
“Un Seven Up bien frais svp” ! Avec presque 90 ans de bons et loyaux services : de Fido Dido aux Kaira Shopping, 7Up se désaltère et rafraîchit son identité de marque sur son site néerlandais. Celle-ci représente toujours aussi fièrement la marque grâce à un design très coloré et pétillant représentant son nouvel univers graphique !
Leur couleur verte qui prédomine a été utilisée cette fois-ci pour reproduire l’esprit d’une forêt amazonienne où seul le citron, allégorie certaine de leur boisson, vient contraster et captiver l’internaute sur leur produit.
L’utilisateur pourra se délecter avec des animations spécifiques à chaque étape du menu latéral. Nous aurions peut-être apprécié un call-to-action pour inciter l’internaute à passer commande dans le descriptif d’une gamme, même si le but premier du site fut de faire simplement la promotion de leur produit.
Malgré cela, chaque scroll amène l’utilisateur dans un univers ludique évocateur d’été et de vacances jusqu’au bout du monde ! Ajoutez à cela des animations audio et vectorielles, cocktail réussi pour la marque au sept !
#Web & interactive #Animation #WaterColor #CSS3 #Navigation
Sauve une vie : le geste à adopter
“Sauve une vie” est un projet initié par le centre de simulation médicale smile de l’université de Liège, en collaboration avec le CHU de Liège, Liège université et rtbf.be. Plus qu’un site c’est un film éducatif où les nouvelles technologies du Web permettent de rendre interactif le projet. En effet lorsqu’un danger, accident survient, comment doit-on réagir ? Quels gestes adopter ? Comment s’y prendre ? Voilà quelques exemples de questions qui peuvent sauver une vie.
L’expérience utilisateur est ici poussée à l'extrême : dès que nous cliquons sur le bouton “démarrer” la vidéo se lance en full size (avec la possibilité de la réduire). Dès lors, l’utilisateur choisi son expérience par rapport à son niveau. La difficulté est placé ici sur la rapidité. En effet quand 2 à 4 propositions sont posées, nous devons les analyser et y répondre dans un temps imparti. Si une mauvaise réponse est sélectionnée, la question est de nouveau posée. L'inconvénient que nous avons pu constater est le délai de chargement pour une question posée une seconde fois.
La manière dont le projet a été filmé, l’ambiance, le fond sonore ainsi que le stress du chronomètre... L’ensemble de ces éléments nous mettent en situation et nous font ressentir les sensations des deux personnes qui portent secours à cette jeune femme. Cette même sensation ressentie dans la campagne interactive de prévention de Guy Cotten, Sortie en mer.
Pour finir l’expérience nous avons la chance de recevoir (ou non) notre brevet de secourisme délivré par “Sauve une vie” avec le pourcentage de réussite. C’est mission réussie pour nos amis les Belges pour cette campagne marquante !
#Film #Education #Web & interactive #Wordpress #FullScreen #GSAPAnimation
Nick Jones : notre coup de cœur du mois
L’agence123 accorde ce mois-ci sa mention spéciale au portfolio de Nick Jones, connu pour mêler le design et le code à la perfection. Pourquoi devrions-nous réfléchir qu’en scrolls verticaux et horizontaux ? À la manière des kinetic typography en vidéo, Nick nous emmène pour chaque projet de son portfolio dans une spirale expérimentale.
L’animation à proprement parlé n’est pas “novatrice” mais elle a le mérite de rentrer au cœur du site. L’UX à bien été réfléchi car un “warning” composé d’un bouton permettant de switcher entre l’expérience spirale ou lambda est présent pour celles et ceux qui souffrent de vertiges !
Petit plus non négligeable pour les passionnées de raccourcis, nous avons la possibilité de passer d’un projet à un autre directement avec la barre espace. De plus, si nous maintenons les touches Ctrl (Cmd sur Mac) + Alt + Maj s’affiche la fameuse spirale en surbrillance. Celle-ci faisant penser au nombre d'or de Fibonacci, un lien est sans doute de rigueur car si l’utilisateur scroll suffisamment avant, ou après, les 10 projets forme une rosace colorée.
Cette expérimentation est d’autant plus réussie avec l’adaptation du scroll sur mobile et la mise à disposition du code sur codepen !
#Navigation #Scrolling #Portfolio #Experimental #Newtechnologie
*UI : Interface utilisateur, l’UI correspond au design fonctionnel du site en jouant sur la sensibilité de l’internaute.
*UX : Expérience Utilisateur, l’UX prend en compte le parcours de l’internaute et facilite son expérience au sein du site internet.
