Formation Sketch et InVision : les nouveaux outils du design

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

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

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…)

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.