« Hey tu bosses avec quoi ? » – Facile de répondre à cette question il y a quelques années vu les logiciels et outils qui se comptaient sur les doigts de la main à l’époque (du moins pour ceux qui étaient réellement utilisés en production). Aujourd’hui, et c’est une bonne nouvelle, des outils extrêmement sérieux et totalement viables sont disponibles et ils sont bien nombreux ! Trop peut être ? Il n’y a jamais assez de choix, tant que chacun puisse trouver chaussure à son pied et collaborer facilement ! Voici un listing, forcément incomplet, mais qui donne déjà un choix assez efficace et varié.
Plus le temps passe, plus il est conseillé de « s’intéresser » aux domaines complémentaires au sien. Par exemple un développeur frontend doit garder un œil sur les dernières tendances graphiques pour anticiper les futures demandes et l’inverse est totalement vrai ! Un graphiste web qui garde un œil sur la partie technique saura proposer des design efficaces, bien ficelés sans pour autant brider sa créativité : bien au contraire. Un graphiste ou un développeur pourront utiliser / s’inspirer du travail d’un Motion designer…
Bref le Graphisme, le Web et le Motion sont aujourd’hui diablement complémentaires et il sera rare de ne pas y goûter un jour ou l’autre. Cela paraît donc une bonne idée de lister les principaux logiciels dans chaque domaine. Puis.. c’est également une question d’ouverture d’esprit et de respect envers d’autres collaborateurs : cela ne peut être que bénéfique !
Les principaux univers
Tous les chemins mènent à Rome et certains logiciels permettent de tout faire (mais en étant moins efficaces sur certaines tâches). Nous allons donc tenter, malgré tout, de trier ces logiciels dans différents univers :
- Le Design Graphique
- Le Design Web (Ui/Ux)
- Le Prototypage (& outils Handoff)
- L’animation Web (& Motion)
- Le Montage / Étalonnage vidéo
- L’édition Photo
I. Le Design Graphique
Exemple : la création d’un background complexe, type photomontage, pour un site web ou une illustration.
Illustration : Sergio Edwards
Un designer utilisera les outils suivants, dédiés à la création de graphismes, d’illustrations, de photomontages ou tout autre projet de création d’œuvre artistique. Ces mêmes œuvres seront utilisées dans un contexte plus global comme : un site web, une application, une animation, une charte graphique etc…
Outils Design Graphique
| Nom | OS | Tarif | Advanced Image Editing | Brush Pixel | Brush Vectoriel | Outil Animation | CMJN / Print | |
|---|---|---|---|---|---|---|---|---|
 |
Adobe Photoshop | Windows / Mac | 35.99€ (mensuel) |
 |
|
– | |
|
 |
Affinity Photo | Windows / Mac | 54,99 € (à vie) |
|
|
– | – | |
 |
Adobe Illustrator | Windows / Mac | 35.99€ (mensuel) |
– | – | |
– | |
 |
Affinity Designer | Windows / Mac | 54,99 € (à vie) |
– | |
|
– | |
 |
Gravit Designer | Linux / Windows / Mac / Web | Gratuit | – | |
|
|
|
II. Le Design Web (Ui/Ux)
Exemple : la création d’un design web utilisant le background complexe créé précédemment.
Illustration : Affinity Designer
Il y a quelques temps : un Webdesigner s’occupait de créer le design d’un site Web de A à Z. Actuellement, vu la spécialisation requise pour certains projets et la facilité du flat Design, des métiers ont fait leur apparition avec une mission plus ciblée comme par exemple l’Ux designer & l’Ui designer. Pour résumer, l’Ui concerne la partie émergée de l’IceBerg avec la partie graphique et l’Ux représente tout le travail en amont (mettre au centre l’expérience utilisateur). Un Webdesigner regroupe donc ces 2 facettes.
Un Ui designer est spécialisé dans la mise en forme graphique pour le web et n’est pas (forcément) un graphiste qui réalise des œuvres « complexes » comme un Designer Graphique vu plus haut. Un Ui designer peut donc avoir besoin d’outils dédiés au côté graphique d’une interface et non à la création artistique dans sa globalité.
Outils Design Web (Ui/Ux)
| Nom | OS | Tarif | Symboles | Basic Image Editing | Realism Design | Flat Design | Artboards Responsive | |
|---|---|---|---|---|---|---|---|---|
|
Adobe Photoshop | Windows / Mac | 35.99€ (mensuel) |
– | |
|
|
– |
|
Adobe Illustrator | Windows / Mac | 35.99€ (mensuel) |
|
– | – | |
– |
 |
Adobe Xd | Windows / Mac | Gratuit | |
– | – | |
– |
 |
Sketch | Mac | 99$ (annuel) |
|
|
– | |
|
|
Affinity Designer | Windows / Mac | 54,99 € (à vie) |
|
|
|
|
|
|
Affinity Photo | Windows / Mac | 54,99 € (à vie) |
|
|
|
|
– |
|
Gravit Designer | Linux / Windows / Mac / Web | Gratuit | |
|
|
|
|
 |
Invision Studio | Windows / Mac | 15$ – 99$ | |
|
– | |
|
 |
Figma | Windows / Mac / Web | 12$ (mensuel) |
|
– | – | |
|
Remarque : Les logiciels tournés vers les Interfaces Web ou App (comme Sketch ou Adobe Xd), son parfaitement adaptés pour la création d’un “Flat Design” (formes épurées & couleurs aplaties). Par contre ils ne le sont pas vraiment si vous voulez ajouter du “Realism Design” (appelé aussi “Fat Design” ou “skeuomorphisme”). Ils doivent coopérer avec des outils dédiés.
Les tendances graphiques changent perpétuellement et personne ne sait ce que l’avenir nous réserve : être bridé à créer un seul et unique style graphique n’a pas d’avenir. Doucement (pour ne pas dire Aujourd’hui) Le Flat design arrive à saturation chez de nombreux graphistes, d’où l’importance de disposer de plusieurs outils complémentaires pour évoluer sereinement.
III. Le Prototypage (& outils Handoff)
Exemple : partager le design (ou le storyboard) fonctionnel à son équipe (ou à son client) pour faciliter les retours et les échanges.
Prototypage : 1) on importe une maquette réalisée sur un outil tiers (comme Photoshop) ou alors elle est directement créée dans l’outil – 2) on lie telle partie de la maquette vers une action précise – 3) on envoie le lien de visualisation à travers le navigateur web et il est possible de visualiser le projet comme si il était déjà codé : parfait pour les commentaires et un suivi de projet optimal !
Illustration : Invision
Outils Prototypage
| Nom | OS | Tarif | Import | Design | Transitions | Micro Intéractions | Partage | |
|---|---|---|---|---|---|---|---|---|
 |
Balsamiq | Web | Gratuit / 89$ (à vie) |
– | |
– | – | Web / PDF |
|
Adobe Xd | Windows / Mac | Gratuit | – | |
|
– | Web |
|
Sketch | Mac | 99$ (annuel) |
– | |
|
– | Web |
|
Figma | Windows / Mac / Web | Gratuit / 12$ (mensuel) |
Sketch | |
|
|
Web / Mac / Windows |
 |
Invision | Web | Gratuit / 15$ (mensuel) |
Sketch / Photoshop | |
– | – | Web / PDF / HTML |
|
Invision Studio | Windows / Mac | 15$ – 99$ (mensuel) |
– | |
|
|
Web / PDF / HTML |
 |
Proto.io | Web | Gratuit / 24$ (mensuel) |
Sketch / Photoshop | |
|
|
Web / HTML / IOS / Android |
 |
Webflow | Web | Gratuit / 16$ (mensuel) |
– | |
– | |
Web / HTML |
 |
Mockplus | Windows / Mac | Gratuit / 29$ (mensuel) |
Sketch | |
|
|
Web / HTML / IOS / Android |
 |
Marvel | Web / Mac / Android | Gratuit / 12$ (mensuel) |
Sketch | |
|
– | Web / PDF / HTML / IOS / Android / Apple Watch |
Handoff : c’est le futur du prototypage et du workflow d’un Ui /Ux designer. Comme vous le remarquerez : il est possible de designer et de prototyper une interface dans un même logiciel. Mais le futur réside dans le « Handoff » : l’étape ultime où il faut partager les fichiers sources de la maquette pour le développement. Le but est de réaliser le plus efficacement possible l’intégration web en évitant de longs mails d’échange, les écritures de toutes les recommandations (specs), d’exporter chaque image dans ses différentes tailles, les codes couleurs, les polices etc…. Ces outils permettent facilement d’avoir accès à toutes ces informations et c’est un confort absolument nécessaire.
Illustration : Avocode
Outils Handoff
| Nom | OS | Tarif | Import | Specs | Export Eléments | Arbo. Calques | Repères | |
|---|---|---|---|---|---|---|---|---|
 |
Avocode | Windows / Mac / Linux | 7$ (mensuel) |
Sketch | |
|
|
|
 |
Zeplin | Windows / Mac | Gratuit / 15$ (mensuel) |
Sketch / Photoshop | |
|
– | |
|
Invision | Web | Gratuit / 15$ (mensuel) |
Sketch | |
|
|
– |
|
Invision Studio | Windows / Mac | 15$ – 99$ (mensuel) |
Design Intégré | |
|
|
– |
 |
Sympli | Web | Gratuit / 15$ (mensuel) |
Sketch / Photoshop | |
|
|
|
Remarque : Certains de ces outils (comme Zeplin) ne fonctionnent qu’avec des designs créés avec d’autres logiciels comme Sketch, Photoshop ou encore illustrator. La question que l’on peut se poser : si Adobe Xd, Photosohop ou Sketch implémentent leur propre workflow « handoff » : qu’adviendra t-il de ces outils qui ont ouvert la voie en simplifiant la vie des Ui/Ux designers ?
IV. L’animation Web (& Motion)
Le monde de l’animation dans le web est vaste, relativement jeune et en pleine évolution. Il faut distinguer les animations créées avec des technologies ouvertes (CSS, Javascript, SVG, HTML5 …) et celles créées par des logiciels qui exportent des animations au format vidéo facilement intégrable et gérable avec la balise vidéo en HTML5 par exemple.
Illustration : Jonas Mosesson
Outils Animation Motion Web
| Nom | OS | Tarif | Type | HTML 5 / CSS / Jquery | SVG / Canvas | Gif Animé | Vidéo | |
|---|---|---|---|---|---|---|---|---|
|
Adobe Photoshop | Windows / Mac | 35.99€ (mensuel) |
Logiciel | – | – | |
– |
 |
Adobe After Effects | Windows / Mac | 35.99€ (mensuel) |
Logiciel | – | – | – | |
 |
Fusion 9 – Blackmagic | Windows / Mac / Linux | Gratuit / 259€ (version studio) | Logiciel | – | – | – | |
 |
Adobe Animate | Windows / Mac | 35.99€ (mensuel) |
Logiciel | |
|
|
– |
 |
Body Movin | Windows / Mac | Gratuit | Plugin After Effects | |
|
– | – |
 |
Google Webdesigner | Windows / Mac / Linux | Gratuit | Logiciel – Béta | |
– | |
– |
 |
Green Socks | Windows / Mac | Gratuit | Librairie JS | |
|
– | – |
Un mot sur Adobe : dans une lointaine galaxy « Adobe Flash » tenait le devant de la scène en animation web et des métiers spécifiques reposaient sur lui. Flash a quasiment disparu depuis plusieurs années (heureusement) mais son vide en terme d’animation commence à peine à être comblé. Aujourd’hui renommé « Adobe Animate » il renaît de ses cendres en utilisant des technologies libres et surtout avec son interface d’animation qui était son atout. Un autre logiciel « Edge Animate CC » avait été créé par adobe pour créer des animations HTML5, mais son développement a été abandonné car en doublon avec Adobe Animate.
V. Le montage / étalonnage vidéo
La vidéo est le média qui sera le plus consommé à l’avenir et même aujourd’hui sa place est plus qu’importante. Avoir des demandes dans ce domaine fera parti du quotidien rien que pour l’adapter à un design web (boucle, taille, poids etc…). Voici les principaux logiciels utilisés :
Illustration : Davinci
Outils Post Production : montage / étalonnage / motion vidéo
| Nom | OS | Tarif | Montage | Étalonnage | Effets spéciaux | Motion 2D | Intégration 3D | |
|---|---|---|---|---|---|---|---|---|
 |
Final Cut | Mac | 329,99 € | |
|
– | – | – |
 |
Adobe Premiere pro | Windows / Mac | 35.99€ (mensuel) |
|
|
– | – | – |
|
Adobe After Effects | Windows / Mac | 35.99€ (mensuel) |
(courte vidéo) |
|
|
|
|
 |
Davinci Resolve – Blackmagic | Windows / Mac / Linux | Gratuit / 259€ (version studio) | |
|
– | – | – |
|
Fusion 9 – Blackmagic | Windows / Mac / Linux | Gratuit / 259€ (version studio) | (courte vidéo) |
|
|
|
|
VI. L’édition Photo
L’édition photo répond à des besoins particuliers : sublimer simplement & rapidement une (ou plusieurs) photos et pouvoir l’exporter facilement. Souvent utilisés par des photographes et non des Graphistes (quoique…), ces logiciels doivent être simple d’utilisation, ne pas détruire la photo originale et avoir des choix d’export spécifiques. Voici les principaux logiciels utilisés :
Illustration : Photoshop
Outils éditions Photos
| Nom | OS | Tarif | Edition Photo par Photo | Catalogue | Edition & Export Multi-Photos | Retouche Photo | |
|---|---|---|---|---|---|---|---|
 |
Adobe Lightroom | Windows / Mac | 12€ (mensuel) |
|
|
|
– |
|
Adobe Photoshop | Windows / Mac | 35.99€ (mensuel) |
|
– | – | |
|
Affinity Photo | Windows / Mac | 54,99 € (à vie) |
|
– | – | |
 |
Luminar | Windows / Mac | 69 $ (à vie) |
|
en 2018 ? | – | – |
Sources : skmg-studio.com, uxtools.co, adobe.com, medium.com, behance.net (Sergio Edwards, Jonas Mosesson)
Le Bar à Formations est un organisme de formation continue en création digitale situé à Nantes et certifié QUALIOPI.
Nous proposons plusieurs mondes de formation : Web & Co - Design & Photo - Vidéo & Motion