Formation Design et prototypage d'interface Photoshop et Illustrator pour le Design d'interface

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques

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

Modalités et moyens pédagogiques

Formation délivrée en présentiel ou distanciel* (e-learning, classe virtuelle, présentiel à distance).

Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).

Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :

• Ordinateurs Mac ou PC (sauf pour les cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
• Environnements de formation installés sur les postes de travail ou en ligne
• Supports de cours et exercices

En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatique...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.

* nous consulter pour la faisabilité en distanciel

** ratio variable selon le cours suivi

Niveau requis

Avoir une bonne connaissance de l'environnement informatique (pratique courante d'OS X ou de Windows).

Public concerné

Webmasters, créateurs de sites Internet, chefs de projets tablettes et smartphones, responsables de campagne multicanal, développeurs d'applications pour tablettes (iPad / Android) et smartphones.

Programme

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

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

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

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 au format (...)
• Exporter sous
• Enregistrer sous
• Export CSS

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é

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)

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des productions
• Et, en fin de formation, par un questionnaire d'auto-évaluation

Partager cette formation Télécharger au format pdf Ajouter à mes favoris