Nos objectifs

• Découvrir et mettre en pratique les principes UX & UI
• Découvrir et prendre en main Figma
• Distinguer les étapes de conception graphique et d’intégration web
• Connaitre les bonnes pratiques et usages actuels

Pondération

• 30%: évalution permanente sous forme de remise
• 70%: épreuve hors session

Le projet

La finalité du cours est une maquette sur Figma, basé sur un produit ou un service à présenter sous forme de landing page. Il sera divisé en 2 étapes, qui correspondent aux pondérations:

Une charte graphique

Un document qui reprend les règles d'identité visuel (logo, couleurs, typographies, tone of voice, medias, etc.) dans le but d'établir un design system.

Une maquette Figma

Une maquette contenant le design de la landing page de votre produit/service. Elle devra être produite en respectant des consignes précises, en accord avec votre charte graphique et les notions vues aux cours.

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
• Le coût

Quels buts ?

• Rendre l'information accessible
• Optimiser l'expérience utilisateur
• Équilibrer fonctionnalité et design (marketing vs création)
• Ne doit jamais servir à tromper l'utilisateur (conversion mal honnête)

Mauvais exemples

Bons exemples

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. anchor: *anchor

• Identification du public cible
• Hierarchisation du contenu
• Prototypage
• Optimisation du parcours de conversion
• Accessibilité
• Émotion de l'utilisateur
• Animations

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

• Programme de design (Figma)
• 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. )

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

Centré en bas de page se trouve la barre d'outils, on y retrouve:

• Outil de sélection et redimensionnement (+déplacement)
• Outil cadre (ou frame)
• Outil de formes
• Outil stylo et crayon (édition vectorielle)
• Outil texte
• Outil commentaire
• Outil actions (IA - accès limité)
• Modes (accès limité)

L'outil Cadre

ou Frame

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

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 Forme

ou Shape

Rectangle

L'outil par défaut dans la barre d'outil, il permet de faire des formes rectangulaires.

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:

• Position
• Layout
• Appearance
• Fill
• Stroke
• etc.

Les couleurs de remplissage

ou Fill

La couleur de remplissage permet de changer la couleur de fond de l'élément actuellement selectionné. Changeons la couleur grise de notre rectangle en un bleu #4943FF.

Dimension

ou Layout

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 élément.

Transformons notre rectangle en un carré de 100x100

Apparence

ou Appearance

Permet de modifier des propriétés d'apparence de notre élément tel que son opacité, l'arrondi des coins, afficher/caché l'élément, changer son masque de fusion, etc.

Pour le moment, nous allons arrondir les bords de notre rectangle à 24px

Couleurs

• Violet: #6256CA
• Vert: #86D293
• Vert clair: #C1E2A4