Chargé de création Web

Formations longues
Initiation
10 jours (70 heures)
Paris
Concevoir et réaliser des maquettes ou prototypes de sites selon les usages en vigueur

Objectifs

Identifier les fondamentaux de la conception Web (Web design)
Améliorer l'expérience utilisateur (UX) dans le projet digital
Concevoir des prototypes graphiques et interactifs pour le Web (avec Adobe XD)

Pour qui ?

Directeurs artistiques, graphistes ou maquettistes qui doivent produire pour le Web.


Code dokélio :

Prérequis

Il est nécessaire de savoir utiliser Photoshop. Une connaissance minimale des flux de production Web facilitera l'accès à cette formation.



Compétences acquises:
Concevoir et réaliser des maquettes ou prototypes de sites selon les usages en vigueur

Programme

Chargé de création Web

MODULE 1 IDENTIFIER LES FONDAMENTAUX DE LA CONCEPTION WEB (WEB DESIGN) - 2 JOURS

Planifier le projet Web
• Identifier les différentes étapes d'un projet Web
• Comprendre le rôle des différents acteurs
• Identifier les contraintes techniques
• Établir un cahier des charges
- définir les objectifs et le public cible
- identifier les types de contenu et les fonctionnalités
- cerner les besoins graphiques et typographiques (brief créatif)
• Définir l'arborescence du site
• Élaborer le système de navigation
Considérer les éléments méthodologiques de prototypage, de mise en pages et de contenu
• Utiliser des prototypes : rough papier, wireframe, maquette graphique, prototype interactif
• Distinguer différents types de mise en pages pour le Web : fixe, fluide, responsive
• Identifier les possibilités typographiques et les contraintes d'affichage
• Appréhender les nouvelles méthodes de conception Web (Atomic Design, design system, style guide)
• Identifier les nouvelles tendances du Web design
➔ Exercices : partage d'expériences / Études de cas /Analyse de sites / Utilisation d'outils en ligne /Création d'une arborescence de site


MODULE 2 AMÉLIORER L'EXPÉRIENCE UTILISATEUR (UX) DANS LE PROJET DIGITAL - 2 JOURS

Concevoir une véritable expérience utilisateur (UX) pour le projet digital
• Décrire et définir le design de l'expérience utilisateur (UX) pour les interfaces homme-machine
• Reconnaître les spécificités de l'UX mobile
• Situer l'ergonomie dans la démarche de l'UX
• Appréhender les processus cognitifs
Formuler les bases du Web design
• Identifier les fonctions et les objectifs d'une interface
• Définir le zoning et les bases du “look and feel”
• Utiliser la logique de personas pour créer des parcours utilisateur (user stories)
• Développer ou co-développer un wireframe Concevoir et créer l'interface (UI)
• Appréhender la dualité émotion-cognition dans les interfaces homme-machine
• Intégrer la logique de patterns
• Illustrer les étapes de la conception : du rough au prototype
• Adapter les principes du design visuel au travail pour écrans : lisibilité, gestion de l'espace, typos...
Travailler en équipe agile
• Identifier les métiers de la création Web
• Utiliser des logiciels de travail collaboratif
➔ Exercice : ébaucher un persona / Co-produire une arborescence


MODULE 3 CONCEVOIR DES PROTOTYPES GRAPHIQUES ET INTERACTIFS POUR LE WEB (AVEC ADOBE XD) - 3 JOURS

Identifier les composants d'une interface Web
• Défi nir un menu de navigation à partir de l'arborescence du site
• Définir un système de navigation contextuel
• Définir les différentes interactions et leurs états (boutons, liens)
• Différencier les éléments de navigation en fonction du type de device ciblé
Concevoir une maquette fonctionnelle (wireframes)
• Identifier les différents outils permettant de réaliser la maquette fonctionnelle
• Créer un rough papier de la maquette fonctionnelle
• Créer une version numérique de la maquette fonctionnelle
• Décliner la maquette fonctionnelle pour les différents devices
• Évaluer la qualité de la maquette fonctionnelle
Gérer la surface de l'écran
• Définir la dimension de la page
• Mettre en place une grille
• Créer des mises en pages adaptées au responsive Web design
Gérer la typographie et le Web
• Comprendre les contraintes d'affi chage des caractères à l'écran et sur le Web
• Identifier différents types de polices Web et leurs contraintes (Web Safe, Web Fonts…)
Concevoir une maquette graphique et interactive avec Adobe XD
• Appréhender les spécifi cités du logiciel
• Identifier les périmètres fonctionnels (UI, wireframes, design system, prototypes
• Découvrir l'interface d'Adobe XD
Importer des éléments
• Importer des éléments bitmap et vectoriel
• Importer du texte
• Préparer des images avec Photoshop
Créer des éléments graphiques
• Appréhender les outils de dessin
• Utiliser les couleurs, dégradés, transparences et ombres
• Appliquer des angles arrondis
• Créer des formes vectorielles
• Combiner des formes et les modifier
Concevoir des maquettes de mise en pages Web
• Gérer les objets au sein des plans de travail
• Créer des grilles de répétition
• Personnaliser les grilles de répétition
• Créer et gérer les symboles
• Utiliser les kits d'interface
Créer des interactions
• Ajouter une interaction
• Définir l'événement déclencheur (trigger) et le plan de travail de destination
• Tester l'interaction
Publier et partager le prototype
• Exporter les plans de travail et éléments
• Adapter le design à un autre format
• Prévisualiser le projet dans le logiciel ou sur un périphérique mobile
• Enregistrer une vidéo du projet
• Partager le projet en ligne et activer les commentaires
• Exporter les spécifications graphiques pour les développeurs
➔ Exercices : réaliser une interface utilisateur pour desktop et smartphone avec Adobe XD / Mettre en place une maquette fonctionnelle pour desktop et smartphone sous forme de rough et au format numérique / Créer une maquette graphique complexe
avec XD / Réaliser un prototype interactif et le publier

MODULE 4 COACHING INDIVIDUEL - 1 HEURE

• Coaching individuel à distance assuré par l'intervenant
référent

MODULE 5 FINALISATION DU PROJET ET SOUTENANCE DEVANT UN JURY PROFESSIONNEL - 3 JOURS

Finalisation
• Finaliser le projet personnel à l'aide de travaux pratiques
• Préparer la soutenance
Jury
• Présenter le projet
• Évaluation et résultat du jury

S'inscrire en ligne

Chargé de création Web
Ref
FCCW0119
Tarif
4300€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.

Paris
Prochaines sessions
04 mars au 03 juil. 2019
04-03-2019
03-07-2019
10 oct. 2019 au 29 janv. 2020
10-10-2019
29-01-2020