• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 26/11/2018

Intégrez l'Atomic Design dans un contexte professionnel

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que vous êtes à l’aise avec les notions de l’Atomic Design, il faut trouver les outils pour le mettre en place dans votre projet. Vous avez utilisé Sketch dans la partie pratique, cependant il y a beaucoup de logiciels qui permettent de créer des interfaces. C’est ce que nous allons explorer dans ce chapitre.

Explorez les outils existants et compatibles

Aujourd’hui, la concurrence est très présente, mais le choix de logiciel ne devrait pas vous bloquer ! Ces options sont toutes très performantes. Voici un schéma qui classe les logiciels de conception d’interface selon leurs fonctionnalités :

Voici une liste des outils les plus connus avec ce qu'ils sont capables de faire. Attention, avec les mises à jour les logiciels ici présent risquent de beaucoup évoluer !
Voici une liste des outils les plus connus avec ce qu'ils sont capables de faire. Attention, avec les mises à jour, les logiciels ici présents vont beaucoup évoluer !

Les différentes catégories sont :

  • Sketching : croquis et dessin style papier ;

  • Wireframe : conception d’interface sans l’aspect visuel/graphique ;

  • Prototype : assembler les interfaces en ajoutant une ou des interactions ;

  • Animation : animer des éléments individuellement ;

  • Partage : partager des informations relatives aux interfaces avec d’autres collaborateurs.

Toutes ces applications se ressemblent beaucoup, et on ne peut pas réellement dire que l'une est meilleure qu’une autre. De plus, que ce soit Sketch, Adobe XD, Figma ou InVision Studio, il ne s’agit pas de simplement choisir un logiciel de conception d’interface, mais plutôt de l'adapter à votre organisation et de celle de votre équipe. Il faut pouvoir les partager avec l’équipe en respectant le contexte dans lequel vous travaillez.

Sketch présente un avantage par rapport à ses concurrents, on peut lui ajouter des plugins. Les plugins sont des logiciels externes créés pour Sketch pour lui ajouter des fonctionnalités. Grâce à cela, Sketch peut être personnalisé et amélioré facilement. Par exemple, vous pouvez faire des animations avec le plugin AnimateMate ou Principle ; ou bien partager vos interfaces avec le plugin Craft qui ajoute également d’autres fonctionnalités...

Dans la partie 1, nous avons utilisé Sketch pour les raisons précédemment citées. Cependant, je vous conseille d’avoir votre propre liste de logiciels favoris que vous pourrez consulter à chaque fois que vous rencontrerez un problème de productivité. Vous trouverez sur ce lien un bon nombre des logiciels très pratiques : DesignsystemRepo.

Adaptez vos outils à votre équipe

Dans cette section, on va regarder les différents cas d’usages que vous pourriez rencontrer. Attention ! Ces descriptions ne sont pas à prendre au pied de la lettre, il faut savoir analyser ce qui est mieux pour vous !

Cas 1 : Vous êtes une équipe constituée uniquement de designers

Cela peut être le cas par exemple dans une agence de design. Des logiciels tels que Plant ou Abstract vous permettront d’avoir un suivi irréprochable de vos designs. Ce sont des logiciels dits de versioning, c’est-à-dire que vous conservez un seul fichier que vous mettez à jour en ligne (version par version) plutôt que de multiplier la sauvegarde de plusieurs fichiers de design...

...C'est pour éviter ce genre de situation !
C'est pour éviter ce genre de situation !

Cas 2 : Vous êtes une équipe constituée uniquement de développeurs

Cela peut être le cas en SSII, dans une mission où vous êtes envoyé chez le client par exemple. Vous vous retrouverez peut-être seul contre tous. Pas de panique. 🙂Pour satisfaire les développeurs, il faut proposer des outils de collaboration qui feront gagner du temps à tout le monde.

Privilégiez les outils qui permettent l’inspection de vos interfaces. Les logiciels comme Zeplin ou InVision analysent et traduisent chacun des éléments que vous avez créés aux développeurs. C’est souvent très apprécié et facilite énormément la communication entre le design et le développement.

Voici une interface à travers Zeplin, le développeur y trouve son bonheur très facilement !
Voici une interface à travers Zeplin, les développeurs y trouvent leur bonheur très facilement !

Ces logiciels permettent de commenter les interfaces et ainsi réduire la multiplication des emails. De plus, ces discussions font participer les développeurs qui peuvent avoir des solutions intéressantes auxquelles vous n’auriez pas pensé !

Cas 3 : Vous êtes dans une grosse structure

Vous n’avez pas beaucoup de choix et devez faire avec ce que l’entreprise utilise (ça peut être leurs propres logiciels). Dans ce cas-là, il est difficile d’être force de proposition. Mais si vous voyez une faille qui correspond à un des deux cas de figure précédents, n’hésitez pas à proposer un logiciel pour fonctionner différemment !

Cas 4 : Vous êtes dans une start-up

La start-up est un des cas les plus complexes car il faut analyser le contexte actuel de la start-up, sa stratégie, ses ressources, etc. Plus vous vous habituerez à de nombreux logiciels, plus vite vous trouverez des solutions dans les start-up. Gardez en tête que l’objectif le plus important d’une start-up est de gagner du temps (et de l’argent) !

Cas 5 : Vous êtes seul(e)

Essayez de prendre en main tous les logiciels (au moins de conception d’interface). C’est un peu comme le débat Apple/Android, l’un n’est pas vraiment meilleur que l’autre, les deux proposent simplement des utilisations très différentes. C’est un peu la même chose aujourd’hui avec les logiciels de conceptions. Une chose est sûre, si vous êtes à l’aise avec tous les logiciels en connaissant leurs atouts mais aussi leurs faiblesses, vous pourrez facilement vous adapter à n’importe quel contexte. Une fois que vous aurez fait le tour, sélectionnez un logiciel favori, et restez à l'affût des nouveautés ! 😉

Bonus - Si vous êtes une équipe de jeunes étudiants

La gratuité est un atout non négligeable ! Vous avez de la chance, Adobe XD offre la possibilité d’utiliser le logiciel gratuitement sous certaines conditions. (Sketch et les autres offrent simplement des périodes d’essai.)

Cependant, la majorité du temps la composition de votre équipe n’est pas aussi simple que ça. Sachez que vos outils peuvent impacter vos processus de travail, c’est pour cela qu’il faut bien les sélectionner. Vous devez convaincre vos équipes d’adopter tel ou tel outil pour éviter que chacun ne choisisse dans son coin, vérifiez que tout le monde est bien d’accord avant de vous lancer !

En résumé

Faisons le point sur ce chapitre :

  • Ayez toujours en tête une liste de logiciels avec lesquels vous vous sentez à l’aise et veillez à faire un tour d’horizon assez souvent.

  • Choisir les bons logiciels dépend de votre contexte professionnel.

  • Soyez autonome sur les outils, n’attendez pas que l’on vous demande d’utiliser tel ou tel logiciel. Soyez curieux et testez-en de nouveaux quand vous avez le temps !

Exemple de certificat de réussite
Exemple de certificat de réussite