A l'issue de cette formation, vous serez capable de :

• Créer des maquettes de pages Web exploitables par des développeurs
• Intégrer les contraintes de l'HTML et du CSS dans le design
• Préparer et décliner les images pour les écrans : ordinateurs, tablettes et smartphones
• Exporter les maquettes Web en images avec le code HTML et CSS
• Exporter le code CSS de calques Photoshop
• Exporter le design d'une icône d'application mobile dans toutes les tailles et formats nécessaires
• Créer des animations pour le Web.

Jour 1 - Matin

Les tendances graphiques

• Evolution des tendances de design Web et mobile
• Du skeuomorphism au neomorphism
• Le flat design
• Notions de la qualité Web : VPTCS (Visibilité - Perception - Technique - Contenus - Services)
• Les designers inspirants
• Les plateformes de kit de design
• Notion de Design System
• Les logiciels dédiés au UI

UX, IxD et UI

• La méthode UX en 4 étapes
• L'importance du designer d'interaction
• L'interface utilisateur
• Eléments d'interface
• De site Web
• D'application mobile
• D'application pour tablette

Notions d'ergonomie

• Généralités
• Loi de Fitts
• Loi de Hick
• Approche Gestalt
• Exemples sur les formulaires

Exemples de travaux pratiques (à titre indicatif)

• Analyse de tendances graphiques sur une sélection de sites Web et applications
• Mise en pratique des notions d'ergonomie sur un formulaire d'inscription

Jour 1 - Après-midi

Design d'interface avec Photoshop

• Menus, outils et palettes
• Espaces de travail
• Fenêtres et onglets
• Bridge

Importation

• Importer et incorporer
• Importer et lier
• Bloc d'image
• Objets dynamiques (PSB)

L'image numérique

• Taille, définition et résolution d'image
• Rapport longueur / largeur
• Déclinaisons d'images pour le Web, les smartphones et les tablettes
• Le recadrage libre et le recadrage basé sur un format
• L'ajustement des tailles et des résolutions
• Profils ICC

Les ajustements de contrastes et couleurs

• Réglages dynamiques
• Niveaux et courbes
• Correction et transformation des couleurs

Exemples de travaux pratiques (à titre indicatif)

• Préparation d'images pour différents supports (desktop, tablette, mobile)
• Correction colorimétrique et ajustements sur une série de photos produit

Jour 2 - Matin

Les sélections

• Les outils de sélection de base
• Rectangle
• Cercle
• Lasso
• Les outils de sélection pour le détourage
• Baguette magique
• Sélection rapide
• L'amélioration du contour
• Sélectionner et masquer
• La mémorisation des sélections
• Création de calques à partir de sélection
• Les tracés à la plume

Les calques et les masques

• Utilisation des calques
• Ordre et organisation en groupe
• Les options de superpositions
• Opacité et modes de fusions
• Les transformations
• Transformation manuelle
• Outil règle
• Transformations géométriques
• Déformation
• Fluidité
• Le photomontage
• Les masques
• Masque de fusion et masque vectoriel
• Masquage multiple
• Copier le SVG
• Copier le CSS

Exemples de travaux pratiques (à titre indicatif)

• Création d'un photomontage avec sélections précises et masques
• Manipulation avancée des calques (fusion, déformation, transformation)

Jour 2 - Après-midi

La création de maquette pour les pages Web

• L'outil texte et les palettes texte, les feuilles de style
• Utilisation des polices
• Panneau Glyphes
• Les outils de création graphique
• Plumes et formes vectorielles
• Calques de forme
• Les styles de calques : effets d'ombre portée, de relief...
• Les plans de travail
• Préférences pour les plans de travail
• Création d'un document de plan de travail
• Ajout de plans de travail au document actif
• Utilisation des plans de travail
• Exportation de plans de travail
• Les compositions de calques
• Visibilité
• Position
• Style

Export d'images

• Tableau comparatif des formats Web
• Choix entre JPEG, PNG, GIF, WEBP et SVG
• Rapport poids / qualité
• Outils intégrés de comparaison
• Enregistrer pour le Web
• Exporter les images
• Exporter l'HTML
• Exporter les images et l'HTML
• Exportation rapide selon un format défini
• Exporter sous
• Enregistrer sous
• Export CSS

Exemples de travaux pratiques (à titre indicatif)

• Création d'une maquette Web responsive avec plans de travail
• Exportation d'images optimisées pour le Web dans différents formats

Jour 3 - Matin

La découpe pour le Web

• Notion de tranches
• Manuelles
• D'après les calques
• D'après les repères
• L'exportation des tranches
• Conservation et réglage de la transparence
• Exportation en image seule ou avec l'HTML
• Réglages des paramètres d'exportation
• L'exportation des images à partir des calques

Tester sur le Web

• En local
• Ouverture dans un navigateur
• Créer un serveur Web local
• A distance chez un hébergeur
• Outils de transferts FTP

Edition du code HTML et CSS

• Remplacement des éléments images par du texte
• Utilisation des images comme image de fond de cellule ou comme arrière-plan d'une règle CSS
• Création d'un fichier des styles CSS séparé

Exemples de travaux pratiques (à titre indicatif)

• Découpe et export d'une maquette en tranches image + HTML
• Mise en ligne locale et tests de la page Web générée

Jour 3 - Après-midi

Design d'interface avec Illustrator

• Menus, outils et palettes
• Travailler sur plusieurs plans de travail
• Exporter
• La sélection
• Les écrans (iOS et Android)
• Le Web
• Trancher et exporter pour le Web
• Exportation d'icones d'applications

Création d'animation (GIF animés)

• La palette animation
• Ajout d'image
• Création de trajectoire
• Réglage du GIF animé
• Mouvement en 3D pour la création de vidéo
• Introduction aux animations Lottie (Airbnb + After Effects)

Exemples de travaux pratiques (à titre indicatif)

• Réalisation d'un GIF animé à partir d'une série d'images
• Intégration d'une animation Lottie sur une page Web