Les Ateliers 
Nous soutenir
Présentation
La diversification des canaux de communication oblige aujourd'hui les graphistes traditionnels à devenir polyvalents. Ils doivent ainsi pouvoir proposer à leurs clients la réalisation de projets Print, mais également à minima la conception de projets Web. À ce titre, le designer d'interface utilisateur sera en capacité de concevoir des contenus digitaux, mais également des interfaces web.
Ce cursus de formation constituant le Bloc 1 "Élaborer le design graphique d'un outil de communication numérique" du Titre professionnel designer web, il peut faire l'objet d'un Certificat de Compétences Professionnelles (CCP) à travers le passage d'une session de validation sous forme d'un examen écrit et oral.
Retrouvez plus d’informations sur le métier et les compétences associées
Contenu de la formation
Ce que vous apprendrez
- Identifier les principes de navigation web sur desktop / supports mobiles tactiles et les contraintes d’interaction relatives aux techniques de développement
- Concevoir un site web (arborescence, contenu (assets), charte graphique)
- Réaliser un zoning, wireframes, maquettes et prototypes interactifs
- Intégrer en HTML/CSS les éléments graphiques au sein d'une page web
- Animer des éléments simples au sein d'une interface web (bannière, diaporama...)
Pré-requis
Maîtrise de l'outil informatique et bonne connaissance de la navigation web.
Pratique solide des logiciels graphiques Adobe Photoshop ou Illustrator.
Programme
Ce module peut également être suivi dans le cadre des formations :
Sélection
La sélection des candidats pourra être effectuée lors d'un entretien préalable.
Evaluation
Évaluation par l'intervenant des travaux ou exercices effectués tout au long de la formation.
Ce cursus de formation constituant le Bloc 1 du Titre professionnelle designer web, il peut faire l'objet d'un Certificat de Compétences Professionnelles (CCP) à travers le passage d'une session de validation sous forme d'un examen écrit et oral.
- 1 poste informatique par personne. Selon la nature du stage, l'ensemble des stagiaires sera sur Mac OS X ou sur Windows, de façon non optionnelle
- Navigateurs Firefox ou Chrome ou Safari
- Adobe CC
- Logiciel client FTP
- Éditeur de texte/code
Cette formation comprend 6 modules
-
Fondamentaux du Web
1 jour
- Historique d'Internet et du Web
- Notions fondamentales : définition Internet et Web, relation client/serveur
- Socles techniques d'Internet et du Web (protocoles, langages, CMS, BDD, etc.)
- Tendances majeures (web 2.0/3.0, responsive, interactivité/animation, onepage/flat design, images/vidéos/sons, webdoc/transmédia, datavisualisation, UX Design, motion design, etc)
- Différents métiers de l'Internet
-
Conception et création graphique pour le web
5 jours
- Processus de conception digital/web
- Rôle du designer graphique
- Cadrage de la demande
- Cahier des charges et brief créatif
- Outils de hiérarchisation de contenu
- Arborescence d'un site web
- Environnement multi-écrans (desktop, tablette, mobile)
- Zoning et wireframes
- Création d'un univers graphique sur mesure
- Maquette ou Style Guide
- Mini-atelier (analyse de l'existant, optimisation de l'arborescence, création de wireframes)
-
UI - Conception d'interface interactive
2 jours
- Structuration et architecture de l'information simplifiée
- Techniques de production pour desktop et supports mobiles
- Critères ergonomiques relatifs au web et aux supports mobiles
- Chartes d'interface (guidelines vs design graphique libre)
- Principes de navigation et d'interaction sur tablette et mobile
- Principes de navigation sur desktop
- Prototypage
-
Maquette et prototypage avec Sketch
2 jours
- Présentation de l'interface (menus, outils, artboards, …)
- Réalisation de la maquette graphique avec Sketch (modèles de pages, formats desktop/tablettes/smartphone, repères/grilles, images, styles guide : fond, couleur, typo, éléments récurrents du design, …)
- Utilisation des calques, symboles, comportements responsives des symboles, styles, masques, tranches, grilles, repères
- Préparation du découpage de la maquette (header, footer, corps, menu, zones d'interaction, icones)
- Préparation et optimisation des images et symboles (résolution, taille, formats de fichier : png, svg, jpg, couleurs, cadrage, sprite, etc.)
- Rangement, gestion des symboles, classement, dénomination et exportation de ses éléments
-
HTML et CSS - Initiation
3 jours
Fonctionnement d'un site web et rendu navigateur
Création d'une page web en HTML
- Bases du langage et syntaxe HTML
- Structure d'une page
- Insertion d'images, utilisation des listes ordonnées ou à puces
- Liaison des pages entre elles
- Insertion du son et de la vidéo en HTML
Mise en forme du site web en CSS
- Création et liaison d'un fichier CSS à une page web
- Architecture d'un fichier CSS
- Sélecteurs de base
- Modification des styles de texte, d'arrière-plan, mise en forme des blocs, etc.
Utilisation de l'inspecteur web
Voir le module -
Animate CC
3 jours
Introduction
- Présentation des différents types d’usages
- Présentation de la méthode de production avec Animate CC
- Prise en main de l’interface
- Création et configuration de sa première animation
- Réglage des paramètres de publication
Gestion des assets d’une animation
- Notions élémentaires relatives à une forme
- Création des formes à l’aide des outils de dessin
- Compréhension et manipulation de l’outil Épaisseur
- Compréhension et manipulation de l’outil Transformation et de ses options
- Compréhension et manipulation de l’outil Segment
- Importation et gestion d'une image sur la scène
- Placement et gestion d'un texte sur la scène
Notions fondamentales
- Créer un symbole
- Comprendre les différents types de symboles
- Personnaliser un symbole de type bouton
- Imbriquer des symboles
- Réaliser une interpolation de mouvement
- Réaliser une interpolation de forme
- Ajouter une présélection de mouvement
- Ajouter un masque à une animation
- Associer un guide de mouvement à une animation
- Exporter une animation
Interactivité dans une animation
- Naviguer dans une animation
- Contrôler le scénario d’un clip
- Contrôler les propriétés d’une occurrence
Intervenants
En pratique
La sélection des candidats pourra être effectuée lors d'un entretien préalable.
Prochaines sessions
-
Ajouter à mon agenda
Du 10 septembre au 1 octobre 2021
Horaires de la formation
8h/14h ou 14h/20h (fixé par Gobelins).
Contact
Vous souhaitez en savoir plus sur la formation ?
Formations sur mesure
Vous souhaitez adapter cette formation pour vos salariés, votre entreprise?
