Design pour founders : Upgradez les directives de style

La startup typique développera son premier MVP, le montrera au monde et ensuite pivotera dans l’oubli. Malgré toutes les recherches et enquêtes, lorsque vous vous lancez, vous ne savez toujours pas exactement ce que veulent les clients. Votre public cible peut changer. Votre vision peut changer.

Ces modifications entraînent éventuellement un cluster de code et des styles incohérents qui deviennent très rapidement incompatibles.

• Comment pouvons-nous nous assurer que notre application a l’air magnifique, même après des mois d’itérations ?
• De plus, comment pouvons-nous nous assurer que la marque sur laquelle nous avons travaillé si durement reste cohérente alors même que nous présentons de nouveaux membres de l’équipe ?

Cet article développe l’idée de guides de style, de l’identité de marque à l’expérience utilisateur, où la cohérence et la prévisibilité sont deux principes très importants.

Le court document ci-dessous, créé par HookFeed permet à l’entreprise de gagner beaucoup de temps.

Vous pouvez aussi voir un autre exemple de guide de styles appliqué dans cette interface pour le magazine virtuel Design & Lifestyle.

Avantages des guides de styles

Les développeurs de l’équipe peuvent simplement suivre les instructions et appliquer les modifications mineures, sans avoir à consulter le designer chaque fois qu’une petite fonctionnalité est introduite. Leur identité de marque et leur expérience utilisateur restent cohérentes et belles et tout le monde est heureux, en particulier les utilisateurs.

Maintenir un guide de style prend beaucoup moins de temps et coûte donc beaucoup moins cher que de concevoir entièrement l’interface à partir de zéro et de terminer les itérations. C’est vraiment le workflow de design le plus simple possible.

Les petites équipes nécessitent généralement moins de conseils en raison d’une meilleure communication interne. Les guides de style de votre startup peuvent même être aussi courts qu’une seule page. De cette façon, vous serez au moins sûr que tous les membres de l’équipe l’ont examiné.

Quand devriez-vous commencer à développer des guides de style? Le meilleur moment est vraiment au début d’un projet. Vous pouvez commencer par des guides de style de marque et ajouter des éléments d’interface et des règles au fur et à mesure.

Tout ce qui est dans les guides doit être modulaire. Vous devriez pouvoir prendre n’importe quoi et le déplacer ailleurs ou l’appliquer à un autre élément.

Cela aidera également à garder les guides maintenables. Tout comme le reste de votre application, ceux-ci devront éventuellement être modifiés et ajoutés.

Assurez-vous que vos classes CSS ne se chevauchent pas et réfléchissez aux futures fonctionnalités dont vous pourriez avoir besoin.

Ce qui doit figurer dans les guides de style UX

Les guides de style doivent être universels et donner suffisamment de liberté et de flexibilité tout en étant assez fermes et stricts. Pensez à l’objectif de chaque élément que vous ajoutez aux guides et discutez des différents états et environnements dans lesquels il sera utilisé.

Codes couleurs

Outre les couleurs de la marque, vous souhaiterez probablement introduire différentes couleurs pour donner plus d’importance aux messages d’erreur et de réussite.

Polices

Tout comme pour l’identité de marque, une interface nécessite également une utilisation cohérente des polices. Il est judicieux de définir la taille exacte, l’espacement des lettres, la couleur des caractères et la typographie pour chacun des usages très différents : texte d’aide, texte du bouton, texte du corps, texte saisi, …

De même, vous devez choisir un jeu d’icônes ou un type d’illustration à suivre dans toute l’interface.

Boutons

Les boutons font partie de toute interface.

Pour éviter toute incohérence lors de l’utilisation de différents types de boutons, définissez les styles de bouton en fonction de leur utilisation. Par exemple, vous pouvez avoir besoin des boutons « confirmer » et annuler », ainsi que des états pour chacun d’eux.

De même, définissez d’autres éléments de formulaire, tels que les messages de validation, les champs de saisie, etc.

Éléments propriétaires

Presque chaque application introduit au moins une fonctionnalité spéciale qui ne peut être trouvée dans d’autres applications.

C’est une bonne idée de définir la création de l’entité et de la stocker dans des guides de style.

Effets d’animation d’interface

Dans certains cas, l’introduction d’une animation entre deux écrans (par exemple, un menu déroulant d’un menu latéral) peut aider les utilisateurs à mieux comprendre l’interface. Ces effets doivent être utilisés de manière cohérente pour éviter de trop attirer l’attention sur eux-mêmes. Définissez l’effet exact (par exemple, le easing, la sortie en fondu, la vitesse et la direction) à utiliser de manière cohérente partout dans votre interface.

Maintenir les guides

La solution ultime consiste à développer des guides de style CSS qui permettent essentiellement de copier et de coller simplement du code modulaire là où il est nécessaire.

Cela demande un peu plus de temps à l’avance, mais peut être extrêmement utile pour un design rapide dans le navigateur.

Il est important que vous preniez soin des guides de style. Si une modification a été apportée au design, cette modification doit être immédiatement ajoutée aux guides (vous pouvez utiliser un outil comme InVision pour les mettre à jour). C’est la seule façon de nous assurer qu’elles continueront d’être utiles à l’avenir.