01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Ergonomie / UX Design / Prototypage Chargé de création Web

Icon2018 quiz amont Icon2018 granule vod Icon2018 module presentiel Icon2018 quiz classe virtuelle Icon2018 quiz quiz aval
Objectifs
  • Identifier les différentes phases de conception et de réalisation d’un projet Web
  • Comprendre les notions d’ergonomie, d’interface homme-machine (IHM) et d’expérience utilisateur (UX)
  • Préparer une image et réaliser un photomontage pour le Web
  • Apprendre les bases du HTML et des CSS pour créer et modifier des pages Web
  • Concevoir des maquettes de sites adaptés aux attentes des intégrateurs
Public concernéDirecteurs artistiques, graphistes ou maquettistes qui doivent être en mesure de produire pour le Web.
Pré-requisIl est nécessaire de savoir utiliser Photoshop pour suivre cette formation. Des notions de mise en pages (hiérarchie de l’information, équilibre textes-images) facilitent l’accès à ce cursus.
Méthodes pédagogiquesCette formation, composée de différents modules, alterne théorie et pratique grâce à de nombreux exercices, et met également l’accent sur les échanges et le mode collaboratif. Chaque participant travaille sur son projet. Ce parcours leur permet d’appréhender et de valider, étape par étape, les différentes phases nécessaires à sa construction. Grâce à leur expertise, les formateurs les conseillent et les accompagnent jusqu’à la présentation finale de leur projet.
Moyens techniques* 9 participants maximum * 1 Mac ou 1 PC par personne * 1 tablette graphique mise à disposition sur demande * 1 clé USB de 8 Go remise à chaque participant * Poste du formateur relié à un vidéo-projecteur * Logiciels : Brackets, Photoshop, Muse, FileZilla… * 1 livre et / ou 1 support de cours remis en fin de stage * Hotline illimitée par e-mail * Fiche d’évaluation, feuille d’émargement et attestation de présence

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateurWebdesigners et intégrateurs Web ayant plus de 10 ans d’expérience en enseignement.
Voir tous les programmes Le programme

# 1 IDENTIFIER LES FONDAMENTAUX DE LA PRODUCTION WEB 3 jours - 21 heures - Prochaine session : Du 12 mar. au 14 mar. 2018

Comprendre le fonctionnement du Web

  • Identifier les grandes étapes du flux de production
  • Contextualiser les langages : HTML, CSS, PHP…

Différencier les modes d’hébergement d’un site, serveurs mutualisés / serveurs dédiés

  • Différencier les architectures techniques
  • Distinguer site statique et site dynamique
  • Identifier le rôle et l’utilité des frameworks

Planifier le projet Web

  • Établir un cahier des charges
  • Définir l’arborescence du site
  • Élaborer le système de navigation
  • Comprendre le rôle de l’UX designer, de l’ergonome et de l’architecte de l’information

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

Distinguer les architectures du Web mobile afin de proposer des solutions adaptées

  • Distinguer les tendances en matière d’usage
  • Différencier les plates-formes et les OS
  • Distinguer applications natives, sites pour mobiles, WebApps, sites responsive

Exercices : études de cas / Analyse de sites



# 2 AMÉLIORER L‘EXPÉRIENCE UTILISATEUR (UX) DANS LE PROJET DIGITAL 2 jours - 14 heures - Prochaine session : Du 9 avr. au 10 avr. 2018

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 utilisateurs (users stories)
  • Spécifier les fonctionnalités pour construire le diagramme des tâches
  • 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 fonctions métiers de la création Web
  • Utiliser des logiciels de travail collaboratif

Exercices : ébaucher un persona, co-produire une arborescence / Approche des logiciels de prototype



# 3 CRÉER DES IMAGES AVEC PHOTOSHOP POUR TOUT DEVICE 2 jours - 14 heures - Prochaine session : Du 24 mai au 25 mai 2018

Appréhender les spécificités des images à destination des écrans

  • Comprendre la résolution d’une image et la notion de pixel
  • Identifier les contraintes liées au Web
  • Distinguer les différents modes colorimétriques d’une image
  • Lister les différents formats d’images pour le Web

Situer Photoshop dans la production Web

  • Distinguer les images pour l’impression et le Web
  • Se repérer dans l’interface : les menus, les outils, les palettes
  • Choisir le profil colorimétrique adapté

Retravailler les images

  • Adapter une image
  • Recadrer une image
  • Adapter la taille et la résolution d’une image
  • Redresser une image

Structurer / composer son fichier

  • Mettre en oeuvre les règles et repères
  • Mettre en place une grille
  • Concevoir des plans de travail différents
  • Construire un fichier avec des objets dynamiques
  • Créer et gérer les calques

Gérer le texte

  • Utiliser du texte libre ou des blocs de texte
  • Créer des styles de texte

Optimisation pour le Web

  • Créer et gérer des tranches
  • Exporter et compresser une image pour le Web


# 4 CONCEVOIR DES PROTOTYPES POUR LE WEB 4 jours - 28 heures - Prochaine session : Du 18 juin au 21 juin 2018

Concevoir une interface utilisateur pour le Web

  • Identifier les composants d’une interface Web
    • définir 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

Concevoir une maquette graphique avec Photoshop

  • Gérer la surface de l’écran
    • définir la dimension de la page
    • mettre en place une grille horizontale
    • mettre en place une ligne de base
    • créer des mises en pages adaptées au responsive

Web design

  • Gérer la typographie et le Web
    • comprendre les contraintes d’affichage des caractères à l’écran et sur le Web
    • identifier différents types de polices Web et leur contraintes (Web Safe, Web Font…)
  • Mettre en oeuvre une maquette graphique de plusieurs pages Web dans Photoshop
    • organiser les fichiers PSD
    • simuler une mise en pages fluide et responsive
    • simuler des interactions complexes grâce à la composition des calques
  • Réaliser un prototype interactif avec InVision
  • Découvrir le fonctionnement d’InVision
  • Importer les copies d’écran
  • Créer une cinématique de pages
  • Simuler l’interactivité
  • Partager le prototype

Créer un guide de styles

  • Définir les différents composants d’un guide de styles
  • Mettre en place un guide de styles avec Photoshop

Exercices : réaliser une interface utilisateur pour desktop et smartphone avec Photoshop / 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 Photoshop / Réaliser un prototype interactif à partir d’une maquette Photoshop



# 5 FINALISATION DU PROJET ET SOUTENANCE DEVANT UN JURY PROFESSIONNEL 3 jours - 21 heures - Prochaine session : Du 9 juillet au 11 juillet 2018

Finalisation du projet

  • Finaliser le projet personnel à l’aide de travaux pratiques
  • Préparation à la soutenance

Jury

  • Présentation du projet
  • Évaluation et résultat du jury


Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Chargé de création Web

14 jours 98 heures 5 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

Chargé de création Web

14 jours 98 heures 5 600 €HT*


* Prix par jour (à partir de)

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis