UI Design - Conception d'Interface Utilisateur

La diversification des canaux de communication oblige aujourd'hui les graphistes traditionnels à devenir polyvalents. Ils doivent ainsi pouvoir proposer à leurs clients la réalisation de projets Print, mais également à minima la conception de projets Web. À ce titre, le designer d'interface utilisateur sera en capacité de concevoir des contenus digitaux, mais également des interfaces de sites web ou d'Applications mobiles.


La formation UI Design - Conception d'Interface Utilisateur vous permettra de concevoir l'interface d'un site web ou d'une application mobile, en partant du cahier des charges et du brief créatif dans l'objectif de concevoir un prototype fonctionnel et interactif.

Graphiste, maquettiste.

Maîtrise de l'outil informatique et bonne connaissance de la navigation web.

Pratique professionnelle des logiciels Adobe Photoshop et Adobe Illustrator.

  • Identifier les principes de navigation Web et Desktop / supports mobiles tactiles et les contraintes d’interactions.
  • Réaliser un zoning, wireframes, maquettes et des prototypes interactifs.

Programme et modules

Certains modules peuvent être suivis séparément

  • Processus de conception digital/web
  • Rôle du designer graphique
  • Cadrage de la demande
  • Cahier des charges et brief créatif
  • Outils de hiérarchisation de contenu
  • Arborescence d'un site web
  • Environnement multi-écrans (desktop, tablette, mobile)
  • Zoning et wireframes
  • Création d'un univers graphique sur mesure
  • Maquette ou Style Guide
  • Mini-atelier (analyse de l'existant, optimisation de l'arborescence, création de wireframes)
(Module disponible séparément) Voir le module Conception et création graphique pour le web

  • Structuration et architecture de l'information simplifiée
  • Techniques de production pour desktop et supports mobiles
  • Critères ergonomiques relatifs au web et aux supports mobiles
  • Chartes d'interface (guidelines vs design graphique libre)
  • Principes de navigation et d'interaction sur tablette et mobile
  • Principes de navigation sur desktop
(Module disponible séparément) Voir le module UI - Conception d'interface interactive

Fonctionnement d'un site web et rendu navigateur

Création d'une page web en HTML

  • Bases du langage et syntaxe HTML
  • Structure d'une page
  • Insertion d'images, utilisation des listes ordonnées ou à puces
  • Liaison des pages entre elles
  • Insertion du son et de la vidéo en HTML

Mise en forme du site web en CSS

  • Création et liaison d'un fichier CSS à une page web
  • Architecture d'un fichier CSS
  • Sélecteurs de base
  • Modification des styles de texte, d'arrière-plan, mise en forme des blocs, etc.

Utilisation de l'inspecteur web

(Module disponible séparément) Voir le module HTML et CSS - Bien démarrer

Introduction

  • Historique du logiciel et présentation des concurrents (Sketch, Adobe XD)
  • Comparer Figma en version Desktop et en version Web

Découverte de l'interface

  • Analyser les panneaux principaux (Calques, Pages et Design)
  • Utiliser l’espace de travail : pages, frames, calques et groupes
  • Utiliser les panneaux : Calques, Assets, Design et Prototype

Utiliser les outils de création

  • Formes géométriques simples, l’outil texte et l'importation d’images
  • Les masques
  • Les outils d’alignement et de redimensionnement
  • Les calques, les groupes, le rangement, le nommage des éléments
  • Les grilles et les repères

Raccourcis clavier

  • Utiliser et appliquer les raccourcis indispensables

Utiliser les outils de création avancés

  • Les Formes complexes (Pathfinder, Boolean, Plume)
  • Les Styles, les Couleurs (RGBA, CSS, HSB), le Texte et les Effets
  • Les modes de fusion
  • Les composants et les instances

Interaction, optimisation, collaboration et Exportation

  • Gestion du scroll
  • Optimisation et exportation des visuels pour le web
  • Introduction au prototypage et partage du projet avec une équipe
  • Visionner le prototype sur un mobile
  • Insérer des commentaires
  • Introduction au panneau d’inspection
  • Exporter et importer un fichier .fig
(Module disponible séparément) Voir le module Maquette et prototypage avec FIGMA - Bien démarrer

Conception

  • Les contraintes
  • L'auto-layout
  • Les composants emboités, les variants, les composants interactifs
  • Les librairies de styles et composants partagés
  • La grille fluide
  • Les image flexibles

Plug-ins

  • Installer un plug-in
  • Passage en revue des plugins essentiels

Prototype avec des animations

  • Figmotion
  • Prototypage avancé avec smart animate
(Module disponible séparément) Voir le module Maquette et prototypage avec FIGMA - Perfectionnement

Le stage se déroule sous forme d'un atelier dans lequel les cas de figure usuels du logiciel sont abordés.

Le stagiaire réalise individuellement à partir d'éléments grapqhiques fournis, un projet fictif proposé par le formateur.

Thèmes mis en pratique

  • Prototype de l'interface d'un site Web ou d'une App


La sélection des candidats pourra être effectuée lors d'un entretien préalable.

Évaluation par l'intervenant des travaux ou exercices effectués tout au long de la formation.

  • 1 poste Mac par participant.
  • Adobe CC
  • Vidéoprojecteur

10 stagiaires maximum

9h/16h.

Cette action de formation est adaptable aux personnes en situation de handicap.

Prochaine session

Durée

18 jours

Tarif

4900.00 €

Modalités

Liste des sessions

Durée

18 jours

Tarif

4900.00 €

Lieu

Modalités

Contactez nous

Pour suivre cette formation, échanger autour de votre projet, obtenir des conseils…

Votre contact dédié

Lucette Berbinan

* champs obligatoires
La CCI Paris-Ile-de-France collecte ces données pour répondre à votre demande et, au-delà, vous tenir informé de ses offres de service. Ces données sont conservées pour une durée de 3 ans. Ces informations ne sont pas communiquées à des tiers. Conformément à la loi "Informatique et Libertés" du 6 janvier 1978, modifiée et au Règlement (UE) 2016-679 sur la protection des données, dans le cadre et les limites posées par ces textes, vous disposez d'un droit d'accès, de portabilité, de modification, de rectification, d’opposition et de suppression des données à caractère personnel vous concernant en contactant info@gobelins.fr ou, en cas de difficulté le délégué à la protection des données à l'adresse cpdp@cci-paris-idf. En dernier lieu, vous pouvez déposer une réclamation auprès de la CNIL - 3 Place de Fontenoy - TSA 80715 - 75334 PARIS CEDEX 07.