Formation Apprenez le Design UI et Web pour Créer des Sites Impactants

01.Introduction au Design UI/UX et au WebDesign

• —Définition et différenciation UI/UX/WebDesign
• —Rôle du Concepteur Web : missions et responsabilités
• —Panorama des outils et logiciels essentiels
• —Les fondamentaux de la psychologie de l'utilisateur
• —Tendances actuelles et futures du webdesign

02.Comprendre l'Expérience Utilisateur (UX)

• —Recherche utilisateur : méthodes et outils
• —Personas et scénarios d'usage : création et utilité
• —Parcours utilisateur (User Journey) : cartographie et optimisation
• —Arborescence et architecture de l'information
• —Tests utilisateurs : techniques et analyse des retours

03.Principes fondamentaux de l'Interface Utilisateur (UI)

• —Ergonomie et accessibilité web (WCAG)
• —Principes de conception visuelle : hiérarchie, alignement, contraste
• —Typographie pour le web : choix et lisibilité
• —Palette de couleurs : signification et harmonie
• —Iconographie et illustrations : rôle et intégration

04.Outils de Conception UI/UX : Figma

05.Prototypage et Maquettes

• —Du wireframe au prototype : progression de la fidélité
• —Maquettes haute fidélité : création et détails
• —Interaction et animation pour améliorer l'UX (Micro-interactions)
• —Création de prototypes interactifs avec Figma
• —Bonnes pratiques de nommage et organisation des calques

06.Design Systems et Réutilisabilité

• —Introduction aux Design Systems : composants et guidelines
• —Création d'un mini Design System simple
• —Gestion des états des composants (hover, active, disabled)
• —Documentation du Design System
• —Avantages pour la cohérence et l'efficacité du design

07.Responsive WebDesign : Adaptabilité pour tous les écrans

• —Principes du Responsive Design : Mobile First
• —Points de rupture (breakpoints) : définition et utilisation
• —Techniques de mise en page adaptative : Flexbox, Grid CSS (théorie)
• —Conception pour les différents dispositifs (mobile, tablette, desktop)
• —Optimisation des images pour le web responsive

08.Conception Graphique pour le Web

• —Choix des visuels et licences d'utilisation
• —Retouche d'images simple (principes, pas d’outil spécifique)
• —Création de bannières et éléments graphiques
• —Infographies et visualisation de données
• —Cohérence visuelle : branding et identité numérique

09.Intégration HTML/CSS : Les Bases

• —Structure HTML5 : balises sémantiques essentielles
• —Bases du CSS3 : sélecteurs, propriétés, valeurs
• —Modèle de boîte (Box Model) : padding, border, margin
• —Mise en forme du texte et des images
• —Introduction aux media queries pour le responsive design

10.Conversion de Maquettes en Code

• —Workflow de l'intégration : de la maquette au code
• —Traduire un design Figma en HTML/CSS
• —Bonnes pratiques de code : commentaires, indentation
• —Débogage HTML/CSS avec les outils développeurs du navigateur
• —Respect des standards web et optimisation légère

11.Accessibilité et Performances Web

• —Rappel des critères WCAG pour l'accessibilité
• —Sémantique HTML pour une meilleure accessibilité
• —Importance de la performance web : temps de chargement
• —Optimisation des images et des polices
• —Outils d'audit : Lighthouse (introduction)

12.Portfolio et Déroulement de Projet

• —Création d'un portfolio en ligne : outils et exemples
• —Valorisation des projets : processus de design
• —Présentation d'une maquette/prototype finalisé
• —Échanges et questions/réponses sur les métiers du WebDesign
• —Les prochaines étapes pour continuer à apprendre et se perfectionner