Prototypage - Création de sites - Intégration Chargé de création Web

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 à destination des différents écrans connectés avec Photoshop

→ Concevoir des prototypes pour le Web

Public concerné

Directeurs artistiques, graphistes ou maquettistes qui doivent être en mesure de 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.

Méthodes pédagogiques

Cette 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 permet d’appréhender et de valider, étape par étape, les différentes phases nécessaires à la construction de ce projet. Grâce à leur expertise, les formateurs conseillent et accompagnent les apprenants jusqu’à la présentation finale de leur projet.

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciels : Brackets, Photoshop…


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 formateur

Webdesigners 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 2 jours - 14 heures - Prochaine session : Du 9 mar. au 10 mar. 2017

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

Partage d’expériences / É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 18 avr. au 19 avr. 2017

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 PAGES WEB SIMPLES 2 jours - 14 heures - Prochaine session : Du 11 mai au 12 mai 2017

Identifier et organiser les fichiers d’un site Web

  • Distinguer les éléments constitutifs d’une page Web : balises de titre, liens, images, feuilles de style
  • Nommer et ranger les fichiers d’un site Internet
  • Apprendre les bonnes pratiques pour agencer les éléments d’un site : images, pages, feuilles de style, polices, autres médias

Créer le code pour structurer une page Web

  • Créer un fichier HTML dans l’éditeur, le nommer et l’enregistrer
  • Insérer les balises structurelles de la page : doctype, HTML, head, body, title, meta
  • Décrypter et coder : les balises les plus courantes
  • Hiérarchiser le texte
  • Organiser les fichiers d’un site
  • Créer des liens
  • Afficher des images et les habiller avec du texte
  • Gérer les images

S’initier au langage CSS

  • Mettre en place une feuille de style
  • Styliser le texte (police, taille, couleur)
  • Habiller une image avec du texte
  • Comparer les balises div et span et les habiller avec les CSS

Exercice : coder et habiller graphiquement une page Web



# 4 CRÉER DES IMAGES À DESTINATION DES DIFFÉRENTS ÉCRANS CONNECTÉS AVEC PHOTOSHOP 2 jours - 14 heures - Prochaine session : Du 29 mai au 30 mai 2017

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


# 5 CONCEVOIR DES PROTOTYPES POUR LE WEB 4 jours - 28 heures - Prochaine session : Du 12 juin au 15 juin 2017

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



# 6 FINALISATION DU PROJET ET SOUTENANCE DEVANT UN JURY PROFESSIONNEL 3 jours - 21 heures - Prochaine session : Du 5 juillet au 7 juillet 2017

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

15 jours 105 heures 5 700 € 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

15 jours 105 heures N.C.

Pour en savoir plus sur le déroulement de cette formation en intra, veuillez nous contacter par mail ou nous appeler au 01 40 26 00 99.

Nous contacter