Développement Web & No-Code
Sketch : design et prototypage d'interfaces web et mobile
Intermédiaire
À propos de cette formation
Sketch est un outil de référence pour les graphistes et webdesigners souhaitant créer des interfaces web et mobile selon les pratiques de l'UX design. Cette formation de 2 jours couvre l'ensemble des fonctionnalités essentielles : prise en main de l'interface, conception de maquettes responsive et mobile, création de formes vectorielles, export des assets et prototypage interactif avec InVision.
Objectifs de la formation
- Appliquer la démarche UX design dans un projet adaptive ou responsive web design
- Maîtriser les méthodes et techniques de conception d'une interface responsive
- Concevoir et prototyper une interface avec Sketch App
- Réaliser des parcours de navigation répondant aux besoins des utilisateurs
- Appliquer les bonnes pratiques du design d'interface et des interactions
Programme détaillé
Module 1 — Spécificités et présentation de Sketch
- Qu'est-ce que Sketch App ? Atouts et positionnement
- Les plug-ins essentiels : Craft, Zeplin, Anima
- Périmètres fonctionnels : wireframes, design system, style guide, maquette interactive
- Travaux pratiques : découverte et première manipulation de l'outil
Module 2 — Découvrir l'interface Sketch
- Barre d'outils et panneaux de propriété
- Plans de travail, pages et calques
- Personnaliser la barre d'outils
- Travaux pratiques : manipulation de l'interface
Module 3 — Prototyper une maquette pour le web
- Les étapes de conception d'une interface web
- Le design d'interface et la chorégraphie de contenu
- Les tendances actuelles du design
- Créer un plan de travail, gérer les calques, utiliser les grilles et les repères
- Importer des éléments graphiques vectoriels et bitmap
- Travaux pratiques : création d'une première maquette de page web responsive
Module 4 — Interface d'application mobile
- Spécificités des interfaces mobiles
- Définir le croquis ou la maquette filaire selon une chorégraphie de contenu adaptée
- Travaux pratiques : création d'une première interface mobile
Module 5 — Designer avec Sketch
- Créer et modifier des formes
- Organiser les éléments dans les calques
- Travaux pratiques : travail avancé avec les calques et les repères
Module 6 — Vecteurs et formes avancées
- Sketch et les vecteurs
- L'outil crayon et l'outil plume
- Créer, modifier et éditer des formes vectorielles
- Manipuler les points d'ancrage
- Les objets texte, les lignes et les bordures
- Travaux pratiques : création de formes personnalisées avec l'outil plume
Module 7 — Exporter les éléments graphiques
- Les différents formats d'export web : SVG, PNG, JPEG, CSS
- Exporter pour les écrans Retina et HD
- Réutiliser un style guide avec le plug-in Craft
- Collaborer efficacement avec les développeurs via Sketch et Zeplin
- Travaux pratiques : création d'un export web complet
Module 8 — Prototype interactif avec Sketch et InVision
- Définir les zones réactives
- Créer des liens entre les plans de travail
- Exporter et partager le prototype interactif dans InVision
- Travaux pratiques : création d'un prototype interactif complet
Prérequis
Avoir une bonne culture web. La pratique de logiciels de PAO constitue un atout.