DesignGraduate Webdesigner
Re skill - FORMATION EN LIGNE

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

Logo Mon Compte Formation du gouvernement
Formation éligible CPF
Financez facilement votre formation avec Mon compte formation.
En savoir plus
  • Titre RNCP
  • Niveau 5 (BAC +2)
  • Certificateur : L’Ecole Multimédia
  • 450h de formation
  • De 6 à 12 mois
  • Formation 100 % en ligne
Double garantie !
  • Garantie réussite : prolongez gratuitement votre formation pendant 5 ans.
  • Garantie diplômé ou remboursé.
On vous rappelle gratuitement :
Demande de documentation

Programme

Du besoin client aux propositions graphiques et fonctionnelles
Détail du bloc de compétences
Etudier la demande client et comprendre les objectifs et contraintes du projet
  • 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
Réaliser une veille active des tendances du digital
  • 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
Comprendre les règles du design interactif
  • 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
Réussir ses ateliers d'idéation et de créativité
  • 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
Définir des personae représentatifs du projet
  • 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
Savoir utiliser un outil de prototypage
  • 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…)
Tester un prototype avec des utilisateurs cibles
  • 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
Savoir présenter clairement son projet au client
  • 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
Créer une documentation collaborative
  • 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
Elaborer une synthèse collaborative de la charte graphique et de l'identité visuelle
  • 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
Intégration de l'interface graphique utilisateur
Détail du bloc de compétences
Réaliser le prototype d'une application web responsive
  • 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
Créer un site web avec HTML
  • Introduction HTML et CSS
  • Syntaxe générale de HTML
  • L'organisation du texte
  • Un langage hypertexte
  • Le multimédia en HTML
Mettre en forme avec CSS et Bootstrap
  • 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
S'initier à l'UX design
  • 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
Aborder les Workflows d'intégration
  • 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
Savoir optimiser et redimensionner des supports multimédias
  • 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"
Rédiger des feuilles de style Responsive
  • 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
Adapter le site Web pour les personnes aux besoins spécifiques
  • 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é
Animation d'éléments graphiques
Détail du bloc de compétences
Traduire la demande client d'une animation en objectifs opérationnels
  • 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
Connaître le périmètre technique de la vidéo
  • 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 ?
Concevoir des écrans d'animation
  • 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
Réaliser des visuels avec Photoshop
Réaliser des visuels avec Illustrator
Créer des écrans d'animation
  • 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
Mettre en mouvement des éléments graphiques
  • 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
Prendre en main After Effects
Mettre en oeuvre les techniques d’animation
  • Introduction : Animation et CSS3
  • Créer un Gif animé avec photoshop
  • Animation CSS : Keyframe et transition
  • Animer un contenu avec Figma : Interactive Components
Créations graphiques et déclinaison multi-supports
Détail du bloc de compétences
Connaître les fondamentaux d'une graphique
  • 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
Savoir définir une identité visuelle
  • 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)
Appliquer une typographie adaptée
  • 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
Produire ses éléments graphiques et de communication avec les bons outils
  • 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
Concevoir des mises en page à valeur ajoutée pour une bonne communication
  • 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
Préparer l'intégration et l'impression des supports
  • 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
Savoir tester les éléments de communication
  • 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
Corriger ses erreurs
  • Challenger un travail graphique 
  • Apprendre à demander du feedback (outils + méthodologie)
Utiliser les outils collaboratifs pour faciliter les échanges
  • 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
Valoriser le travail réalisé auprès des clients
  • 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
Préparer l'exploitation de vos ressources
  • 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
Gérer votre projet
  • 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
Utiliser Trello
  • Lancement de Trello
  • Prise en main de Trello
  • Le travail collaboratif 
  • Approfondir tableaux et listes
  • Approfondir les cartes
  • Les compléments
Gérer votre projet avec Jira
  • 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
Valoriser votre travail et chercher un emploi
  • 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é
Inclus dans votre formation
+ de 50 formations aux logiciels métiers

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

Graphiste multimédia

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
Contactez-nous
La puissance de la formation en ligne et du réseau Digital Campus
Image
Coaching personnalisé
La relation est au cœur de nos dispositifs de formation : coaching, accompagnement vers l’emploi, communauté d’apprenants et de formateurs pour répondre à toutes vos questions.
Image
La formation qui vous suit partout
La culture "digital first" est dans notre ADN. Formez-vous partout et à tout moment avec les applications web et mobiles (Android et IOS).
Image
Plateforme Social Learning
Interagissez avec les autres apprenants, entraidez-vous, créez des communautés, likez, questionnez les formateurs directement. Vivez une formation 100% social learning.
Image
Diplômes reconnus et finançables CPF !
Nos formations débouchent sur des titres RNCP, des certifications professionnelles qui sont enregistrées au Répertoire Spécifique. Elles sont reconnues par les entreprises, l’État et sont finançables CPF !
Image
Garantie diplômé ou remboursé
Prolongez votre formation gratuitement pendant 5 ans avec la garantie réussite. En cas d'échec, nous vous remboursons.
En complément de votre formation, des + qui font la différence

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
Options métier

Complétez votre cursus principal avec la spécialisation de votre choix.

L'occasion d'élargir vos domaines d'expertise parmi un choix de 36 options métier.

Découvrir
Evènements à venir