Sketch - Design d'interface - Prototypages, mockups, wireframes

Introduction

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

Découvrir l'interface Sketch

• Découvrir les zones de l'interface
• Personnaliser la barre de menu
• 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 sur le Web et en local

Designer avec Sketch

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

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

• Importer des fichiers bitmap
• Utiliser les Datas d'images (Sketch et Craft Invision)
• Créer des masques

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

Exemple de travaux pratiques (à titre indicatif)

• Créer des plans de travail utilisant les fonctionnalités de base

Les symboles

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

Les styles et librairie

• Créer et organiser les couleurs
• Créer et organiser les styles de texte
• Organiser la fenêtre des composants et styles
• Mettre à jour une librairie
• Utiliser des librairies de kits UI

Prototype

• Créer un prototype avec Sketch
• Créer des interactions entre les plans de travail
• Les transitions en survol "Overlays"
• Les fonctionnalités "Autolink, Overrides..."
• Visualiser le prototype avec le logiciel Sketch
• Utiliser l'application Sketch Mirror, Crystal ou la Web App
• Créer un prototype avec Craft
• Synchroniser le prototype avec InVision
• Utiliser les interactions et transitions animées de Craft

Collaborer et partager

• Collaborer en temps réel sur le logiciel Sketch
• Utiliser les commentaires
• Collaborer et partager les fichiers sur la Web App
• Collaborer avec Invision Craft Freehand
• Découvrir la fonctionnalité Design System de Craft

Exporter

• Préparer votre design pour l'exportation
• Définir les formats d'export JPG, PNG, SVG, PDF
• Exportation pour intégration Web (code et assets)
• Sketch Web Inspect vs InVision Inspect (Craft)

Optimiser le processus de travail

• Organiser son projet Web ou App Mobile
• Créer des templates et des formats prédéfinis
• Maîtriser les bonnes conventions de nommage
• Découvrir les principaux plug-ins de Sketch pour augmenter sa productivité
• Utiliser les fonctionnalités du plug-in Craft

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

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