Même pour un concepteur expérimenté, créer un nouveau guide de style pour un produit est difficile - il existe de nombreuses directions de conception possibles et le processus peut rapidement devenir écrasant. La vie de Commencez c'est assez mouvementé, rapide et plein de clichés comme «la perfection est l'ennemi de faire quelque chose», «va vite et casse les choses», ou «lançons maintenant, réparons-le plus tard».
Créer un guide de style avec des slogans et des priorités aussi fluctuants est un défi, mais nécessaire si nous voulons qu'une conception de produit réussisse à long terme.
meilleur endroit pour apprendre c++
La Expérience linguistique globale (GEL) La BBC explique le but de chaque composant et comment ils doivent être utilisés.
Ces dernières années, nous avons beaucoup entendu parler des systèmes de conception, des guides de style, des bibliothèques de motifs et conception atomique . Et bien que ces outils soient très utiles, leur utilisation peut sembler exagérée lorsque tout ce que vous voulez faire est de créer quelques écrans pour un MVP ou une démo d'application. Cependant, avoir un guide de style améliorera non seulement votre processus de conception global, mais rendra également votre application plus robuste et cohérente.
Parlons d'abord des principaux avantages des guides de style, puis concentrons-nous sur les défis dans un environnement de démarrage. Enfin, nous parlerons de la façon dont un guide de style évolue toujours en tant que document vivant.
Les 5 principales raisons pour lesquelles un guide de style est une bonne idée
1. Un guide de style rend les conceptions concrètes et de marque claires
Étant un concepteur unique dans une startup - ce qui est souvent le cas - il n'y a pas beaucoup d'occasions de revoir et de contester les décisions de conception prises à plusieurs reprises par d'autres personnes de l'équipe. Bien que beaucoup puissent travailler en collaboration, les conceptions ne sont pas nécessairement partagées avec d'autres. Cela signifie qu'il n'y a qu'une seule personne qui valide les conceptions finales.
Un guide de style fournira à une startup des conseils et de la documentation pour référence. Contestera certaines des décisions de conception prises par le designer ou par l'équipe car ils devront les valider dans le contexte global de l'application. Concevoir un composant d'interface utilisateur parce qu'il fonctionne bien sur un écran ne fonctionnera pas; une mise en page bien pensée ne devrait résoudre qu'un seul problème de mise en page dans une situation, ainsi qu'un problème général qui peut être trouvé sur d'autres écrans de l'application.
La conception de l'interface utilisateur de cette application utilise le titre «contact» à plusieurs reprises, un candidat idéal pour être inclus en tant que composant dans un guide de style. (par Ivan Bjelajac sur Dribbble)
Un guide de style rend tous les styles de conception généraux, les guides de marque, les spécifications et les règles disponibles à tout le monde dans votre entreprise, et en un seul clic. Ils peuvent accéder à une URL pour y accéder facilement ou la télécharger au format PDF. Le design devient le travail de tout le monde - ce n'est pas seulement la responsabilité de l'équipe de conception. C'est une approche plus prudente qui améliorera l'interface utilisateur de votre produit. 
2. Un guide de style rendra votre conception plus cohérente
Il fournit une sorte de dictionnaire pour votre langage de conception d'interface utilisateur. Vous pouvez utiliser la même terminologie lorsque vous souhaitez communiquer quelque chose que vous avez déjà exprimé. Imaginez si nous avions des mots différents pour exprimer la même chose:
- 'Il pleut, j'ai besoin de mon parapluie.'
- 'Il pleut, j'ai besoin de mon parapluie'
- 'Il pleut, j'ai besoin de mon parapluie'
Cela rendra le langage poétique, mais il est difficile à comprendre. Fondamentalement, c'est la même idée avec l'interface utilisateur d'un site ou d'une application. Pour le rendre facile à utiliser, vous devez simplement créer un nouveau 'mot' lorsque vous créez réellement quelque chose de nouveau. De cette manière, vous serez lié par une règle stricte qui dit: 'Seuls les composants qui résolvent un problème de conception répété via le produit seront autorisés dans le produit et par la suite dans le guide de style.'
La cohérence rend votre produit plus convivial; un produit hautement utilisable se traduit par des ventes et plus d'engagement marketing.
expliquer en quoi le design est important pour le contenu.Les écrans d'intégration utilisent généralement des animations ou des effets visuels qui ne sont pas présents dans le reste de l'application. Cela donne aux concepteurs une bonne occasion de créer une nouvelle mise en page.
(pour Murat Gursoy sur Dribbble).
3. La réutilisation du même système de composants rend votre application facile à utiliser
Comme dans l'exemple de langage, la cohérence est essentielle. Chaque fois que chaque composant est compris par l'utilisateur, lorsqu'il est réutilisé et dans un contexte différent, les gens seront déjà familiarisés avec le comportement précédent. En ce qui concerne les interactions des utilisateurs, cette cohérence améliore généralement la convivialité du produit. 
Eventbrite utilisez une disposition à trois icônes dans plusieurs de vos sections. Lorsqu'un utilisateur rencontre à nouveau ces composants, il connaît déjà leur comportement général.
Travailler avec un système de conception basé sur des composants permet de gagner du temps et facilite également la mise à niveau d'un produit. S'il y a un problème d'utilisabilité avec un composant dans une certaine situation, il peut être résolu une fois que tous les autres problèmes possibles avec ce composant sont mis à jour.
4. Un guide de style facilite le développement de votre application à long terme
Lorsque votre équipe développe un composant commun pour un écran, elle développe une solution qu'elle utilisera également ailleurs. Cela économise du temps de développement - beaucoup, en fait. Lorsque votre entreprise se développe, cela permettrait peut-être d'économiser 10 fois les heures de travail nécessaires pour créer un nouvel écran.
5. Un guide de style facilite l'efficacité de la production et l'innovation
La création d'un guide de style rend les conceptions plus accessibles et disponibles pour le reste de l'entreprise. Les développeurs et designers ils peuvent prototyper une idée plus rapidement et plus facilement. Bootstrap est généralement félicité pour avoir simplifié la vie développeurs pour créer un prototype fonctionnel - votre guide de style sert le même objectif. Il fournit une référence de base pour une nouvelle interface utilisateur qui peut être créée par les développeurs, sans que l'équipe de conception crée l'écran en premier (bien que l'équipe de conception doive faire le contrôle qualité ou le test de qualité des écrans finaux).
Les défis d'une start-up, un guide de style en constante évolution
Créer un système de conception dans un environnement de démarrage n'est pas aussi linéaire qu'il semble l'être dans une entreprise mature où ils sont habitués à un processus plus rationalisé. Dans une entreprise plus traditionnelle, l'équipe de conception développe une Recherche UX , idéation et expérimentation, puis élaborez un guide final de style de marque. Ce processus n'est pas pour toutes les entreprises, car les startups opèrent dans un environnement où leur vision et leurs exigences en matière de produits ne changent pas toujours constamment. Ils travaillent avec des MVP (produits minimum viables), des versions incomplètes de leurs applications qui sont utilisées pour tester leurs idées et les montrer aux utilisateurs potentiels.
Lorsqu'il s'agit de créer un style de guide, cela peut devenir un problème.
Dans un environnement où il est en constante évolution, un designer vous avez généralement du mal à créer un style de guidage qui est censé être quelque chose de «fixe». Un concepteur n'aura pas le temps de vraiment réfléchir à tous les composants en cours de création, même s'ils peuvent apparaître en dernier. Libération de l'application. Facebook a changé son menu 'hamburger' pour une navigation sur onglets quand ils ont mûri un peu. Pensez-vous que celui qui a mis le menu hamburger là-bas l'a également ajouté au guide de style Facebook?
Vous pourriez également considérer qu'il n'est pas encore temps de créer un guide de style. Vous constaterez peut-être que vous en aurez besoin à long terme, mais il est maintenant plus important de produire des écrans en série. De plus, vous aurez besoin de quelques pages marketing pour promouvoir votre application. Tout à coup, votre conception doit redoubler de mise, et pendant que vous créez des écrans, vous commencez à voir la valeur d'un guide de style qui peut garder la marque et les conceptions de votre entreprise cohérentes.
Le problème est que vous ne savez pas exactement quel est le bon moment pour échanger la flexibilité contre la stabilité. Vous devez décider quand vous devriez commencer à vous concentrer sur le guide de style et quand vous devriez vous concentrer sur la création d'affichages. Une approche optimale pourrait être de produire un guide de style en même temps que vous livrez des écrans - de cette façon, vous pouvez avoir le meilleur des deux mondes.
fonds de recherche vs capital-investissement
Commencez par une inspiration d'interface utilisateur
Une bonne façon de commencer, surtout si vous n'êtes pas un concepteur, est de collecter des exemples de styles de conception que vous aimez, ou quelque chose de plus important, auquel vous pensez que les utilisateurs vont répondre. Collectez autant d'exemples que possible et placez-les dans un dossier ou un tableau InVision / Niice, etc. Ils peuvent être utilisés comme référence et inspiration en conjonction avec vos sensibilités de conception. Vous pouvez vous en servir plus tard pour créer une bibliothèque de modèles.
Par exemple, lorsque je travaillais sur un guide de style pour une entreprise de promotion d'artistes de l'industrie du divertissement, nous nous demandions si des arrière-plans clairs ou sombres auraient un impact important sur nos utilisateurs. J'ai regardé des centaines de sites Web différents sur des jeux / films / productions visuelles pour voir comment ils utilisaient des arrière-plans clairs et sombres.
J'ai fait une feuille de triche où j'ai mis en évidence les modèles les plus courants. Un modèle que j'ai identifié est que les entreprises du secteur ont tendance à utiliser des arrière-plans plus sombres lors de la présentation de leurs produits, mais utilisent des arrière-plans blancs dans leurs efforts de marketing, de commerce électronique et de magasin.
Vous n'êtes pas obligé d'aller aussi loin, mais j'ai trouvé qu'avoir des références visuelles aide non seulement à créer un guide de style, mais aussi à se souvenir de certains des cas d'utilisation que vous pourriez avoir besoin de concevoir. Une fois que vous vous sentez satisfait des références que vous avez collectées, vous pouvez commencer à travailler sur la conception visuelle.
(Sources: Attelage d'été Teal Simpson ; Vivek Venkatraman ; ambre sur Dribbble)
Concevoir des composants d'interface utilisateur solides
En travaillant dans des startups, il est plus difficile de créer des composants que de créer des pages - du moins au début. Lorsque vous concevez une page, vous avez généralement une idée de la manière dont elle sera utilisée. Ce n'est pas nécessairement le cas lorsque vous concevez un composant; vous essayez de concevoir pour un cas d'utilisation spécifique, mais vous voulez qu'il fasse partie d'un système de conception universel, et vous devez l'aborder de cette façon. Par exemple, vous pouvez créer un composant pour une sous-navigation avec trois boutons. Vous pouvez également utiliser quatre, cinq ou dix boutons, et ils devront fonctionner sur mobile, tablette et ordinateur de bureau. Vous devrez penser au-delà. 
Vous voulez un certain niveau de persistance ou puissance fixe dans un composant. Les composants communs ne devraient pas trop changer et ils devraient être réutilisables dans de nombreux endroits de votre produit. Par exemple, si vous n'êtes intéressé que par une application iOS, vous souhaiterez tester vos composants en fonction du nombre d'options ou de la longueur du contenu, pas nécessairement de la taille de l'écran. L'idée est que s'il est viable dans l'interface utilisateur à de nombreux endroits de votre application, vous savez que c'est un composant qui a le potentiel de faire partie de votre guide de style.
Une startup doit partir de pratiquement rien d'elle-même et agir rapidement. Votre patron voudra peut-être un écran conçu pour la fin de la journée, ce qui signifie que vous ne pourrez pas vraiment développer un guide de style, puis concevoir l'écran. Pire encore, vous pourriez concevoir un guide de style avec des composants qui ne verront jamais le jour car la vision de l'entreprise a changé. Comme on dit, il vaut mieux se lancer maintenant.
La création d'un bon guide de style prend du temps et, comme il deviendra la base de votre système de conception, vous voulez bien faire les choses. Dans un environnement de démarrage, vous devrez travailler sur votre guide de style en gardant tout à l'esprit. ## Le guide de style comme document vivant
comment rédiger une requête média
Vous devriez considérer votre guide de style comme un travail en cours. En tant que startup essayant de comprendre sa stratégie, vous devrez trouver votre guide de style en cours de route. Vous allez le modifier et l'ajuster au fil du temps jusqu'à ce qu'il devienne la base de votre interface utilisateur. Une approche utile consiste à commencer par la première maquette en même temps que votre guide de style. Ouvrez deux fichiers avec votre logiciel préféré (dans mon cas, Sketch); un appelé nombre de página et un autre guía de estilo. Lorsque vous travaillez sur la conception d'un abat-jour, vous pouvez commencer à semer votre guide de style avec des éléments qui composent votre conception.
Plus vous travaillerez sur ces guides, plus vous vous rendrez compte presque immédiatement qu'il y a des composants importants à inclure dans le guide de style. Par exemple, si vous avez choisi un style d'icône, toutes vos icônes peuvent aller dans le guide depuis le début.
Je crée généralement une section appelée 'icônes pour l'instant'. Et si à un moment donné quelqu'un a besoin d'une icône, il doit d'abord passer par cette section avant d'en créer une nouvelle.
Les autres éléments évidents à considérer sont les couleurs, les sélecteurs, les titres, les en-têtes, le corps du texte, etc. Si vous utilisez un style spécial pour le marketing, vous pouvez envisager de le mettre dans votre guide de style et de le baliser de manière appropriée. Ce n'est pas grave si vous n'êtes pas complètement sûr d'un élément particulier, vous pouvez affiner les éléments de l'interface utilisateur dans votre système de conception plus tard lorsque l'occasion se présente et mettre à jour correctement le guide. N'oubliez pas, le guide de style est un document vivant , en particulier dans une startup. 
comment trouver le numéro de carte de crédit de quelqu'un
Finalement, lorsque je commence à mettre des mises en page dans le guide, je sais que je commence à atteindre un point où tous les composants devraient être proches de leur état final. Cette partie marque le moment critique du processus de création du guide de style - vous pouvez maintenant célébrer! Un bon moyen de célébrer une telle réalisation est de créer un logo ou une icône (pensez à le nommer) pour la version 1.0 du guide.
Certaines personnes impriment même le logo / l'icône sous forme d'autocollant pour que l'équipe ait quelque chose de similaire à un trophée. C'est aussi le point où je me dirige généralement vers la manière plus traditionnelle de travailler avec le guide qui consiste à ouvrir d'abord le guide, puis à créer un nouveau fichier pour n'importe quelle interface nécessaire.
conclusion
En tant que designer, en créant un guide de style le plus tôt possible, vous vous assurez que votre startup adhère à un standard de qualité assez élevé. Cela peut être difficile, mais cela en vaut la peine. Un guide solide et bien fait vous aidera non seulement à avoir un bon produit, mais réduira également les coûts de développement.
Il existe un moyen de rendre cela possible dans un environnement au rythme rapide où des décisions rapides sont prises et où les conceptions doivent parfois changer rapidement. Espérons que le processus décrit ci-dessus aidera designers dans n'importe quelle startup pour faire face aux défis de complexité et de vitesse et en même temps créer un guide de style fort au profit du produit.
