Sketch et InVision sont des outils complémentaires pour le design et la création d’interface.

Principalement utilisé pour la conception d’UI et d’UX d’applications mobiles et web, Sketch permet notamment d’optimiser la production graphique via sa couche de dessin vectoriel (ou bitmap).

Davantagé axé sur le prototypage, l’animation de pages et la conception graphique puissante, InVision a pour fonction (entre autres) d’améliorer l’expérience utilisateur.

Leur utilisation conjointe présente donc de nombreux avantages, en offrant des outils plus rapides, plus techniques et plus complets pour réaliser des maquettes, des wireframes, des parcours et des prototypes. Cette formation Sketch InVision vous propose de prendre en main ces outils, jusqu’à la création et la publication d’un projet concret.

Objectifs opérationnels :

Disposer d’une méthodologie de travail en phase avec les bonnes pratiques du design web et mobile.

Objectifs pédagogiques :

À l’issue de cette formation Sketch InVision, vous aurez acquis les connaissances et compétences nécessaires pour :

• Appréhender les fonctionnalités du logiciel Sketch et de Invision
• Réaliser des maquettes, des wireframes et des prototypes d’un site web ou d’une application mobile
• Découvrir et utiliser facilement tout le potentiel du logiciel Sketch
• Acquérir une méthodologie de travail en phase avec les bonnes pratiques du design web et mobile
• Acquérir les réflexes qui vous permettront d’optimiser le workflow entre les designers et les développeurs

Public :

Ce cours Sketch InVision s’adresse aux UI, UX et Web Designer, graphistes, ainsi qu’aux développeurs web et mobile.

Prérequis :

Aucun pré-requis n’est attendu pour suivre cette formation Sketch InVision.

Jour 1    

Présentation du logiciel Sketch et de Invision

Contexte d’utilisation (UI, wireframes, maquette graphique, prototypage…)
Présentation de l’interface Sketch (menus, barre d’outils, artboards…)
Présentation de l’interface et des fonctionnalités Invision

Cas pratique

Personnalisation de l’interface Sketch et découverte des templates existants

Apprentissage des fonctionnalités principales

Modèles de pages et gestion des plans de travail
Format desktop/tablettes/smartphone
Utilisation de repères et des grilles
Importer des objets graphiques vectoriels ou images
Créer et modifier des éléments d’interface (menu, boutons, fond d’écran)
Utilisation des effets visuels (ombre, dégradé, arrondi…)
Utilisation des typographies

Cas pratique

Sur la base d’un exemple donné par le formateur, l’exercice vise à utiliser toutes les fonctionnalités présentées pour reproduire l’original

Optimiser la production graphique avec Sketch

Gérer l’utilisation des calques et des symboles
Créer des masques
Gestion des styles de texte
Gestion des styles de calque

Cas pratique

Sur la base d’un cas concret, création d’une bibliothèque de composants graphiques et mise en place d’une feuille de style

Gestion des exports avec Sketch

Préparer les fichiers pour l’intégration
Choisir les différents formats d’export (SVG, PNG, JPEG, GIF)
Utiliser l’outil slice pour découper les éléments graphiques de l’interface
Exporter les images et symboles (résolution, taille, format…)

Cas pratique

Le formateur partage un écran aux élèves qui doivent préparer et exporter les éléments nécessaires à l’intégration

Jour 2

Brainstorming d’un projet web ou mobile à réaliser

Réalisation d’un projet complet sous Sketch et d’un prototype interactif avec Invision

Créer les maquettes du projet avec Sketch
Installer le plugin Craft permettant d’exporter sur InVision
Créer un compte et utiliser des fonctionnalités de Invision (travail collaboratif, prototypage…)
Partage des assets et spécifications des maquettes avec Inspect

Cas pratique

Concevoir les maquettes d’un projet concret avec Sketch et utiliser Invision pour générer un prototype animé

Découverte des autres nouveaux outils du design (XD, Figma, Koncept, Fluid UI…)