L’UI Design

Décembre 2021
FORMATRICE SELIMOVIC MELINDA

Définition de l'Ui Design

UI est l'abréviation d'user interface ou interface utilisateur mentionne donc la conception
de l'interface utilisateur dans lequel évolue l’utilisateur d’une application, un site web, un
logiciel ou tout dispositif digital.

1
Les missions de l’Ui Designer

La mission de l’UI designer consiste à créer une interface attrayante, ergonomique et

compréhensible. Il est donc responsable de la conception de l’interface qui lie l’utilisateur
au produit par le biais d’interface : site web, application mobile, logiciel.

Mais aussi création de l’identité visuelle, de logo, charte graphique, illustration..

Découvrons donc ensemble les différentes tâches de notre métier :

● L’identité visuelle

L’identité visuelle est la carte graphique d’une marque, elle permet d’affirmer et de
reconnaître aisément une marque. Un visuel est plus facile à retenir qu’un texte, (identité
visuelle) disposer d’un logo facilite la mémorisation pour vos clients.

Elle se caractérise par ses éléments constitutifs (logo, typographie, couleurs…), voici donc
les éléments qui constituent l'identité visuelle :

● Le logo : Un élément fondamental.

● Les couleurs : Elles doivent être choisies méticuleusement afin d'équilibrer
l’interface.
● Les polices : Avec différentes typographies, l’importance de certain texte ou mot
peuvent être facilement être mis en évidence en utilisant la version italique, bold, le
surlignage, taille..
● Les formes/Illustrations/icônes : Ces éléments peuvent être un élément autant
important que le logo, et doivent être créés avec grande attention afin de respecter
l’identité et la charte graphique de la marque.
● L'agencement : La place du menu de navigation/logo ect..
● Images/Photographie : L’utilisation spécifique à l’identité d’une marque.

2
Tous ces éléments indispensables constituent l’identité visuelle d’une marque. Cet
ensemble est nommé charte graphique, c’est grâce à celle-ci qu'on impose les règles à
respecter dans l’utilisation d’un logo, d’une typographie ou d’illustration..

● La charte graphique

Elle contient toutes les règles d'utilisation de vos visuels en détail ( explication de vos choix
graphiques, condition d’utilisation des visuels). Elle est créée dans le but de conserver et
respecter l’harmonie visuelle d’une marque.

Voir plus : https://www.50a.fr/0/charte-graphique

Travail préliminaire

La phase de recherche et de test est indispensable pour un Ui Designer. Pour réussir un

projet, il est important de connaître les valeurs d’une marque ou d’une entreprise, ses
clients et ses prospects. Identifier, analyser et tester, imposé dans la conception d’un
identité visuelle ou dans la respect d’un cahier des charges.

Pour exemple :

● Création de Moodboard : Une planche d’inspiration unique qui va vous

accompagnez tout le long de la création d’un logo ou d’un site web..
● Création de Zoning/Wireframe : Il indique l’emplacement/l’agencement des
éléments principaux du site web..
● Test Utilisateur : Permet de tester une application/site web.. et cerner et de prévenir
certains problèmes d'accessibilité.

Grâce aux précèdent travail fourni, la conception d’une maquette, d’un sketch peut débuter
avec plus de facilité.

3
L'Intégration, code et CMS

L’intégration est très présente dans ce métier. Niveau code : L’HTML, le CSS et le Javascript
sont des plus utilisés dans ce domaine. Niveau CMS ( Système de gestion de
contenue/Content management system) Wordpress est celui qui est le plus connu et
utilisé.

● L’HTML qui signifie Hyper Text Markup Language est le langage qui permet de
structurer le contenu d’une page web.
● Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade
») est le code utilisé pour mettre en forme une page web.
● JavaScript est un langage de programmation qui permet d’animer des images, et
de mettre à jour du contenu de façon dynamique.
● WordPress permet de créer et gérer l'ensemble d'un site web.

4
Liens Utiles

https://www.usabilis.com/ux-designer/

https://corp.beapp.fr/expertises/questions-frequentes/limportance-dune-phase-dimmersio
n-conception-dune-application-mobile

https://openclassrooms.com/fr/courses/5192236-menez-une-recherche-utilisateur/544685
1-pourquoi-mener-une-recherche-utilisateur

https://www.apec.fr/tous-nos-metiers/communication-creation/webdesigner.html

https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics