M2i Formation

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

Par M2i Formation

Objectifs

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

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

Pédagogie

  • 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 formationTélécharger au format pdf Ajouter à mes favoris

Formations de la même catégories (5)

Feel Europe
Créer un site web REST avec Python et FlaskPar Feel Europe

Maitriser le développement d’un site Web moderne avec le framework Flask.

CCM Benchmark
UX et E-commercePar CCM Benchmark

Cette formation fournit les pistes à suivre pour améliorer la qualité de son site e-commerce, mettre en valeur son offre, optimiser l'accès aux fiches produit et le processus de commande et de paiement en ligne.
Elle s'appuie sur des exemples issus des dernières refontes et sur les initiatives récentes les plus exemplaires.

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Qu’il s’agisse d’écrans directement intégrés aux machines, d’écrans d’ordinateur, de tablettes tactiles ou de Smartphones, le but des interfaces reste de dialoguer avec un utilisateur et de répondre à ses besoins. Afin découvrir ces besoins et le rôle de l’ergonome, cette formation vous présentera des méthodes de design d’interface centré utilisateur, et vous fera découvrir les principes d’ergonomie essentiels pour concevoir et auditer une IHM.

Orsys
Responsive web design: les techniques modernes de mise en pagePar Orsys

Ces tutoriels de formation 100% à distance ont pour objectifs de vous apprendre des techniques modernes de mise en page afin de créer des sites web dont l'affichage s'adapte automatiquement aux écrans sur lesquels ils sont diffusés. Ils s’adressent à un public de créateurs de site web, designers, chefs de projets, webmasters ou toute personne disposant des connaissances de base en langages HTML et CSS qui souhaite s'initier au responsive web design . La pédagogie s'appuie sur un autoapprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.