Transformez vos maquettes en prototypes animés avec Atomic

Si vous aussi vous trouvez que les maquettes Photoshop c'est bien mais que ça manque un peu d'interactions, je vous propose de découvrir Atomic, un service web gratuit qui vous permettra d'ajouter très simplement des changements de page et des interactions à vos maquettes Photoshop (ou Sketch).

Mieux comprendre les interactions avec Atomic

Atomic est un service gratuit se plaçant juste après l'étape "Photoshop" dans votre workflow. Insérez-y vos PSD, et l'interface vous laisseront librement placer et animer vos différents calques grace à la création de zones dynamiques.

De cette façon, vous pourrez décrire plus simplement les interactions prévues à vos clients s'ils sont un peu désorientés face à de simples maquettes statiques.

Premiers pas

Comme souvent, la première étape est la création du compte (gratuite et ne demandant même pas de valider son mail, je vous encourage vraiment à sauter le pas et tester le service). Une fois faite, vous voilà face à votre dashboard, qui comprend déjà quelques projets qu'il vous est possible d'éditer et modifier.

L'interface n'est en rien originale, et c'est une bonne chose. Nous ne sommes pas vraiment perdus, les options et outils étant toujours là où on les attend : calques et outils sur la gauche, options de l'outil sur la droite. 

Le seul petit reproche serait à la limite la position de l'outil "interaction" (le dernier de la liste de gauche), que j'aurais mis plus haut car c'est certainement le plus utile.

Changez de page, faites bouger un menu ou un panneau, les animations sont vraiment très simples et rapides à mettre en place. Une fois fait, libre à vous de tester votre création avec le menu en bas à droite, et le partager à votre équipe ou votre client une fois finit. Comme exemple, je vous propose de tester un des prototypes de départ, auquel j'ai ajoute une simple page en quelques clics.

Il vous sera même possible d'autoriser les commentaires sur les pages, pour que vos clients puissent donner vos avis page par page.

D'un point de vue "manque", je listerais tout de même qu'il est impossible d'ajouter un petit texte d'explication à cote des différentes pages, pour mettre en avant les fonctionnalités et les points importants des maquettes. Ce point reste tout de même négligeable, et peut-être remplace par le système de commentaires.