Logo Laptop  MENU

2 – Cycle UI Design

Apprendre les outils pour concevoir
et tester vos interfaces

Les formations

Cycles complets

Savoir réaliser un prototype est primordial afin de tester les concepts et hypothèses de conception avant de développer le produit.

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

Objectifs de la formation

Ce cycle vous donne les outils pour concevoir les parcours utilisateurs sous forme de prototypes animés intégrant les liens entre les interfaces graphiques composant votre service.

Compétences visées

  • Réaliser des Wireframes (maquettes)
  • Réaliser un prototype animé
  • Utiliser des outils informatiques de prototypage : Sketch, inVision, Adobe XD etc.

Publics concernés

  • UX designer
  • UI Designer
  • Directeur Artistique
  • Chef de projet
  • Développeur
  • Product Owner.
  • Et toutes personnes souhaitant acquérir les compétences techniques de prototypage.

Pré-requis

  • Bonne culture du numérique et de ses usages.
  • Venir avec un ordinateur Apple avec un système d’exploitation récent 10.13 pour bénéficier des dernières fonctionnalités du logiciel.

À noter : si vous n’avez pas de Mac, merci de nous prévenir en avance afin que nous puissions essayer d’en trouver un.

Financements possibles

Les organismes de subvention de formation (AFDAS, FAFIEC, Agefos, Pôle Emploi…), financent toute ou partie des dossiers. Certains OPCA peuvent prendre en charge jusqu’à 100% du coût de la formation.

Afin que vous puissiez entamer les démarches pour faire une demande de financement, merci de remplir le formulaire pour obtenir un devis.
Vous pouvez bénéficier de réductions :  5% avec la carte membre, 15% pour les freelances et TPE, 20% pour les demandeurs d’emplois et étudiants. Vous pouvez échelonner vos paiements sur simple demande.

Pour toute question, appelez-nous au 01 77 16 65 24.

L'écosystème du Laptop : le Laptop UX-Club

En suivant nos formations vous entrez dans un écosystème et une communauté. Au terme de la formation vous devenez membre du Laptop UX-Club et pouvez bénéficier de nombreux avantages.

En savoir plus

3 jours consécutifs

1 500 € HT

Dates & inscription
Demander un devis

Sessions

23 au 25 septembre 2019
25 au 27 novembre 2019
2 au 4 mars 2020
27 au 29 avril 2020
15 au 17 juin 2020

Programme

Cycles & modules
complémentaires

#methods

en formation

Charlotte Pellefigue

(UX designer freelance)

« Une formation aux petits oignons : un apport théorique et pratique hyper efficace. On se sent accompagné et surtout prêt à appliquer rapidement tout ce qu’on a appris dès la sortie. »

Lucille Boulesteix

(Ergonome chez Axance)

« La formation au Laptop c’est comme vivre une expérience cousue main en France par de grands couturiers, tout est conçu pour que vous puissiez en ressortir grandi humainement, méthodologiquement, professionnellement. »

Rodolphe Finamore

(Freelance Digital Strategist)

« La formation a dépassé mes espérances […] Elle m’a appris de nombreuses techniques/méthodologies que je vais pouvoir implémenter dans ma pratique quotidienne. »

Hugo Marcone

(UX designer chez Kamet)

« La formation est tout simplement une des meilleures que j’ai faite dans ma vie, tous sujets confondus. La formation est claire, efficace, bien construite et axée sur le cas concret d’un client. Vous repartirez en ayant appris de nouvelles méthodes et compétences tout en vivant une belle expérience humaine. »