Accueil    Formations    Digital & Multimédia    Les essentiels de la créa    UX Design et Design Thinking ou le Design centré utilisateur    Sketch - Design d'interface - Prototypages, mockups, wireframes

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques / Compétences visées

  • Appliquer les bonnes pratiques de la conception d'interfaces
  • Créer des interfaces d'applications mobiles et des sites Web responsives
  • 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.

Niveau requis

Avoir une bonne connaissance du Web et une bonne maîtrise de son environnement informatique. Connaître le design informatique est un plus (Illustrator, Photoshop, InDesign, XPress, Affinity...).

Public concerné

Graphistes, webdesigners ou toute personne devant créer des maquettes de sites Web et d'applications mobiles et tablettes.

Programme

Introduction

  • Qu'est-ce que Sketch App ?
  • Les atouts et les enjeux du logiciel

Le prototypage

  • Les étapes de conception
  • Le design
    • D'interface
    • Atomique

Découvrir l'interface Sketch

  • Barre d'outils et panneaux de propriétés
  • Les plans de travail, pages et calques
  • Personnaliser la barre d'outils
  • La fenêtre des composants

Réaliser une interface d'application mobile

  • Définir le croquis de l'interface ou maquette filaire détaillée selon une chorégraphie de contenu adapté

Designer avec Sketch

  • Créer un plan de travail
  • Créer et gérer les calques
  • Utiliser les grilles et les repères
  • Créer et modifier des formes
  • Importer des éléments graphiques vectoriels et bitmap

Les formes

  • Créer et modifier des formes
  • Créer des éléments vectoriels avec l'outil Plume
  • Manipuler les points d'ancrage

Les textes

  • Saisir et agencer du texte
  • Créer des styles de texte

Les images

  • Importer des images
  • Créer des masques

Les symboles

  • Créer des symboles simples
  • Manipuler les symboles overrides
  • Créer des symboles
    • Imbriqués
    • Responsives (Smart Layout)

Les styles

  • Manipuler la fenêtre des composants et styles
  • Créer et manipuler les couleurs variables
  • Organiser les styles de textes

Prototyper

  • Installer le plug-in Craft (InVision)
  • Créer des liens d'interactions avec
    • Sketch
    • Craft
  • Synchroniser le prototype avec InVision

Collaborer

  • Collaborer avec Craft Freehand
  • Générer un Design System (DSM - Invision)

Partager

  • Partager avec Sketch Cloud
  • Utiliser les applications Sketch Mirror, Crystal et Invision

Exporter

  • Choisir les formats d'export (JPG, PNG, SVG...)
  • Désigner la taille des éléments pour les écrans Retina ou HD
  • L'exportation pour les intégrateurs Web (Sketch / Invision Inspect)

Optimiser le processus de travail

  • Créer un projet et organiser les fichiers
  • Collaborer en temps réel autour d'un prototype
  • Définir les bonnes conventions de nommages
  • Installer les principaux plug-ins pour augmenter sa productivité
  • Utiliser les librairies partagées et les Datas

Concevoir une interface responsive de site Web ou une application mobile

  • A partir d'un kit UI, fournir, créer et organiser les bibliothèques de styles et composants
  • Réaliser un prototype interactif avec Craft
  • Préparer le fichier pour l'exportation des images vectorielles ou bitmap
  • Partager le prototype sur InVision Cloud

Modalités d’évaluation des acquis

  • En cours de formation, par des productions
  • Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Vous souhaitez suivre cette formation ?

Cette formation est disponible en présentiel ou en classe à distance, avec un programme et une qualité pédagogique identiques.

Choisissez la modalité souhaitée pour vous inscrire :

Votre société a besoin d'une offre personnalisée ? Contactez-nous

Faites-nous part de votre projet de formation, nous sommes là pour vous guider.

Contactez-nous