• Passer au contenu principal
  • Passer à la barre latérale principale
  • Passer au pied de page

Lotin Corp. | Agence de branding

Tout est dans le sens du détail.

  • Portfolio
  • Blog
  • Livres & E-books
    • E-books
    • Livres sur Amazon
  • Ressources
    • Livres
    • Guides
  • A propos
  • Contact

Design pour founders : Upgradez les directives de style

11 septembre 2018 par Henri Lotin Laisser un commentaire

4 minutes

Cet article fait partie d’une série : Design pour founders

« Design pour founders : Expérience utilisateur

» Design pour founders : Top conseils en UX

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, …

Chaque police de l’interface utilisateur de Spotify a son propre objectif : par exemple, tous les éléments de contrôle interactifs utilisent des lettres majuscules.

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.

L’application Pablo utilise différents styles pour différents contrôles dans leur 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.

Souscrivez à notre newsletter

Pour ne rien rater de nos offres, quand nous aurons l'occasion de vous en faire profiter. Et nos articles, une fois par semaine dans votre boîte aux lettres.

Lotin Corp. c'est aussi un centre de formation professionnelle, Lotin Corp. Academy. Vous voulez apprendre à monter des magazines et créer des logos ? Cela ne vous prendra que 03 mois !

Partager ou imprimer :

  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur LinkedIn(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur WhatsApp(ouvre dans une nouvelle fenêtre)
  • Cliquer pour imprimer(ouvre dans une nouvelle fenêtre)

Catégorie(s) : Branding, Design pour founders Tags : bonnes pratiques, css, design d'interface utilisateur, guides de styles, ui design

À propos Henri Lotin

Brand Strategist & UX/UI Designer autodidacte vivant à Douala, au Cameroun, je suis le directeur de création, le responsable de la stratégie et du marketing digital, mais également le co-fondateur de Lotin Corp. (c'est beaucoup, je sais !?)

Je suis depuis Octobre 2014, le fondateur de Lotin Corp. Academy, où j’enseigne le marketing digital, l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

Article précédent : « Archétypes de marque : Soignant [Infographie]
Article suivant : Archétypes de marque : Créateur [Infographie] »

Interactions du lecteur

Laisser un commentaire Annuler la réponse.

Barre latérale principale

Panier

Nombre d’articles dans le panier : 0

  • Votre panier est vide.
  • Total : 0,00€
  • Commande

Lotin Corp.

Nous sommes spécialisés en stratégie de marque, marketing digital ; design et développement web (WordPress), et en design d'identité visuelle.

A travers notre blog, nous souhaitons partager nos recherches et nos découvertes dans les domaines du design graphique, du design web, du marketing digital et de l'entrepreneuriat.

En savoir plus

Guide pratique du freelance

Dans une étude de AND.CO menée en 2017 auprès de 300 freelancers, 44% des personnes interrogées ont dit avoir déjà été escroquées par un client.

En savoir plus

Tous les e-books gratuits

Nos articles récents

  • C’est quoi un freelance ?
  • Cart Funnel, Bumps, Upsell, Downsell, OTO, Tripwire : anatomie de l’entonnoir de vente
  • Créer un entonnoir de vente réussi
  • C’est quoi un entonnoir de vente ?
  • Pourquoi votre entreprise a besoin d’une transformation digitale marketing
Mes Tweets

Footer

Nos traductions pour Tuts+

En défenseur du design

Il est très souvent rare de partager les mêmes point de vue sur le design avec les non-designers, et particulièrement … [Lire la suite...] à proposEn défenseur du design

Plus d'articles de cette catégorie

Catégories

  • 15 Minutes avec
  • Branding
  • Chronique
  • Clients
  • Design graphique
  • Design pour founders
  • Design web
  • Etudes de cas
  • Freelance
  • Guide de l’indépendant
  • Guides
  • Livres
  • Marketing Digital
  • Méthode hypercréative
  • Nouvelles
  • Persuasion en business
  • Profession
  • Realisations
  • Stratégie
  • Traductions
  • UI Design
  • UX Design
  • Vidéo
  • WordPress

Pages & articles à la une

  • C’est quoi le design graphique ? Que fait un designer graphique ?
  • La différence entre l’art et le design
  • C'est quoi un freelance ?
  • Arrêtez de vous qualifier d'entrepreneur, vous n'en êtes peut-être pas un !
  • Qu'est-ce que la créativité ? Comprendre la capacité la plus importante d'aujourd'hui

Contactez-nous

403, Rue Drouot, Akwa
BP 4468 Douala
contact[at]lotincorp.biz
+237 673 07 94 08
Lundi à Samedi : 09h00 à 19h00

© Copyright 2010 - 2021 Lotin Corp. All Rights Reserved.

Powered by WordPress