Graphiste web

Diplômant / CPF

Le cursus Graphiste web vous permettra d’acquérir les bases professionnelles indispensables à la réalisation d'une communication graphique web.

Cette action de formation constitue un morceau, un bloc de compétence ou un certificat de compétence du titre professionnel "Infographiste - metteur en page" du ministère chargé de l'emploi, RNCP n° 1267 dont GOBELINS bénéficie de l'agrément n°1875-638.

Il correspond au bloc 3 - RNCP1267BC03 : "Contribuer à la stratégie de communication". - Assurer une veille technique, technologique et concurrentielle. - Promouvoir une réalisation graphique. - Personnaliser un système de gestion dynamique de contenus de sites Web. - Adapter des contenus pour le web et les réseaux sociaux.


Le cursus Graphiste web vous permettra d’acquérir les bases professionnelles indispensables à la réalisation d'une communication graphique web : conception et création graphique web, réalisation de maquettes web et réalisation d'un site avec WordPress.

Graphiste, maquettiste.

Maîtrise de l'outil informatique et bonne connaissance de la navigation web.

Pratique solide des logiciels graphiques Adobe Photoshop ou Adobe Illustrator.

  • Concevoir un site web (arborescence, contenu (assets), charte graphique).
  • Réaliser un zoning et un wireframe.
  • Réaliser une maquette de site internet.
  • Créer des pages HTML/CSS et modifier des pages web existantes.
  • Concevoir, installer et paramétrer un site web avec WordPress.

Programme et modules

Certains modules peuvent être suivis séparément

  • 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
(Module disponible séparément) Voir le module Fondamentaux du Web

Avoir une vision stratégique de la communication - Ecosystème médiatique et mutations : les nouvelles interactions entre web, RP, print, réseaux sociaux, publicité, etc. - Comment aborder une stratégie de communication : les bonnes questions à se poser - Identité, valeurs, authenticité : cerner son territoire de contenus. - Communication et temporalité : comment cadencer ses actions. - Gouvernance : arbitrer ses actions en fonction de ses contraintes (budget, public visé, objectifs, ressources) et dans le respect de ses objectifs.

Maîtriser la production de contenu - Comprendre le marketing de contenu - Pourquoi l’UX (User experience) doit devenir l’obsession du communicant. - Produire des messages impactants et optimiser son référencement - Construire une stratégie éditoriale cohérente

Etre un chef d’orchestre plurimedia - Intégrer l’importance du visuel - Production video : comment écrire un motion design, un film institutionnel - Créer une infographie, la référence de votre expertise - Pourquoi et comment gérer un blog d’entreprise - Réseaux sociaux, les secrets de l’engagement

(Module disponible séparément) Voir le module Communiquer dans un monde digital

  • 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)
(Module disponible séparément) Voir le module Conception et création graphique pour le web

  • 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
(Module disponible séparément) Voir le module UI - Conception d'interface interactive

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

(Module disponible séparément) Voir le module HTML et CSS - Bien démarrer

Introduction

  • Historique du logiciel et présentation des concurrents (Sketch, Adobe XD)
  • Comparer Figma en version Desktop et en version Web

Découverte de l'interface

  • Analyser les panneaux principaux (Calques, Pages et Design)
  • Utiliser l’espace de travail : pages, frames, calques et groupes
  • Utiliser les panneaux : Calques, Assets, Design et Prototype

Utiliser les outils de création

  • Formes géométriques simples, l’outil texte et l'importation d’images
  • Les masques
  • Les outils d’alignement et de redimensionnement
  • Les calques, les groupes, le rangement, le nommage des éléments
  • Les grilles et les repères

Raccourcis clavier

  • Utiliser et appliquer les raccourcis indispensables

Utiliser les outils de création avancés

  • Les Formes complexes (Pathfinder, Boolean, Plume)
  • Les Styles, les Couleurs (RGBA, CSS, HSB), le Texte et les Effets
  • Les modes de fusion
  • Les composants et les instances

Interaction, optimisation, collaboration et Exportation

  • Gestion du scroll
  • Optimisation et exportation des visuels pour le web
  • Introduction au prototypage et partage du projet avec une équipe
  • Visionner le prototype sur un mobile
  • Insérer des commentaires
  • Introduction au panneau d’inspection
  • Exporter et importer un fichier .fig
(Module disponible séparément) Voir le module Maquette et prototypage avec FIGMA - Bien démarrer

Introduction

  • Notions de base : hébergement, nom de domaine, ftp
  • Présentation : structure de WordPress, organisation (frontend/backend)
  • Installation : choix d'un serveur, paramètrage ftp, installation et connexion
  • Prise en main du back office : fonctionnalités de base, mode visuel/mode HTML, définition des paramétrages, sélection et ajout d'extensions

Contenu et sa gestion

  • Taxonomie et types de contenus
  • Publication : paramétrages pages/articles, organisation des contenus, insertion d'images ou vidéos
  • Définition de la page d'accueil et organisation de la navigation dans le site
  • Création de menus personnalisés
  • Gestion des liens hypertextes (internes/externes) et documents PDF
  • Installation d'extensions : insertion de cartes Google Maps, formulaire de contact, liens médias sociaux

Thème Wordpress et optimisation

  • Sélection et installation d'un thème
  • Paramétrage des médias et gestion de la bibliothèque
  • Animation et optimisation du site : intégration de contenus éditoriaux, indexation du contenu

Plugin PageBuilder

  • Installation du plug-in PageBuilder
  • Modification du thème

Plugin suivi statistique

  • Déploiement d’un plugin pour le SEO, l’analyse des audiences et le suivi statistiques

Formation Wordpress avec alternance permanente de théorie et de mise en pratique à l'issue de chaque point abordé.

(Module disponible séparément) Voir le module Créer son site internet avec WordPress : les bases

Réalisation d'un sujet imposé (refonte de site web) afin de mettre en pratique la conception, la configuration, la mise en ligne de contenus et la modification de thème sur WordPress.

Les notions liées à la conception (analyse du projet, inventaire des contenus, architecture de l'information), à l'identité visuelle (univers graphique, charte éditoriale et scénario de navigation) et à la gestion d'un projet (planning, méthodes, budget) seront abordées lors du déroulement de l'atelier.

Étapes de l'atelier :

  • Conception de la structure du site
  • Sélection d’un thème Wordpress et de plugins
  • Création d’une identité visuelle et de modèles de pages
  • Organisation & valorisation des contenus
  • Optimisation du référencement naturel

Les réseaux sociaux

  • Différencier les réseaux sociaux
  • Analyser et comprendre les contraintes et possibilités des principaux réseaux sociaux (Facebook, Twitter, Instagram, Behance…)

Adobe Photoshop

  • Création d'un nouveau contenu visuel selon le réseau social
  • Adapter la dimension et la résolution d'un fichier
  • Décliner une création dans différents formats et orientations avec les plans de travail multiples
  • Utiliser la palette Montage pour animer les calques
  • Importer une vidéo et ajouter un son
  • Exporter pour le Web et les médias sociaux une image ou une vidéo

Adobe Illustrator

  • Création d'un nouveau contenu visuel selon le réseau social
  • Adapter la dimension d'un fichier
  • Dessiner et aligner sur la grille en pixels
  • Décliner une création dans différents formats et orientations avec les plans de travail multiples
  • Exporter pour le Web et les médias sociaux

Mise en situation

  • Utiliser des modèles Photoshop pour présenter ses créations
  • Créer ses propres mise en situation

Publication et diffusion sur les réseaux sociaux

  • Création de compte
  • Publier sur les réseaux sociaux
(Module disponible séparément) Voir le module Adapter, présenter et publier ses créations graphiques sur les réseaux sociaux


La sélection des candidats pourra être effectuée lors d'un entretien préalable.

Ce cursus de formation constituant le Bloc 3 du Titre professionnelle infographiste metteur en page, 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.

Evaluation par l'intervenant des travaux ou exercices effectués tout au long de la formation.

Télécharger le référentiel de compétences.

Prévoir un surcoût de 180€ pour le passage de la certification.

  • 1 poste Mac par participant
  • Adobe CC
  • Logiciel client FTP et serveur Web
  • Éditeur de texte/code
  • Vidéoprojecteur

10 stagiaires maximum

9h/16h.

Cette action de formation est adaptable aux personnes en situation de handicap.

Prochaine session

Durée

29 jours

Tarif

5880.00 €

Modalités

Liste des sessions

Durée

29 jours

Tarif

5880.00 €

Lieu

Modalités

Contactez nous

Pour suivre cette formation, échanger autour de votre projet, obtenir des conseils…

Votre contact dédié

Michèle Barber

* champs obligatoires
La CCI Paris-Ile-de-France collecte ces données pour répondre à votre demande et, au-delà, vous tenir informé de ses offres de service. Ces données sont conservées pour une durée de 3 ans. Ces informations ne sont pas communiquées à des tiers. Conformément à la loi "Informatique et Libertés" du 6 janvier 1978, modifiée et au Règlement (UE) 2016-679 sur la protection des données, dans le cadre et les limites posées par ces textes, vous disposez d'un droit d'accès, de portabilité, de modification, de rectification, d’opposition et de suppression des données à caractère personnel vous concernant en contactant info@gobelins.fr ou, en cas de difficulté le délégué à la protection des données à l'adresse cpdp@cci-paris-idf. En dernier lieu, vous pouvez déposer une réclamation auprès de la CNIL - 3 Place de Fontenoy - TSA 80715 - 75334 PARIS CEDEX 07.