Chargé de création Web

Formations longues
Tous niveaux
14 jours / 98 heures
Paris

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

Objectifs

Identifier les fondamentaux de la production Web
Améliorer l’expérience utilisateur (UX) dans le projet digital
Créer des pages Web simples
Créer des images avec Photoshop pour tout device
Concevoir des prototypes pour le Web

Pour qui ?

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

Prérequis

Il 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.

Programme

IDENTIFIER LES FONDAMENTAUX DE LA PRODUCTION WEB

 

Comprendre le fonctionnement du Web

 

  • Identifier les grandes étapes d’un flux de production
  • Contextualiser les langages : HTML, CSS, JavaScript, PHP…
  • Identifier les nouvelles possibilités de mises en forme du langage CSS


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
  • Distinguer applications natives, sites pour mobiles, WebApps, sites responsive


Exercices : études de cas / Analyse de sites

AMÉLIORER L'EXPÉRIENCE UTILISATEUR (UX) DANS LE PROJET DIGITAL

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)
  • 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


Exercice : ébaucher un persona / Co-produire une arborescence

CRÉER DES IMAGES AVEC PHOTOSHOP POUR TOUT DEVICE

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
  • 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

 

  • Positionner 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

CONCEVOIR DES PROTOTYPES POUR LE WEB

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 leurs contraintes (Web Safe, Web Font…)

  • Créer 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


S’initier aux nouveaux outils de prototypage

  • Utiliser le logiciel Sketch
    - différencier Photoshop et Sketch
    - créer une interface graphique simple avec Sketch
    - créer des interactions avec le plugin Craft et InVision
  • Utiliser XD : créer une séquence interactive à partirde Photoshop et Illustrator avec XD


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

FINALISATION DU PROJET ET SOUTENANCE DEVANT UN JURY PROFESSIONNEL

Finaliser le projet

  • 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
FCCW0118
Tarif
5600€ HT

Prochaines sessions

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