Comment créer un cadre de conception efficace (comprend un cadre d'interface utilisateur Sketch gratuit)

Si vous êtes dans le monde du design depuis un certain temps, vous avez probablement entendu ces termes : framework de conception, framework d'interface utilisateur, kit d'interface utilisateur ou bibliothèque de modèles. Ils font tous référence à la même chose : un système de normes de conception, de modèles, de modèles d'interface utilisateur et de composants qui sont utilisés dans un produit et servent son langage de conception.

Si vous n'avez jamais créé de cadre de conception auparavant, en démarrer un peut sembler accablant et prendre beaucoup de temps, mais cela accélérera votre travail de conception et le rendra globalement plus efficace.

Décrivons les principaux problèmes qu'un cadre de conception résout, pourquoi vous en avez besoin et les composants que vous devrez créer lors de la création d'un. Vous trouverez un cadre d'interface utilisateur Sketch téléchargeable gratuitement plus loin dans l'article qui vous permet de créer votre propre cadre de conception.

Qu'est-ce qu'un cadre de conception ?

Chaque conception d'interface utilisateur commence par un plan de travail vide, et chaque concepteur a un processus qu'il utilise pour transformer cette toile vierge en un produit entièrement fonctionnel. Ce processus comprend tous les petits composants de conception créés et les étapes suivies par le concepteur pour créer un ensemble cohérent, des couleurs aux boutons et tout le reste.

Souvent, ce travail est répétitif et peut être consolidé et rendu plus efficace en créant un système de modèles et de composants interdépendants. En d'autres termes, un cadre de conception .

Les frameworks de conception résolvent plusieurs problèmes, notamment :

• Éliminer les incohérences dans la conception du produit.
• Accroître la collaboration, l'efficacité et la communication entre les équipes de conception et de produit.
• Rendre les mises à jour de conception plus tard dans le processus de conception moins frustrantes.

Le premier problème : incohérence dans le produit

La cohérence transforme un bon design en un excellent design. La cohérence améliore l'expérience utilisateur, la convivialité générale et l'efficacité avec laquelle les utilisateurs peuvent utiliser les produits numériques. Qu'il s'agisse d'un petit site Web, d'une application ou d'un grand produit SaaS, les incohérences dans la conception compromettent l'apparence, la convivialité, la crédibilité et l'expérience utilisateur du produit.

Les incohérences se produisent souvent lorsqu'une équipe ou un concepteur fait les choses trop rapidement ou apporte des modifications à la volée. Parfois, un concepteur répond à un client ou à une partie prenante demandant quelque chose de différent en leur montrant rapidement à quoi ressembleraient ces changements. Soudain, l'équipe de conception se retrouve avec quatre nuances de vert différentes et personne ne sait quelle est la couleur principale du bouton.

Les cadres de conception résolvent ce problème en établissant des normes cohérentes.

Le deuxième problème : les lacunes en matière de collaboration et de communication

Souvent, pendant le processus de développement, lorsque plusieurs membres de l'équipe sont impliqués et que beaucoup travaillent sur la conception à différents stades du processus, cela peut devenir déroutant s'il n'y a pas un ensemble de normes pour guider l'équipe.

Un cadre de conception stimule la collaboration et l'efficacité en rationalisant le processus de communication et en fournissant des normes et une orientation claires. Plus de temps perdu à faire des allers-retours à essayer de déterminer quelle couleur ou police est la bonne à utiliser.

Le troisième problème : les modifications de conception tardives

Combien de fois les concepteurs doivent-ils effectuer un seul changement de couleur dans le fichier de conception avec 120 plans de travail déjà développés ? Combien de fois faut-il changer une icône faisant partie de 200 composants ?

Le changement est inévitable tout au long du processus de conception, c'est la façon dont le produit s'améliore, mais il arrive souvent plus tard que les concepteurs ne le souhaiteraient. Un cadre de conception rend ces modifications tardives beaucoup moins douloureuses, car il est construit sur un système de composants orientés objet. Changez-le une fois et il se répercute sur toute la conception.

Comment créer un cadre de conception

Maintenant que nous savons ce qu'est un cadre de conception et les problèmes qu'il résout, parlons de sa création (et du contenu du kit de téléchargement Sketch UI fourni plus loin dans l'article).

Le cadre de conception utilisé pour cet article est un fichier Sketch unique qui est agencé à l'aide d'une hiérarchie spécifique de composants, connus dans Sketch sous le nom de « symboles ». Ces symboles facilitent la mise en œuvre de modifications à l'échelle du fichier en un seul clic. Un changement dans le composant "maître" - le "symbole" - est reflété instantanément dans toutes les autres instances.

Hiérarchie du cadre de conception

Pour créer un cadre de conception qui fonctionne bien, commencez par mettre en place une hiérarchie visuelle solide. Concevez d'abord les composants les plus omniprésents, comme la couleur et la typographie. Travaillez ensuite sur les plus petits, comme les boutons et les composants d'entrée. Considérez cela comme la construction d'une maison - construisez d'abord les fondations, puis ajoutez les autres pièces au fur et à mesure que le projet progresse.

Couleur

La couleur est l'élément le plus important dans une hiérarchie de framework de conception d'interface utilisateur - chaque composant d'une conception utilise la couleur. La couleur suscite de fortes réactions et émotions chez les gens et définit l'apparence générale, la sensation et le ton d'un produit.

Une bonne pratique consiste à diviser les couleurs en groupes :

1. Les couleurs primaires sont les principales couleurs de la marque, généralement utilisées pour créer le schéma de couleurs général d'un projet et pour des composants cruciaux comme les boutons.
2. Les couleurs secondaires complètent la palette primaire. Il s'agit souvent de différentes nuances, saturations ou teintes des couleurs primaires. Les niveaux de gris sont couramment utilisés pour la typographie ou les arrière-plans. Quelque part entre cinq à huit niveaux de gris devrait suffire.
3. Les couleurs de rétroaction du système sont un groupe important que les concepteurs oublient souvent. Ces couleurs affichent les messages système, y compris les alertes, les avertissements et les notifications.

Grille : l'espace de conception

Une fois les couleurs sélectionnées, l'étape suivante consiste à configurer une grille. Une grille conserve tous les autres composants de la page au bon endroit et dans le bon ordre. C'est l'espace de conception global.

Il existe deux types de grilles : verticale et horizontale .

La grille verticale est celle qui est la plus couramment utilisée et maintient tout aligné horizontalement. Il existe de nombreux systèmes de grille populaires comme Bootstrap ou l'ancienne grille 960px.

Une grille horizontale n'est pas si commune. Une grille horizontale est utilisée pour la typographie. Il crée un rythme vertical pour les paragraphes et est couramment vu dans les journaux.

Modificateurs : règles stylistiques

En plus de la couleur et de la grille, il existe un autre composant qui occupe une place importante dans la hiérarchie du cadre de conception : les modificateurs. Ils ne peuvent pas être utilisés comme composants autonomes, ils sont utilisés pour modifier ou styliser les autres.

Ce groupe apporte du style à un projet et comprend des composants responsables de l'esthétique, tels que des formes ou des ombres ; les modifier individuellement dans les phases ultérieures du projet peut être fastidieux.

Traitez les modificateurs comme des paramètres pour tous les blocs de construction suivants. Créez des symboles Sketch à partir de trois formes différentes : rectangle, rectangle arrondi et cercle. Utilisez ces formes pour créer chaque composant d'une interface utilisateur, y compris les boutons, les composants d'entrée, les champs de formulaire, etc. et les éléments d'arrière-plan.

Cette technique permet aux concepteurs de se concentrer davantage sur l'expérience utilisateur plutôt que sur l'apparence des composants de l'interface utilisateur. Cela permet également de revenir facilement à la forme de base, de changer son style (par exemple, le rayon d'angle) et tout ce qui est connecté se mettra à jour automatiquement.

Typographie : le contenu

La typographie est le dernier élément important du cadre de conception. Il peut être divisé en deux groupes : copie de page statique, comme les en-têtes et les paragraphes ; et la copie de composants interactifs, tels que les boutons, la navigation ou les champs de saisie.

Concevez le style et la taille de tous les titres (H1, H2, H3, etc.) et paragraphes. La copie de page statique n'a généralement pas beaucoup de variations stylistiques (couleur ou poids). La seule variation, liée au style de copie de page statique, est de savoir s'il s'agit d'un arrière-plan clair ou foncé. Par conséquent, il est préférable de créer deux ensembles de couleurs pour s'assurer que la copie de page statique fonctionne sur les deux.

La copie qui apparaît sur les composants interactifs, comme les boutons ou les messages de retour du système, peut avoir plusieurs variantes. Par exemple, les messages de rétroaction du système peuvent être affichés sur quatre couleurs d'arrière-plan différentes en fonction du type de message (avertissement, erreur, succès, etc.) - les étiquettes des boutons peuvent également être sur des arrière-plans différents.

Inclure ce groupe dans le cadre de conception est utile tout en pensant globalement à la typographie. Tout d'abord, créez le texte de l'étiquette du bouton normal, puis créez ses variantes ; cela évitera de se retrouver avec trop de tailles de police. Lors de la création de nouveaux composants d'interface utilisateur dans le cadre, vérifiez toujours s'il existe un style de typographie existant qui convient.

Icônes

Il existe deux groupes d'icônes dans un système de conception : les icônes d'information et d'interface utilisateur. Le premier groupe fait généralement partie d'un système d'illustration et n'est pas utilisé pour les composants d'interaction de l'interface utilisateur (tels que les boutons). Le deuxième groupe, les icônes de l'interface utilisateur, ajoute du sens à des composants plus complexes : boutons, étiquettes ou tableaux, tout en occupant très peu d'espace. Les icônes de l'interface utilisateur peuvent également être utilisées comme déclencheurs de fonctions telles que "modifier", "copier", "télécharger" et "supprimer".

Commencez avec des icônes simples utilisées pour les interactions de l'interface utilisateur, telles que des flèches, "ajouter" (+) ou "fermer" (x). Une bonne pratique consiste à les concevoir dans différentes tailles (12px, 16px, 24px 32px).

Composants

Boutons

Les boutons sont sans aucun doute l'un des composants les plus importants de la conception de l'interface utilisateur et, au fil des ans, ils ont subi de nombreux changements au fur et à mesure que les tendances de conception allaient et venaient.

Lors de la conception des boutons, assurez-vous de concevoir leurs « états » individuels. En règle générale, un bouton a plusieurs états et fournit un retour visuel aux utilisateurs pour indiquer l'état actuel (inactif, survolé, enfoncé, désactivé, actif, etc.).

Il existe deux façons de procéder : la première consiste à concevoir l'apparence des boutons séparément pour chaque état (normal, actif, survolé et enfoncé). Cette solution peut prendre du temps, mais donne par la suite beaucoup de flexibilité. (Cette méthode a été utilisée dans le cadre gratuit de l'interface utilisateur Sketch inclus ci-dessous.)

La deuxième façon consiste à concevoir tous les états en fonction de l'état initial. Par exemple, créez un symbole Sketch qui modifiera la couleur, la saturation ou la luminosité de chaque état.

Pour ce faire, placez le symbole en superposition du bouton avec l'un des modes de fusion Sketch : teinte, saturation ou superposition. Utilisez un rectangle noir avec le mode de fusion de teinte sur le bouton normal pour modifier sa saturation. La modification ultérieure de l'opacité de la superposition en fait un bouton plus ou moins saturé.

Composants d'entrée

Les entrées permettent à l'utilisateur de communiquer avec l'application et de télécharger des données. L'utilisation de composants tels que des champs de saisie avec des boutons permet la création d'une application Web simple. Comme pour les boutons, il est préférable de créer des composants d'entrée avec différents états. Cela dépend du cadre de conception, mais au minimum, envisagez de créer des états vide, rempli et d'erreur.

Composants complexes

À ce stade, le cadre de conception peut être considéré comme complet car il contient tout le nécessaire pour créer un produit fonctionnel. Cependant, il est souvent utile de passer plus de temps à créer des composants d'interface utilisateur plus complexes pour le cadre d'interface utilisateur, tels que des cartes, des tableaux, des sélecteurs de dates, des graphiques et des formulaires.

Sections

À ce stade, le cadre de conception peut être développé davantage en créant les sections les plus courantes des applications ou des sites Web. En concevant des éléments tels que la navigation, les en-têtes, une section "à propos de nous" et des galeries, un concepteur peut gagner du temps dans les phases ultérieures d'un projet. La création de plusieurs variantes de différentes sections du produit facilitera l'adaptation à différents projets sur toute la ligne.

Meilleures pratiques du cadre de conception

Testez constamment le cadre de conception

Les tests doivent être inclus dans tout processus de conception ou de développement. Évitez les erreurs et les composants manquants en créant de petites pièces de conception et en les « testant sous contrainte ». Par exemple, vérifiez si la modification d'un composant créé au début modifie également un composant récemment ajouté.

Créer des composants d'interface utilisateur simples

Gardez les composants simples tout en pensant à autant de cas d'utilisation de conception que possible, afin qu'à l'avenir, n'importe quel style puisse être couvert. Il est préférable de créer des composants d'interface utilisateur avec des formes simples, en les gardant suffisamment flexibles pour s'adapter facilement à n'importe quel projet.

Ne vous concentrez pas sur un seul style

Un cadre de conception doit être universel, donc au lieu de vous concentrer sur un style spécifique, concentrez-vous sur les composants qui peuvent être utilisés pour créer un style.

Créez votre propre cadre de conception

Lors de votre prochain projet, prenez le temps au début de construire de manière réfléchie un cadre de conception. Vous constaterez qu'il améliore le processus de conception global, augmente l'efficacité et améliore la cohérence de la conception du produit, ce qui améliore la convivialité. Vous gagnerez du temps, communiquerez plus efficacement vos idées de conception et rendrez vos clients et parties prenantes heureux lorsque ces idées prendront vie en quelques secondes sur un plan de travail 120 Sketch.

Êtes-vous prêt à démarrer votre propre framework de conception ?

Téléchargez le fichier Sketch ici. Des instructions sont incluses sur la façon de l'utiliser.

Des systèmes de conception et des cadres d'interface utilisateur inspirants

L'une des meilleures façons de mieux comprendre les cadres de conception est d'examiner comment les grandes entreprises établies les utilisent. Suivez ces types d'entreprises et découvrez leur approche.

Material Design de Google - actuellement l'un des cadres de conception les plus populaires au monde. Découvrez comment Google superpose l'ensemble du processus de conception et construit une hiérarchie utile de composants.

Langage de conception d'IBM - IBM partage l'ensemble de son processus de conception, y compris une explication approfondie de chaque détail. Ils partagent également de nombreuses ressources de leur langage de conception, des icônes simples à une bibliothèque d'animations d'interface utilisateur.

Atlassian - une autre excellente ressource d'apprentissage. Leur guide de style de produit est un excellent système de conception à étudier. Ils partagent leur pack Web GUI, un fichier Sketch avec des tonnes de composants et de concepts.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques