La formation UX/UI web designer adaptée à l’apprentissage à distance

par Grégory Fichère le 15 décembre 2020

L’année 2020 n’a épargné personne. Mais cette période de confinement et de restrictions multiples nous aura au moins permis de faire évoluer nos pratiques, d’adapter notre offre de formation et d’explorer des solutions afin de continuer à remplir nos missions. La formation UX/UI web designer en est un bon exemple.

Nos formations web ont un avantage en cette période troublée : elles ne nécessitent pas beaucoup de ressources. Un ordinateur pas trop ancien, quelques logiciels pour la plupart gratuits, Chrome, Firefox, Opera, Edge ou Safari, et c’est parti. Et comme le Cepegra ne pouvait accueillir son nombre habituel de stagiaires tout en préservant la sécurité de chacun, le plus logique était de privilégier l’apprentissage à distance pour les formations « métier » liées à ce domaine.

Avec un groupe déjà largement constitué avant le premier confinement de mars, il n’a pas été trop difficile de lancer la formation de UX/UI web designer. Il y a eu malgré tout quelques semaines de mise en attente et d’adaptation avant la reprise complète des cours mais le tout, cette fois, à distance.

Par soucis d’équité, nous avons adapté les horaires pour que les candidats en charge d’enfants puissent organiser leur apprentissage sans gêne mais surtout sans perturbation. L’autre difficulté majeure a bien entendu été de préserver une qualité de communication décente entre formateurs et stagiaires.

Objectifs de la formation UX/UI web designer

Avant de parler des outils choisis pour assurer la formation à distance, voici en deux mots les objectifs de cette formation. Elle se destine principalement à ceux qui souhaitent concevoir l’environnement graphique d’un produit digital (site, module, application…) avec un focus particulier sur l’utilisateur et sa manière d’appréhender les contenus.

La formation ne va pas aussi loin que notre spécialisation UX mais permet d’aborder ses principaux fondements tout en se concentrant sur les aspects visuels, graphiques et typographiques. Elle permet aussi de saisir la notion de « viewport » pour les différents périphériques qui mettent en scène les vues principales des interfaces selon les multiples point de ruptures.

Nous axons cette formation sur le « content » et le « mobile first », qui président aux choix d’organisation des contenus pour la création des prototypes. Et au final, pour que les apprenants puissent comprendre le fonctionnement technique de leurs créations, le parcours comporte deux modules d’intégration (HTML et CSS, JavaScript) et un module d’exercices intégrés destiné à la mise en pratique des acquis des différents cours.

Stay Safe Stay Home

Dans une formation comme celle-ci, l’utilisation de solutions d’échange et de travail collaboratif n’avait heureusement rien de nouveau. La plateforme Slack,
qui a définitivement remplacé Facebook pour notre communication avec les stagiaires, faisait déjà partie de notre quotidien. L’outil centralise toutes les interactions via des canaux distincts, un par cours ou par intervenant. C’est parfait pour retrouver le fil d’une discussion ou se rappeler les liens et contenus qu’on a déjà partagés. C’est aussi super-pratique pour les captures d’écran clés ou pour échanger sur une réalisation.

Pour les cours proprement dits, nous avions testé de nombreux outils comme Skype, Discord, Jitsi, Teams ou Google Meet. Nous avons privilégié Zoom qui répondait mieux à nos besoins de bande passante, d’absence de blocage ou de moindre sollicitation du matériel chez nos stagiaires. Si son ergonomie est vraiment médiocre (disparition des outils transactionnels, options cachées dans une interface obscure), son client est léger et moins exigeant que d’autres pour l’ordinateur. Pour répondre à des problèmes de sécurité, il est malheureusement devenu plus gourmand ces derniers mois.

Formation à distance Web Interface au Cepegra via Zoom
Pour la théorie en mode verbale, on a privilégié Zoom qui répondait aux problématiques de bande passante, de blocage ou de surchauffe chez nos stagiaires.

 

De la même manière, Google Drive est omniprésent dans nos formations depuis déjà 8 ans. Tout le monde peut bénéficier d’un compte gratuit jusqu’à 15 Go et la solution intègre une suite de type « Office » qui n’a rien à envier au concurrent Microsoft pour sa simplicité d’utilisation et son efficacité pour les échanges.

Si certains outils de création deviennent inutilisables dans le contexte actuel, faute d’une licence installée sur les postes personnels des stagiaires, d’autres peuvent prendre le relais, comme Figma. Il y a aussi d’autres excellents produits comme InVision Studio qui s’intègre très bien dans le workflow InVision.

Dans beaucoup de cas, l’application utilisée est laissée à l’appréciation du stagiaire, qui fera son choix en fonction de ce dont il dispose et de ses habitudes. Le temps de formation est ainsi mis à profit pour découvrir et expérimenter l’une ou l’autre solution. Une approche que beaucoup de stagiaires retrouveront sans doute dans leur futur boulot…

Formation Web Interface revisitée de multiples outils ont permis l'apprentissage à distance

Pour l’apprentissage HTML et CSS, Codepen a pris une place encore plus grande dans nos pratiques en cette année 2020. Ce « bac à sable » pour codeur est né en 2012 et ses améliorations constantes autant que sa facilité d’utilisation l’ont vite catapulté au statut d’incontournable/indispensable du web.

Très simple malgré quelques lacunes ergonomiques pour un usage quotidien, il permet d’écrire et de tester du code en visualisant instantanément son « rendu ». Chaque apprenant peut y créer ses propres extraits de codes HTML/CSS/JS, sans aucune structure de page, et y voir le résultat en direct dans son navigateur.

Les comptes gratuits sont publics mais il est possible de disposer de comptes payants en tant que professeur, équipe ou professionnel. Dans tous les cas, le partage et le travail collaboratif sont possibles. De nombreuses alternatives existent (JsFiddle, Dabblet, JsBin, etc.), mais aucune ne répondait aussi bien à nos besoins ou ne bénéficiait d’une communauté aussi large…

Comme expliqué plus haut, la réalisation d’un site ou d’une application passe par de nombreuses phases de réflexion puis de conception. Si la formation UX/UI web designer se concentre sur l’habillage graphique d’un site et de son environnement visuel, elle initie également à l’analyse de l’expérience utilisateur qui débouche sur un wireframe puis un prototype, avant de laisser place à un travail plus graphique dédié à la mise en page et à la microtypographie. Ces étapes sont une dernière fois mises en pratique lors d’un atelier final qui se termine par une présentation organisée, Covid oblige, sous forme de conférence en ligne.

Vous souhaitez connaître le programme complet de la formation et peut-être vous inscrire à la prochaine séance d’info ? Rendez-vous à l’adresse suivante :

https://formation-cepegra.be/formation/ux-ui-web-designer/

Commentaires fermés sur La formation UX/UI web designer adaptée à l’apprentissage à distance

Partager >