LE BLOG

Toute l'actualité des CMS et de notre agence web.

Image avec intitulé de l'article, les incontournables du mois de mai 2018

Comme tous les débuts de mois, notre agence digitale vous propose sa sélection de ses dernières trouvailles de sites web à l'expérience utilisateur incontournable. Découvrez notre nouveau TOP pour le mois de Mai des sites avec expériences UI/UX* qui nous ont marquées, sélectionnées par Romain, notre expert du Webdesign.

Maison Riviera

lagence123 incontournable riviera

Nous commençons tout en douceur notre sélection du mois de Mai avec le superbe site de la Maison Riviera, entreprise centenaire spécialisée dans le traitement du lait. La Maison Riviera réaffirme ici sa position de pionnier en lançant sa toute nouvelle gamme de produits à teneur réduite en sucre. L’objectif principal du site est la mise en situation de chacun des nouveaux produits dans un esprit authentique, en mettant en avant la composition subtile et légère.

Rien n’est laissé de côté. Chaque photographie nous amène à découvrir une nouvelle ambiance liée à un type de yaourt. Afin d’appuyer la grande qualité de la photographie, le webdesign a été conçu dans la même fibre artistique. Des éléments fleuris ainsi que des fruits sont positionnés tout autour des différents contenus de couleur pâle pour contraster avec le fond blanc du site. Pour accentuer ses différents éléments intégrés au contenu, un scroll animé est mis en place pour amplifier la sensation de mouvement de l'utilisateur (telles les feuilles tombant de l’arbre de la section “our collections”). Le subtil effet des pages de chargements animées par une fumée blanche qui recouvre la page fait également son petit effet.

Si nous avions quelques optimisations, nous retravaillerions la dimension du content max, ce dernier (actuellement de 1920px) déployé sur un écran supérieur offre une immersion inégale à celle sur une dimension inférieure. Il est dommage de perdre une miette de ce travail de qualité ! D’un point de vue commercial, il aurait été également intéressant d’intégrer la partie shopping directement sur ce site plutôt que de basculer vers un autre site, au design plus classique et moins engageant.

Grâce à l'esthétique parfait, les couleurs employées, les mises en situation des produits ou encore les codes utilisés proches de l’univers du luxe, le site de Maison Riviera permet de crédibiliser et d’appuyer le positionnement de la marque ! Un vrai délice pour les yeux, tout autant que sont certainement les yaourts pour les papilles.

#food #photography #clean #colorful #parallax #CSS3 #HTML5 #jQuery 

 

Catch Fish & Chips

lagence123 incontournable catch

Prêt pour une immersion dans les cuisines d’un véritable fish and chips à l'anglo-saxonne (et oui encore un site pour ouvrir votre appétit, on vous régale aujourd’hui) ? Le restaurant de fruits de mer Catch se démarque de la concurrence avec un site simple et efficace qui surprend l’utilisateur tant par sa conception que par sa réalisation minimaliste et percutante !

La navigation au scroll dévoile les différentes étapes de la préparation du fish&chips présentées par des courtes vidéos . Après avoir préparé l'appétit de son visiteur, le site propose en fin de scroll la carte des différents menus proposés, de quoi mettre l’eau à la bouche pour plus d’un ! La version mobile, bien qu’un peu moins immersive pour gagner certainement en légèreté et temps de chargement, reprend bien les codes du site desktop (vidéos et texte). Cette façon de mettre en avant le fonctionnement et les valeurs d’un restaurant est tout à fait remarquable.

Grâce à cette expérience utilisateur impactante dès la prise d’information, les clients ne peuvent douter du service proposé. Le message véhiculé par le restaurant est très clair : “chez nous le poisson il est frais !”. Attention maintenant à proposer une expérience culinaire en phase avec l’image !

food #animation #video #responsive #storytelling # wordpress

 

Pacific Rim, les secrets du VFX 

lagece123 incontourable pacific

Amoureux d’effets spéciaux et de combats titanesques entre gros robots et monstres géants qui détruisent des villes, asseyez-vous et sortez le popcorn ! Pour la promotion du nouvel opus de Pacific Rim, la production vous offre quelques secrets de tournages !

L’utilisateur se glisse dans la peau du créateur des effets spéciaux en décidant d’ajouter ou de supprimer les couches CGI (Computer-Generated Imagery, soit l’ensemble des séquences ou des animations 3D générés sur ordinateur) des effets spéciaux lors des scènes d’action grâce au curseur de la souris. Simple et efficace. De nombreuses explications sont mises à disposition allant du traitement des textures aux animations rigoureusement mises en place. L’objectif d’attirer le visiteur en salles est également bien rempli grâce à la mise en avant d’une plateforme d’achat de tickets de cinéma.

Légère optimisation possible : afin de faciliter l’expérience et de ne pas perdre une miette du travail de webdesign, il aurait été intéressant de mettre en avant les flèches de navigation.

Nous on adore l’idée ! Qui n’a jamais voulu découvrir le travail de création d’un film de science-fiction tel que Star Wars, Kong ou encore Avengers ! Après avoir vu l’ampleur des travaux sur les effets spéciaux, nous pouvons excuser l’attente de cette suite (que certains d’entre nous attendent depuis 2013) !

#film #fullscreen #HTML5 #CSS3 #svg #WebGL #ReactJS

MENTION SPÉCIALE. Outrider Bomb Blast

lagence123 incontournable outsider

Notre mention spéciale concerne ce mois-ci un site qui nous a marqué autant dans sa conception graphique que dans le message véhiculé. On dit souvent qu’une image vaut mille mots, et Outrider l’a très bien compris. Afin de sensibiliser l’opinion sur les dangers et ravages de la course à l’armement, le media digital propose un outil interactif simple permettant de visualiser l’impact qu’une bombe ferait sur une ville.

En se géolocalisant ou en renseignant le nom d’une ville, nous pouvons tester différentes bombes et leurs effets sur la carte : zone d’impact, de radiation… Les codes couleurs (carte noire et animations vives), ainsi que les effets impactants permettent de véhiculer aisément le message. On ne sort pas indifférent de cette expérience !

Jouer sur la gamification pour véhiculer un message fort est très intéressant d’un point de vue marketing !

#education #technology #web #interactive #data visualization #ReactJS #webpack #typekit

 

L'agence123 est une agence digitale qui vous accompagne dans tous vos projets digitaux. Composée d’un pôle webdesign UI / UX, l'agence élabore avec vous la meilleure expérience pour votre site internet ou e-commerce.

 *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.

Nous vous suggérons également...

Télécharger nos livres blancs

livre blanc blog

A chaque marché sont site e-commerce 

Nous vous livrrons tous les secrets pour réussir sa boutique en ligne dans la mode, le sport et les pièces détâchées.