Webdesign cours complet UX et UI – CP FFP

Cette formation webdesign certifiante vous permettra d’acquérir une excellente méthodologie sur la conception,
l’architecture et le prototypage d’un site Web avec le logiciel Adobe XD. Vous apprendrez également à composer
des mises en page efficaces et à optimiser la colorimétrie, le choix des polices et l’attribution d’une iconographie
appropriée.

Objectifs : Methode pédagogique :

Maîtriser dans sa globalité le processus de conception Formation en présentiel et/ou distanciel pendant
UX et UI design d'un site web à destination de tous les laquelle sont alternés les explications théoriques et
supports. techniques et les exercices pratiques sur les logiciels.

Public : Modalites d"évaluation :

Graphiste, Infographiste, webmaster, concepteur ou
développeur de sites ou d'applications mobiles, chef de
projet web et digital…
Durée : 10 jours -70 heures
Evaluation en continu (Questionnaires techniques et
exercices) puis, en fin de parcours, travail final évalué
par un jury. Un Certificat Professionnel est délivré si, à
l'issu des évaluations de compétences, le minimum de
points requis est obtenu. Taux de réussite 2021 : 100%.

Pré-requis : Formateurs Expérimentés :

Il est nécessaire pour suivre cette formation d'avoir une
culture Web. Des bases en graphisme sont conseillées.
Prise en charge :
Le candidat a acquis les fondamentaux et bases
techniques et sait : 1) En UX Design : organiser le
contenu, structurer la navigation et hiérarchiser les
informations, conceptualiser le guidage de l’utilisateur,
architecturer les contenus, construire une arborescence,
appliquer les règles d’ergonomie, réaliser un prototype
Web complet. 2) En UI Design : concevoir une
maquette graphique adaptée à la structure définie dans
la phase d’UX design. Au final, livrer une conception
webdesign complète.
Formateurs webdesigners.
Certification :
Certification Professionnelle FFP : Webdesign -
Fondamentaux et bases techniques
Suivi à la suite d"une formation :
Suivi téléphonique : nous restons à votre disposition
pour toutes vos questions.
Effectif :
Groupe (Maximum 8 personnes) ou individuel.
Materiel pédagogique :
Un ordinateur par personne avec les logiciels
Photoshop et Adobe XD. Support de cours fourni.

Responsable formation :
Hugues Segond

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
1
 Programme

UX DESIGN (USER EXPERIENCE)

QU'EST CE QUE L'UX DESIGN?
Présentation de l'expérience utilisateur (UX)

Définition
Rôle
Petit historique

Comprendre le facteur humain

Le processeur
Extraire un schéma
Composition avec et sans proximité
La densité informelle
Hiérarchie des composants visuels dans une image
Les neurones miroirs
Les interférences
Les limitations cognitives
Capter l'attention du cerveau

COMPRENDRE l'UX DESIGN

Les principes de conception

Feedback
Affordance et mapping
Guidage
Découverte progressive
Homogénéité et anticipation de l'erreur
La narration

Le design thinking

Définition
Les méthodes d'idéation

Exercice Atelier d'idéation basé sur la refonte d'un site

ARCHITECTURER L 'INFORMATION
L'arborescence
Croquis

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
2
 Zoning
Wireframe
Storyboard
Les grilles
Les types d'interface
Sens de lecture
Zone de flottaison
Fil d'Ariane
Zoning de bloc
L'usage des textes et pictogrammes
Hiérarchie textuelle et SEO
Les formulaires

REALISER UN PROTOTYPE
Le prototype

Définition
Les 4 étapes
L’anticipation

Les bases du projet

La stratégie
Devices et checkpoints
Veille fonctionnelle
L’innovation
Les personas
La taxonomie
L’user flow
Le mockup
Le prototypage
Le design
Le maquettage / Test utilisateur

Exercice Appliquer la méthodologie vue précédemment pour la homepage d'un site ecommerce. De la stratégie
jusqu'au croquis

REALISER UN PROTOTYPE AVEC ADOBE XD

Comment prototyper avec Adobe XD

Découverte de l'interface
Utiliser les plans de travail
Dessiner des formes
Plan de travail responsif
Comprendre les actifs
Comprendre les composants
Créer un prototype ou un wireframe

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
3
 Animer son prototype

Exercice Réaliser un prototype à partir du croquis ébauché

CONCEVOIR UNE APPLICATION

Exercice 1: Stratégie et définition des objectifs

Stratégie
Devices
Veilles fonctionnelles
Personas
Taxonomie
User flow

Exercice 2 : Ebauche graphique de 3 pages (croquis)

Exercice 3 : Prototypage sur Adobe XD au format mobile

UI DESIGN (USER INTERFACE)

STRUCTURE DE LA MAQUETTE
Qu’est-ce que le Design d’interface
Quel est le rôle du Designer d’interface
Pourquoi la qualité graphique doit être au rendez-vous
Les grandes tendances
Le Skeuomorphisme
Le Flat Design
Les devices et les checkpoints
Le responsive

TYPOGRAPHIE
Définition
Les différents formats
Différence entre la police et la fonte
Les 5 familles typographiques
Les polices à éviter
Les balises H
Jouer avec les formes et les familles
L’usage des textes
Les sites indispensables

COLORIMÉTRIE
Définition
Le bon choix de couleurs
Le bon vocabulaire

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
4
 La règle des 60-30-10
Adobe Color
Les différentes combinaisons
L’importance du contraste
L’exploitation des couleurs
Définition de toutes les couleurs

COMMENT CRÉER UN LOGO

Connaître sa cible
Veille graphique
Soyez unique, intemporel et équilibré
Comment tirer profit de la psychologie des formes
Utiliser les bonnes polices
La polysémie d’un logo
Savoir adapter son logo
Rédaction d’un brief
La planche tendance

ICONOGRAPHIE
Définition
Dénotation & connotation
Le réalisme
La géométrie
Les signes
Toucher au plus juste
Hiérarchie des composants visuels
Comment choisir la bonne image : Le visage
Comment choisir la bonne image : la qualité visuelle
Comment choisir la bonne image : Pixelisation
Comment choisir la bonne image : L’espace autour du sujet
Comment choisir la bonne image : La tendance
La règle de tiers
Le nombre d’or
Les bons outils
Où faire sa veille graphique

NEWSLETTER
Définition
Disparité d’interprétation
Anatomie d’une newsletter réussie
Les contraintes techniques
Comment concevoir des E-mailings avec Mailchimp

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
5
LES BANNIÈRES
Définition
Anatomie d’une bannière réussie
Les principaux formats
Les bannières animées
Comment concevoir des bannières animées avec Google Webdesigner

TRAVAUX PRATIQUES
Adaptation d’une landing page pour différents écrans
Création d’un logo et d’une charte graphique Web
Réalisation d’un E-mailing sur Mailchimp
Conception de bannières animées sur Google Webdesigner
Maquettage d’une application mobile et de sa campagne (bannière + newsletter)

Crea Image 31-33 avenue de la Sibelle 75014 Paris - Tel: 01 48 03 57 43

SIRET: 47973924500047 - SAS RCS PARIS B 479739245 - APE : 8559A - Numéro de déclaration d'activité : 11753682075
www.crea-image.net
6