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

• Appliquer les bonnes pratiques de la conception d'interfaces
• Créer des interfaces d'applications mobiles et des sites Web Responsive
• Utiliser les principaux plug-ins de Sketch App
• Réaliser des parcours de navigation répondant aux besoins des utilisateurs
• Partager et tester des prototypes pour réaliser des interfaces fonctionnelles.

Jour 1

Introduction

• Qu'est-ce que Sketch App ?
• Les atouts et les enjeux du logiciel
• Les dernières actualités du logiciel
• Les logiciels phares de la création d'interface
• Les principes du design atomique
• Le design system

Découvrir l'interface Sketch

• Découvrir les zones de l'interface
• La barre de menus et la barre d'outils
• Personnaliser la barre de menus
• La fenêtre des composants
• Découvrir les raccourcis principaux

Créer un projet

• Créer un espace de travail et un projet
• Enregistrer un document dans votre espace de travail et en local
• Importer un fichier Sketch

Designer avec Sketch

• Créer des plans de travail (artboards)
• Créer et gérer les calques
• Utiliser les grilles et les repères

Exemple de travaux pratiques (à titre indicatif)

• Utiliser des éléments d'un kit UI dans la conception d'une maquette

Les formes

• Créer des formes prédéfinies et personnalisées
• Créer des éléments vectoriels avec l'outil Plume
• Manipuler les points d'ancrage
• Importer des éléments vectoriels (icônes, logos...)
• Utiliser les opérations booléennes (union, subtract...)

Les images et les couleurs

• Importer des fichiers bitmap
• Utiliser les datas d'images
• Créer des masques
• Créer et manipuler les couleurs
• Créer et manipuler les effets (ombre, flou)

Exemples de travaux pratiques (à titre indicatif)

• Importation et incorporation de fichiers sources (Photoshop, Illustrator)

Les textes

• Saisir et agencer des titres et paragraphes
• Utiliser les datas et créer des datas personnalisées
• Créer des grilles de contenus

Les symboles

• Créer des symboles simples
• Manipuler les fonctionnalités "Overrides"
• Créer des symboles imbriqués "Nested symbols"

Exemple de travaux pratiques (à titre indicatif)

• Créer deux écrans d'application mobile (connexion / inscription)

Jour 2

Les symboles - Suite

• Créer des symboles ajustés "Smart Layouts"
• Gérer les "Smart Layouts" dans vos designs

Exemple de travaux pratiques (à titre indicatif)

• Créer des composants (headers, cards...)

Les styles et librairies

• Découvrir des librairies de kits UI (Material Design, iOS)
• Créer et organiser des variables couleurs
• Créer et organiser les styles de texte
• Organiser la fenêtre des composants et styles

Exemple de travaux pratiques (à titre indicatif)

• Créer une librairie

Prototyper avec Sketch

• Créer des interactions entre les plans de travail
• Créer les transitions en survol "Overlays"
• Découvrir les options avancées des "Overlays"
• Gérer les déclencheurs "Tap/Click - Hover - Press"
• Utiliser les fonctionnalités "Autolink, Overrides..."
• Utiliser les fonctions d'animation "Smart Animate"

Exemples de travaux pratiques (à titre indicatif)

• Créer une infobulle et un encart pop-up
• Créer un formulaire

Visualiser le prototype

• Visualiser le prototype dans l'outil Sketch et sur le Web
• Utiliser les options d'affichage (full view, hotspot...)
• Visualiser le prototype via l'application Sketch Mirror, Crystal

Exemple de travaux pratiques (à titre indicatif)

• Visualiser un prototype

Concevoir des interfaces Responsive

• La création d'interfaces Responsive (Web, tablette, mobile)
• Organiser les plans de travail
• Importer des ressources UI

Exemple de travaux pratiques (à titre indicatif)

• Créer une landing page Responsive

Jour 3

Optimiser le processus de travail

• Organiser son projet Web ou App Mobile
• Maîtriser les bonnes conventions de nommage
• Découvrir les principaux plug-ins de Sketch pour augmenter sa productivité
• Utiliser la mini carte de navigation
• Utiliser la barre de commande (actions et recherches rapides)
• Epingler les fichiers dans vos projets

Collaborer et partager

• Partager un fichier pour collaborer en temps réel
• Ajouter des commentaires dans le prototype
• Collaborer et partager les fichiers sur la Web App
• Inspecter le fichier Sketch pour les développeurs

Exporter

• Préparer votre design pour l'exportation
• Définir les formats d'export JPG, PNG, SVG, PDF
• Préparer et exporter les éléments pour l'intégration Web (assets, tokens)

Exemples de travaux pratiques (à titre indicatif)

• Conception d'une interface :
• Réaliser une interface Web ou une application mobile à partir d'un kit UI fourni
• Créer et organiser une bibliothèque de styles et de symboles
• Intégrer des contenus visuels et textuels (data et plug-ins)
• Réaliser un prototype interactif
• Préparer le fichier pour l'exportation des assets vectorielles, bitmaps
• Visualiser et partager le prototype
• Présentation du prototype en fin de journée