Design produit

Janvier 2023

baptiste@roullin.net

Diapositives : mode d’emploi

  • Naviguer verticalement et horizontalement avec les flèches du clavier

  • Vue d’ensemble des slides : appuyer sur ÉCHAP

  • Menu de navigation : appuyer sur M

  • Menu de navigation : appuyer sur CTRL + SHIFT + F

Pour les curieux : Ces supports sont écrits dans le format AsciiDoc et convertis en diapos avec Reveal.js.

Introduction

Product design : qu’est-ce donc ?

Sens qui ne nous intéresse pas : design d’objets / design industriel

objet
objet2
objet3

Product design : qu’est-ce donc ?

Product designer = designer UX/UI qui travaille sur un seul service numérique (ou sur une famille de services).

C’est plus un poste qu’une spécialité.

Pourquoi on parle de produit

"culture produit"

intro3

Design System

intro blason1
intro blason2

Design system : quoi qu’est-ce ?

  • C’est quoi pour vous ?

  • Quelle différence avec une charte ? Avec un guide de style

Design system : première définition

Documentation rassemblant tous les éléments nécessaires pour concevoir et réaliser facilement un service

intro ibm

L’ancêtre : IBM Graphic Design Guide

Par Paul Rand, designer-pape des identité de marque

intro rand

L’ancêtre : IBM Graphic Design Guide

intro ibm1

L’ancêtre : IBM Graphic Design Guide

intro ibm2

L’ancêtre : IBM Graphic Design Guide

intro ibmlaser

L’ancêtre : IBM Graphic Design Guide

intro ibm3

L’ancêtre : IBM Graphic Design Guide

intro ibmbureautique

Pourquoi mettre en place un design system ?

  • A votre avis ?

  • Gain de temps

  • Gain d’énergie

  • Cohérence et qualité

  • Une évolutivité encadrée

  • Avoir un language commun

Exemple : nombres d’état pour une case à cocher

intro checkbox

Exemple : dimensions d’une zone cliquable

intro click
intro click2

Le design comme language visuel

Le design est un language de formes

  • Rempli de mots et de significations

  • De grammaire et de règle

  • Partagé par différents docuteurs

Un design system est une manière de codifier explicitement ce langage.

Appliqué au design par Christopher Alexander (1967)

intro alexander

Appliqué au design par Christopher Alexander (1967)

Patterns d’organisation des villes

intro4

Comme un langage, les formes évoluent…​ un peu

intro keyboard

Comme un langage, des conventions émergent

Quand on y pense, un language est assez stable et cohérent même sans académie française

intro5

Deviner dans quel pays on est juste d’après une photo

GeoGuessr

intro7

Comme avec un langage, des règles sont édictées

Architecture haussmannienne

intro6

…​ Et parfois trop de règles

Plan du Corbusier pour raser une partie du centre de Paris

intro8

Le design system, une approche globale

MAIF

Source

intro1

Un design system doit être complet

Potentiellement sur tous les appareils et canaux

  • Ordinateurs

  • Tablettes

  • Téléphones

  • Télés

  • Montres

  • Assistants vocaux

  • Voitures

  • Mail

  • Support téléphonique

Exemple de Google pour les voitures

Un design system doit être complet

Potentiellement pour tous les médiums

  • Numérique

  • Espaces

  • Habillement

  • Sons

Exemple d’Air France

intro airfrance

Exemple d’Air France

intro airfrance2

Exemple de design sonore

Un design system doit être complet

Pour tous les acteurs

  • Concepteurs

  • Développeurs

  • Rédacteurs

  • …​

Un design system doit être complet

À tous les niveaux de la hiérarchie

intro atomic

Et c’est là où ça se complique

Juste milieu dans le nombre de blocs

Et c’est là où ça se complique

S’assurer qu’un module s’insère partout

Stripe

Comment rendre modulable un bloc ?

intro bamboo

Comment rendre modulable un bloc ?

Eviation

Un design system doit être prêt à l’emploi

intro figma
npm init vue-dsfr
npm install

Passation entre designers et dévelopeurs

exo inspect

Structure d’un design system

  1. Principes

    • Marque

    • Ergonomie

    • Ton éditorial

    • …​

  2. Elements

    • Variantes

    • Conseils et interdictions

    • Ressources

  3. Evolutions

Exemples

Travaux pratiques

Au programme

  1. Présentation du design system de l’état

  2. Exo de familiarisation avec le DSFR

  3. Etude de quelques sites

  4. Passer quelques pages au DSFR

  5. Faire évoluer un design system

Présentation du système de design de l’État

Utilisation dans Figma

  • Shift+I

  • Propriétés

  • Construction des calques

  • Noms de composants en français, noms d’icônes en anglais

Notez que c’est une bibliothèque simplifiée n’incluant pas :

  • les composants et styles sombres

  • certains composés dérivés

Utiliser au mieux Figma avec un design system

  • Styles et couleurs prédéfinis

  • Auto-layout

    • Options de redimensionnement

    • Modes d’espacement

    • Changer incrément à 8px

EXO : Se familiariser avec le DSFR

🏋️

Individuel, 20 minutes

Imiter cette page dans Figma : Divorce, séparation de corps | Service-public.fr

Ne créez rien :

  • Grille de 1200px

  • Composants, couleurs et espacement et styles prédéfinis

EXO : mini-audit de conformité avec le DSFR

🏋️

Tout ensemble, 20 minutes

est-ce que ces sites respectent le DSFR ? Dans la lettre ? Dans l’esprit ?

Déménager : un élément précis n’est pas conforme, lequel ?

EXO : passer un site public au DSFR

🏋️

Passer au DSFR plusieurs pages du site de pré-plainte en ligne

EXO : passer un site public au DSFR

🏋️

Même contenu, potentiellement présenté ou placé différemment. Uniquement des composants et styles du DSFR

Liste des pages

  • Accueil

  • Popin

  • Formulaire : étape identité

  • Formulaire : préjudice matériel / liste des biens concernés

Qu’est-ce qui vous a manqué ?

  • Style

  • Composants

  • Variante de composants

  • …​

Faire évoluer un design system

Etapes de création d’un composant

  1. Inventaire et justifier le besoin

  2. Nommer (par son contenu ou par son usage)

  3. identifier variantes

  4. Documenter la bonne utilisation

  5. Adoption

  6. Évolution

EXO : faire évoluer le DSFR

🏋️

But : tous ensemble, se mettre d’accord sur 2 blocs à ajouter au DSFR, en vous basant sur le site de la PEL et sur un site chacun

Individuellement | 1H

  1. Choisissez un site dans la liste (chacun un différent)

  2. Listez tous les composants qui n’ont pas d’équivalent dans le DSFR

  3. Décrivez chaque composant.

    • Liste du contenu. Ex liste horizontale de 10 items avec à chaque fois titre, sous-titre, date

    • Type de style

    • Est-ce que ce serait un bloc totalement nouveau dans le DSFR ou juste une variante ?

  4. Choisissez deux blocs à proposer

    • Faire un zoning des blocs

    • Pourquoi : valeur ajoutée par rapport, simplicité d’utilisation…

    • Décrivez les potentielles variantes. Exemple : mode horizontal ou vertical

    • Décrivez l’utilisation. Exemple : dix liens max, réservé aux promos

Tous ensemble | 2H

Voter pour choisir deux composants

  • Au besoin par élimination

  • Ou en arbitrant coût / bénéfices

Sites à choisir

Conclusion

Définition d’un design system

  • Complet, sur tous les supports, canaux et médium

  • Documenté avec principes et conseils d’utilisation

  • Complet à tous les niveaux de la hiérarchie : atomes, molécules, organismes.

  • Utile et prêt à l’emploi pour tous les acteurs

Un design system n’est pas juste un document, c’est un projet

Ceci n’est pas le design system d’AirBnb