Loading...

En tant que designer, il est toujours important de faire en sorte que les idées de conception et d’interaction soient transmises le plus simplement possibles aux clients mais aussi aux équipes de production.

Dans la majorité des cas cette transmission se fait à l’aide de wireframes, de maquettes statiques ou de prototypes cliquables. Si cela donne une idée du rendu final, cette méthode n’est souvent pas suffisante pour que les clients se projettent totalement.

Dans le même temps, la majorité des logiciels de prototypages haute-fidélité (c’est-à-dire comprenant des animations, des micro-interactions, ou même faisant intervenir des conditions de code) ont généralement un processus d’apprentissage fastidieux et donne lieu à des processus de prototypage plutôt long.

Le designer avait donc jusqu’à maintenant deux choix :

  • Continuer à créer des prototypes basse définition, qui donne un rendu statique pertinent mais restant loin de la réalité du produit final.
  • Utiliser des logiciels de prototypages haute-fidélité permettant d’avoir un rendu proche du produit final mais allongeant considérablement la production.

C’est là qu’intervient Protopie ! La promesse : créer des prototypes de façon simple et rapide et sans code. Forcément cela nous a interpellé !

Alors Protopie, c’est quoi ?

Protopie est un logiciel de prototypage haute-fidélité disponible sur MacOS et Windows, il permet aux designers de concevoir des prototypes aussi bien sur mobile que sur Desktop.

Le concept de protopie est assez intuitif : Une interaction = un objet + un déclencheur + une réponse

Que peut-on faire avec Protopie ?

Séduit par la promesse de l’outil, nos équipes de designers ont décidé d’utiliser l’outil en mode projet. Verdict : les possibilités d’utilisation sont aussi vaste que simple à prendre en main.

  • Utilisation des fonctionnalités des appareils mobiles (Gyroscope, micro, interaction en réponse à des sons, 3D touch, capteur de proximité, appareil photo).
  • Liens entre différents appareils (pratique pour concevoir une application de messagerie par exemple)
  • Prototypes testables directement sur différents devices à l’aide d’un lien
  • Importation de vidéos, de sons, d’animations lottie (permet de convertir une animation after effect en animation svg).

Un workflow au top !

Avec l’expérience, nous le savons que trop bien, les points de frictions lors de la construction d’un projet, ont souvent lieu pendant le passage de relais entre les designers et les développeurs.
Mais avec Protopie, tout cela n’est plus qu’un lointain souvenir. Le logiciel permet de donner aux développeurs fronts, l’accès aux spécifications des animations crées par les designers.

Delay, duration, easing, move, propriétés de layers (width, height, opacity, color etc …) sont autant d’éléments accessibles qui permettront aux intégrateurs de construire les différentes animations d’un site web ou d’une application en étant le plus iso possible avec la conception de départ.

Oui d’accord, mais moi je travaille avec sketch, Adobe XD ou bien figma !

On vous entend d’ici 😉 ! Mais Protopie prend en charge sans problème l’import des fichiers de ces logiciels et permet même de modifier les calques à la volée.

Les animations peuvent être encapsulées dans des symboles pour les ré-utiliser dans d’autres projets ou partager des librairies de symboles à son équipe. Pas mal non ?!

Pour vous lancer :

=> Protopie Bootcamp
=> Advanced prototyping with Protopie 

Une de nos réalisations :

25 février 2021