Graduate Webdesigner
Objectif de la formation
Développez des compétences en webdesign, indispensables sur le marché du travail !
Associant design graphique et code, expérience utilisateur et communication visuelle, le métier de webdesigner ne connaît pas la crise ! À l’heure de la digitalisation, les besoins sont réels…
Devenez expert en graphisme multimédia pour proposer des solutions créatives et innovantes. Cette formation vous apportera la technique nécessaire pour que vos projets numériques se démarquent dans un marché très concurrentiel.
À l’issue de la formation, vous serez capable de :
- Concevoir un site Web (arborescence, contenu, maquette, charte graphique…)
- Créer des supports de communication
- Collaborer et suivre le projet avec l’équipe
- Optimiser l’accessibilité et la qualité de l’interface
- Titre RNCP
- Niveau 5 (BAC +2)
- Certificateur : L’Ecole Multimédia
- 450h de formation
- De 6 à 12 mois
- Formation 100 % en ligne
- Garantie réussite : prolongez gratuitement votre formation pendant 5 ans.
- Garantie diplômé ou remboursé.
Programme
- Introduction : les différents types de projet & brief client
- Les spécificités du projet digital
- Le recueil et l'analyse des besoins
- Le cahier des charges : l'expression du besoin
- La compréhension du brief à l’aide du canva QQOQCCP
- Challenger un brief & synthétiser la demande
- La réalisation d'une étude d'opportunité
- Le rôle de la note de cadrage
- L'étude de faisabilité
- L'analyse des risques
- L'analyse fonctionnelle
- L'écosystème d'un projet digital
- Les critères d’évaluations (KPI’s) à identifier pour évaluer la qualité du projet avec son client interne ou externe
- Les indicateurs de suivi selon les objectifs
- La construction d'un tableau de bord opérationnel
- Cadrage / scoping du projet en terme de temps / budget
- L'environnement de développement du projet, les contraintes techniques / sécurité, les outils de travail et collaboration utilisés
- Les deadlines et le lotissement d'un projet
- Les décisionnaires et le mode de prise de décision des donneurs d'ordre interne ou externe
- Créer un document de réponse avec un parti pris méthodologique et technique
- La veille
- Introduction : Veille, benchmark, anticipation des tendances
- La veille graphique : sources, référents, outils et bonnes pratiques
- La veille technologique : sources, référents, outils et bonnes pratiques
- La veille business : sources, référents, outils et bonnes pratiques
- Automatiser sa veille
- Construire et restituer un benchmark concurrentiel
- Ressources en ligne, référents culturels, leaders de l'industrie et événements : Qui suivre ? Qui écouter ? A qui faire confiance ?
- Les tendances web (design et technologie)
- Les tendances mobile et portable (design et technologie)
- Créer et animer un atelier de positionnement de marque avec un client
- Utiliser et restituer sa veille pour convaincre un client
- Introduction : les règles du design interactif
- Qu'est-ce que la scénarisation de l'information ?
- Créer une liste de tâches
- Concentrer son analyse sur le Human First
- "Recommandations ergonomiques et calibrage entre
- le réel et le virtuel"
- Les réactions Post-Actions
- Les transitions
- Analyser et retraiter les entretiens réalisés (pain points, gain points, opportunités...)
- Restituer les données de la recherche et Utiliser des personae + User Journey mapping
- Présenter et restituer la recherche avec le framework Jobs-to-be-done (JTBD) & Empathy Map
- La créativité, moteur de l'innovation
- Les techniques de créativité
- L'organisation d'un workshop créatif
- Méthode de créativité : Creative Problem Solving (CPS)
- Atelier de créativité : les cartes heuristiques
- Stimuler l’innovation : la méthode KCP
- Atelier de créativité : SCAMPER
- Les différentes méthodes de brainstorming
- Animer un atelier de brainstorming
- Préparer un atelier grâce à sa veille design
- Restituer un atelier de brainstorming et intégrer les idées dans le processus de design
- Introduction à la recherche utilisateur : les différents modes de recherche utilisateur et d'interviews
- Présentation des différents outils, matériels et du workflow de la recherche utilisateur
- Identifier les profils à interviewer & les recruter
- Préparer des proto-personae avec un client
- La création des personas
- L'historique, la typologie et la création de personas
- Création d'un guide d'entretien & protocole d’entretien
- Conduire un entretien semi-directif (animer un entretien, adopter le bon savoir être, mode de captation, prise de notes et synthèse)
- Interviewer des stakeholders
- Mener une Guérilla research : mise en place et bénéfices
- Introduction aux différentes formes de prototypage (Mock Up Vs Zoning Vs Wireframe...)
- La hiérarchie d'informations
- Navigation web
- Navigation mobile
- Conception et mise en page web (éditorial)
- Conception et mise en page web (e-commerce)
- Conception et mise en page web (landing page)
- Conception et mise en page mobile (editorial)
- Conception et mise en page mobile (service)
- Prototypage Low Def / Low Tech (papier / crayon)
- Priority guide
- Découverte d’un kit UI de wireframe
- Les outils de prototypage
- Créer des user stories en lien avec votre user journey
- Prototyper avec Figma
- Réaliser les wireframes d'une application mobile (figma)
- Réaliser les wireframes d'un site responsive
- Les différents type d’interactions
- Préparation du fichier avant les tests (animation - interaction - fallback…)
- Introduction aux différents types de tests utilisateurs (1-to-1 / focus group / guerilla)
- Création du protocole de tests utilisateurs (distance Vs présentiel)
- Définition et sélection des testeurs
- L'AB testing
- Les outils de captation pour les tests utilisateurs
- Réalisation des tests utilisateurs
- Organiser des Remote User testing (test distants et comparaison avec le présentiel)
- Synthétiser et restituer les résultats des tests utilisateurs
- Suivre l’implémentation des retours des tests utilisateurs
- Introduction : Exploiter des termes techniques dans un langage simple
- Lexique des termes graphiques complexes
- Présenter un document charté reprenant les principes d'un projet
- L’art d’animer des réunions efficaces
- Un pitch impactant
- Des présentations de résultats impactantes
- Intro : à quoi sert la documentation dans le projet
- Les outils de documentation (Github, JIRA, Trello, Office...)
- Créer un document vidéo
- Créer un document graphique
- Créer un document écrit
- Créer une base de connaissance
- Où stocker la documentation pour la garder juridiquement valable
- Créer une arborescence claire et simple pour vos
- clients et vos collaborateurs
- Gestion des droits d'accès et bonnes pratiques de plateformes collaboratives
- Introduction au design system
- L'identité visuelle
- Que contient l'identité visuelle ?
- Créer un logo
- Créer une charte graphique logo
- Créer des mockups
- Créer des cartes de visites
- Créer des entêtes de documents
- Réaliser la maquette d'une application web responsive
- Intro : Prototypage d'une application
- Introduction à la gestion de projet
- Les modèles de gestion de projet
- Planifier et suivre les tâches du maquettage
- Récit utilisateur (user stories)
- Bien rédiger ses user stories
- Les wireframes
- Créer un wireframe avec Balsamiq
- Introduction aux interfaces Web
- Introduction aux concepts UX (versus UI)
- Découverte d'un outil de maquettage (Adobe XD)
- Les outils de Adobe XD
- Créer une maquette avec Adobe XD
- Les éléments UI de base
- La grille de répétition
- Animation du wireframe
- Introduction aux concepts UX (versus UI)
- Découper une maquette
- Introduction HTML et CSS
- Syntaxe générale de HTML
- L'organisation du texte
- Un langage hypertexte
- Le multimédia en HTML
- Introduction à CSS 3 : Hello world
- CSS3 : Le stylage du texte
- La structuration logique en HTML5 et le modèle de boîtes en CSS3
- Les sélecteurs CSS
- La mise en page avec CSS
- La création de tableaux
- La création de formulaires
- Layout avec CSS Grid
- Les effets avancées de CSS
- Utiliser des documentations CSS
- Valider la qualité de son site
- Le référencement des sites Web
- Déployer son site sur le Web
- Travailler dans un processus itératif avec l’utilisateur
- La loi de Fitts
- La loi de Hick
- Loi de Jakob
- Les codes couleur
- Accessibilité visuelle
- La librairie Ant Design
- AOS (animate on scroll)
- Slick
- Les frameworks CSS
- Conclusion : l’UI/UX en constante évolution
- Workflow d'intégration front-end depuis Figma
- Workflow d'intégration front-end depuis Sketch
- Workflow d'intégration front-end depuis Adobe XD
- Connaître et intégrer dans le projet les normes d'accessibilité W3C
- Découper et intégrer une maquette web fournie (figma)
- Tester son code avec les devtools Chrome et Firefox
- Evaluer avec le designer les différences avec une maquette originale
- Intro : A quoi sert de redimensionner des images ?
- Redimensionner une image à partir de différents outils
- "Rogner ou redimensionner la taille d'un Son avec
- Adobe Audition"
- "Rogner ou redimensionner la taille d'une vidéo avec
- Adobe Premiere"
- Le responsive design
- L'installation et la prise en main du framework Bootstrap : Hello world
- La grille bootstrap
- Les éléments bootstrap
- Les composants bootstrap
- SASS
- LESS
- Les effets de Parallax
- Introduction : Comment adapter son design pour les personnes aveugles ou sourdes
- Introduction à l'accessibilité web et mobile
- Introduction et fondamentaux du XHTML
- Introduction aux Dark patterns
- Introduction aux biais cognitifs
- Mettre son site en phase de test sur des personnes en état de cécité
- Trouver des technologies de substitution pour augmenter l'accessibilité à son site Web"
- Intégrer des sous-titres dans un contenu vidéo
- Handicap et technologie d'assistance
- Conception de contenus inclusifs (textes, images, vidéos...)
- Intégrer les règles du WCAG dans un projet
- La démarche Green IT : explications et fondements
- Évaluer et mesurer l'impact des choix techniques
- L'audit d'accessibilité
- La compréhension d'un brief client pour une animation - une vidéo
- Les objectifs de l'animation en lien avec les formats possibles
- L'humanisation d'un projet à partir de la vidéo - animation
- Challenger un brief en fonction des possibilités techniques et design
- Les différents types d'animation numérique
- Animation Vs Vidéo : quelle recommandation en fonction de l'objectif à atteindre
- Lexique technique et traduction en termes communs
- Rédiger une préconisation sur la technique employée pour répondre à la demande
- Introduction : Qu'est-ce que le périmètre technique d'une animation ?
- Le matériel vidéo et le matériel nécessaire en agence
- Quels logiciels utiliser pour quels usages ?
- Introduction à l'animation : techniques, workflow et outils
- L'intérêt d'une animation et d'une vidéo dans un projet client
- Le storyboard d'une animation
- Les ateliers de co-conception d'une animation avec un client
- La validation d'un storyboard
- La rédaction de préconisations sur la technique employée pour répondre à la demande
- L'analyse et le traitement les informations d'une image
- Le pictogramme pour le Webdesign
- L'illustration en flat design
- La composition d'un dessin vectoriel à partir d'éléments fournis
- La création d'éléments d'animation non-vectoriels
- La conception d'éléments clés d'une animation pour validation auprès du client
- La création et la définition des principes généraux de l'animation
- La validation des éléments clés pour lancer la production de l'animation
- Introduction à Adobe Animate
- La création d'une animation simple avec adobe animate
- Introduction à l'animation en javascript
- Les librairies d'animation CCS et JS
- Animer une barre de navigation en CSS et JS
- Animer un élément .svg en CSS et JS
- Animer un formulaire en CSS et JS
- Introduction : Animation et CSS3
- Créer un Gif animé avec photoshop
- Animation CSS : Keyframe et transition
- Animer un contenu avec Figma : Interactive Components
- Introduction : La charte graphique et son utilisation
- La composition d'un visuel
- L'identité visuelle
- L'évolution du design graphique
- Les formats créatifs
- Les tailles d'images et de supports
- La gestion des couleurs
- La théorie des couleurs
- Faire le lien entre le cahier des charges et la charte graphique
- Charte graphique et Design System
- La logotypie et identité de marque
- La création d'un logo simple avec illustrator
- Introduction à la typographie (print et web)
- Les typographies et leur usage
- Choix et argumentation du choix d'une typographie
- Les formes pictographiques et typographiques
- La création d'une typographie avec l’extension Fontself Maker
- L'usage des webfonts
- Les typographies génératives et adaptatives
- L'équilibre texte image
- Introduction au Gestalt
- Les couleurs et leurs différents usages (web et print)
- La mise en page print (affiche)
- La notion de polices de caractères
- Évolutions typographiques et connotations - De l'antiquité aux années 1920
- Évolutions typographiques et connotations - Du Bauhaus aux années 2000
- La classification Vox-Atypi et les règles typographiques
- Le sticker
- Intro : Comment et quoi créer pour favoriser la communication visuelle
- Créer des images avec Photoshop
- Créer des infographies avec InDesign
- Créer du contenu pour Instagram
- L'importance de créer du contenu sur les réseaux sociaux
- Créer du contenu pour Facebook
- Créer du contenu pour LinkedIn
- Créer du contenu pour Youtube
- Créer du contenu pour TikTok
- Les médias sociaux : sociologie et usages
- Comprendre les usages des différents médias sociaux
- Générer de l'audience sur les médias sociaux
- Workflow de production : quel contenu pour quel médias ?
- Créer un post Instagram pour un client
- Créer un post Facebook pour un client
- Créer un post Linkedin pour un client
- Créer une newsletter avec mailchimp
- La mise en page print (livre et leaflet)
- La préparation d'un fichier à envoyer à un imprimeur
- Les vernissages et finitions
- Les formats de papiers et reliure
- Les formats d'impression
- Les règles et contraintes des formats et types d'impression
- Test de perception
- Le test utilisateur
- Le test d’utilisabilité quantitatif
- Le test d’utilisabilité qualitatif
- Guerilla testing
- Guerrilla Usability Testing
- A/B testing
- Le test comparatif
- Challenger un travail graphique
- Apprendre à demander du feedback (outils + méthodologie)
- La validation du travail
- Introduction à la QA et au bug report
- Le suivi des implémentations de la QA
- Création d'un document de centralisation de suivi et des feedbacks
- La prise de notes de feedbacks experts / clients
- Suivi de l'intégration de feedbacks experts / clients
- Les différents métiers des développeurs
- Le workflow de travail avec un développeur front-end
- Les bonnes pratiques de communication avec un développeur front-end graphiste et un développeur
- Focus sur les outils de travail collaboratif: figma et la collaboration
- Focus sur les outils de travail collaboratif : miro et la collaboration
- Focus sur les outils de suivi : Airtable
- La méthode de création et d'animation d'atelier collaboratifs
- Choix et création des différents supports à faire valider
- La méthode de création et d'animation d'atelier de validation avec un client
- La création d'un case study de synthèse d'un projet graphique (client Vs portfolio)
- La création des supports de promotion et d'information sur le projet en interne
- La création d'un référentiel graphique accessible à tous
- Le déploiement du design system en entreprise
- L'utilisation de Figma pour gérer les assets avec l'équipe
- Focus sur les outils de gestion des assets visuels : Zeroheight
- Les bases de la gestion de projet
- Les différents types de workflow en fonction des types de projet
- L'estimation de son temps
- La construction d'un planning avec une équipe
- La construction d'un planning avec un client et le faire valider
- L'information projet tout au long du projet
- Le suivi du projet et de l'atteinte des objectifs
- Lancement de Trello
- Prise en main de Trello
- Le travail collaboratif
- Approfondir tableaux et listes
- Approfondir les cartes
- Les compléments
- Présentation de la suite Atlassian et création de son compte pour accéder à Jira cloud
- Créer un projet Jira SCRUM
- Gérer les sprints
- Gérer son backlog au quotidien
- Gérer les user stories
- Le suivi des indicateurs de projet
- Créer un projet Jira Kanban
- Créer et paramétrer ses tableaux
- Créer et gérer les filtres rapides
- Créer et gérer les tableaux de bords personnalisés
- La construction de son portfolio
- La valorisation des travaux dans un book et donner du contexte projet
- L'intégration des réseaux / communautés de designers
- La création d'un réseau professionnel et son maintien
- La valorisation et promotion du travail en ligne
- La création d'un portfolio en ligne avec Webflow
- La création d'un portfolio en ligne avec Behance
- La valorisation du travail sur dribble
- L'identification des offres d'emploi pertinentes en webdesign
- La période d'essai et les premiers projets
- Le changement de poste en interne et en externe
- Se former en travaillant
- Les différents statuts possibles
- Le statut freelance
- Les actions à mener pour augmenter sa visibilité
Des centaines d’heures de screencasts vidéo pour maîtriser les logiciels essentiels en entreprise. Différenciez-vous et boostez votre employabilité !






















Votre diplôme
Admission
Pour entrer en formation préparant au Titre visé, le candidat doit :
- Être titulaire d’un Baccalauréat, ou d’un titre ou d’un diplôme équivalent de niveau 4
OU
- Avoir un niveau Bac ou avoir validé un diplôme ou un Titre de niveau inférieur au niveau 4 (Bac), et justifier d’une expérience professionnelle de 3 ans minimum dans le domaine d’activité visé par le Titre.
Pour toute autre situation, contactez un conseiller en formation qui étudiera votre profil pour étudier votre admissibilité.
Examen
Pour obtenir le Titre, le candidat sera évalué selon les modalités suivantes :
- Les évaluations d'entraînement
- Le dossier projet basé sur un cas réel ou fictif d'entreprise
- Examen sur chaque bloc de compétences portant sur des études de cas
- Rédaction d'un rapport professionnel
- Oral de soutenance devant un jury
- Publié au JO24/04/2020
- CertificateurL’Ecole Multimédia
- LieuEn ligne, de chez vous
- InscriptionA tout moment de l'année
- Dates d'examenJuin ou Décembre
Vous apprenez comme vous voulez, à votre rythme.
A vous de choisir et de composer selon votre personnalité et vos aspirations.
Découvrez, apprenez, approfondissez tout ce qui vous fait envie ou qui vous sera utile demain.
Un accès illimité durant 5 ans à des milliers de formations supplémentaires : culture digitale, logiciels métiers & bureautique, langues étrangères, développement personnel, soft skills...)
Découvrir








