Prototypage - Création de sites - Intégration Concevoir une maquette graphique pour le Web

Créer des livrables adaptés aux exigences des intégrateurs Web

Objectifs

→ Appréhender les spécificités du Web
→ Maîtriser les outils et techniques de Photoshop pour la création d‘une maquette Web
→ Identifier les spécificités de la typographie pour le Web
→ Utiliser les grilles pour produire une maquette fonctionnelle et harmonieuse
→ Concevoir pour l‘utilisateur : UX et ergonomie
→ Préparer les livrables et les exports

Public concerné

Graphistes print, directeurs artistiques, maquettistes…

Pré-requis

Il est indispensable de connaître les manipulations de base de Photoshop et d‘avoir suivi le stage “Les fondamentaux de la production Web” pour accéder à ce stage.

Programme

Appréhender les spécificités du Web

  • Identifier les styles graphiques du Web et les utiliser à bon escient
  • Gérer l‘espace horizontal et vertical
  • Distinguer les différentes méthodes de mises en pages : fixe, fluide, responsive
  • Comprendre l‘impact des supports de consultation sur la création graphique d‘un site

 

Étude de cas : exemples décryptés et revue de sites

Maîtriser les outils et techniques de Photoshop pour la création d‘une maquette Web

  • Organiser son travail dans Photoshop (fichiers, plans de travail multiples)
  • Distinguer les différentes phases de prototypage
  • Utiliser les bons outils : objets dynamiques, compositions de calques, exports CSS, extensions
  • Différencier rough, wireframe, mock-up
  • Découvrir des outils utiles (InVision, UXPin, Muse)

 

Exercice : réaliser différents prototypes d‘un site Web

Identifier les spécificités de la typographie pour le Web

  • Connaître les différents types de polices Web
  • Utiliser les Web Fonts et les unités typographiques Web
  • Identifier les spécificités de la composition de textes sur le Web (corps, interligne, habillage…)

 

Exercice : réaliser un spécimen typographique à partir de Web Fonts

Utiliser les grilles pour produire une maquette fonctionnelle et harmonieuse

  • Définir les différents types de grilles
  • Mettre en oeuvre une grille avec Photoshop

Exercice : réaliser une grille en fonction d‘un projet défini

Concevoir pour l‘utilisateur : UX et ergonomie

  • Comprendre la notion d‘expérience utilisateurs (UX)
  • Définir des parcours utilisateur
  • Concevoir et réaliser un prototype interactif pour tester des parcours utilisateur ou réaliser une présentation client
  • Préparer les éléments à partir de la maquette

 

Exercice : réaliser une présentation interactive avec InVision et Dreamweaver

Analyse collective : avantages et inconvénients des deux méthodes

Préparer les livrables et les exports

  • Identifier le flux de production d‘un site Web
  • Déterminer le rôle de chaque intervenant
  • Préparer les fichiers pour l‘intégrateur
  • Maîtriser les formats de compression
  • Gérer les images pour les écrans Retina ou HD

 

Exercice : produire les exports de sa maquette et réaliser un guide de styles

Méthodes pédagogiques

Alternance de théorie, de démonstrations par l‘exemple et de mise en pratique grâce à de nombreux exercices.

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciels : Photoshop, Illustrator, InVision…


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

Webdesigner ayant plus de 10 ans d‘expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Concevoir une maquette graphique pour le Web

3 jours 21 heures 1 500 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

Concevoir une maquette graphique pour le Web

3 jours 21 heures 4 770 €HT*

* À 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
L'avis des participants
Stage très utile : nouvelles techniques, nouveaux outils qui pourront être réutilisés au quotidien, en plus de l'approche théorique
Aurélie L - Graphiste chez Declik (session du 17 au 19 octobre 2016)
Qu'avez-vous préféré pendant le stage : "Découvrir la précision des grilles de Photoshop pour le Webdesign. Le côté pratique de la gestion de projet à plusieurs avec InVision et le prototypage
Julie R. - Graphiste indépendante (session du 17 au 19 octobre 2016)
Qu'avez-vous préféré pendant le stage : "la partie sur les tendances du Web, les trucs et astuces pour rester à la page, les nouveautés de la CC sur Photoshop et la découverte d'InVision. Également les typos Web : très utile.
Blandine DG. - Infographiste chez LDC (session du 19 au 21 septembre 2016)