Programme

• Jour 1 Sketch : initiation

  Introduction

  • Origine du logiciel
  • Environnement concurrentiel
  • Atouts et faiblesses

  Prise en main

  • Le paramétrage des préférences
  • La topbar (outils & sa personnalisation)
  • Les espaces de travail (pages & artboards)
  • Les calques
  • L’inspecteur et les raccourcis clavier essentiels

  Designer

  • Création d’artboards : disposition, taille, espacement entre éléments, etc.
  • Création de grid : plan de travail multi dimension, règles & grid
  • Création de calques : attributs, modification & action (rotation, scale, alignements, etc.)
  • Hiérarchie des vues : Disposition, groupes & sous-groupes
  • Création de zones de texte : taille, espace inter caractères / ligne, fill, etc.
  • Raccourcis claviers : copie, duplication, groupe, symboles, formes, etc.

  Exporter

  • Découpes et exportation (interface & css)

  Focus sur les fondamentaux des symboles et styles

  • Symboles : Principe, création, modification & remplacement de symboles (texte & images dynamiques)
  • Styles sur formes : bordures, fond, overlay, ombres, blur, dégradés, etc.
  • Styles sur couleurs & typos : Création d’une « charte graphique dynamique »

  Ateliers pratiques

  • Application des acquis avec la réalisation d’une interface web responsive simple ou app mobile.
  • Organisation, préparation, réalisation de l’interface

• Jour 2 Sketch : perfectionnement

  Booster son workflow : exploration détaillée de plugins, services et outils complémentaires à Sketch

  • Trouver les meilleurs plugins
  • Gérer les plug-in
  • Invision et Zeplin

  Sketch et UX Design

  • Les usages spécifiques de Sketch dans le cadre de l’UX
  • Wireframe responsive
  • User Flow
  • Travailler avec des données
  • Gabarits de livrables UX : persona, experience map, etc
  • Exportation et workflow avec UI designers et développeurs

  Prototyper avec Sketch

  • Les prototypes dans Sketch
  • Les prototypes hors de Sketch : Marvel, InVision, Flinto
  • Tips & Tricks

  Les librairies partagées

  • Sketch Cloud
  • Design System

  Les ressources

  • Savoir trouver et utiliser des ressources
  • Template et kit-UI

  Ateliers pratiques

  • Application des acquis avec la réalisation d’une interface web responsive simple ou app mobile.
  • Réalisation d’un prototype avec les plug-ins cités.

• Jour 3 Design Systems

  Introduction

  • Définition et historique : du Creative design au Design System
  • Construire une charte graphique, une identité avant le Design System
  • Les principes : au début était l’UI kit
  • Connaître les différents frameworks, définition, principes et utilisations (CRM, conception d’un framework dédié, etc.)
  • Comprendre les avantages de l’Atomic Design
  • Maîtriser les différents composants et les outils

  Concevoir et déployer, une organisation à part entière

  • Fédérer les rôles (UX, UI, DA, DEV, Marketing, Métier, etc) et les équipes avec les utilisateurs
  • Organiser la roadmap du projet
  • Informer, former les équipes par-delà la technologie

  Garder la cohérence des éléments d’interface

  • Une identité verbale indissociable
  • Son, image, virtualité, quels éléments intégrer
  • Garder le print en considération
  • Normes d’accessibilité

  La pérennité du Design System

  • Maintenir et faire évoluer
  • Connaître les contraintes et possibilités

  Ateliers pratiques

  • Créer un design system