About

illustrations illustrations illustrations illustrations illustrations illustrations

L'UI Designer, ce trait d'union entre l'homme et la machine. C’est l’ensemble des outils qui vont nous permettre de dialoguer avec la machine. On retrouve les éléments indispensables afin de transcrire ce que nous voulons faire, dire ou ordonner à l’ordinateur en signe qu’il pourra comprendre : souris, clavier ou encore écran en sont les éléments de base. Comprendre cela, c’est accepter une vérité universelle : la machine ne parle pas le même language que nous.

De son côté, la machine utilise aussi une langue que le commun des mortels ne comprend pas. Bien évidemment, les développeurs eux ont la capacité de dialoguer avec les machines dans la langue qu’elles parlent : le code.

Partons du principe que nous ne sommes pas développeurs. Toutes les opérations que la machine effectue sont restituées dans un langage que nous sommes à même de comprendre. Textes, visuels, pages internet représentent autant d’interfaces mettant tout le monde sur un pied d’égalité.

En tant qu’interface, l’aspect visuel d’un site internet est sa première signature et le reflet immédiat de ce qu’est la marque. En reprenant la charte graphique, l’Ui va se nourrir des logos, couleurs, typographies ou pictogrammes qui ont été voulu comme étant différenciant et marqueur d’identité. Une des raisons pour lesquelles la frontière entre Ui et Ux est si ténue : l’Ui s’intéresse à l’interface Web, ce que fait également l’Ux. Mais ici, on appelle Ui ce qui touche à la construction et l’agencement des pages : mise en forme du menu, alignement des contenus, présentation des pages… si l’identité visuelle permet en un coup d’œil d’identifier l’univers d’une marque, la charte éditoriale est également un marqueur fort.

author

Maxime Larrouturou

Processus de travail

icon

Recherche et définition

Discussions autour du projet, comprendre les objectifs. Analyser la cible et les appareils supportés. Etablir un audit des contenus. Définir les livrables et les attentes.

icon

Designer et développer

Modéliser des gabarits à l'aide de maquettes filaires (wireframe). Pour une meilleure expérience, prototyper les maquettes. Etablissement des styles et charte graphique (kit UI), conception d'un style guide (Design System).

icon

Livraison

Intégration des composants, maquettes. Développement des templates, pages utilisables et mise en pre production pour le lancement de la mise en ligne.

Outils

client-logo client-logo client-logo client-logo client-logo client-logo client-logo