Qu'estce que c'est et comment en créer un en utilisant Indigo.Design

(Cet article est sponsorisé.) La conception est une question de redimensionnement . Les produits numériques deviennent de plus en plus complexes et il est évident que les équipes de produits doivent adapter leur approche lors de leur conception. Pour proposer des produits bien conçus sur le marché, de nombreuses organisations ont commencé à adopter une approche plus systématique de la conception, en expérimentant avec des guides de style et des bibliothèques de motifs afin de créer des systèmes de dessin.

Les équipes de produits pourraient avoir des problèmes de création et d'intégration. un système de conception dans leur processus de conception, l’un des problèmes les plus courants est l’intégration des différents outils utilisés par une équipe. Même si une équipe a une conception visuelle parfaite avec des composants correctement manipulés, elle risque de rencontrer des difficultés lors du transfert de la conception et du codage, tout cela parce que leurs outils ne fonctionnent pas correctement.

Indigo.Design tente de résoudre ce problème en introduisant une plate-forme unifiée pour la conception visuelle, le prototypage UX, la génération de code et le développement d'applications. L'utilisation de cette plate-forme augmente les chances que vous créiez un système de conception qui prenne racine et devienne un élément essentiel de l'organisation. Dans cet article, nous allons nous concentrer sur un seul aspect de cet outil: utiliser un système de conception dans une conception visuelle. Mais avant cela, il est important de définir ce qu'est un système de conception.

Qu'est-ce qu'un système de conception?

Un système de conception est un ensemble d'éléments pouvant être combinés et réutilisés pour créer des produits. Cette définition peut donner l’impression erronée qu’il s’agit d’un seul élément livrable, tel qu’une bibliothèque Sketch avec des composants d’interface utilisateur ou un guide de style. En fait, un système de conception est beaucoup plus que cela. Considérez-le comme un processus et un ensemble de produits livrables qui créent un langage partagé que tous les membres de l'équipe utiliseront lors de la création d'un produit.

Un système de conception concerne la communication. Un système de conception bien conçu établit un langage commun entre les membres de l'équipe, et ce langage permet à l'équipe de collaborer plus efficacement. Ainsi, le but ultime de la création d'un système de conception est de créer à la fois une source unique de vérité à laquelle on peut faire référence lors de la conception du produit et un langage partagé efficace que tous les membres de l'équipe peuvent utiliser lorsqu'ils travaillent sur un produit.

Une solution système à résoudre pour les membres de l'équipe?

L'approche la plus cruciale qu'un système de conception apporte à une équipe produit est peut-être différente: les membres commencent à aborder une conception en gardant à l'esprit le système. Voici quelques tâches quotidiennes qu'un système de conception peut aider un membre de l'équipe:

• Recherchez et utilisez rapidement le composant, le motif ou l'option de style appropriés (couleur, police de caractères, icône, etc.);
• Réutilisez un composant ou motif (dans le même produit ou dans un autre produit);
• Savoir comment utiliser correctement un composant ou un motif (les concepteurs de produits disposeront désormais de ces instructions lors de la création de produits);
• Assurez-vous que les composants que vous utilisez sont

Qu'est-ce qui peut motiver une équipe à penser à un système de conception?

Il existe quelques facteurs de motivation puissants pour qu'une équipe réfléchisse à un système de conception:

• La dette de conception.
  À mesure que les produits et les équipes vieillissent, ils accumulent des dettes de conception et de développement. Les conventions non réutilisables, les styles incohérents et le code existant sont les sources les plus courantes de dette de conception et de créance technique. La dette empêche une équipe de se déplacer rapidement. Un système de conception aide une organisation à réduire sa dette.
• Problèmes de collaboration et de communication
  Dans les grandes entreprises, plusieurs équipes différentes travaillent généralement sur un seul projet. Même avec une équipe qui communique régulièrement, il est assez courant que leurs travaux se chevauchent (par exemple en créant des composants similaires ou des modèles UX). Un système de conception peut créer des ponts entre les équipes et faciliter la réutilisation du travail.
• Travail répétitif
  Un système de conception libère du temps sur le travail répétitif afin que l'équipe puisse se concentrer sur la résolution de problèmes plus intéressants. Le fait que les membres de l'équipe n'aient pas à se soucier de l'icône ou du bouton à choisir dans une situation particulière leur permet non seulement de gagner un temps précieux, mais les aide également à se concentrer sur une vue d'ensemble: réfléchir davantage à la manière dont l'utilisateur utilisera le produit.
• Cohérence au sein d'une famille de produits
  Les grandes entreprises doivent concevoir pour plusieurs plates-formes et avoir une expérience cohérente sur toutes les plates-formes (comportement et interaction). Considérant qu’une équipe individuelle est responsable de la création d’un design pour une plate-forme particulière, ce n’est pas une tâche simple. Un système de conception facilite beaucoup la conception d'une expérience cohérente sur toutes les plates-formes.

Les qualités essentielles d'un système de conception fonctionnant bien

Quels que soient les technologies et les outils qui le sous-tendent, un système de conception efficace présente les caractéristiques suivantes:

• Il devrait être adopté par l'équipe
  . Le système devrait correspondre à la culture de l'équipe. Il devrait devenir un élément naturel du processus de conception et évoluer progressivement avec les produits de l'équipe.
• Il devrait être équilibré.
  Le système doit donner aux membres de l'équipe une liberté suffisante pour contribuer, sans toutefois dépasser les paramètres.
• Cela devrait être cohérent.
  Les différentes parties du système fonctionnent bien ensemble.
• Cela devrait être bien documenté.
  La qualité de la documentation a une incidence directe sur l'adoption du système. Si quelque chose n’est pas documenté, il n’existe pas. C'est pourquoi la documentation doit toujours être à jour.
• Elle doit être robuste.
  Quel que soit le produit ou la plateforme auquel un système de conception est appliqué, le produit final doit présenter un nombre minime de défauts.
• [1965 Il devrait être hautement réutilisable.
  Tous les composants du système devraient pouvoir être réutilisés dans de nombreux contextes.
• Enfin, il devrait être rentable.
  Un système efficace peut rendre le processus de conception plus rentable.

Comment Indigo.Design simplifie-t-il le processus de construction d'un système de conception?

Le démarrage d'un système de conception peut sembler intimidant. Il est évident qu’un excellent système de conception ne peut être construit du jour au lendemain; il y a trop de choses à considérer. Même avec tous ses avantages, il est difficile d’obtenir l’assentiment des équipes impliquées dans la conception et le développement, principalement parce que le système va influencer le mode de travail des concepteurs et des développeurs. Voyons comment Indigo.Design peut améliorer ce processus.

Le principal élément qui distingue Indigo.Design de tout autre outil est qu’il s’agit d’une plate-forme unifiée pour la conception visuelle, le prototypage UX, la génération de code et le développement d’applications. Habituellement, les systèmes de conception sont créés par les sociétés de produits pour leurs propres produits.

En raison du nombre important de demandes des utilisateurs et de leur expertise dans la création de contrôles de l'interface utilisateur, l'équipe Indigo a identifié les besoins en composants et modèles d'un grand nombre de clients. de diverses industries. Grâce à cette connaissance, le système Indigo.Design va au-delà des systèmes de conception classiques créés pour les besoins spécifiques de produits; c'est plutôt un système de conception prêt à l'emploi qui peut être facilement ajusté aux besoins d'une équipe particulière. Les utilisateurs peuvent utiliser le kit d'interface utilisateur Sketch d'Indigo.Design comme point de départ pour créer leur propre système à l'aide des composants et modèles prédéfinis.

Indigo.Design est composé de trois parties: composants modèles ] et style . Les trois parties sont intégrées en tant que bibliothèques Sketch et sont parfaitement synchronisées. Ils apparaîtront dans la section "Symboles" de Sketch.

Composants

Les composants sont les blocs de construction des interfaces utilisateur. Pensez aux composants comme des blocs LEGO que vous pouvez utiliser pour créer un produit. Les avatars, les cartes et les boîtes de dialogue ne sont que quelques exemples de composants.

La complexité des composants varie, allant de composants simples comme le bouton «Soumettre» à des composants plus complexes comme les cartes interactives. Généralement, plus un composant est complexe, moins il peut être appliqué à des scénarios.

La conception et le développement à base de composants apportent de nombreux avantages au processus de conception, réduisant les coûts techniques en rendant le concept et le code réutilisables. [19659005] Étant donné que les composants sont conçus et construits dans du code, il est essentiel de décrire pour chaque composant:

• le langage visuel (apparence visuelle),
• le comportement fonctionnel (code).

Indigo.Design offre une manière flexible de utilisation de composants:

• La bibliothèque de conceptions contient plus de 50 composants:

• Indigo vous permet de modifier tout ce qui concerne un composant de manière structurelle. Des propriétés individuelles, telles que la taille, le style, les icônes, les polices et les événements, peuvent être modifiées dans la section Remplacements d'un composant. Par exemple, pour les avatars, nous pouvons sélectionner une forme différente de l’objet, passant d’un cercle à un carré. Avec les substitutions, il est possible de créer un nombre illimité de combinaisons de conception pour améliorer la productivité de votre équipe.
• Les composants d’un système de conception sont interdépendants. Lorsque nous introduisons un changement à un endroit, le changement sera hérité dans tout le système.
• Indigo facilite la traduction de la conception en code. Tous les composants sont mappés vers l'interface utilisateur Ignite pour les composants angulaires. Les données du champ DataProperty seront transmises au générateur de code.

Ci-dessous, vous pouvez voir une présentation avec un composant d'entrée. La section Remplacements de l’esquisse contient les propriétés du composant sélectionné. Modifier chaque propriété de manière structurée est facile; en gros, tout, des options de style aux événements, peut être facilement ajusté.

Chaque composant peut avoir une liste de substitutions différente en fonction de ses capacités. Par exemple, pour le champ de saisie, nous remarquons un champ DataProperty, qui peut être traduit directement en générateur de code.

Patterns

De nombreux concepteurs pensent que les patterns et les composants sont identiques. Ils ne sont pas. L'idée de modèle de conception a été introduite par l'architecte Christopher Alexander. Dans son livre Un modèle de langage Alexander donne la description suivante:

«Chaque modèle décrit un problème qui se répète sans cesse dans notre environnement, puis décrit le cœur de la solution à ce problème, de manière à pouvoir utiliser cette solution un million de fois, sans jamais le faire deux fois de la même manière. ”

De la même manière que l'architecture, nous utilisons des modèles dans la conception d'interface pour résoudre des problèmes courants. Par exemple, de nombreuses applications ont des listes de contacts. Il est possible de créer une liste de contacts à l’aide de composants, en associant avatars et sections de texte.

Mais il existe une approche beaucoup plus simple: utilisez un modèle appelé «Liste».

Les motifs permettent aux concepteurs de créer, permettent aux utilisateurs d’utiliser leur expérience antérieure lorsqu’ils interagissent avec un produit. De nombreux modèles de conception étant familiers aux utilisateurs, ils permettront de comprendre intuitivement une conception.

Les composants et les modèles constituent le langage de l’interface du produit. Mais un système de conception doit contenir non seulement des modèles, mais également des techniques et des pratiques d'utilisation et d'itération de ces modèles. Pour de nombreuses entreprises, une bibliothèque de modèles réside généralement dans un wiki, ce qui signifie qu’il est difficile de se tenir à jour. Ce qui aggrave les choses, c'est que les motifs sont également façonnés par les conventions des plateformes (par exemple, iOS et Android).

Indigo.Design résout ces problèmes courants en fournissant des motifs UX facilement personnalisables pour répondre aux besoins des marques.

Avec la dernière version d'Indigo.Design, il est devenu beaucoup plus facile de personnaliser les options de style: vous pouvez appliquer votre les options de style pour l'ensemble du dessin en même temps à l'aide du plugin Theme .

Style

Nous utilisons un style pour créer un certain type d'esthétique et renforcer le lien affectif entre un produit et ses utilisateurs. Indigo.Design facilite la création d'un design élégant qui correspond à votre marque.

Indigo-Styling.sketch est une représentation du moteur de thématisation. Il est séparé en deux parties, représentées par des pages différentes dans la bibliothèque:

• Les icônes sont une collection de plus de cent icônes Matériau que vous pouvez facilement agrandir.
• Les couleurs constituent une riche collection de couleurs primaires, secondaires et spéciales. ainsi que des nuances de gris et des niveaux d'opacité.

La bibliothèque de styles vous permet de créer une image de marque personnalisée (couleurs changeantes, polices, etc.). hérité par la conception. En quelques clics, vous pouvez créer et réutiliser un thème.

La fonctionnalité de thème d'Indigo.Design vous permet de gérer de manière systématique la plupart de vos styles. .

Conclusion

Les systèmes de conception ont changé notre façon de concevoir et de construire des applications. Ils deviennent rapidement la pierre angulaire de la stratégie produit numérique d’une entreprise. De plus, il est extrêmement important de choisir des outils vous permettant d’établir une base solide pour le processus de conception de votre produit. Indigo.Design propose un système de conception prêt à l'emploi qui peut être adapté à vos besoins individuels.

(ms, al, il)