W.D

Introduction

Web Design

Introduction

2024 - 2025

Objectifs

  • Comprendre et maîtriser les bases du Web Design.

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

  • Apprentissage de Figma.

  • Apprendre les base de l'intégration HTML & CSS.

  • Avoir un aperçu de quelques outils web.

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 ( marketing 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

  1. Deviser & planifier

  2. Établissement d'un contrat

  3. Phase de design

  4. Intégration FE & BE

  5. Mise en ligne

  6. 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 / Charte graphique / Design system

  5. Designer les différentes pages et éléments

  6. Design versions adaptatives (responsive)

  7. Validation par le client

Les outils

  1. Programme de design (Figma)

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

  3. Font manager

  4. Color manager (coolors.co)

  5. Gestionnaire de tâches

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

Figma

Créer un fichier

Pour créer un nouveau fichier, vous pouvez cliquer sur New design file dans le menu des fichiers récents, ou sur le bouton Create new situé en haut à droite du dashboard et sélectionner Design file.

L'interface

Le panneau de navigation

ou Navigation panel

Ce panneau se retrouve à gauche sous forme de colonne. On y retrouve les pages, les calques et les assets qui composent votre fichier de design.

Le panneau des propriétés

ou Properties panel

Ce panneau se retrouve à droite sous forme de colonne. La vue Design affiche les différentes propriétés de l'élément actuellement selectionné. Si aucun élément n'est actif, alors ceci affiche les propriétés globales du document.

La barre d'outils

ou Toolbar

La barre d'outils contient:

  • Menu Figma

  • Outil de sélection et redimensionnement (+déplacement)

  • Outil cadre (ou frame)

  • Outil de formes

  • Outil stylo et crayon (édition de forme complexe)

  • Outil texte

  • Outil ressources

  • Outil déplacement (ancienne version)

  • Outil commentaire

  • Outil action IA (accès limité)

L'outil cadre

Cet outil est très important, car il permet de créer des cadres qui peuvent grouper plusieurs éléments ensemble. Ce cadre, cette frame, a des propriétés de mise en page très utiles que nous verrons par la suite.

Raccourci [F]

Dans un premier temps nous allons mettre en place notre frame principale.

Une fois l'outil selectionné, des tailles prédéfinies apparaissent dans le panneau des propriétés. Nous allons choisir Phone > iPhone 13 & 14 (390 x 844).

L'outil formes

Rectangle

Situé dans l'outil forme, il permet de faire des formes rectangulaires.

Raccourci [R]

Dans notre frame iphone, créons notre premier rectangle.

Les propriétés

En séléctionnant notre rectangle, nous verrons que le panneau des propriétés contient maintenant les informations de notre élément. Elles vont nous permettre de changer plusieurs propriétés comme:

  • les alignements

  • la position

  • la taille

  • le fond

  • etc.

Les couleurs de remplissage

ou Fill

La couleur de remplissage permet de changer la couleur de fond de notre sélection. Changeons la couleur grise de notre rectangle en un bleu (#4943FF).

Dimensions

Dans le panneau des propriétés, en haut, se trouve les valeurs W et H qui s'expriment en pixel. W pour Width (largeur), et H pour Height (hauteur). Nous pouvons modifier ces valeurs pour redimensionner notre forme.

Transformons notre rectangle en un carré de 100x100

Exercices

Couleurs

  • Violet: #6256CA

  • Vert: #86D293

  • Vert clair: #C1E2A4