UX & UI

DESIGN
UX = User eXperience
#
UI = User Interface
UX # UI

3 Interne Orange
DESIGN THINKING

DESIRABILITE

FAISABILITE VIABILITE

4 Interne Orange
DESIGN THINKING

- SOYEZ EMPATHIQUE A L’USER

- DEFINISSEZ CE QUE L’USER A VRAIMENT BESOIN
- IDEATION DES SOLUTIONS
- PROTOTYPEZ VOS IDEES
- TESTEZ VOS PROTOTYPES
- IDEES TO WORK

5 Interne Orange

 DESIGN SPRINT

M T W T F
Map Sketch Decision Prototype Test

6 Interne Orange
DOUBLE DIAMOND

DEVELOPPER

DECOUVRIR DELIVRER

DEFINIR

LE PROBLEME LA SOLUTION
7 Interne Orange
 EXPERIMENTER ET OPTIMISER

- COMPRENDRE LES DONNEES

- CREER DES HYPOTHESES
- TESTER LES HYPOTHESES
- ANALYSER LES RESULTATS
- METTRE EN PLACE

8 Interne Orange

Process UI Design

9 Interne Orange
UX = User eXperience
+
UI = User Interface
 UX
+
UI
11 Interne Orange
12 Interne Orange
13 Interne Orange
Process UI Design

Sketches

Dresser la version final de la maquette validée après l’évaluation UX pour une

version finale des emplacements

14 Interne Orange
Process UI Design

Sketches Prototype

Avancer dans le design, définir les couleurs, les polices, sans s’éloigner de
l’identité de l’entreprise

15 Interne Orange
Process UI Design

Sketches Prototype Workflow

Discuter sur le prototype, définir les animations, …

16 Interne Orange
Process UI Design

Sketches Prototype Workflow Validation

Tester et valider

17 Interne Orange
 IDENTITE
VISUELLE

18 Interne Orange

01

La couleur
 01
Le cercle chromatique

Quelques notions importantes :

- Couleurs primaires, secondaires et
tertiaires
- Couleurs chaudes et couleurs froides

Spatialité d’une couleur :

 01
Anatomie d’une couleur
Il existe de nombreuses façon de nommer une couleur :

Bleu outremer

Écran : Imprimé :

RVB : 27 1 155 CMJN : 83 99 0 39

Code hexadécimal : #1B019B Pantone : 2736

 01
Symbolique des couleurs

Blanc Noir Rouge Bleu Jaune

Pureté, innocence, Mort, nuit, mystère, Passion, amour, force, rêve, évasion, paix, lumière, chaleur, énergie,
richesse, chasteté, silence, tristesse, danger, puissance, union, froid, plénitude, joie, puissance, jeunesse,
silence élégance, luxe courage, action fidélité, justice jalousie

Vert Orange Violet Brun Rose

Éspérance, nature, Énergie, enthousiasme, Spiritualité, mélancolie, Terre, force, solidité, Tendresse, amour,
immortalité, repos, imagination, richesse, connaissance, magie, confort, inquiétude, pureté, timidité, fidelité
jeunesse, chance, honneur deuil, crainte égoïsme
immaturité, jalousie

 01
Comment faire un nuancier ?
Un nuancier est généralement composé de 5 couleurs différentes :

Quelques ressources pour trouver de jolis nuanciers :

- Adobe Color CC (Utile pour créer un nuancier ou pour en utiliser un existant)
- Color hunt
- Coolors.co
- Brand Color (Pour réutiliser le nuancier d’une marque existante)

01
Quelques conseils
Attention aux contrastes

Ceci est illisible

Éviter le noir pur

Bof Mieux !

02

La typographie
 02
Anatomie d’une typographie

Interlignage
Abc
L’approche
line-spacing Interlettrage
letter-spacing

Empattements : Proportions : Graisse :

sans-serif Étroit Light

Regular
Moderne, claire, universel

serif Normal
Autorité, respect, luxe
Bold

02
Familles de typographie
Classification Vox-Atypi

Humanes Mécanes Scriptes

Garaldes Manuaires

Réales Fractures
Linéales

Didones
Incises

02
Quelques conseils
1. Ne jamais étirer une typographie manuellement

 02

2. Ne jamais utiliser plus de 3 fonts 3. éviter les fonts trop fantaisistes

différentes sur le même document

Mirlababi
Victor Hugo - Les Misérables Sinon
Mirlababi surlababo,
Mirliton ribon ribette,
Surlababi mirlababo,
Mirliton ribon ribo.
ça deviens

quoi !

 02

4. Pour une bonne hiérarchisation utiliser 5. Préférer une font avec des accents (é,
la taille, la couleur et les différentes è, à, ...) et plusieurs graisses
graisses de la font

Le wombat Sinon a va donner un aspect

nigmatique votre texte
Cet animal au ratio mignon/
popularité bien trop bas.

Pourquoi le wombat ?
Les wombats forment une famille de
mammifères marsupiaux. Ils vivent dans les
s’il manque des lettres
forêts montagneuses d’Australie, où ils creusent
de vastes terriers. Les wombats pèsent entre 15
et 40 kg. Si vous ne voyez pas à quoi ça
ressemble, imaginez juste un énooorme
cochon d’inde.

Militons pour introduire les wombats en France.

 02
Anatomie d’un bloc de texte :
Alignement :
Idessit lam eicaescid que nemporit rehende
nissita ditate pe vel et quibu et explabo
repella posa nditate mporist ut quam fugitio
rionsed quos voloriost, simi, consequis et
imusaepe acerepr atibus usam ratis ped
molor mo
Idessit lam eicaescid que nemporit rehende
nissita ditate pe velt quibus et explabo
repella poriosa ndit mporibust ut quam
fugitio rionsed quos re voloriost, simi,
consequis et imusae acerpedio molor mo
Idessit lam eicaescid que nempt rehende
nissita ditate pe vel et quibus et explabo
repella poriosa nditate oribust ut quam
fugitio rionsed quos re voloriost, simi,
consequis et imusaepe acerepr bus et auda
net que et asi dia cusam molor mo
Justification : Césure :
Idessit lam eicaescid que nemporit Id modigenimint quis adicide voloris int untiis
rehende nissita ditate pe vel et quibus et re aut ullesti oreped molupta tqua- tio dollis
explabo repella poriosa nditate mporibust cullat harcipis idus etur?
ut quam fugitio rionsed quos re voloriost, Officaectur? Ignias est porepella dio maion
simi, consequis et imusaepe acerepr atibus perchil igentiis eos minus solorpo rporectur
pedio molor mo autempe riberum quae ratem- poreium vitae
nos eicia demo quatisquae eatem dolorum
facerescias es apero mi, ut quid modipit erchill
ecusdae nimporitias dissitatis quassi voluptia
Idessit lam eicaescid que nemporit rehende nus vit, tet,
nissita ditate pe vel et quibus et explabo
repella poriosa nditate mporibust ut quam
fugitio rionsed quos re voloriost, pedio
Id modigenimint quis adicide voloris int
molor mo
untiis re aut ullesti oreped molupta
tquatio dollis cullat harcipis idus etur?
Officaectur? Ignias est porepella dio maion
perchil igentiis eos minus solorpo rporectur
Idessit lam eicaescid que nemporit autempe riberum quae ratemporeium vitae
rehende nissita ditate pe vel et quibus nos eicia demo quatisquae eatem dolorum
et explabo repella poriosa nditate facerescias es apero mi, ut quid modipit
mporibust ut quam consequis et erchill ecusdae nimporitias dissitatis quassi
imusaepe acerepr atibus et auda net que et voluptia nus vit, tet,
asi dia cusam ratis pedio molor mo

02
Comment choisir une bonne typographie ?
1.Préferer une typographie lisible
2.Adapter sa typographie à sa cible et au contexte
(ex : enfants, professionnel, tradition, nourriture, ...)

 02
Les typographies passe-partout

Lato Roboto Lora

Quicksand
Open sans
...

02
Quelques ressources

Où trouver des fonts sympas, légales et gratuites ?

- Fontsquirrel
- typotheque.interstices.io
- Google Font
02
L’ortho-typographie <3
Les césures
La ponctuation
Autre

Ne jamais diviser :
Les signes simples ( , . ...) : Il est fortement recommandé
- un nom propre pas d’espace avant, une de mettre des accents sur les
- avant ou après une espace après majuscules :

apostrophe ELEVES EN PLEIN AIR

- d’une colone à une autre Les signes doubles ( : ; ? ! ) : LE POLICIER TUE
-les nombres (chiffres et une espace avant et une
lettres) espace après en français,
comme les signes simples en
>Règle d’euphonie anglais
>Règle de construction
>Règle d’épellation Pour les autres () {} [] ‘‘

Une espace à l’extérieur, pas

d’espace à l’intérieur
L’identité visuelle

L’identité visuelle est la représentation graphique de l’identité d’une entité

(individu, entreprise, projet, objet, etc.)

Au travers de son identité visuelle, exprime ses valeurs, son activité, ses
ambitions.

La charte graphique

La charte graphique est un document de travail qui contient l’ensemble des

règles d’utilisation d’une identité visuelle. On y retrouve :

- Le logotype
- Le nuancier
- La typographie et ses caractéristiques
- Les illustrations graphiques et photographiques
- La grille de mise en page
- Les applications possibles : print, écran, ...
Le logotype

Pour réaliser un joli logo il

faut toujours commencer
par noter quel message je
veux passer :

- une activité pro

- des valeurs
- une atmosphère
- etc.

Suivant ces différentes Ces deux logos sont trop complexes : trop de texte, trop

réponses les couleurs, de couleurs

la typo, le signe seront
différents.

Un logo doit être simple et

reconnaissable.
05
Le logotype
Signe seul Texte seul Signe intégré dans le texte

05
Le logotype
Signe à gauche Signe au dessus

05
La charte graphique

Le nuancier La typographique Les illustrations

...
Les applications La grille