Après une demi-journée de rentrée, nos étudiants en première année de BTS SIO et de bachelor design graphique et communication digitale ont pu directement s’immerger directement dans la création numérique au cours d’une première semaine de workshop, du 5 au 9 octobre 2020.
Premier regard « dans le code »
Cette semaine d’immersion a démarré par un premier cours sur le fonctionnement d’un site web. L’occasion d’aborder les principes d’hébergement, de serveur ou de langage. Ainsi, les étudiants ont commencé à acquérir un langage commun, celui du web. Ils démarrent leur chemin pour passer du statut de simple utilisateur du web à celui de créateur d’interface.
À la suite de cette initiation, un premier exercice a été proposé aux étudiants : modifier les éléments d’un site en cache par la console de leur navigateur web. Par ces manipulations simples, les étudiants découvrent comment se structurent une page HTML et une feuille de style CSS. Ils ont modifié la couleur d’un texte, en remplaçant une image par une autre ou en faisant pointer un lien vers une autre page de destination. La modification d’éléments en cache permet de comprendre comment le langage influence l’affichage des éléments sans avoir à construire un site de A à Z et sans risquer d’endommager le site. Pour finir cette première journée les étudiants ont chacun remis une capture d’écran de la page web qu’il ou elle a modifié.
Découvrir les bases d’Adobe Photoshop
Le second jour a permis de découvrir Photoshop CC. Si certains étudiants ont déjà utilisé ce logiciel, la majorité d’entre eux ne l’a jamais eu en mains. La présentation de cet outil indispensable est l’occasion, pour Olivier Krakus, responsable pédagogique de l’école, d’évoquer en ouverture des notions comme les différents formats de documents ou encore le choix des différentes résolutions pour un projet.
| Lexique PPI (Pixel Per Inch) : unité définissant la résolution d’un document numérique. Plus une image aura de PPI plus il sera possible de conserver des détails et de zoomer à l’intérieur. Mais augmenter cette valeur augmentera le « poids » du visuel et donc son temps de chargement s’il s’agit d’un élément présent sur le web. |
Avant de pouvoir commencer à créer, il est important de découvrir les éléments clés de l’espace de travail Photoshop. Les calques sont la première mécanique à comprendre pour tout débutant, en association avec les masques de fusion. Tout graphiste doit connaître les outils mis à sa disposition pour créer.
Pour cela, les étudiants en BTS SIO et en bachelor design graphique et communication digitale ont réalisé un premier exercice : la fusion simple de deux images, un ciel et un paysage. Ce travail a nécessité l’utilisation des outils de sélection, de masques de fusion ainsi que du dégradé et du pinceau. L’objectif était de fusionner les deux images en atténuant, voire en faisant disparaitre, la séparation entre les éléments source. Pour parvenir à un résultat satisfaisant les étudiants ont notamment appris à régler la dureté et le diamètre de l’outil pinceau pour créer une fusion fluide entre les calques. La logique induite par les masques de fusion est nécessaire à de nombreuses manipulations et doit être une base rapidement comprise par les futurs créatifs.
Enfin, cette demi-journée a permis de prendre en main rapidement l’outil Correcteur, utilisé notamment dans la retouche de portraits ainsi que le tampon de duplication, très employé dans les photo-montages.
Écrire ses premières lignes en HTML/CSS
Le second atelier de cette semaine d’immersion a été consacré aux langages HTML et CSS. Après avoir appliqué des modifications simples à des sites lors du premier jour, les étudiants ont commencé à écrire leurs premières lignes, accompagnés par Vincent Mary, consultant WordPress et intervenant chez EDTA Sornas.
La logique des balises HTML avec une balise d’ouverture et une de fermeture ainsi que le principe « première ouverte, dernière fermée » a été rapidement assimilée à travers l’usage des éléments de base : HEAD, BODY, META, P, H1.
Après avoir abordé la structure simple d’une page HTML. La suite de l’atelier s’est penché sur la création d’une feuille de style CSS afin d’habiller la structure. Avec l’utilisation d’attributs comme font-size ou font-family, une première mise en forme a ainsi été appliquée aux textes de la page HTML.
Appréhender la création de site web peut également se faire par la découverte des CMS (Content Management System),ces outils permettant de créer un site sans avoir à connaître les langages dédiés. Ils permettent ensuite, par un backoffice, de gérer facilement la publication et la mise à jour des différents contenus du site, par un rédacteur web par exemple. La majorité des sites sont aujourd’hui gérés par un CMS et il est donc indispensable de sensibiliser les étudiants au plus courant d’entre eux : WordPress.
Durant la matinée du mercredi, chaque étudiant a pu découvrir l’interface d’administration de WordPress, les outils de personnalisation à travers les thèmes et les extensions ainsi que les menus de gestion des contenus pour la création de pages ou d’articles de blog.
Si ce CMS connait autant de succès, c’est parce qu’il est facile à prendre en main de manière basique. Mais, il permet également de créer des sites complexes en associant des extensions, du webdesign et du développement web plus poussé. Prendre en main cet outil, c’est donc se doter d’une base facile à appréhender mais pouvant être optimisé et étoffé tout au long de sa formation.
Réaliser un prototype d’application mobile avec Adobe XD
La deuxième moitié de la semaine d’intégration a été dédié à un projet plus conséquent pour les étudiants : créer un prototype d’application mobile avec le logiciel Adobe XD.
Ce logiciel très prisé des webdesigners et UX designers permet de créer rapidement des prototypes interactifs pour concevoir des parcours utilisateur et définir l’identité visuelle d’une future application iOS ou Android. Que l’on soit freelance, salarié en startup ou collaborateur dans une grande entreprise, Adobe XD est un excellent compagnon pour présenter ses idées et convaincre de la pertinence d’un projet.
Après une demi-journée d’initiation à l’outil, avec la présentation de la création d’une navigation entre plusieurs écrans et de différentes interactions et animations, les étudiants ont eu pour mission de définir leur projet d’application. Afin de mener à bien leur mission, chaque groupe est allé analyser les applications existantes similaires à leur idée pour en extraire les idées majeures et développer de nouvelles fonctionnalités pour que leur réalisation puisse se démarquer de la concurrence potentielle. La réalisation d’un benchmark (ou analyse concurrentielle) est une démarche qui doit devenir un réflex pour tous les étudiants.
Suite à cela, chaque groupe a pu, pendant une journée complète, concevoir et designer son prototype en appliquant certaines connaissances acquises lors de cette première semaine. En plus de leur application, les étudiants ont également préparé un rapide pitch dont la soutenance venait conclure la semaine.
Écoute de musique en ligne, personnalisation de sneakers, gaming, mangas, voyage… Autant de sujets qui ont inspiré les étudiants afin de présenter leur vision d’une application répondant aux besoins d’utilisateurs ciblés. Lors des soutenances, les échanges avec le jury ont permis aux étudiants de mettre en avant les acquis de cette semaine d’intégration. Ils ont également échangé pour commencer d’ores et déjà à identifier des axes d’amélioration et des pistes de travail pour l’année à venir.
Cette semaine intensive a donc été le moyen pour les étudiants d’entrer rapidement dans le cœur de leur formation. Ces projets leur ont permis de découvrir rapidement des compétences clés qu’ils développeront tout au long de leurs années au sein d’EDTA Sornas.
