02 . UI Design

Design system, interactions et animations

L’UI Design permet de concevoir une interface cohérente, claire et intuitive. Au delà de développer une belle interface, l’intérêt du design d’interface réside dans sa capacité à conceptualiser une interface claire et surtout facile à comprendre pour l’utilisateur non initié.

Prendre rendez-vous

Moodboard

On va commencer à bâtir une identité visuelle à partir d’un document regroupant plusieurs inspirations (images, photos, couleurs, icônes, logos, etc.) d’autres design system correspondant à ce que vous souhaitez et valorisez.

Identité visuelle

On va chercher à construire tous les éléments graphiques principaux : logotype, bibliothèque photo, couleurs, iconographie et les typographies principales.

Design system

C’est la bibliothèque graphique dans laquelle le développeur puisera pour récupérer les éléments (bouton, texte, champ de formulaire, icône, etc.) dont il a besoin pour le développement du projet. Chacun de ces éléments graphiques aura les côtes en pixels, padding, margin, trame colorimétrique en HEX et HSB afin de faciliter le plus possible le travail du développeur.

Pinterest

C’est un outil formidable pour aller s’inspirer de création et de visuels déjà existant. Il va nous permettre de créer un tableau et d’y ajouter n’importe quelle inspirations afin de créer son propre univers graphique. C’est l’outil idéal pour la création de moodboard.

Illustrator

Logiciel issu de la suite Adobe, Illustrator va permettre de créer n’importe quelle forme vectorielle. On va s’en servir essentiellement pour la création de logotype et d’iconographie.

Adobe XD

Issu lui aussi de la Suite Adobe, Xd va permettre de créer les interfaces et de les prototyper. On va pouvoir créer un prototype de l’application ou du site internet que l’on est en train de créer. Vous allez pouvoir être directement projeter dans le futur de l’application.

Google Drive

Je l’utilise essentiellement comme d’un espace de ressources qui vient stocker tous les documents administratifs qui vont ponctuer notre relation commerciale (devis, facture, contrat de prestation, avenant, etc.). Par ailleurs, j’y intègre aussi les livrables et le versionning. L’avantage de Drive est que vous pouvez commenter ce versionning. Ainsi, on itère ensemble sur les visuels sans nécessaire besoin de faire un skype ou une réunion.

Slack

C’est un outil de « chat » que j’adore car il permet de supprimer les mails. Nous avons donc une relation directe entre vous et moi. Plus aucun soucis de spams ou d’historique de mails. On peut discuter directement ce qui facilite la compréhension et favoriser la rapidité d’itération et de modifications des visuels.

Notion

C’est un outil assez complet permettant de travailler le design sprint des applications que je développe, les roadmap produit, le listing de mes tâches à faire et stocker tout un tas d’autres type d’informations. C’est un espace de travail collaboratif dans lequel j’invite mes clients à participer afin de favoriser encore une fois l’itération et la discussion.