Outils : Graphisme, Ui, Ux, Motion 2D, Vidéo & Photo

Le Bar à Formations - 25.06.2018

  • Twitter - Bar à Formations
  • Instagram - Bar à Formations
  • Linkedin - Bar à Formations
  • Youtube - Bar à Formations

Outils design ux ui motion nantes formations

“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 :

  1. Le Design Graphique
  2. Le Design Web (Ui/Ux)
  3. Le Prototypage (& outils Handoff)
  4. L’animation Web (& Motion)
  5. Le Montage / Étalonnage vidéo
  6. L’édition Photo

I. Le Design Graphique

Exemple : la création d’un background complexe, type photomontage, pour un site web ou une illustration.

outils-design-graphique-nantes

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
logo-photoshop Adobe Photoshop Windows / Mac 35.99€
(mensuel)
check check check check
Affinity photo Nantes Affinity Photo Windows / Mac 54,99 €
(à vie)
check check check
Illustrator formation Nantes Adobe Illustrator Windows / Mac 35.99€
(mensuel)
check check
Affinity designer nantes Affinity Designer Windows / Mac 54,99 €
(à vie)
check check check
gravit-designer-formation-nantes Gravit Designer Linux / Windows / Mac / Web Gratuit check check check check

II. Le Design Web (Ui/Ux)

Exemple : la création d’un design web utilisant le background complexe créé précédemment.

outils-webdesign-nantes

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
logo-photoshop Adobe Photoshop Windows / Mac 35.99€
(mensuel)
check check check
Illustrator formation Nantes Adobe Illustrator Windows / Mac 35.99€
(mensuel)
check check
Adobe Xd Formation Nantes Adobe Xd Windows / Mac Gratuit check check
sketch-app-nantes Sketch  Mac 99$
(annuel)
check check check check
Affinity designer nantes Affinity Designer Windows / Mac 54,99 €
(à vie)
check check check check check
Affinity photo Nantes Affinity Photo Windows / Mac 54,99 €
(à vie)
check check check check
gravit-designer-formation-nantes Gravit Designer Linux / Windows / Mac / Web Gratuit check check check check check
invision-studio-formation-nantes Invision Studio Windows / Mac 15$ – 99$ check check check check
figma Figma Windows / Mac / Web 12$
(mensuel)
check check check

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 !

outils-prototypes-nantes

Illustration : Invision

Outils Prototypage
Nom OS Tarif Import Design Transitions Micro Intéractions Partage
balsamiq Balsamiq Web Gratuit / 89$
(à vie)
check Web / PDF
Adobe Xd Formation Nantes Adobe Xd Windows / Mac Gratuit check check Web
sketch-app-nantes Sketch Mac 99$
(annuel)
check check Web
figma Figma Windows / Mac / Web  Gratuit / 12$
(mensuel)
Sketch check check check Web / Mac / Windows
invision Invision Web Gratuit / 15$
(mensuel)
Sketch / Photoshop check Web / PDF / HTML
invision Invision Studio Windows / Mac 15$ – 99$
(mensuel)
check check check Web / PDF / HTML
proto.io Proto.io Web Gratuit / 24$
(mensuel)
Sketch / Photoshop check check check Web / HTML / IOS / Android
webflow Webflow Web Gratuit / 16$
(mensuel)
check check Web / HTML
mockplus Mockplus Windows / Mac Gratuit / 29$
(mensuel)
Sketch check check check Web / HTML / IOS / Android
marvel Marvel Web / Mac / Android Gratuit / 12$
(mensuel)
Sketch check check 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.

outils-handoff-nantes

Illustration : Avocode

Outils Handoff
Nom OS Tarif Import Specs Export Eléments Arbo. Calques Repères
avocode Avocode Windows / Mac / Linux 7$
(mensuel)
Sketch check check check check
zeplin Zeplin Windows / Mac Gratuit / 15$
(mensuel)
Sketch / Photoshop check check check
invision Invision Web Gratuit / 15$
(mensuel)
Sketch check check check
invision Invision Studio Windows / Mac 15$ – 99$
(mensuel)
Design Intégré check check check
sympli Sympli Web Gratuit / 15$
(mensuel)
Sketch / Photoshop check check check check

 

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.

outils-motion-nantes

Illustration : Jonas Mosesson

Outils Animation Motion Web
Nom OS Tarif Type HTML 5 / CSS / Jquery SVG  / Canvas Gif Animé Vidéo
logo-photoshop Adobe Photoshop Windows / Mac 35.99€
(mensuel)
Logiciel check
after effects formation nantes Adobe After Effects Windows / Mac 35.99€
(mensuel)
Logiciel check
fusion-9-formation-nantes Fusion 9 – Blackmagic Windows / Mac / Linux Gratuit / 259€ (version studio) Logiciel check
logo-adobe-animate-nantes Adobe Animate Windows / Mac 35.99€
(mensuel)
Logiciel check check check
Body Movin Windows / Mac Gratuit Plugin After Effects check check
Google Webdesigner Windows / Mac / Linux Gratuit Logiciel – Béta check check
Green Socks Windows / Mac Gratuit Librairie JS check check

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 :

Davinci Resolve Formation Nantes Montage

Illustration : Davinci

 

Outils Post Production : montage / étalonnage / motion vidéo
Nom OS Tarif Montage Étalonnage Effets spéciaux Motion 2D Intégration 3D
logo-final-cut Final Cut Mac 329,99 € check check
Adobe Premiere Formation Nantes Adobe Premiere pro Windows / Mac 35.99€
(mensuel)
check check
after effects formation nantes Adobe After Effects Windows / Mac 35.99€
(mensuel)
check(courte vidéo) check check check check
Davinci resolve formation nantes Davinci Resolve – Blackmagic Windows / Mac / Linux Gratuit / 259€ (version studio) check check
fusion-9-formation-nantes Fusion 9 – Blackmagic Windows / Mac / Linux Gratuit / 259€ (version studio) check(courte vidéo) check check check check

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 :

edition-photo-formation-nantes-montage

Illustration : Photoshop

Outils éditions Photos
Nom OS Tarif Edition Photo par Photo Catalogue Edition & Export Multi-Photos Retouche Photo
lightroom-logo Adobe Lightroom Windows / Mac 12€
(mensuel)
check check check
logo-photoshop Adobe Photoshop Windows / Mac 35.99€
(mensuel)
check check
Affinity photo Nantes Affinity Photo Windows / Mac 54,99 €
(à vie)
check check
luminar-logo Luminar Windows / Mac 69 $
(à vie)
check 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 référencé au DATADOCK.
Nous proposons 4 Mondes de formation : Web & Co - Design & Photo - Vidéo & Motion - Team Spirit.