CPF
Formations certifiantes & VAE Expert

Chargé de création Web

Initiation
10 jours - 85 heures
Paris
Code CPF
237359

UI Design : concevoir et réaliser des maquettes ou prototypes de sites

PDF programme PYRAMYD FORMATION Téléchargez le programme de cette formation

CERTIFICAT DE MAITRISE DES FONDAMENTAUX DE LA CREATION ET DE LA PRODUCTION DE SITES WEB

Objectifs

Prérequis

Compétences acquises

Objectifs

  • Identifier les fondamentaux de la conception Web (UI Design)
  • Améliorer l'Expérience utilisateur (UX) dans le projet Digital
  • Concevoir des prototypes graphiques et interactifs pour le Web (avec Sketch)
  • Coaching individuel
  • Finalisation du projet et soutenance devant un jury professionnel


 

Prérequis

Il est nécessaire de savoir utiliser Photoshop. Une connaissance minimale des flux de production Web facilitera l'accès à cette formation.



Compétences acquises:
Concevoir et réaliser des maquettes ou prototypes de sites selon les usages en vigueur

Intégrer les fondamentaux de l'UI et se sensibiliser à l'UX Design. Concevoir des prototypes graphiques et interactifs avec Sketch.

Programme

Module 1 : Identifier les fondamentaux de la conception Web (UI Design) (2 jours)

Planifier le projet Web

• Identifier les différentes étapes d'un projet Web
• Etablir un cahier des charges
• Définir l'arborescence du site et les parcours utilisateurs
• Élaborer le système de navigation

 

Considérer les éléments méthodologiques de prototypage, de mise en pages et de contenu

• Utiliser des prototypes : rough papier, wireframe, maquette graphique, prototype interactif
• Distinguer différents types de mise en pages pour le Web: fixe, fluide, responsive
• Identifier le possibilités typographiques (polices Websafe, Web font, variable-font)
• Appréhender les nouvelles méthodes de conception Web (Atomic Design, design system, style guide)
• Découvrir les outils de conception UI (Balsamiq, XD, Sketch, Figma)
• Identifier les nouvelles tendances du Web design

Partage d'expériences / Etudes de cas / Analyse de sites

Exercices : utilisation d'outils en ligne

 

Module 2 : Améliorer l'expérience utilisateur (UX) dans le projet digital (2 jours)

Concevoir une véritable expérience utilisateur (UX) pour le projet digital
• Décrire et définir le design de l’expérience utilisateur (UX) pour les interfaces homme-machine
• Reconnaître les spécificités de l’UX mobile
• Situer l’ergonomie dans la démarche de l’UX
• Appréhender les processus cognitifs

 

Formuler les bases du Web design
• Identifier les fonctions et les objectifs d’une interface
• Définir le zoning et les bases du “look and feel”
• Utiliser la logique de personas pour créer des parcours utilisateur (user stories)
• Développer ou co-développer un wireframe

 

Concevoir et créer l’interface (UI)
• Appréhender la dualité émotion-cognition dans les interfaces homme-machine
• Intégrer la logique de patterns
• Illustrer les étapes de la conception : du rough au prototype
• Adapter les principes du design visuel au travail pour écrans : lisibilité, gestion de l’espace, typos...

 

Travailler en équipe agile
• Identifier les métiers de la création Web
• Utiliser des logiciels de travail collaboratif
➔ Exercice : ébaucher un persona / Co-produire une arborescence

Module 3 : Concevoir des prototypes graphiques et interactifs pour le Web (avec Sketch) (3 jours)

Appréhender les spécificités du logiciel

• Identifier les périmètres fonctionnels (wireframes, design system, style guide, maquette graphique interactive)
• Découvrir l'interface
• Personnaliser la barre d'outils
Etude de cas : analyse d'interfaces graphiques réalisées avec Sketch

Concevoir une maquette graphique pour le web

• Concevoir des pages et des plans de travail
• Mettre en place une grille
• Importer des objets graphiques bitmap ou vectoriel
• Créer ou modifier des éléments d'interface directement depuis Sketch (menu, boutons, fond d'écran)
• Gérer les effets visuels (masque, boutons, fond d'écran)
• Gérer l'aspect typographique
• Gérer le redimensionnement
• Gérer le responsive
➔ Exercice : réaliser une maquette de site responsive (desktop, tablette, smartphone)

Produire efficacement avec Sketch

• Créer des symboles simples et imbriqués (boutons, UI Cards)
• Organiser efficacement la bibliothèque de symboles
• Exploiter efficacement les propriétés des occurences de symbole (Overrides)
• Créer et utiliser les styles de texte et graphiques
• Créer une bibliothèque et la partager dans plusieurs projets Sketch
• Importer dynamiquement des data (texte, images)
• Mettre en place un design system avec Sketch
➔ Exercice : créer une bibliothèque d'objets graphiques réutilisables et partageables / Création d'un design system

Exporter les éléments graphiques

• Identifier les différents formats d'export pour le Web (SVG, PNG, JPEG, CSS)
• Exporter pour les écrans Retina ou HD
• Réaliser un style guide avec le plugin Craft
• Collaborer efficacement avec les développeurs à l'aide de Zeplin
➔ Exercice : exporter les différents éléments graphiques d'une maquette Sketch

Animer l'interface avec Sketch et le plugin Anima

• Créer des animations de transition
• Animer des interactions
➔ Exercice : animer des interfaces (de site / d'app)

Réaliser un prototype interactif avec Sketch et InVision

• Définir les zones réactives
• Créer des liens entre les plans de travail
• Exporter et partager le prototype interactif dans InVision
➔ Exercices : réaliser une présentation interactive interactive avec Sketch et l'exporter dans InVision

 

Module 4 : Coaching individuel (1 heure)

Coaching individuel à distance assuré par l'intervenant référent

 

Module 5 : Finalisation du projet et soutenance devant un Jury Professionnel (3 jours)

Finalisation

• Finaliser le projet personnel à l'aide de travaux pratiques
• Préparer la soutenance

Jury

• Présenter le projet
• Evaluation et résultat du jury

Nos intervenants
Emmanuel GERARD
Hélène ZUILI
Chargé de création Web
Ref
FCCW0119
Tarif
4300€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.

Paris
Prochaines sessions
05 mars au 26 juin 2020
05-03-2020
02-04-2020
18-05-2020
08-06-2020
24-06-2020
06-03-2020
03-04-2020
20-05-2020
26-06-2020
Cette formation vous intéresse ?