Fermer

juin 3, 2020

Systèmes de conception de bâtiments pour les applications


La conception et le développement d'applications sont un processus long, ce qui signifie qu'il y a plus de temps pour que les choses tournent mal. Mais que se passe-t-il si vous avez un système en place qui garantit que votre application est conçue correctement dès le départ, quel que soit le membre de l'équipe (nouveau ou ancien) qui y travaille? C'est ce que font les systèmes de conception.

La conception et le développement d'applications sont souvent un processus long et complexe. Même lorsque vous avez un produit entièrement formé prêt à être publié, le travail n’est toujours pas terminé. Vous devez toujours être en train d'itérer, en essayant de créer une meilleure version de l'application que la précédente.

Mais plus vous travaillez sur une application, et plus il y a de personnes qui s'impliquent, plus l'ensemble devient compliqué et peut être très difficile de gérer quelque chose comme ça. Différentes équipes. Itérations de nouveaux produits. Changer les objectifs.

Sans avoir un ensemble strict de règles et de directives à partir desquelles travailler, votre projet d'application risque de subir des retards, des incohérences, des erreurs, etc. Mais c'est pour cela que nous avons des systèmes de conception.

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

Imaginez un système de conception comme une boîte à outils pour votre application. En règle générale, il s'agit d'une ressource centrale qui définit les lignes directrices suivantes pour un projet de conception:

  • Éléments fondamentaux
  • Modèles d'interface utilisateur
  • Principes et lignes directrices de conception

Google a créé l'un des systèmes de conception les plus connus, Material Design :

 Google possède l'un des systèmes de conception les plus connus dans Material Design. Le site Web fournit des composants réutilisables, des directives de conception d'interface utilisateur, des ressources, des études de cas et plus encore.

Bien que ce système de conception ait été initialement créé pour fournir des conseils sur la façon de concevoir des produits Google et, plus précisément, leurs interfaces utilisateur, l'open -source toolkit est finalement devenu quelque chose que tout concepteur ou développeur pouvait adapter à ses propres fins.

Voyons de plus près comment assembler votre système de conception.

Comment créer un système de conception?

Voici ce que vous devez savoir sur les cinq éléments clés de votre système de conception:

1. Attribuer la propriété

Lorsque vous créez un système de conception, vous devez qu'il soit la ressource de référence pour votre équipe d'applications. Et bien que l'objectif principal soit l'interface utilisateur, la propriété doit aller au-delà du concepteur. Vous avez besoin de l'adhésion et du soutien d'autres équipes.

Le nombre de propriétaires de votre système de conception dépend de la taille de votre équipe ainsi que de la taille de votre projet.

Par exemple, supposons que vous construisiez un système de conception pour une petite application mobile dont la construction devrait prendre quatre mois. Le concepteur principal et le développeur frontend sur le tas peuvent tirer à double titre en tant que créateurs de l'application ainsi que les gestionnaires du système de conception.

D'un autre côté, supposons que vous travaillez sur une application Web d'entreprise dont la création prendra environ neuf mois, puis que vous êtes responsable de l'assistance continue. Quelque chose d'aussi massif serait mieux géré par une équipe interdisciplinaire composée de:

  • Concepteur d'interface utilisateur
  • Concepteur UX
  • Développeur frontend
  • Développeur backend
  • Stratège de contenu
  • Chef de projet

Là sont d'autres intervenants clés que vous voudrez peut-être impliquer. Faites juste attention à ne pas avoir trop de cuisiniers dans la cuisine. Plus il y a de personnes qui ont leur mot à dire sur le système de conception et contrôlent sa modification, plus vous êtes susceptible de rencontrer un conflit qui retarde les choses.

2. Configurer votre système de conception et votre boîte à outils

Une fois que la question de savoir à qui appartient le système de conception est réglée, il est temps pour vous de le créer.

Parce que cela doit être une ressource vivante, vous ne pouvez pas simplement créer un guide de style statique et l'appeler un jour. Envisagez de créer votre système de conception sur un microsite, de la même manière que les grandes entreprises technologiques le gèrent.

Bien que vous n'ayez pas à rendre le vôtre public comme Le système de conception Fluent de Microsoft c'est une bonne idée de le sauvegarder dans un endroit où il est facile pour votre équipe d'y accéder et de voir les changements en temps réel :

 Le site Web de Microsoft pour son Fluent Design System est une plate-forme open source, permettant aux concepteurs de tirer parti des cadres et des directives pour les appareils et systèmes de tous types (pas seulement ceux de Microsoft).

En créant un système de conception facilement accessible, les membres de l'équipe auront automatiquement les dernières et meilleures directives à partir desquelles travailler. Cela vous fera gagner du temps, car vous devrez envoyer un message à votre équipe pour l'informer de la nouvelle mise à jour du système.

Cela facilitera également la restauration des mises à jour, car il vous suffira de revenir à une version précédente. Aucun temps ne sera perdu ni aucune confusion créée en essayant de mettre un système obsolète hors de circulation. Ce que vous voyez est ce que vous obtenez.

N'oubliez pas vos outils

Parce que les concepteurs et les développeurs parlent des «langues» différentes, ils fonctionnent généralement avec différentes plates-formes. Cette déconnexion peut entraîner des problèmes au moment de la collaboration ou du transfert.

Je vous recommande de lire cet article sur les 8 choses que vous pouvez faire pour renforcer la collaboration conception-développement . Vous verrez comment choisir le bon ensemble d'outils peut unir votre équipe, rationaliser vos projets et améliorer vos résultats.

Plus précisément, votre équipe doit utiliser trois outils pour connecter en toute transparence votre système de conception à vos flux de travail existants:

Unite UX est la plate-forme de collaboration qui facilite les transferts de conception pour le développement. Il vous permet également d'enregistrer vos modèles d'interface utilisateur Kendo dans Sketch.

3. Définissez vos styles d'interface utilisateur

Pour créer un système de conception vraiment sécurisé autour de votre application, vous devez d'abord définir les styles d'interface utilisateur fondamentaux pour celle-ci.

Le système de conception d'IBM, appelé Design Language se concentre principalement sur cette pièce:

 Le système de conception d'IBM "Design Language" se concentre principalement sur la définition des principaux éléments constitutifs - des choses comme la typographie, la couleur , Disposition de la grille, logos, iconographie, etc.

Je dirais que, lors de la création d'applications, vous souhaitez commencer par définir les éléments suivants:

  • Logos
  • Couleurs
  • Typographie (y compris familles de polices, directives d'espacement, règles de dimensionnement)
  • Iconographie
  • Photographie et / ou illustration
  • Interaction / animation
  • Interaction / gestes
  • Interaction / sons
  • Alertes et notifications push
  • Disposition

Assurez-vous de prendre le temps d'approfondir réellement chacun des éléments. Par exemple:

 IBM Design Language fournit des ventilations finement détaillées de ses éléments d'interface utilisateur, y compris les sous-familles de caractères.

Il ne devrait y avoir absolument aucun mystère sur ce qu'il faut utiliser, comment l'utiliser et quand.

4. Créez vos modèles d'interface utilisateur

Une fois les bases établies, vous pouvez commencer à reconstituer les modèles que vous utiliserez et réutiliserez autour de votre application. Pour cela, je voudrais attirer votre attention sur Méthodologie de conception atomique de Brad Frost .

Avec cette méthodologie, vous pourrez développer vos modèles d'interface utilisateur avec une approche plus méthodique et logique. Voici comment cela fonctionne:

Atomes

Frost compare les éléments HTML aux atomes:

 Selon la méthodologie de conception atomique de Brad Frost, les éléments HTML constituent les éléments de base de la conception. Dans cet exemple, nous voyons une étiquette «Rechercher sur le site», un champ de saisie «Entrer mot-clé» et une forme de bouton «Rechercher».

Les éléments HTML sont les plus petits éléments constitutifs de votre application. Dans l'exemple ci-dessus, vous pouvez voir comment trois d'entre eux (étiquette entrée et bouton ) peuvent être conçus individuellement.

Molécules

À eux seuls, les atomes ne fournissent pas beaucoup de substance. Cependant, ils deviennent significatifs une fois que vous commencez à les regrouper comme des molécules:

 Selon la méthodologie de conception atomique de Brad Frost, lorsque les éléments HTML fusionnent, ils prennent des composants plus significatifs, comme cette barre de recherche «Rechercher sur le site»

Dans l'exemple de Frost, vous pouvez voir comment les trois «atomes» antérieurs ont fusionné pour former un élément d'interface utilisateur commun: un formulaire de recherche.

Organismes

Tout comme les atomes se réunissent pour former des unités significatives, les molécules se réunissent pour former des structures plus complexes. Frost les appelle des organismes:

 Selon la méthodologie de conception atomique de Brad Frost, lorsque les composants de l'application ou du site Web fusionnent, ils deviennent de plus grands «organismes» vivants comme ce logo, le menu et la barre de recherche qui forment un en-tête.

Maintenant, juste parce que cet exemple est un en-tête de site Web, cela ne signifie pas que chaque organisme dans votre application sera un bloc unique composé de quelques composants. Les organismes de notre planète varient en taille et en complexité, il en va de même pour les «organismes» de votre produit. Ils peuvent être aussi petits qu'une barre de navigation ou aussi volumineux qu'une page entière.

Remarque sur les modèles d'interface utilisateur

Lorsque vous créez vos modèles et modèles d'interface utilisateur, gardez à l'esprit que cela doit être facile pour toute personne travaillant dans votre concevoir des plates-formes pour récupérer les modèles dont ils ont besoin. Cela signifie que, en plus de concevoir vos modèles, vous devez également les organiser de manière cohérente pour tout le monde et utiliser une convention de dénomination qu'ils comprendront tous.

Alors, restez simple.

Je recommanderais d'utiliser des étiquettes d'organisation comme Apple utilise dans ses Human Interface Guidelines (systèmes de conception):

 Le système de conception d'Apple est appelé Human Interface Guidelines. Dans son système de conception iOS, il utilise des conventions de dénomination très simples et universelles pour ses composants et styles de conception.

Tout est simplement nommé et facile à trouver. Au fur et à mesure que vous approfondissez, ne compliquez pas trop la dénomination de vos modèles. Utilisez des sous-catégories pour les définir. Par exemple, il s'agit d'une bibliothèque d'interface utilisateur Kendo importée dans Sketch:

 Un exemple des conventions de dénomination d'une bibliothèque d'interface utilisateur Kendo dans Sketch. Chaque composant est simplement étiqueté, comme «Navigation Sidebar», puis divisé en modèles plus petits pour «Collapsed», «Expanded All», «Expanded One» et «User Dropdown», par exemple.

Vous pouvez voir dans l'exemple de «Navigation Sidebar» que les sous-étiquettes sont clairement et simplement nommées:

  • Réduit
  • Développer tout
  • Développer un
  • Liste déroulante utilisateur

Il en va de même pour le «Bouton» composant qui se décompose en dessous. En fait, il est divisé en catégories plus profondes:

  • Par défaut (encore divisé par icône et texte)
  • Plat
  • Contour

Et chacune de ces sous-catégories est divisée par priorité et état du bouton. Mais quel que soit le bouton, les conventions de dénomination restent les mêmes, ce qui facilite la localisation du modèle d'interface utilisateur souhaité, quelle que soit la taille de votre bibliothèque.

5. Établir les règles

Enfin et surtout, vous devez noter les principes et les lignes directrices de votre système de conception. Ceux-ci peuvent inclure:

  • Consignes de marque
  • Principes de conception
  • Consignes d'utilisation et d'accessibilité

Vous trouverez un bon exemple de cela dans Material Design:

 Google fournit des conseils sur les principes de conduite derrière Material Design: «Le matériau est la métaphore».

Cela aide les concepteurs à travailler plus efficacement avec un système de conception car ils comprennent la force motrice qui le sous-tend.

Google ne se contente pas de reléguer une page "Introduction" à ses principes de conception. Chacun des éléments fondamentaux est bien pensé et expliqué également:

 Google explique comment et pourquoi chaque composant est conçu tel qu'il est dans Material Design. Par exemple, les composants d'une application agissent comme les surfaces et les objets dans le monde réel.

Dans l'exemple «Environnement> Surfaces», nous apprenons comment les dimensions du monde réel influencent la conception des composants avec la lumière et shadow in Material Design.

Cela peut sembler exagéré pour votre application – et cela pourrait très bien l'être, selon l'étendue du travail. Cependant, pour les projets plus longs, vous ne savez jamais quand un nouveau concepteur ou développeur peut entrer dans le travail et se demander pourquoi diable vous faites ce que vous faites. Ou vous pourriez simplement en avoir besoin pour vous rafraîchir lorsque vient le temps de mettre à jour votre application.

Quels sont les avantages de la création de systèmes de conception pour les applications?

En créant un système de conception avant le début d'un projet, vous définissez les règles du travail et vous assurez que les meilleures pratiques sont respectées du début à la fin. Mais ce n'est pas tout.

Les systèmes de conception sont chargés de:

  • Apporter de la cohérence à l'interface utilisateur d'une application
  • Simplifier la gestion des applications, même les plus complexes
  • Améliorer la collaboration lorsque les membres de l'équipe abordent le travail en utilisant le même langage, les mêmes composants , des outils, etc.
  • Créer de meilleurs produits en tant qu'intervenants de diverses disciplines ont leur mot à dire sur la façon dont le produit est conçu depuis le tout début.
  • Amélioration de l'évolutivité de l'application, car tous les fondements et règles de base sont déjà définis [19659010] Et bien que cela ajoute plus de temps à l'avance à un travail de conception d'application, la création d'un système de conception vous fait gagner du temps plus tard lorsque de nouveaux designers ou pigistes entrent dans le projet, le client modifie la portée, ou cela fait des mois que vous ne l'avez pas examiné et besoin de faire des ajustements.





Source link