Objectif du cours

A la fin de ce cours, le future designer web que je serais doit être capable de :
- Comprendre les principes de design et leur application dans le web.
- Avoir une compétence dans l’utilisation des logiciels de design comme Adobe XD Figma
Stetck
- Concevoir des interfaces intuitives et esthétiques
- Appliqué des principes d’UX pour améliorer l’interaction utilisateur
- Créer des designs adaptés aux différentes tailles d’écran et d’appareil.

PROGRAMME
Chap 1 : Introduction au design
Chap 2 : Principe de design graphique
Chap 3 : Outil de design web
Chap 4 : Design de l’interface utilisateur
Chap 5 : Expérience utilisateur
Chap 6 : Responsives design et accessibilité
Chap 7 : Introduction au développement web
 CHAPITRE I: introduction au Web Design
I- Definition et evolution du web design
1- Définition:
Le web design: est une discipline qui consiste à créer et organise des éléments visuels et interactifs
sur site internet afin d’optimisé l’expérience utilisateur et la navigation. Cela comprend l’aspect
esthétique (typographie, couleur, image) ainsi la structure et la fonctionnalité (les boutons, le menu,
formulaire…)
2- Evolution du web design
Le web design a connu plusieurs étapes majeures dans son évolution :
- Les années 1990 l’ère des pages statique html, avec des conceptions très simple, souvent
centré sur le texte expl : les blogs, les articles de journal.
- Années 2000 introduction de CSS pour séparer le contenu de la présentation et des mises en
page sophistiqué les animations flash étant aussi populaires à cette époque. Exep : les sites
web de présentation
- Années 2010 transition vers le Design responsive avec l’explosion des appareils mobiles.
L’accent est mis sur l’expérience utilisateur (UX) et le Flat Design devient populaire expl :
les sites web de E-commerce
- Aujourd’hui : le minimalisme et le matériel design sont dominant avec le focus sur la
performance et la compatibilité mobile. Les outils de création et CMS (système gestion de
contenu/content manadgment system) comme Wordpress, ainsi que les Framework font thème
comme (ensemble de bibliothèque qui facilite la gestion des applications) comme React, ont
permis de démocratisé la conception des sites web inter actif. Exemple : Les sites de E-
commerce et E-learning

II- Rôle dans le web design

Dans le processus de création d’un site web, plusieurs rôles collaborent chacun ayant une spécification
bien définit
1- UI Designer (user interface designer)
Le UI designer est soit :
- Spécialiste de l’apparence visuel du site
- Responsable du choix des couleurs, typographie, bouton et icone
- Conception des élements graphiques en tenant compte de la marque et des tendances actuelles

2- UX Designer (expérience designer)

C’est une personne qui :
- Se focalise sur l’expérience utilisateur
- Qui créer des wireframes (maquette des structures) et des prototypes pour optimiser la
navigation et facilité l’utilisation
- Réalisé des tests utilisateur pour s’assurer que l’interface est intuitive

3- Le développeur front-end
C’est une personne, qui transpose les maquettes créé par les UX UI designer en code fonctionnel. Il
utilise les technologies comme le html, CSS, Java script. Il peut aussi utilisé les framewok come réact,
angular, vulJS … il est responsable de l’interactivité et de la performance du site.
 4- Le Back-end
Il gère la logique côté serveur et la base de données. Il utilise des technologies comme [Link] Php
Ruby, Django, pour construire les applications web dynamique. Le développeur back-en assure la
sécurité et le traitement des données coté serveur.
5- Autres rôle
- Web master : responsable de la maintenance du site
- SEO (référencement naturel) Expert : optimise les sites web pour
- Le Product managr : superviseur de développement du site web en fonction des besoins du
cahier de charge du client

III- Les tendances actuelles du web design

Le web design est en constante évolution influencé par des nouvelles technologies, les besoins des
clients (utilisateur) et les contraintes de performance. Nous pouvons avoir quelques tendances clés
- Le minimalisme :
 Réduit la complexité visuelle pour se concentré sur l’essentiel
 Espace blanc et choix limité de couleur pour une meilleure visibilité et une navigation
fluide
- Dark mode :
 Offre une alternative visuelle à lumière bleu des écrans
 Permet d’économisé de l’énergie sur les OLED et esthétiquement tendance
- Micro interaction :
 Petite animation comme les boutons qui change de couleur qui améliore l’expérience
utilisateur
 Favorise un retour visuel immédiat sur les actions effectué par l’utilisateur
- Design mobile-first :
 Priorisation de la version mobile dans le processus de conception, car de plus en plus de
personnes accèdent au web grâce au smartphone
 Adaptabilité du site web aux différentes tailles d’écran est devenue cruciale
- Illustration et 3D :
 Utilisation des illustrations personnelles pour se différencier des photos traditionnelles
 Intégration d’élément 3d pour offrir plus de profondeur et d’inter activité
- Typographie audacieuse
 Grande police et titre imposant pour attirer l’attention
 Animation des textes est aussi une tendance populaire pour engager l’utilisateur
 CHAP 2 : PRINCIPE DE DESIGN GRAPHIQUE

INTRODUCTION A ADOBE XD FIGMA SKETCH

Les outils de design web moderne jouent un rôle clé dans la conception et la typographie des
interfaces utilisateur (UI) et des expériences utilisateur (UX).
1- Adobe XD
Adobe XD : est un logiciel de conception d’interface utilisateur qui fait partir de la suite adobe. Il
spécifiquement conçu pour les wireframe, les prototypes et les conceptions d’application web et
mobile.
- Caractéristique principal
 Design et prototype inter actif : créer des interfaces utilisateur et ajouter des interactions
pour stimuler le comportement de l’application
 Partage et collaboration : les utilisateurs peuvent partager leurs prototypes et maquette
pour obtenir des retours en temps réel
 Intégration avec d’autres outils adobe : l’un des avantages d’adobe XD est son
intégration fluide avec les autres outils adobe comme Photoshop, Illustrator

2- Figma
Figma : est un outil de design web basé sur le cloud ce qui le rend plus populaire pour la collaboration
en temps réel il permet à plusieurs concepteur de travailler simultanément sur le même projet.
- Caractéristiques principales
 Collaboration en temps réel : plusieurs utilisateurs travaillent sur le même fichier en
simultané ce qui facilite le travail en équipe.
 Prototypage créatif : comme Adobe XD figma permet de créer des prototypes fonctionnels
avec des interactions et des animations
 Fonctionnalités basées sur le web : figma est accessible via un navigateur ce qui permet de
l’utilisé sans installation locale

3- Sketch
Sketch : est un logiciel de conception exclusivement disponible sur Mac OS largement utilisé par le
design UI UX.
- Caractéristiques principales
 Design vectoriel : il utilise des graphiques vectoriels flexibles, et scalable
 Plugins et intégration : il dispose d’un écosystème riche de plugins qui permet d’ajouté
des fonctionnalités personnalisées
 prototypage basique : bien que moins avancé que figma ou XD en matière de prototypage
sketch permet de créer des liens entre différents écrans pour démontré l’interactivité
II- CREATION DES WIREFRAME ET PROTOTYPAGE
1- wireframe
Un wireframe : est une représentation visuelle basique d’une interface utilisateur, servant à établir la
structure et la disposition des éléments sans se concentrer sur les détails esthétiques comme les
couleurs ou les typographies.
 - Les objectifs
 Définir la disposition des éléments : déterminer ou seront placé les éléments clés tels que
(textes, images, bouton, …).
 Organiser l’information : assurer un navigateur fluide et intuitif pour les utilisateurs.
 Communication avec les parties prenantes : les wireframes permettent de discuter du flux
et de la fonctionnalité avant de passé aux détails du design. Exemple : lors de la
conception d’un site de E-commerce un wireframe peut montrer l’emplacement de la barre
de recherche, les catalogues de produit et le bouton d’ajout au panier sans entrer dans les
détails.

2- Prototype
Le prototypage permet de créer une version interactive d’un produit qui simule l’expérience
utilisateur. Un prototype permet de texté l’ergonomie, les interactions, le flux général du site ou de
l’application avant le développement finale.
- Les types de prototype
 Prototype basse fidélité : ce sont de maquettes interactives très basiques souvent en noir et
blanc se concentrant sur les flux d’utilisateur
 Prototype haute-fidélité : il inclut des éléments graphiques détaillés des interactions
riches et simule presque entièrement le produit final.

IV- UTILISATION DES PLUGINS ET RESSOURCES EN LIGNE

1- Plugins
Les plugins ajoutent des fonctionnalités supplémentaire aux outils de design et améliore l’efficacité du
flux de travail. Que ce soit pour automatisé certaines taches intégré des ressources externes ou créer
des interactions complexes les plugins peuvent énormément enrichir l’expérience du design
- Exemple de plugins utiles
 Stark (pour Figma, Sketch et Adobe XD) : outil de vérification d’accessibilité qui aide à
garantir que les contrastes de couleurs et les typographies sont lisibles pour tous les
utilisateurs y compris ceux avec les défaillances visuelles.
 Unsplash : ce plugin permet d’intégré rapidement des images haute résolution dans vos
design rapidement depuis Unsplash, une banque d’image libre de droit.
 Anima (flash et XD) : anima permet de transformé des maquettes statiques en prototype
inter actif ajoutant des animations, des transitions et des interactions avancé

2- Ressources en ligne
En
- Banque d’image gratuite
 Offre des images de haute qualité que les designers peuvent utiliser gratuitement dans
leurs projets
- Quand d’icone
 Icone Finder et Noun Projet : ce sont des plates-formes ou les designers qui leur permets
de télécharger les icones vectorielles pour enrichir leur design
- Bibliothèque de composant UX
 Matérial design de Google et bool strap : offre des kids d’interface utilisateur préconçu
que les designers peuvent utilisés pour accélérer le développement des prototypes.
Exemple : lors de la création d’une interface d’une application mobile, un designer peut
télécharger des composants de matériel design pour suivre les directives de conception
Android garantissant ainsi une expérience utilisateur cohérente et fluide.
 CHAP 4 DESIGN DE L’INTERFACE UTILISATEUR (UI)
L’interface utilisateur est l’un des aspects les plus importants de la conception web. Elle détermine
comment les utilisateurs interagissent avec un site ou une application. Un bon designer UI se
concentre sur facilité d’utilisation l’efficacité l’esthétique pour créer une expérience agréable.
I- Création de composant UI : bouton, formulaire, menu