UI Design

Introduction

• En quoi ce cours est différent des autres
• Prérequis
• Présentation des sections
• Alternative à ADOBE XD
• Mise à jour ADOBE XD
• Le rôle d’un web designer
• Ce qu’il faut savoir pour bien débuter
• Les étapes à suivre
• Vectoriel vs Matriciel

Premier pas avec Adobe XD

• Exercice
• Présentation de la section
• Découverte de l’interface
• Les calques
• Les outils de formes
• L’outil texte
• Les images
• Pathfinder
• Grille de répétition
• Exportation
• Afficher et utiliser la grille
• Exercice : Votre premier Web Design

Avant projet

• Présentation de la section
• Comprendre le besoin
• Introduction aux wireframes
• Les exemples de base à connaître
• Créer des wireframes
• Exercice : Créer un wireframe

Designer des éléments d’un site

• Présentation de la section
• Typographie (Titres, textes…)
• Les Boutons
• Les Formulaires
• Les Blocs
• Les Headers
• Exemple Formulaire de connexion
• Exemple Header d’un portfolio
• Exemple Galerie d’images

Exemple de site de référencement de jeux de société

• Présentation de la section
• Conception du header
• Conception de la page d’accueil
• Conception de la page d’accueil (2)
• Conception de la page d’accueil (3)
• Conception du footer

Responsive

• Présentation de la section
• C’est quoi le responsive
• Les headers
• Les blocs

Exporter et présenter son design

• Présentation de la section
• Faire le rendu de son design
• Rendre son design interactif
• Exporter son design (icônes, images…)
• ASTUCE : Exporter en un clic (photoshop)
• Présenter son design
• Ajouter un filigrane
• Envoyer une prévisualisation en 2 clics

Aller plus loin

• Exercice : Votre premier Web Design
• Trouver de l’inspiration
• Être en avance dans le design
• Conseils et astuces

Web Design Feedbacks

• Feedback

Freelance

• Quel statut choisir
• Trouver son lieu de travail
• Concevoir son environnement de travail
• Quel est le prix à payer par ses clients
• Comment trouver ses clients
• Trouver des clients (sans être déclaré)
• Conclusion

Bonus 1

• Créer un style guide
• Choisir la taille de son document (Web Design)
• Questions réponses
• Merci !

2. Adobe XD : Introduction

• Comment suivre ce cours
• Installation d’Adobe XD

Les bases d’Adobe XD

• Découverte de l’interface
• Les outils de conception
• EXERCICE – Prise en main
• Les raccourcis
• Le prototyping
• Les Kits UI-UX

Bien démarrer le projet

• Présentation du projet
• Création du projet (plans de travail)
• Page de connexion
• Dupliquer une page – Page d’inscription
• Tableau de bord

Les actifs

• Qu’est-ce que les Actifs
• Mettre à jour nos couleurs
• Mettre à jour nos styles de textes

Les symboles

• C’est quoi les Symboles
• Mettre à jour nos boutons
• Ajouter des icônes
• Navigation
• Ajouter la barre iOS
• Page Liste des associations

Répétitions et positionnements

• Grille de répétitions
• Page Association
• Aligner et répartir les espaces
• Améliorer le header
• Scroll (+Fixer un élément)
• Page Actualités
• Page Plus

Prototyping

• Le Prototyping
• Ajouter des interactions
• Astuce – Augmenter les zones cliquables
• Menu latéral

Concepts avancés

• Les overlays – Ajouter le clavier iOS
• Les plugins – Importer des photos directement depuis Adobe XD
• Animation automatique – compteur dynamique
• Page Profil
• Pages Présentation
• Animer les pages Présentation
• Animation avancée

Rendu et Exportation

• Enregistrer votre application (en vidéo)
• Partager son design (interactif)
• Exporter votre design (+ icônes)

Exercices

• EXERCICE – Animation automatique
• EXERCICE – Créer un modal

Bonus 2

• Le mot de la fin

3. UI et UX APP Design – Designer une application mobile sur Adobe XD

• Présentation du cours
• Obtenir Adobe XD gratuitement
• Les objectifs de l’application
• Télécharger des icônes

Maîtriser et comprendre les couleurs

• Présentation de la section
• Le cercle chromatique
• Moods (émotions et ambiance)
• La loi de Pareto
• Les outils pour trouver des couleurs modernes
• Trouver des couleurs à partir d’une image

Conception des Wireframes

• Présentation de la section
• Wireframe – Liste des tâches
• Wireframe – Faire une tâche
• EXERCICE : Wireframe – Ajouter une tâche
• CORRECTION : Ajouter une tâche

UI interface utilisateur

• Présentation de la section
• Choisir notre thème graphique
• Design – Liste des tâches
• Design – Tâche
• EXERCICE : Design – Ajouter une tâche
• CORRECTION : Design – Ajouter une tâche

Rendre nos créations interactives

• Présentation de la section
• C’est quoi le prototyping
• Découverte du prototyping dans Adobe XD
• Ajouter des interactions
• EXERCICE : Donner de l’interactivité
• CORRECTION : Donner de l’interactivité
• Publier et partager sa création

Présenter nos designs

• Présentation de la section
• Sites remarquables pour trouver de l’inspiration
• Présentation en Mockup
• Présentation isométrie (sans mockup)
• Présentation isométrie (avec mockup)
• Créer notre présentation
• Publier notre création

Style graphique différent

• Présentation de la section
• Wireframe – Liste des tâches
• Wireframe – Ajouter une tâche
• Wireframe – Modifier – supprimer une tâche
• Design – Liste des tâches
• Design – Ajouter une tâche
• Design – Modifier – supprimer une tâche
• Ajouter des interactions
• Créer & publier notre présentation

4. Figma – Figma créer une landing page : Découverte de Figma (alternative d’Adobe XD)

• C’est quoi une Landing Page
• Ressources pour votre inspiration
• Les différents types de blocs d’une Landing Page

Premier jet (Wireframe)

• Projet de cours – Landing pour du Crossfit
• Création sous la forme d’un wireframe

Création de la Landing Page (Conception UI)

• Création du header et de la section Hero
• Découverte des components (et avancements)
• Finalisation de la page
• Corrections mineures

Responsive

• Adapter pour tablettes
• Adapter pour smartphones

Prototyping (Bonus 4)

• Créer un menu (et l’animer)

5. Bonus – Animation

• Présentation du cours

Animation CSS

• Animation CSS
• La propriété transition
• La propriété transition (avancée)
• Cubic-bezier
• Ce qui doit ou ne doit pas être animé
• Déclencher une animation

Animation CSS par la pratique

• Exercice 1
• Exercice 2
• Exercice 3
• Exercice 4

Keyframes

• Les Keyframes
• Animer les keyframes
• Deux outils pour créer vos Keyframes
• EXERCICE – Keyframes

Transformation CSS

• Les cinq fonctions 2D
• Combiner les fonctions
• Exercice 1
• Exercice 2

Aller plus loin

• Astuce sur Google Chrome

Fichiers sources

• 11.1 EXERCICE – Votre premier Web Design.pdf
• Programme “Comment devenir webdesigner”
• Miniature
• Modèle Wireframe zip
• Designer des éléments fichiers
• Site de référencement de jeux de société
• 1.1 EXERCICE – Votre premier Web Design (la suite).pdf
• Exercice prise en main
• Exercice Adobe XD 10
• App Given
• Fichiers sources UI UX APP Design
• Fichiers sources Figma
• Animation bonus programme

Quizz final

• Quizz