UI

Design

C'est quoi ?

USER INTERFACE

Le UI design est l'environnement graphique dans lequel évolue l'utilisateur d'une application.

La mission de l'UI designer consiste à créer une interface agréable et pratique, facile à prendre en main.

Pourquoi faire ?

• Améliorer l'expérience utilisateur

• Renforcer l'ergonomie

• Donner de la valeur ajoutée

• Transmettre le message

Le UI sert donc à :

Les fondamentaux

graphiques

Les Couleurs

1

Elle peut transmettre une émotion, attirer l’attention et même envoyer un message avant même de prendre connaissance du contenu.

Chaque couleur raconte une histoire.

A.

La couleur jaune est associée au bonheur, la chaleur, l'énergie, l'optimisme et la créativité. C'est la couleur la plus visible.

B.

La couleur rouge est associée au danger, la force, l'énergie, le désir et l'amour. Cela demande à l'utilisateur de prendre de rapides décisions.

C.

La couleur verte est associée à la nature, la nouveauté, la croissance et l'espoir. Il peut avoir un effet harmonisant et équilibrant.

D.

La couleur bleue est associée au ciel, la profondeur, la loyauté, la propreté et la compréhension. Les nuances de bleu sont excellentes pour l'image des entreprises.

E.

La couleur blanche est associée à la paix, la pureté, la propreté, la vertu et la simplicité. Très populaire pour le design minimaliste.

F.

La couleur noire est associée au pouvoir, l'élégance et le luxe. Peut être moderne ou traditionnelle selon la couleur avec laquelle elle est combinée.

Choisir sa palette dans le cercle chromatique

palette monochromatique

palette analogous

palette complémentaire

La règle du 60/30/10 ratio

60 % - couleur dominante

30 % - couleur secondaire

10 % - couleur "d'accent"

Les Polices

2

La police que vous choisissez doit représenter la personnalité de votre marque.

A.

Le texte doit se comporter en bloc et non comme des lignes séparées.

Ceci est un fuit jaune

Ceci est un fuit jaune

B.

Aider les utilisateurs à identifier les mots et non les lettres.

Photo de mon balcon.

Photo de mon balcon.

C.

Utiliser le fond déterminer la façon dont placez le texte.

La montagne, ça vous gagne !!!

La montagne, ça vous gagne !!!

D.

Préférer le lisible au "cool".

E.

La famille de font doit être cohérente avec son sujet.

F.

Il faut ajuster la taille, le poids et l'espacement (white space) pour faire ressortir la hiérarchie des informations et donc rendre plus lisible le tout.

Tutoriels
Apprenez comment programmer en JavaScript.
Ressources pour commencer :
Si vous souhaitez apprendre JavaScript et que vous débutez en programmation ou en JavaScript, la section JavaScript de la zone d'apprentissage de MDN (learning area) est le meilleur endroit où commencer. Cette section contient les modules suivants :

Ressources pour commencer :
Si vous souhaitez apprendre JavaScript et que vous débutez en programmation ou en JavaScript, la section JavaScript de la zone d'apprentissage de MDN (learning area) est le meilleur endroit où commencer. Cette section contient les modules suivants :

Apprenez comment programmer en JavaScript.

Tutoriels

Les images

3

60 % des consommateurs favorisent les résultats de leurs recherches internet comprenant une image et 23 % sont plus enclins à contacter les entreprises ayant associé une image à leur nom.

A.

L'image doit avoir un lien avec le texte

B.

L'image doit faire ressortir le texte

C.

Utiliser la couleur de l'image pour garder une cohérence globale.

NEMO

D.

Faire simple.

E.

La résolution compte.

La mise en page

4

76% des utilisateurs veulent un site dont les informations sont faciles à trouver. Vous pouvez accomplir cela en utilisant des mises en page communes efficaces.

A.

Le split screen est l'une des mises en pages plus communes et permet de disposer deux parties aussi importantes l'une que l'autre pour parler du sujet.

B.

Feature image est le fait de se concentrer sur un produit ou service en utilisant des grandes images. Cela créer une forte impression d'entrée chez l'utilisateur quand il arrive sur la page.

C.

Les Boxes est flexible et crée un rythme visuel pour les utilisateurs. Il est lisible et les hiérarchies se font en fonction de la taille des boites et de leur contenu.

D.

Les multi-grid sont elles aussi flexibles et sont les plus polyvalentes. Elles permettent d'organiser le contenu un nombre de sections définis. Cela est extrêmement responsive.

E.

La plus simples des mises en page est la single column. Facile de navigation et de lisibilité. Cette mise en page incite les utilisateur.rice.s à scroller. Cependant, ne pas abuser de contenu.

INSPIRATIONS

Les mots prennent beaucoup de place

Les fonds s'animent

Une nouvelle façon de naviguer 

L'asymétrie

Le minimalisme

L'illustration

Dernier petit conseil:

Inspirez vous

Dans ton Drive ;)

Exo