W.D

Introduction

Web Design

Introduction

2024 - 2025

Objectifs & sujets

  • Maîtriser les concepts fondamentaux du Web Design

  • Apprentissage du design mobile-first

  • Intégration des notions de branding & marketing

  • Introduction à l'accessibilité

  • Définir les différentes étapes de production d'un projet web

  • Découvrir des outils tel que Figma

  • Relier design - intégration - gestion de projet - marketing

  • Place de l'intelligence artificielle

Mise en contexte

Web vs Print

  • Écrans vs papiers, livres, affiches, etc.

  • Contenu dynamique vs contenu statique

  • Layout évolutif vs format fixe

  • Différence d'accessibilité

  • Espace chromatique RBG / sRGB / HSL vs CMYK

  • Public cible ?

Quels buts ?

  • Rendre l'information accessible

  • Optimiser l'expérience utilisateur

  • Équilibrer les fonctionnalités et le visuel ( conversion vs création )

  • Ne doit jamais servir à piéger l'utilisateur ( conversion mal honnête )

Mauvais exemples

Bons exemples

Les métiers

  • Directeur·rice artistique *

  • Web designer

  • Motion Designer *

  • Graphiste *

  • Front-end développeur (FE)

  • Back-end développeur (BE)

  • Project manager

  • Content manager *

  • Community manager *

Étapes majeures d'un projet web

  • Deviser & planifier

  • Établissement d'un contrat

  • Phase de design

  • Intégration FE & BE

  • Mise en ligne

  • Correction / maintenance

Phase de design

  1. S'informer sur le client / la demande / le public cible

  2. Direction artistique / Recherches graphiques / Inspirations / Moodboard

  3. Validation par le client (recommandé)

  4. Wireframes / Design system

  5. Designer les différents pages / éléments

  6. Design versions adaptatives (responsive)

  7. Validation par le client

Les outils

  • Programme de design (Figma, Adobe XD, Sketch, etc.)

  • Adobe creative suite (Photoshop, Illustrator, etc.)

  • Font manager

  • Color manager (coolors.co)

  • Gestionnaire de tâches

  • Inspirations ( Livre, vidéo, film, BD, l'art, site web, etc. )

Concepts & notions

UI

User interface ou interface utilisateur, qui fait référence à l'ensemble des éléments visuels qui composent un site web, une application, etc.

  • Couleurs

  • Typographies

  • Medias (image, vidéo, etc. )

  • Mise en page ( grille, alignement, etc. );

  • Formulaires

  • Animations

UX

User experience ou expérience utilisateur. Contrairement à l'UI, l'UX se focalise sur l'accessibilité du contenu. On se concentre sur la fluidité du parcours utilisateur via les différents éléments de navigation.

  • Identification du public cible

  • Hierarchisation du contenu

  • Prototypage

  • Optimisation du parcours de conversion

  • Accessibilité

  • Émotion de l'utilisateur

  • Animations

L'UI et l'UX sont donc indissociables, il est nécessaire d'avoir un équilibre entre ces 2 concepts pour s'assurer la réussite d'un projet.

Motion design

Défini comment doit s'animer une interface. Les animations ou micro-interactions, peuvent créer de la rétention auprès du public si elles sont bien dosées. Ceci est vrai dans l'autre sens: des animations lourdes, trop longues ou redondantes pour des tâches répétitives auront un impact négatif sur l'UX.

Direction artistique

Défini les règles visuels qui vont régir le design. C'est à travers plusieurs prismes comme le public cible, les objectifs clients, le branding, etc. qu'on va pouvoir les créer.

Ces règles prendront forme dans un moodboard et/ou une charte graphique.

Moodboard

Un document qui contiendra plusieurs inspirations comme des images, références, couleurs, typographies, concurrences, etc.

Charte graphique

Défini le branding d'un produit, d'une marque, d'un site web, d'une appliction, etc. On y retrouve des composants qui ne peuvent être altéré comme des logos, couleurs, typographies.

Design system

La version web d'une charte graphique, on y retrouve les styles de composants graphiques comme les boutons, les icones, les titres, etc.

Wireframe

Une représentation simplifiée qui se concentre sur la structure et la disposition des éléments visuels. Une bonne manière de penser l'UX avant de travailler sur l'UI de manière détaillée.

Design responsive

Contrairement à des formats papiers qui sont statiques, le design d'interface est destiné aux écrans. Il doit pouvoir s'adapter aux différentes tailles des smartphones, tablettes, et ordinateurs.

Mobile-first

Vu que la plupart des gens naviguent via leur smartphones, penser le design en partant des plus petits écrans est une bonne pratique. Effectivement, il sera plus facile d'adapter un design mobile vers un design desktop que l'inverse.

Accessibilité

Un bon design prend en compte les personnes avec des handicaps qui peuvent rendre difficile l'accès à l'information.

Ex: une personne âgée avec des problèmes de vues aura des difficultées à lire un texte trop petit ou avec un faible contraste.

Figma

Un programme dédié au design web, devenu un incontournable ces dernières années. Il est directement accessible via un navigateur et utilise la même technologie que le développement web.

Figma

Pour le prochain cours

Créer votre compte étudiant sur Figma avec votre mail EPHEC