03

Acrobates Builder


Acrobates Builder est une application en ligne qui permet de composer une installation de lampes modulaires dans une pièce. Ces lampes, issues de la série des Acrobates de Gras et éditées par DCW Éditions, ont la particularité de pouvoir être reliées les unes aux autres pour former une longue chaîne suspendue allant d’un point à un autre.

année

2017

client

Réalisé pour DCW Éditions, une entreprise qui édite des luminaires et du mobiliers.

crédits

En collaboration avec Vincent Desclaux.

Tour d’horizon d’Acrobates Builder, à tester ici : acrobatesbuilder.fr

L’application a été développée avec deux objectifs précis quand à son utilisation :

  • les potentiels clients qui s’y connecteraient par Internet et qui se familiariseraient ainsi avec le catalogue des ces lampes,
  • mais aussi les visiteurs du stand de DCW Éditions au salon de design de Milan, où des tablettes et des hôtes/hôtesses les accueilleraient pour tester et simuler une installation selon leurs besoins.

L’interface et les interactions ont donc été mises au point dans une logique mobile-first, c’est à dire en capitalisant au maximum sur les spécificités des tablettes : portabilité, écran capacitif multi-touch, proportion d’écran en 4:3, grande finesse des traits et précision des couleurs (en particulier sur les iPad Air 2 qui seraient utilisés). L’application respecte au maximum les Human Interface Guidelines (HIG) d’Apple pour être au plus proche de l’expérience et des codes d’une application native sans la nécessité pour les utilisateurs de passer par l’App Store pour l’installer.

(image: dcw-20170405-acrobatesthumb-03_2_3000.jpg legende: Aperçu de l’écran d’accueil sur un iPad.)

Un soin tout particulier a été apporté aux performances et à la réactivité : l’ensemble de l’application elle-même pèse moins de 1mo et reste très fluide – même en affichant plusieurs dizaines de lampes en même temps.

En parallèle, de nombreux paradigmes ont dû être trouvés pour faciliter au maximum la manipulation d’un catalogue de lampes aussi riche, tout en apportant une touche ludique et familière.

(image: dcw-20170405-acrobatesthumb-037_3000.jpg legende: Recensement des abatjours et des affixes du catalogue.)

Cela se retrouve autant dans le graphisme de l’application que dans son comportement – simple, précis, utilisant des couleurs franches et truffé d’animations subtiles.

(image: 1_el_3qt7ytzclwh_t_qybfa.gif taille: colonne legende: Slider de gestion de la position horizontale d’une lampe.)
(image: 1_e1xnruhcznzpw2t5atxexq.gif taille: colonne legende: Module de réglage de la taille de la pièce, avec avertissement pour des valeurs hors des limites.)
(image: 1_n0m1kzlm6d48bo3phfev3w.gif taille: colonne legende: Choix d’abatjours grâce à un module de double carousel.)

Un des premiers prototypes. La physique des lampes est volontairement exagérée pour renforcer l’impression d’interagir avec des objets qui ont une masse et une inertie.

(image: 1_ppdj__-_ywnrvuetqs9now.gif taille: colonne legende: Moteur physique créé pour le projet et utilisé sur acrobatesbuilder.fr, ici en mode de débogage.)

Un article récapitulatif rédigé à quatre mains avec Vincent Desclaux est à retrouver sur la page suivante.