UI Design

Un Design System Management (DSM) est un pré-requis pour chaque projet dont nous avons la charge. Tout d’abord, il reprend les codes graphiques de la charte client ; couleurs, typographies, éléments graphiques, etc. Par la suite, il sera complété par tous les éléments de l’atomic Design ; Atoms, Molécules, Composants et Gabarits. Les différentes variations et les règles de l’interface seront consignées dans ce document. Le DSM est donc la référence pour l’architecture design du projet, il servira pour les développeurs qui prendront la suite du projet. Le but de ce document est sa lisibilité pour tous ; designers et développeurs ainsi que sa pérennité pour durer dans le temps. Ce fichier est compris dans notre devis et sera fourni au client à la fin du projet…

Nous utilisons l’atomic design pour la création de nos interfaces. Chaque projet reprend une architecture rigoureuse et aboutie : Atoms -> Molécules -> Composants -> Gabarits.
Cette architecture est retranscrite dans le DSM (Design System Management), ce document est la référence pour le développement, l’intégration et la maintenance du site. Avec ce niveau de détails, il est possible de répondre au plus près à vos besoins tout en conservant une cohérence graphique et une sécurité pour la maintenance de votre projet

Figma permet la création de composants graphiques au pixel perfect. Il propose différentes fonctionnalités, telles que le prototypage interactif, la conception d’illustration vectorielle ou l’ajout de commentaire. Avec Figma, l’accès aux fichiers d’un projet est facilité pas besoin de télécharger une application, il suffit de n’importe quel navigateur web avec une connexion internet.
Nous fournissons un accès aux maquettes à nos clients qui pourront donc avoir un aperçu avec de possibles interactions, et un système de commentaire pour annoter le fichier avec les retours en temps réel.

Il s’agit d’une phase de planification où l’on crée des schémas simples et des wireframes basses fidélités en entonnoir qui décrivent la structure de votre projet. Cette étape permet de rentrer dans le détail fonctionnel pour chaque élément : composants et template et ainsi servir de base à la documentation du projet.

Avec les wireframes validés, nous pouvons passer à l’étape la plus graphique. Couleurs, typographies, éléments graphiques de votre identité nous initions ces éléments dans le projet et donc le DSM que nous vous livrerons avec le produit final.

Liens et chemins entre les maquettes, micro-animation et micro-intéraction, comportement au survol de la souris, etc., nous présentons ici une maquette qui pourrait totalement passer pour le produit final sur les devices du projet.