UX UI Design - Cours complet

Comprendre l’UX design

Les principes de conception

• Le feedback
• Affordance et mapping
• Le guidage
• La 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
• 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

Réaliser 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.

Prototyper avec Figma

Découvrir Figma

• 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
• Animer son prototype

Exercice

• Réaliser un prototype à partir du croquis ébauché.

Concevoir une application

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

• La stratégie
• Les devices
• Les veilles fonctionnelles
• Les personas
• La taxonomie
• L’user flow

Exercice 2 : Ébauche graphique de 3 pages (croquis) 

Exercice 3 : prototypage sur Figma au format mobile

Présentation et architecture

Présentation de l’UI Design

• Définition
• Son rôle
• Les enjeux
• Les grandes tendances du Web
• L’expérience utilisateur

L’architecture

• Comprendre les devices et les checkpoints
• Composer à partir d’un wireframe
• Utiliser des grilles
• Penser en Responsive design
• Organiser son PSD

Construction d’un site one page

• Header, navigation, contenu et footer

Exercice

• Recomposer et adapter un site en One page initialement conçu pour les desktops pour une déclinaison en application mobile.

Colorimétrie et polices

Colorimétrie

• Définition
• L’usage des couleurs
• Le cercle chromatique
• Les types de combinaisons
• Les contrastes
• Le langage des couleurs Adobe color CC et autres outils indispensables

Polices

• Définition
• Différence entre Police, Font et Typographie
• Les grandes familles typographiques
• Bien choisir ses polices
• Règles typographiques
• Google fonts et autres outils indispensables

Logotype

• Comment créer un logo

Exercice

• Création d’un logo à l’aide des Google fonts et d’Adobe Color CC

Iconographie

• Définition
• Hiérarchie des composants visuels
• Les neurones miroirs – Jouer avec les connotations
• Jouer avec les connotations

Exercices

• Analyses d’images (connotations et dénotations)
• Trouvez le bon visuel pour le bon environnement

Réaliser un e-mailing

Anatomie d’un e-mailing

• Définition
• Contraintes techniques
• Architecturer efficacement son E-mailing
• Découverte de Mailchimp

Exercice

• Vous serez en charge de réaliser la maquette d’un emailing avec Adobe Photoshop et Mailchimp

Réaliser des bannières en GIF animés

• Définition d’une bannière
• Les formats standards
• Optimiser votre déclinaison
• Animer votre bannière sur Photoshop
• Bien exporter vos bannières
• Découverte de Google Webdesigner

Exercice

• Réalisation d’un jeu de 3 bannières

Maquetter une application

Exercice

• Réalisation d’une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes