Étui Design Aurore

Dec 07 2022

Comme vous le savez, plusieurs designers peuvent être impliqués dans la création de projets évolutifs et complexes à différents moments. Il est très pratique d'utiliser un système organisé d'éléments et de règles d'utilisation tout en continuant à travailler sur le projet de quelqu'un.

C'est exactement la méthode qui était nécessaire pour l'un de nos projets, Aurora. Notre tâche consistait à créer un concept d'éléments de base afin de construire à partir d'eux une interface à part entière pour une plate-forme dans le domaine de la gestion du commerce électronique.

Le client a fourni le système Carbon à titre d'exemple, qui comprend le Design-Kit, les couleurs, les polices, les cas d'utilisation, etc. Ainsi qu'un analogue de leur produit. De plus, je me suis concentré sur des exemples de conception de matériaux, car leur site Web propose des options de composants qui peuvent être utiles pour le développement.
Au cours du travail, tout d'abord, les polices, les icônes et les couleurs principales du projet ont été proposées. En même temps, j'ai créé des exemples de boutons et d'entrées pour montrer comment les polices et les icônes sélectionnées interagissent les unes avec les autres. Sur cette base, le client a choisi les polices, les couleurs et l'apparence des icônes. Ainsi, l'une des couleurs du logo, le rose, est utilisée comme couleur primaire, et la seconde, le gris, comme couleur secondaire.

Tous les styles de police utilisés avec des rôles marqués sont enregistrés dans les styles du projet Figma et peuvent être sélectionnés dans la liste.

Les couleurs sont conservées de la même manière. Mais ils sont divisés en dossiers dans la section Styles de couleurs : Primaire et Supplémentaire. Pour élargir la palette de couleurs, j'ai utilisé la méthode consistant à ajouter séquentiellement du noir et du blanc à la couleur sélectionnée dans différentes proportions (20%, 40%, 60%, etc.). Le cadre avec la disposition des couleurs indique également les rôles de couleur prévus.

De plus, plusieurs options d'ombre ont été ajoutées pour choisir parmi un ensemble prêt à l'emploi offert par le client.

Ensuite, l'apparence des boutons, des entrées, de la liste déroulante et du bouton de sélection de la langue a été choisie. Tous les boutons sont des composants dont l'apparence peut être modifiée directement dans le projet, en fonction de l'objectif. L'icône du bouton peut également être modifiée dans le menu Mise en page automatique.

L'apparence du bouton déroulant pour sélectionner la langue a été légèrement modifiée (elle est devenue plus compacte) après avoir créé l'exemple de page de connexion.

L'entrée a 9 options et peut être utilisée avec ou sans icône. Le champ de saisie du mot de passe a plus d'options car il peut être utilisé dans différentes situations et possède ses propres propriétés spécifiques. Par exemple, une échelle indiquant la force du mot de passe et des éléments surlignés en vert si l'utilisateur a saisi le nombre de caractères requis. J'ai également créé un composant séparé pour le champ de saisie du code de vérification.

Ensuite, des composants pour la case à cocher et la bascule ont été créés, ainsi que des composants pour les mêmes éléments avec du texte. De plus, j'ai ajouté des avatars de différentes tailles, des composants avec des groupes, des info-bulles et des exemples d'utilisation ainsi qu'une liste déroulante.

Pour montrer comment les éléments et le texte fonctionnent dans la vraie vie, j'ai créé des écrans de connexion, en tenant compte des souhaits du client. Plus tard, un thème sombre a été ajouté, pour lequel j'ai créé des composants séparés.

Et pour configurer les composants du thème sombre, j'ai utilisé une disposition de connexion prête à l'emploi et sélectionné des combinaisons appropriées de couleurs et de transparence. Pour certains éléments, rien n'a dû être changé. Par exemple, pour le bouton principal.

Ainsi, dans un délai assez court, le client reçoit un simple kit d'interface utilisateur avec la possibilité d'éditer des éléments dans Figma. C'est un excellent moyen de mettre en valeur l'orientation stylistique principale d'un projet sans dépenser beaucoup d'argent.